import React, { useState, useEffect } from 'react';
import { Speaker, Tent, ArrowRight, Check, Menu, X, Mail, Phone, Facebook, Instagram, Music2, Mic2, Truck, Lightbulb, Monitor, Users, Layers, ShoppingBag, Sparkles, MessageCircle } from 'lucide-react';

// --- STYL GLOBALNY DLA PŁYNNEGO PRZEWIJANIA ---
const GlobalStyles = () => (
  <style>{`
    html { scroll-behavior: smooth; }
  `}</style>
);

// --- LOGO (Wersja Neon/Stage) ---
const Logo = ({ className = "h-12 w-auto" }) => (
  <svg viewBox="0 0 380 60" className={className} fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="25" width="6" height="20" rx="1" fill="#007BFF" className="animate-pulse" style={{animationDuration: '1s'}} />
    <rect x="10" y="15" width="6" height="30" rx="1" fill="#00C2FF" className="animate-pulse" style={{animationDuration: '1.2s'}} />
    <rect x="20" y="30" width="6" height="15" rx="1" fill="#007BFF" className="animate-pulse" style={{animationDuration: '0.8s'}} />
    <rect x="30" y="20" width="6" height="25" rx="1" fill="#00C2FF" className="animate-pulse" style={{animationDuration: '1.1s'}} />

    <text x="50" y="42" fontFamily="Arial, sans-serif" fontWeight="900" fontSize="34" fill="currentColor" letterSpacing="1">JUST'IN</text>
    <text x="210" y="42" fontFamily="Arial, sans-serif" fontWeight="400" fontSize="34" fill="#00C2FF" letterSpacing="3">SOUND</text>
    
    <rect x="52" y="52" width="145" height="3" fill="currentColor" opacity="0.8" />
    <rect x="212" y="52" width="130" height="3" fill="#00C2FF" />
  </svg>
);

// --- JSON-LD (SEO) ---
const JsonLd = () => {
  const schema = {
    "@context": "https://schema.org",
    "@type": "AudioVisualEquipmentRentalBusiness",
    "name": "Just'in Sound",
    "url": "https://www.adammus.pl",
    "description": "Profesjonalna technika estradowa, wypożyczalnia sprzętu, ekrany LED, podłoga LED 3D, kratownice i infrastruktura eventowa.",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "ul. Truskawkowa 20",
      "addressLocality": "Łódź",
      "postalCode": "91-356",
      "addressCountry": "PL"
    },
    "telephone": "+48 601 370 560",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
        "opens": "10:00",
        "closes": "16:30"
      },
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": "Saturday",
        "opens": "11:00",
        "closes": "14:00"
      }
    ]
  };
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />;
};

