/* sections.jsx — landing page section components */

const IMG = {
  hero: "https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=1600&q=80",
  heroAlt: "https://images.unsplash.com/photo-1548839140-29a749e1cf4d?auto=format&fit=crop&w=2000&q=80",
  breaker: "https://images.unsplash.com/photo-1437482078695-73f5ca6c96e2?auto=format&fit=crop&w=2200&q=80",
  why: "https://images.unsplash.com/photo-1616118132534-381148898bb4?auto=format&fit=crop&w=1400&q=80",
  cta: "https://images.unsplash.com/photo-1538300342682-cf57afb97285?auto=format&fit=crop&w=2200&q=80",
};

// ─────────────────────────────────────────────────────────── NAV
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav__inner">
        <div className="brand">
          <div className="brand__mark" />
          <div>
            <div className="brand__name">Gorilla Commerce <span style={{color:"var(--primary)"}}>&amp;</span> Solutions</div>
            <div className="brand__sub">System Kaucyjny · Wdrożenia e-commerce</div>
          </div>
        </div>
        <div className="nav__links">
          <a href="#problem">Regulacja 2026</a>
          <a href="#case">Studium ID'EAU</a>
          <a href="#offer">Co robimy</a>
          <a href="#process">Proces</a>
          <a href="#faq">FAQ</a>
        </div>
        <a className="nav__cta" href="#cta">Porozmawiajmy</a>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────── HERO (3 variants)
function HeroSplit() {
  return (
    <section className="hero">
      <div className="wrap hero__grid">
        <div className="hero__copy">
          <div>
            <div className="eyebrow">System Kaucyjny · obowiązuje od 01.01.2026</div>
            <h1 className="hero__headline">
              Sprzedajecie wodę online.<br/>
              Regulator właśnie <em>przeprojektował</em> wam koszyk.
            </h1>
            <p className="lead hero__sub">
              Razem ze sklepem <b style={{color:"var(--ink)"}}>ID'EAU</b> przeszliśmy przez wdrożenie polskiego Systemu
              Kaucyjnego w e-commerce — od mapowania SKU, przez faktury VAT i logistykę zwrotów,
              po stabilną konwersję. Robimy to teraz dla zespołów takich jak Wasz.
            </p>
            <div className="hero__ctas">
              <a className="btn btn--primary btn--lg" href="#cta">Porozmawiajmy o Waszym sklepie →</a>
              <a className="btn btn--ghost" href="#case">Zobacz case ID'EAU</a>
            </div>
          </div>
          <div className="hero__meta">
            <div className="hero__meta-item"><b>60 dni</b>średni czas wdrożenia od audytu do go-live</div>
            <div className="hero__meta-item"><b>18 sklepów</b>FMCG w portfolio Gorilla C&amp;S</div>
            <div className="hero__meta-item"><b>0,4%</b>błędnych faktur po wdrożeniu w ID'EAU</div>
          </div>
        </div>
        <div className="hero__image">
          <img src={IMG.hero} alt="Butelka wody" />
          <div className="hero__image-tag">Case study · ID'EAU · 2026</div>
        </div>
      </div>
    </section>
  );
}