export default function JustinSoundLandingV28() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-black text-white font-sans selection:bg-blue-600 selection:text-white overflow-x-hidden">
      <GlobalStyles />
      <JsonLd />

      {/* --- NAWIGACJA --- */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-black/95 backdrop-blur-md py-3 shadow-lg border-b border-blue-900/30' : 'bg-transparent py-6'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          <a href="#" className="text-white hover:opacity-90 transition-opacity block z-50">
             <Logo className="h-10 md:h-12 w-auto" />
          </a>

          {/* Desktop Menu */}
          <div className="hidden md:flex space-x-8 items-center">
            <a href="#o-nas" className="text-slate-300 hover:text-[#00C2FF] transition-colors font-bold tracking-wider text-sm">O FIRMIE</a>
            <a href="#oferta" className="text-slate-300 hover:text-[#00C2FF] transition-colors font-bold tracking-wider text-sm">OFERTA</a>
            <a href="#kontakt" className="px-6 py-2 bg-[#007BFF] hover:bg-[#0069D9] text-white rounded font-bold uppercase text-sm tracking-wider transition-all transform hover:-translate-y-0.5 shadow-[0_0_15px_rgba(0,123,255,0.4)]">
              Kontakt
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button className="md:hidden text-white p-2 z-50" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={32} /> : <Menu size={32} />}
          </button>
        </div>

        {/* Mobile Menu Overlay */}
        {isMenuOpen && (
          <div className="fixed inset-0 bg-black/95 z-40 flex flex-col items-center justify-center space-y-8">
            <a href="#o-nas" className="text-2xl text-white font-bold tracking-wide" onClick={() => setIsMenuOpen(false)}>O FIRMIE</a>
            <a href="#oferta" className="text-2xl text-white font-bold tracking-wide" onClick={() => setIsMenuOpen(false)}>OFERTA</a>
            <a href="#kontakt" className="text-2xl text-white font-bold tracking-wide" onClick={() => setIsMenuOpen(false)}>KONTAKT</a>
          </div>
        )}
      </nav>

      {/* --- HERO SECTION --- */}
      <header className="relative pt-40 pb-24 px-4 md:px-6 container mx-auto text-center">
        {/* Tła świetlne */}
        <div className="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-blue-600/10 rounded-full blur-[120px] pointer-events-none"></div>

        <div className="relative z-10 max-w-5xl mx-auto mb-16">
          <div className="inline-flex items-center px-4 py-1 mb-6 border border-blue-500/30 rounded bg-blue-900/10 text-[#00C2FF] text-xs font-bold tracking-[0.2em] uppercase">
            <Music2 size={14} className="mr-2" /> Event Production & Rental
          </div>
          <h1 className="text-5xl md:text-7xl font-black mb-6 tracking-tight leading-none text-white">
            JUST'IN <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00C2FF] to-[#007BFF]">SOUND</span>
          </h1>
          <p className="text-xl text-slate-400 max-w-2xl mx-auto font-light">
            Kompleksowa technika estradowa, wypożyczalnia i infrastruktura eventowa.
          </p>
        </div>

        {/* KAFLE GŁÓWNE */}
        <div className="grid md:grid-cols-2 gap-6 max-w-6xl mx-auto relative z-10">
          
          {/* NAGŁOŚNIENIE LINK */}
          <a 
            href="https://naglosnienie.adammus.pl" 
            target="_blank" 
            rel="noopener noreferrer"
            className="group block relative rounded-2xl bg-[#0a0a0a] border border-gray-800 hover:border-[#007BFF] transition-all duration-300 hover:-translate-y-1 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-t from-blue-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
            <div className="p-10 flex flex-col items-center h-full">
               <div className="w-16 h-16 rounded-full bg-gray-900 flex items-center justify-center mb-6 text-white group-hover:bg-[#007BFF] transition-colors border border-gray-700">
                 <Speaker size={32} />
               </div>
               <h3 className="text-2xl font-bold uppercase tracking-wider mb-2">Technika Estradowa</h3>
               <p className="text-slate-500 mb-6 text-sm">Scena, ekrany LED, światło, dźwięk.</p>
               <span className="mt-auto text-[#007BFF] font-bold text-sm uppercase tracking-widest flex items-center">
                 Wchodzę <ArrowRight size={16} className="ml-2" />
               </span>
            </div>
          </a>

          {/* WYPOŻYCZALNIA LINK (ShoppingBag) */}
          <a 
            href="https://wynajem.adammus.pl" 
            target="_blank" 
            rel="noopener noreferrer" 
            className="group block relative rounded-2xl bg-[#0a0a0a] border border-gray-800 hover:border-[#00C2FF] transition-all duration-300 hover:-translate-y-1 overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-t from-cyan-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
            <div className="p-10 flex flex-col items-center h-full">
               <div className="w-16 h-16 rounded-full bg-gray-900 flex items-center justify-center mb-6 text-white group-hover:bg-[#00C2FF] transition-colors border border-gray-700">
                 <ShoppingBag size={32} />
               </div>
               <h3 className="text-2xl font-bold uppercase tracking-wider mb-2">WYPOŻYCZALNIA</h3>
               <p className="text-slate-500 mb-6 text-sm">Kompletna wypożyczalnia sceno-techniczna</p>
               <span className="mt-auto text-[#00C2FF] font-bold text-sm uppercase tracking-widest flex items-center">
                 Wchodzę <ArrowRight size={16} className="ml-2" />
               </span>
            </div>
          </a>

        </div>
      </header>

      {/* --- SEKCJA O FIRMIE --- */}
      <section id="o-nas" className="py-24 bg-[#050505] border-t border-gray-900 scroll-mt-20">
        <div className="container mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            
            {/* Tekst */}
            <div>
              <div className="flex items-center mb-6">
                <span className="h-[2px] w-10 bg-[#007BFF] mr-4"></span>
                <span className="text-[#007BFF] font-bold uppercase tracking-widest text-sm">O Naszej Marce</span>
              </div>
              <h2 className="text-3xl md:text-5xl font-black text-white mb-6 leading-tight">
                DOŚWIADCZENIE<br/>BUDOWANE LATAMI.
              </h2>
              <p className="text-slate-400 text-lg leading-relaxed mb-6">
                Just'in Sound to coś więcej niż sprzęt. To dostosowanie się do Twoich indywidualnych potrzeb. Kompletna wypożyczalnia sceno-techniki estradowej. Od ponad dwóch dekad obsługujemy wydarzenia w całej Polsce, łącząc zaplecze techniczne z logistycznym.
              </p>
              <p className="text-slate-500 mb-8">
                Jesteśmy bezpośrednim wykonawcą. Stawiamy na stały, zgrany zespół, który zna sprzęt od podszewki.
              </p>
              
              {/* STATYSTYKI */}
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div className="bg-[#111] p-4 border-l-2 border-[#007BFF]">
                   <span className="block text-3xl font-bold text-white mb-1">20+</span>
                   <span className="text-xs text-slate-500 uppercase font-bold tracking-wide">Lat Doświadczenia</span>
                </div>
                <div className="bg-[#111] p-4 border-l-2 border-[#00C2FF]">
                   <span className="block text-3xl font-bold text-white mb-1">7+</span>
                   <span className="text-xs text-slate-500 uppercase font-bold tracking-wide">Stała Kadra</span>
                </div>
                <div className="bg-[#111] p-4 border-l-2 border-white md:col-span-1 col-span-2">
                   <span className="block text-3xl font-bold text-white mb-1">100%</span>
                   <span className="text-xs text-slate-500 uppercase font-bold tracking-wide">Własnego Sprzętu</span>
                </div>
              </div>
            </div>

            {/* Grafika/Ikony */}
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-transparent rounded-3xl blur-2xl"></div>
              <div className="relative bg-[#0a0a0a] border border-gray-800 p-8 rounded-3xl shadow-2xl">
                 <h3 className="text-xl font-bold text-white mb-6 border-b border-gray-800 pb-4">Nasz Standard</h3>
                 <ul className="space-y-4">
                   <li className="flex items-start">
                     <Check className="text-[#00C2FF] mr-3 shrink-0" size={20} />
                     <span className="text-slate-300">Realizacja dźwięku na systemach liniowych (ridery)</span>
                   </li>
                   <li className="flex items-start">
                     <Check className="text-[#00C2FF] mr-3 shrink-0" size={20} />
                     <a href="https://www.dekoracjaswiatlem.adammus.pl/" target="_blank" rel="noopener noreferrer" className="text-slate-300 hover:text-white transition-colors border-b border-dashed border-slate-600 hover:border-white">
                        Inteligentne oświetlenie sceniczne i architektoniczne
                     </a>
                   </li>
                   <li className="flex items-start">
                     <Check className="text-[#00C2FF] mr-3 shrink-0" size={20} />
                     <span className="text-slate-300"><strong className="text-white font-semibold">Podłoga LED 3D</strong> (Unikalny Efekt)</span>
                   </li>
                   <li className="flex items-start">
                     <Check className="text-[#00C2FF] mr-3 shrink-0" size={20} />
                     <span className="text-slate-300"><strong className="text-white font-semibold">Ekrany multimedialne (gięte)</strong>, projektory</span>
                   </li>
                   <li className="flex items-start">
                     <Check className="text-[#00C2FF] mr-3 shrink-0" size={20} />
                     <span className="text-slate-300">Kratownice aluminiowe (stoiska targowe)</span>
                   </li>
                   <li className="flex items-start">
                     <Check className="text-[#00C2FF] mr-3 shrink-0" size={20} />
                     <a href="https://www.scena.adammus.pl/" target="_blank" rel="noopener noreferrer" className="text-slate-300 hover:text-white transition-colors border-b border-dashed border-slate-600 hover:border-white">
                        Modułowe podesty sceniczne i zadaszenia
                     </a>
                   </li>
                   <li className="flex items-start">
                     <Check className="text-[#00C2FF] mr-3 shrink-0" size={20} />
                     <a href="https://naglosnienie.adammus.pl/kotary.htm" target="_blank" rel="noopener noreferrer" className="text-slate-300 hover:text-white transition-colors border-b border-dashed border-slate-600 hover:border-white">
                        Kotary sceniczne pipe&drape
                     </a>
                   </li>
                 </ul>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* --- SEKCJA OFERTA (połączona z Multimediami) --- */}
      <section id="oferta" className="py-24 bg-black relative border-t border-gray-900 scroll-mt-20">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <span className="text-[#00C2FF] font-bold uppercase tracking-widest text-sm mb-2 block">Technologia & Usługi</span>
            <h2 className="text-3xl md:text-5xl font-black text-white">PEŁNA OFERTA</h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
             
             {/* Karta 1: Multimedia (Ekrany Gięte) */}
             <a 
                href="https://naglosnienie.adammus.pl/telebim.htm"
                target="_blank"
                rel="noopener noreferrer" 
                className="bg-gradient-to-b from-[#0a0a0a] to-[#111] p-8 rounded-xl border border-[#00C2FF] shadow-[0_0_20px_-5px_rgba(0,194,255,0.2)] hover:shadow-[0_0_30px_-5px_rgba(0,194,255,0.4)] transition-all group relative overflow-hidden block"
             >
                <div className="absolute top-0 right-0 bg-[#00C2FF] text-black text-xs font-bold px-3 py-1 uppercase">Hit</div>
                <Monitor className="text-[#00C2FF] mb-6 group-hover:scale-110 transition-transform" size={40} />
                <h3 className="text-xl font-bold text-white mb-3">Ekrany Gięte</h3>
                <p className="text-slate-400 text-sm leading-relaxed">
                  Najnowsze ekrany multimedialne z możliwością zaginania. Twórz okręgi, fale i nietypowe kształty video.
                </p>
             </a>

             {/* Karta 2: Nagłośnienie - ZAKTUALIZOWANY LINK */}
             <a 
                href="https://naglosnienie.adammus.pl/sprzet.htm"
                target="_blank"
                rel="noopener noreferrer" 
                className="bg-[#080808] p-8 rounded-xl border border-gray-800 hover:border-[#007BFF] transition-colors group block"
             >
                <Mic2 className="text-[#007BFF] mb-6 group-hover:scale-110 transition-transform" size={40} />
                <h3 className="text-xl font-bold text-white mb-3">Nagłośnienie</h3>
                <p className="text-slate-500 text-sm leading-relaxed">
                  Systemy wyrównane liniowo, konsolety cyfrowe, pełna realizacja FOH/MON dla zespołów, Backline.
                </p>
             </a>

             {/* Karta 3: Podłoga LED (ZMIANA IKONY NA SPARKLES) */}
             <a 
                href="https://naglosnienie.adammus.pl/ledfloor.htm"
                target="_blank"
                rel="noopener noreferrer" 
                className="bg-[#080808] p-8 rounded-xl border border-gray-800 hover:border-purple-500 transition-colors group block"
             >
                <Sparkles className="text-purple-500 mb-6 group-hover:scale-110 transition-transform" size={40} />
                <h3 className="text-xl font-bold text-white mb-3">Podłoga LED 3D</h3>
                <p className="text-slate-500 text-sm leading-relaxed">
                  Interaktywne parkiety taneczne i wybiegi. Niesamowity efekt głębi (3D) pod stopami gości.
                </p>
             </a>
             
             {/* Karta 4: Konstrukcje */}
             <a 
                href="https://naglosnienie.adammus.pl/aluminiowe_konstrukcje_targowe.html"
                target="_blank"
                rel="noopener noreferrer" 
                className="bg-[#080808] p-8 rounded-xl border border-gray-800 hover:border-green-500 transition-colors group block"
             >
                <Layers className="text-green-500 mb-6 group-hover:scale-110 transition-transform" size={40} />
                <h3 className="text-xl font-bold text-white mb-3">Konstrukcje</h3>
                <p className="text-slate-500 text-sm leading-relaxed">
                  Podesty sceniczne, zadaszenia, kratownice aluminiowe, stoiska targowe, transport i pełny montaż.
                </p>
             </a>

          </div>
        </div>
      </section>

      {/* --- KONTAKT --- */}
      <footer id="kontakt" className="bg-[#050505] pt-20 pb-10 border-t border-gray-900 scroll-mt-20">
        <div className="container mx-auto px-6">
          <div className="grid lg:grid-cols-3 md:grid-cols-2 gap-12 mb-16">
            
            {/* Kolumna 1 */}
            <div>
              <Logo className="h-8 mb-6 text-white" />
              <p className="text-slate-500 text-sm leading-relaxed mb-6">
                Just'in Sound – Twoje wsparcie na scenie i poza nią.
              </p>
              <div className="flex gap-4">
                <a 
                  href="https://www.facebook.com/JustinSoundMaciejAugustyniak" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="p-2 bg-[#1a1a1a] rounded hover:bg-[#007BFF] hover:text-white transition-colors text-slate-400"
                >
                  <Facebook size={20}/>
                </a>
                <a 
                  href="https://www.naglosnienie.adammus.pl" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="p-2 bg-[#1a1a1a] rounded hover:bg-pink-600 hover:text-white transition-colors text-slate-400"
                >
                  <Instagram size={20}/>
                </a>
              </div>
            </div>

            {/* Kolumna 2 */}
            <div>
              <h4 className="text-white font-bold uppercase tracking-wider mb-6 border-l-2 border-[#007BFF] pl-3">Siedziba</h4>
              <p className="text-slate-400 text-sm mb-4">
                <strong className="text-white block mb-1">Just'in Sound</strong>
                ul. Truskawkowa 20<br/>
                91-356 Łódź
              </p>
              
              {/* Godziny otwarcia */}
              <div className="text-slate-400 text-sm mb-4">
                 <span className="block text-white font-bold text-xs uppercase mb-1 tracking-wide">Godziny otwarcia:</span>
                 Pn-Pt 10.00 - 16.30<br/>
                 Sob 11.00 - 14.00
              </div>

              <p className="text-slate-500 text-xs">
                NIP: 947-148-53-78<br/>
                REGON: 100081745
              </p>
            </div>

            {/* Kolumna 3 */}
            <div>
              <h4 className="text-white font-bold uppercase tracking-wider mb-6 border-l-2 border-[#00C2FF] pl-3">Kontakt</h4>
              <ul className="space-y-4">
                 <li>
                    {/* ZMIANA: Link do WhatsApp */}
                    <a href="https://wa.me/48601370560" target="_blank" rel="noopener noreferrer" className="flex items-center text-white hover:text-[#00C2FF] transition-colors group">
                      <Phone className="mr-3 text-[#00C2FF] group-hover:scale-110 transition-transform" size={18} />
                      <span className="font-bold text-lg">+48 601 370 560</span>
                    </a>
                 </li>
                 <li>
                    <a href="mailto:naglosnienie@adammus.pl" className="flex items-center text-slate-400 hover:text-white transition-colors group">
                      <Mail className="mr-3 text-[#00C2FF] group-hover:scale-110 transition-transform" size={18} />
                      <span>naglosnienie@adammus.pl</span>
                    </a>
                 </li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-900 pt-8 text-center text-slate-600 text-xs uppercase tracking-wider">
            &copy; {new Date().getFullYear()} Just'in Sound. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
}