function HeroFull() {
  return (
    <section className="hero hero--full">
      <div className="hero__bleed">
        <img src={IMG.heroAlt} alt="Powierzchnia wody" />
        <div className="wrap hero__overlay">
          <div className="eyebrow">System Kaucyjny · obowiązuje od 01.01.2026</div>
          <h1 style={{marginTop:18}}>
            Każda nowa butelka to teraz <em>trzy</em> osobne pozycje w Waszym koszyku.
          </h1>
          <p className="lead">
            Polski System Kaucyjny zmienił mechanikę sprzedaży FMCG online. Studium sklepu
            ID'EAU pokazuje, jak przejść przez tę transformację bez utraty konwersji.
          </p>
          <div className="hero__ctas">
            <a className="btn btn--primary btn--lg" href="#cta">Porozmawiajmy →</a>
            <a className="btn btn--ghost btn--lg" href="#case">Zobacz wyniki ID'EAU</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroManifesto() {
  return (
    <section className="hero hero--manifesto">
      <div className="wrap">
        <div className="eyebrow">System Kaucyjny · 01.01.2026</div>
        <h1 className="manifesto-head" style={{marginTop:28}}>
          Woda jest&nbsp;prosta.<br/>
          Sprzedawanie&nbsp;jej<br/>
          w 2026 — <em>nie&nbsp;jest.</em>
        </h1>
        <div className="manifesto-foot">
          <p className="lead">
            Polski System Kaucyjny obowiązkowo objął nowo wyprodukowane partie napojów.
            To nie jest mała poprawka w katalogu — to nowa logika koszyka, faktury i obsługi
            zwrotów. Studium sklepu <b style={{color:"var(--ink)"}}>ID'EAU</b> pokazuje, czego
            się spodziewać i jak to spiąć.
          </p>
          <div className="manifesto-cta">
            <a className="btn btn--primary btn--lg" href="#cta">Porozmawiajmy →</a>
            <a className="btn btn--ghost btn--lg" href="#case">Wyniki ID'EAU</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "full") return <HeroFull />;
  if (variant === "manifesto") return <HeroManifesto />;
  return <HeroSplit />;
}

// ─────────────────────────────────────────────────────────── PROBLEM
function Problem() {
  const facts = [
    { n: "100%", tag: "Obligatoryjność", lbl: "Polski System Kaucyjny w pełni obowiązkowy dla nowo wyprodukowanych partii napojów od 01.01.2026" },
    { n: "3", tag: "Nowe pola w koszyku", lbl: "Cena netto produktu, kaucja, znak SK — każdą pozycję trzeba rozliczyć osobno na fakturze" },
    { n: "≈ 1,2k", tag: "Średnia liczba SKU", lbl: "Tyle indeksów w katalogu wody/napojów średniej sieci e-commerce trzeba ponownie zmapować" },
    { n: "Q2 26", tag: "Pierwsze kontrole", lbl: "Wojewódzkie Inspektoraty Ochrony Środowiska zapowiadają sprawdzanie zgodności od wiosny" },
  ];
  return (
    <section className="section problem" id="problem">
      <div className="wrap">
        <div className="eyebrow" style={{marginBottom: 22}}>Co właściwie się stało</div>
        <h2 className="problem__head">
          Regulacja, która <span className="serif" style={{color:"var(--primary)"}}>wygląda</span> jak
          drobna zmiana w cenniku — w rzeczywistości przebudowuje koszyk, fakturę i logistykę zwrotów.
        </h2>
        <div className="problem__grid">
          {facts.map((f, i) => (
            <div className="fact" key={i}>
              <div className="fact__num">{f.n}</div>
              <div className="fact__tag">{f.tag}</div>
              <div className="fact__lbl">{f.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────── BREAKER
function Breaker() {
  return (
    <section className="breaker">
      <div className="breaker__img">
        <img src={IMG.breaker} alt="Krople wody" />
        <div className="breaker__quote">
          „Pierwszego dnia po wejściu SK wskaźnik <span style={{color:"#a8d4f4"}}>add‑to‑cart → checkout</span>
          {" "}spadł o 34%. Nikt nie wiedział, dlaczego widzi trzy kwoty zamiast jednej."
          <span className="breaker__cite">Head of E‑commerce · ID'EAU · styczeń 2026</span>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────── CASE STUDY
function Case() {
  const metrics = [
    {
      label: "Konwersja koszyk → zakup (rolling 30d)",
      before: "−34%", after: "+1,8%",
      delta: "Powrót powyżej baseline'u",
      down: false,
    },
    {
      label: "Średni czas dodania nowego SKU napoju do katalogu",
      before: "45 min", after: "6 min",
      delta: "−87% pracy ręcznej",
      down: false,
    },
    {
      label: "Udział zamówień z błędnym rozliczeniem kaucji na fakturze",
      before: "18,2%", after: "0,4%",
      delta: "Compliance check ok",
      down: false,
    },
    {
      label: "Średni czas obsługi zwrotu butelki (od scan → zwrot środków)",
      before: "11 dni", after: "3 dni",
      delta: "−73% lead time",
      down: false,
    },
    {
      label: "Liczba ticketów BOK miesięcznie ws. \"czemu jest droższe\"",
      before: "1 240", after: "82",
      delta: "−93% wolumenu",
      down: false,
    },
    {
      label: "NPS w 30 dni po pierwszym zwrocie butelki",
      before: "−12", after: "+41",
      delta: "Klienci czują, że to działa",
      down: false,
    },
  ];
  return (
    <section className="section section--soft" id="case">
      <div className="wrap">
        <div className="case__head">
          <div>
            <span className="case__meta">Studium przypadku</span>
            <div className="case__brand">ID'EAU</div>
          </div>
          <div>
            <p className="lead">
              Polska marka wody premium. 1 374 SKU, sprzedaż w modelu D2C, własna platforma
              na Magento + zewnętrzny WMS. Wdrożenie Systemu Kaucyjnego od audytu do go‑live
              w 58 dni. Liczby — sprzed wdrożenia (pierwszy tydzień stycznia 2026) vs. 90 dni
              po stabilizacji.
            </p>
          </div>
        </div>
        <div className="metrics">
          {metrics.map((m, i) => (
            <div className="metric" key={i}>
              <div className="metric__label">{m.label}</div>
              <div className={"metric__delta" + (m.down ? " down" : "")}>{m.delta}</div>
              <div className="metric__compare">
                <span className="metric__before">{m.before}</span>
                <span className="metric__arrow">→</span>
                <span className="metric__after">{m.after}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────── OFFER
function Offer() {
  const cards = [
    {
      no: "01",
      title: "Mechanika SK — w głąb regulacji",
      body: "Dokładnie wiemy, kiedy naliczać kaucję, na jakie opakowania, w jakim stosunku VAT, jak prezentować ją w koszyku, na fakturze i w paragonie. Ten know‑how trafia do Was jako konkretne reguły biznesowe, nie jako pdf.",
      list: ["Mapa SKU → opłata", "Reguły dla nowo produkowanych partii", "Zgodność z fakturą VAT i JPK"],
    },
    {
      no: "02",
      title: "Wdrożenie w e‑commerce — koszyk, faktura, zwroty",
      body: "Pracujemy w Waszym stacku. Magento, Shopify Plus, BigCommerce, headless na własnym backendzie — wdrażamy moduły kaucji, przebudowujemy koszyk, generator faktur i flow zwrotów (kurier, paczkomat, punkt).",
      list: ["Moduły kaucji w koszyku", "Generator faktur z polem kaucji", "Flow zwrotów + integracje WMS"],
    },
    {
      no: "03",
      title: "Opieka po wdrożeniu — 12 miesięcy",
      body: "Po go‑live zostajemy z Wami przez rok. Monitoring poprawności rozliczeń, reakcja na zmiany rozporządzeń, kwartalne audyty, support dla BOK i księgowości. Nie zostawiamy z modułami, których nikt nie rozumie.",
      list: ["Monitoring rozliczeń 24/7", "Aktualizacje na zmiany w prawie", "Dedykowany PM przez 12 mies."],
    },
  ];
  return (
    <section className="section" id="offer">
      <div className="wrap">
        <div className="eyebrow" style={{marginBottom: 22}}>Co dostajecie</div>
        <h2 className="offer__head">
          Trzy warstwy, które razem <span className="serif" style={{color:"var(--primary)"}}>układają</span> Wam System Kaucyjny w działający sklep.
        </h2>
        <div className="offer__grid">
          {cards.map((c, i) => (
            <div className="offer__card" key={i}>
              <div className="offer__num">{c.no}</div>
              <div className="offer__title">{c.title}</div>
              <div className="offer__body">{c.body}</div>
              <ul className="offer__list">
                {c.list.map((l, j) => <li key={j}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────── PROCESS
function Process() {
  const steps = [
    { no: "01", t: "Audyt katalogu + flow", b: "Mapujemy SKU, identyfikujemy luki w obecnym koszyku i fakturze. Wychodzicie z konkretną listą roboczą.", d: "7–10 dni" },
    { no: "02", t: "Mapping SK → katalog", b: "Każdy indeks dostaje regułę naliczania kaucji, znak SK, status dla nowo produkowanych partii.", d: "10–14 dni" },
    { no: "03", t: "Wdrożenie modułów", b: "Frontend koszyka, generator faktur, integracja z WMS i kurierem, flow zwrotów end‑to‑end.", d: "20–25 dni" },
    { no: "04", t: "Testy compliance", b: "Sesja z prawnikiem środowiskowym i Waszą księgowością. Test JPK, faktur, zwrotów na środowisku stage.", d: "5–7 dni" },
    { no: "05", t: "Go‑live + opieka", b: "Uruchomienie produkcyjne, monitoring 30 dni, potem dedykowany PM przez 12 miesięcy.", d: "Q+12 mies." },
  ];
  return (
    <section className="section process" id="process">
      <div className="wrap">
        <div className="eyebrow" style={{marginBottom: 22}}>Jak to robimy</div>
        <h2 style={{maxWidth: "18ch"}}>
          Pięć etapów, średnio <span className="serif" style={{color:"var(--accent)"}}>58 dni</span> do go‑live.
        </h2>
        <p className="lead" style={{marginTop: 22}}>
          Pracujemy w sprintach z Waszym zespołem produktowym i księgowością. Nie zaskakujemy
          fakturą za „niespodziewany scope" — wszystko, co możemy oszacować, szacujemy w audycie.
        </p>
        <div className="process__steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step__no">{s.no}</div>
              <div className="step__title">{s.t}</div>
              <div className="step__body">{s.b}</div>
              <div className="step__dur">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────── WHY GORILLA
function Why() {
  const items = [
    { n:"01", t:"Wiemy, jak nie ubić konwersji", b:"E‑commerce to nasz natywny obszar. System Kaucyjny wdrażamy tak, żeby koszyk pozostał czytelny — w pełni jasna prezentacja kaucji, bez sześciu pól, których klient nie rozumie." },
    { n:"02", t:"Prawnik środowiskowy w zespole", b:"Współpracujemy z mecenas specjalizującą się w prawie odpadowym. To jej interpretacje, nie nasze, idą do Waszej księgowości i compliance." },
    { n:"03", t:"Jedna osoba kontaktowa — dedykowany PM", b:"Przez 12 miesięcy macie jednego PM‑a Gorilla C&S, który zna Wasz katalog, Wasze SKU i Waszą księgową po imieniu." },
  ];
  const creds = [
    { v:"18", l:"sklepów FMCG w portfolio, w tym 4 z sektora napojów" },
    { v:"58 dni", l:"średni czas wdrożenia od audytu do go-live" },
    { v:"100%", l:"projektów zakończonych w deklarowanym budżecie i terminie" },
  ];
  return (
    <section className="section" id="why">
      <div className="wrap">
        <div className="eyebrow" style={{marginBottom: 22}}>Dlaczego Gorilla Commerce &amp; Solutions</div>
        <h2 style={{maxWidth:"20ch", marginBottom: "clamp(40px, 5vw, 64px)"}}>
          Nie jesteśmy firmą prawniczą,<br/>
          ani agencją interaktywną.<br/>
          Jesteśmy <span className="serif" style={{color:"var(--primary)"}}>obiema rzeczami naraz</span>.
        </h2>
        <div className="why__grid">
          <div className="why__pic">
            <img src={IMG.why} alt="Butelki wody na linii produkcyjnej" />
            <div className="why__pic-overlay">
              <span>Gorilla C&amp;S · Zespół wdrożeniowy</span>
              <span>Warszawa · 2026</span>
            </div>
          </div>
          <div className="why__list">
            {items.map((x, i) => (
              <div className="why__item" key={i}>
                <div className="why__item-h">
                  <span className="why__item-n">{x.n}</span>
                  <span className="why__item-t">{x.t}</span>
                </div>
                <div className="why__item-b">{x.b}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="why__creds">
          {creds.map((c, i) => (
            <div className="why__cred" key={i}>
              <b>{c.v}</b>
              <span>{c.l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────── FAQ
function FAQ() {
  const items = [
    { q: "Kogo dokładnie dotyczy System Kaucyjny od 2026?",
      a: "Każdego podmiotu wprowadzającego do obrotu napoje w opakowaniach jednorazowych z tworzyw sztucznych do 3L, butelkach szklanych wielokrotnego użytku do 1,5L oraz puszkach metalowych do 1L. W e-commerce dotyczy to wszystkich sklepów sprzedających te produkty — niezależnie czy jesteście producentem, dystrybutorem czy odsprzedawcą." },
    { q: "Co znaczy „nowo wyprodukowane partie napojów\"?",
      a: "Chodzi o partie wyprodukowane po 01.01.2026 — to one mają obowiązkowy znak SK i podlegają opłacie kaucyjnej. Partie wyprodukowane wcześniej można sprzedawać do wyczerpania zapasów na starych zasadach, ale w jednym katalogu musicie umieć obsłużyć oba modele równolegle." },
    { q: "Jak rozliczać kaucję na fakturze VAT?",
      a: "Kaucja nie wchodzi w podstawę opodatkowania VAT — pokazywana jest osobno, po cenie produktu i przed podsumowaniem. JPK_VAT wymaga osobnych pól. Nasz moduł generuje faktury zgodne z interpretacją MF z grudnia 2025 i automatycznie aktualizuje przy zmianach." },
    { q: "Nie mam sklepu stacjonarnego — jak obsługiwać zwroty butelek?",
      a: "Dla e-commerce wystarczy umowa z operatorem systemu (np. ReturnPack / inny operator po nominacji) lub współpraca z siecią punktów zwrotnych. Wdrażamy oba modele: zwrot kurierski (klient zamawia odbiór), zwrot w paczkomacie z dedykowanym kodem, oraz integrację z punktami partnerskimi." },
    { q: "Ile czasu trwa wdrożenie?",
      a: "Średnio 58 dni od podpisania umowy do go-live. Sklepy z prostym katalogiem (do 500 SKU) i standardowym stackiem (Shopify, Magento) — od 40 dni. Headless i mocno zindywidualizowane backendy — do 90 dni. W audycie precyzujemy harmonogram pod Wasz konkretny przypadek." },
    { q: "Czy modyfikujecie kod naszego sklepu?",
      a: "Tak — z pełnym code review po stronie Waszego zespołu i wszystkimi commitami w Waszym repozytorium. Pracujemy w branchach, pull requesty przechodzą Wasz proces. Po zakończeniu projektu zostawiamy dokumentację techniczną na poziomie pozwalającym Waszym deweloperom samodzielnie utrzymywać kod." },
    { q: "Co się stanie, jeśli wejdą zmiany w rozporządzeniu?",
      a: "W ramach 12-miesięcznej opieki śledzimy zmiany w Rozporządzeniu, interpretacjach MF i MKiŚ. Każda zmiana wpływająca na Wasze rozliczenia jest implementowana w module bez dodatkowych kosztów — to część usługi, nie change request." },
    { q: "Jakie są pierwsze kroki, żeby z Wami pracować?",
      a: "30-minutowa rozmowa wstępna (bezpłatna), w której rozumiemy Waszą skalę, stack i timing. Następnie 2-3 tygodniowy płatny audyt — zostawia Was z konkretnym scopem, wyceną i harmonogramem. Jeśli po audycie zdecydujecie się nie wdrażać z nami — wszystkie ustalenia zostają u Was." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section--soft" id="faq">
      <div className="wrap">
        <div className="faq__grid">
          <div>
            <div className="eyebrow" style={{marginBottom: 22}}>FAQ</div>
            <h2 style={{maxWidth:"14ch"}}>Co managerowie e-commerce <span className="serif" style={{color:"var(--primary)"}}>pytają nas</span> najczęściej.</h2>
            <p className="lead" style={{marginTop:22}}>
              Jeśli Wasze pytanie nie znalazło się tu — pewnie i tak je usłyszeliśmy.
              Napiszcie, odpowiemy w 24h.
            </p>
          </div>
          <div className="faq__list">
            {items.map((it, i) => (
              <div className={"faq__item" + (open === i ? " open" : "")} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq__q">{it.q}</div>
                <div className="faq__a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────── CTA
function CTA() {
  return (
    <section className="cta" id="cta">
      <div className="wrap section cta__inner">
        <div className="eyebrow" style={{color:"var(--accent)", marginBottom:22}}>Rozmowa wstępna · 30 minut · bezpłatna</div>
        <h2>
          Macie do końca kwartału, żeby przejść <em>z chaosu w zgodność</em>.
        </h2>
        <p className="lead cta__lead">
          Zadzwońmy. Nie sprzedamy Wam audytu na pierwszej rozmowie. Sprawdzimy razem, czy jesteśmy
          właściwym partnerem dla Waszej skali i stacku — jeśli tak, w tydzień jesteśmy w stanie
          zacząć audyt.
        </p>
        <div className="cta__row">
          <a className="btn btn--primary btn--lg" href="mailto:kaucja@gorillacs.pl">kaucja@gorillacs.pl →</a>
          <a className="btn btn--ghost btn--lg" href="tel:+48221234567">+48 22 123 45 67</a>
        </div>
        <div className="cta__meta">
          <span><span className="dot"></span>Pierwsze sloty audytu: czerwiec 2026</span>
          <span><span className="dot"></span>Pracujemy w PL · EN · DE</span>
          <span><span className="dot"></span>NDA standardowo na pierwszej rozmowie</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap footer__row">
        <div className="brand">
          <div className="brand__mark"></div>
          <div>
            <div className="brand__name">Gorilla Commerce &amp; Solutions</div>
            <div className="brand__sub">Wdrożenia e-commerce dla zmieniających się regulacji</div>
          </div>
        </div>
        <div style={{display:"flex", gap:32}}>
          <a href="#problem">Regulacja</a>
          <a href="#case">Case ID'EAU</a>
          <a href="#offer">Usługi</a>
          <a href="#cta">Kontakt</a>
        </div>
        <div className="footer__legal">
          © 2026 Gorilla C&amp;S · ul. Wodna 14 · Warszawa
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Problem, Breaker, Case, Offer, Process, Why, FAQ, CTA, Footer });