// sections.jsx — landing page sections for PrestaShop → Shopify migration

const Brand = () => (
  <div className="brand" data-comment-anchor="brand">
    <div className="mark">G</div>
    <div className="name"><b>Gorilla</b> Commerce<span>· Migracje e-commerce</span></div>
  </div>
);

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const close = () => setOpen(false);
    window.addEventListener("resize", close);
    return () => window.removeEventListener("resize", close);
  }, []);
  const links = [
    ["#problem","Problem"],["#metoda","Metodologia"],["#audyt","Audyt"],
    ["#wdrozenie","Wdrożenie"],["#case","Case"],["#cennik","Cennik"]
  ];
  return (
    <nav className={"nav" + (open ? " open" : "")} data-comment-anchor="nav">
      <div className="nav-inner">
        <Brand />
        <div className="nav-links">
          {links.map(([h,l])=><a key={h} href={h}>{l}</a>)}
        </div>
        <div className="nav-cta">
          <a className="btn ghost small" href="#cennik">Cennik</a>
          <a className="btn accent small" href="#audyt">Bezpłatny audyt <span className="arrow">→</span></a>
          <button className="nav-burger" aria-label="Menu" aria-expanded={open}
            onClick={()=>setOpen(o=>!o)}>
            {open
              ? <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4 4l10 10M14 4L4 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
              : <svg width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M0 1h18M0 7h18M0 13h18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
            }
          </button>
        </div>
      </div>
      <div className="nav-mobile" role="menu">
        {links.map(([h,l])=>
          <a key={h} href={h} onClick={()=>setOpen(false)}>{l}</a>
        )}
        <a href="#audyt" onClick={()=>setOpen(false)} style={{color:"var(--accent)",fontWeight:500}}>
          Zamów bezpłatny audyt →
        </a>
      </div>
    </nav>
  );
};

// ─────────── HERO ───────────
const Hero = () => (
  <section className="hero" data-screen-label="01 Hero">
    <div className="wide">
      <div className="hero-grid">
        <div>
          <div className="eyebrow" data-comment-anchor="hero-eyebrow">
            <span style={{display:"inline-block",width:8,height:8,background:"var(--accent)",
              borderRadius:"50%",marginRight:8,verticalAlign:"middle"}}></span>
            Pakiet migracyjny dla sklepów meblowych
          </div>
          <h1 className="display" data-comment-anchor="hero-h1">
            Z&nbsp;<em>PrestaShop</em> na&nbsp;Shopify — <em>bez utraty</em> rankingów.
          </h1>
          <p className="lead">
            Standardowe wtyczki migracyjne zawodzą na dużych katalogach mebli — generują
            tysiące błędów indeksowania, gubią warianty i niszczą strukturę URL. My migrujemy ręcznie,
            z użyciem narzędzi enterprise klasy Matrixify, i gwarantujemy 1:1 mapowanie 301.
          </p>
          <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
            <a className="btn accent" href="#audyt">Zamów bezpłatny audyt <span className="arrow">→</span></a>
            <a className="btn ghost" href="#case">Zobacz case meblowy</a>
          </div>
          <div className="hero-meta">
            <div className="meta-item"><span className="k">Średni czas</span><span className="v">6–10 tyg.</span></div>
            <div className="meta-item"><span className="k">Utrzymane rankingi</span><span className="v">98–100%</span></div>
            <div className="meta-item"><span className="k">SKU obsłużonych</span><span className="v">120k+</span></div>
            <div className="meta-item"><span className="k">Migracje meblowe</span><span className="v">17</span></div>
          </div>
        </div>
        <HeroCard />
      </div>
    </div>
  </section>
);

const HeroCard = () => (
  <div className="migr-card" data-comment-anchor="hero-card">
    <div className="migr-head">
      <span className="tag">Schemat migracji · v3.2</span>
      <span className="dot" title="live"></span>
    </div>
    <div className="platforms">
      <div className="plat from">
        <div className="pmeta">Źródło</div>
        <div className="pname">PrestaShop 1.6 / 1.7</div>
        <ul>
          <li>ps_category — głębokie drzewa</li>
          <li>ps_product_attribute — kombinacje</li>
          <li>~340 plików .tpl (Smarty)</li>
          <li>SEO URLs typu /14-sofy</li>
        </ul>
      </div>
      <div className="arrow-col">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M6 20 H32 M24 12 L32 20 L24 28" stroke="currentColor" strokeWidth="1.2"
            strokeLinecap="round" strokeLinejoin="round" style={{color:"var(--ink-3)"}}/>
        </svg>
        <span>CSV ⟶ Matrixify</span>
      </div>
      <div className="plat to">
        <div className="pmeta">Docelowo</div>
        <div className="pname">Shopify Plus</div>
        <ul>
          <li>Kolekcje + tagi (model płaski)</li>
          <li>Warianty z opcjami (1–3 osie)</li>
          <li>Sekcje Liquid + JSON</li>
          <li>301 — pełne mapowanie URL</li>
        </ul>
      </div>
    </div>
    <div className="migr-foot">
      <span className="pill">CSV</span>
      <span className="pill">Matrixify</span>
      <span className="pill">301</span>
      <span className="pill">Liquid</span>
      <span style={{marginLeft:"auto",fontSize:12,color:"var(--ink-3)"}}>4 etapy · 1 plan</span>
    </div>
  </div>
);

// ─────────── STRIP ───────────
const Strip = () => (
  <div className="strip" data-screen-label="02 Strip" data-comment-anchor="strip">
    <div className="wrap">
      <div className="strip-grid">
        <div className="strip-item"><div className="n">14 000</div><div className="l">SKU mebli zmigrowanych w 6 tyg.</div></div>
        <div className="strip-item"><div className="n">47 612</div><div className="l">URLi zmapowanych 301 w jednym projekcie</div></div>
        <div className="strip-item"><div className="n">0%</div><div className="l">spadek pozycji Google w 90&nbsp;dni</div></div>
        <div className="strip-item"><div className="n">+18%</div><div className="l">wzrost ruchu organicznego po cutoverze</div></div>
      </div>
    </div>
  </div>
);

// ─────────── PROBLEM ───────────
const Problem = () => (
  <section className="problem" id="problem" data-screen-label="03 Problem">
    <div className="wide">
      <div className="sec-head">
        <div>
          <div className="eyebrow">Dlaczego wtyczki zawodzą</div>
          <h2>Różnica jest <em>architektoniczna,</em> nie kosmetyczna.</h2>
        </div>
        <div className="right">
          <p>
            PrestaShop opiera się na rozbudowanych, hierarchicznych drzewach kategorii i tabelach
            kombinacji wariantów. Shopify używa płaskiego modelu kolekcji + tagów + opcji wariantu.
            Standardowe wtyczki migracyjne próbują przepisać jedno w drugie automatem — i wywracają się
            na rzeczywistych katalogach meblowych.
          </p>
          <p>
            W praktyce: <strong>tysiące błędów</strong> na indeksach <span className="mono">id_category_default</span>,
            sieroty wariantów, podwójne ścieżki URL i utrata atrybutów typu wymiar/materiał/kolor.
          </p>
        </div>
      </div>

      <div className="problem-grid">
        <div className="schema">
          <div className="schema-title">
            <h4>PrestaShop — drzewo kategorii</h4>
            <span className="badge">ps_category · 6 poziomów</span>
          </div>
<div className="tree">{`Meble
├── Salon
│   ├── Sofy
│   │   ├── Sofy 2-osobowe
│   │   │   ├── Skórzane
│   │   │   │   └── Vintage  ← /14-sofy-skorzane-vintage
│   │   │   └── Tkanina
│   │   └── Sofy 3-osobowe
│   ├── Fotele
│   └── Stoliki kawowe
├── Sypialnia
│   ├── Łóżka
│   │   ├── Kontynentalne
│   │   └── Tapicerowane
│   └── Komody
└── Jadalnia
    ├── Stoły
    └── Krzesła`}</div>
        </div>
        <div className="schema">
          <div className="schema-title">
            <h4>Shopify — kolekcje + tagi (płaskie)</h4>
            <span className="badge">collections + tags</span>
          </div>
<div className="tree">{`/collections/sofy           ⟵ kolekcja warunkowa
/collections/fotele
/collections/lozka
/collections/stoly

tags:
  · pokoj-salon, pokoj-sypialnia, pokoj-jadalnia
  · obicie-skora, obicie-tkanina, obicie-welur
  · styl-vintage, styl-loft, styl-skandynawski
  · osob-2, osob-3, rozkladana

product.options:
  · Kolor (12 wartości)
  · Wymiar (8 wartości)
  · Pikowanie (2 wartości)`}</div>
        </div>
      </div>

      <div className="errors-card" data-comment-anchor="error-log">
        <div className="lab">Typowy log błędu wtyczki migracyjnej</div>
<div className="err-log">{`> Sat 14:02:19  Importing ps_category_lang.csv (id_category 1..1842)
[ERR  ] line 312:  parent_id 0 refers to deleted root (PrestaShop multistore)
[ERR  ] line 488:  invalid utf-8 in description_short (Windows-1250 → UTF-8 conflict)
[WARN ] line 791:  combination_id 24411 has no matching attribute_group_lang
[ERR  ] line 1240: collection handle "sofy-2-osobowe" already exists for store
[ERR  ] line 1503: URL /14-sofy-skorzane-vintage already redirects (loop detected)
…
`}<span className="num">3 412 errors · 17 980 warnings</span><span className="ts"> — abort, rollback, manual cleanup required.</span></div>
      </div>
    </div>
  </section>
);

// ─────────── METODOLOGIA ───────────
const Methodology = () => {
  const steps = [
    {
      n:"Etap 01", t:"Ekstrakcja do CSV",
      d:"Wyciągamy dane bezpośrednio z bazy PrestaShop do plików pośrednich CSV — produkty, warianty, kategorie, klienci, zamówienia, treści. Pomijamy zawodne API wtyczek i pracujemy na surowych tabelach `ps_*`.",
      tools:["ps_product","ps_category_lang","CSV (UTF-8)","mysqldump"]
    },
    {
      n:"Etap 02", t:"Ręczne ustrukturyzowanie",
      d:"Drzewo kategorii spłaszczamy do modelu kolekcji + tagów. Mapujemy kombinacje PrestaShop na warianty Shopify (max 3 opcje, 100 wartości). Ten krok decyduje o tym, czy klient na Shopify będzie miał użyteczny katalog mebli — czy chaos.",
      tools:["Mapowanie 1:N","Tagi systemowe","Metafields","Walidacja schematu"]
    },
    {
      n:"Etap 03", t:"Wdrożenie via Matrixify",
      d:"Ustrukturyzowane CSV ładujemy do Shopify przez Matrixify — narzędzie klasy enterprise, używane przez Shopify Plus partners. Migracja idzie partiami, z dry-run i diffem na każdy przebieg. Pełen audit trail.",
      tools:["Matrixify","Shopify Plus","Dry-run + diff","Bulk Operations API"]
    },
    {
      n:"Etap 04", t:"301 + Liquid",
      d:"Wszystkie URLe PrestaShop (/14-sofy-skorzane-vintage) mapujemy 1:1 do nowych ścieżek Shopify tabelą przekierowań 301 — to chroni pozycje w Google. Szablony graficzne nie podlegają translacji: kodujemy je od nowa w Liquid.",
      tools:["URL Redirects API","Liquid 2.0","Online Store 2.0","Lighthouse 90+"]
    }
  ];

  return (
    <section id="metoda" data-screen-label="04 Metodologia">
      <div className="wide">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Nasza metodologia</div>
            <h2>Cztery etapy. <em>Zero</em> zaufania do automatów.</h2>
          </div>
          <div className="right">
            <p>
              Każda migracja meblowa w Gorilla Commerce idzie tą samą ścieżką: ekstrakcja danych
              do formatów pośrednich, ręczne ustrukturyzowanie pod model Shopify, wdrożenie
              narzędziami enterprise i zabezpieczenie SEO przez 301. Nic nie zostaje "wtyczce".
            </p>
          </div>
        </div>

        <div className="method-list">
          {steps.map((s,i)=>(
            <div className="step" key={i} data-comment-anchor={`step-${i}`}>
              <div className="step-n">
                <span>{s.n}</span>
                <span className="icon">{i+1}</span>
              </div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="tools">{s.tools.map(t=><span key={t} className="tool">{t}</span>)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────── AUDYT (CHECKLIST) ───────────
const Audit = () => (
  <section id="audyt" data-screen-label="05 Audyt">
    <div className="wide">
      <div className="sec-head">
        <div>
          <div className="eyebrow">Asset 01 / Checklista + Audyt</div>
          <h2>Najpierw audyt. <em>Potem</em> oferta.</h2>
        </div>
        <div className="right">
          <p>
            Każdy projekt zaczyna się od bezpłatnego, 7-dniowego audytu Twojego sklepu PrestaShop.
            Dostajesz dokument PDF z dokładną listą tego, co przejdzie automatem, co wymaga ręcznej
            pracy i czego ostatecznie nie da się przenieść bez kompromisów. Bez tego nikt nie powinien
            wyceniać Twojej migracji.
          </p>
        </div>
      </div>

      <div className="assets">
        <div className="asset" data-comment-anchor="asset-audit">
          <div className="asset-head">
            <h3>Audyt sklepu PrestaShop</h3>
            <span className="tag">PDF · 24–32 str.</span>
          </div>
          <p className="desc">
            Szczegółowy raport z analizy Twojej instancji — wersja Prestashop, struktura bazy,
            ryzyka SEO, integracje, custom code. Wskazujemy, gdzie standardowe wtyczki by się wywróciły
            i ile pracy ręcznej naprawdę potrzeba.
          </p>
          <div className="check-doc">
            <h5>Spis treści <span>14 punktów</span></h5>
            <ul>
              <li><span className="chk"></span><span><strong>Wersja PrestaShop i kompatybilność modułów</strong> — 1.6 vs 1.7 vs 8.x</span></li>
              <li><span className="chk"></span><span><strong>Inwentaryzacja danych</strong> — SKU, warianty, kombinacje, kategorie, zdjęcia, treści</span></li>
              <li><span className="chk"></span><span><strong>Mapa zależności bazodanowych</strong> — sieroty, duplikaty, niezamknięte joins</span></li>
              <li><span className="chk"></span><span><strong>Audyt SEO</strong> — Top 200 URLi, ruch organiczny, ryzyko spadku pozycji</span></li>
              <li><span className="chk"></span><span><strong>Mapowanie kategorii → kolekcje + tagi</strong> (propozycja)</span></li>
              <li><span className="chk"></span><span><strong>Mapowanie kombinacji → warianty Shopify</strong> z ograniczeniem 3 opcji</span></li>
              <li><span className="chk empty"></span><span style={{color:"var(--ink-3)"}}>Integracje i webhooki — ERP, BaseLinker, Allegro, Paczkomaty</span></li>
              <li><span className="chk empty"></span><span style={{color:"var(--ink-3)"}}>Custom moduły i hooki — co da się odtworzyć w Liquid + apps</span></li>
              <li><span className="chk empty"></span><span style={{color:"var(--ink-3)"}}>Rekomendacja motywu Shopify i zakres recodowania szablonów</span></li>
              <li><span className="chk empty"></span><span style={{color:"var(--ink-3)"}}>Harmonogram, ryzyka i wycena dwóch wariantów wdrożenia</span></li>
            </ul>
          </div>
          <a className="btn accent" href="#cta" style={{alignSelf:"flex-start",marginTop:8}}>
            Zamów audyt — bezpłatnie <span className="arrow">→</span>
          </a>
        </div>

        <div className="asset" data-comment-anchor="asset-checklist">
          <div className="asset-head">
            <h3>Checklista przed-migracyjna</h3>
            <span className="tag">Excel / Notion · 86 poz.</span>
          </div>
          <p className="desc">
            Dokument, który zostaje u Twojego zespołu. Przeprowadza go przez decyzje, których nie da się
            podjąć bez merytorycznej rozmowy — od zakresu domeny po politykę zwrotów. Bez kompletnej
            checklisty żaden Project Manager nie powinien startować migracji.
          </p>
          <div className="check-doc">
            <h5>Sekcje dokumentu <span>9 z 14</span></h5>
            <ul>
              <li><span className="chk"></span><span><strong>Domena, DNS, e-maile transakcyjne</strong> — kto, kiedy, jaki cutover</span></li>
              <li><span className="chk"></span><span><strong>Polityka cen, walut, podatków</strong> — VAT, OSS, ceny B2B</span></li>
              <li><span className="chk"></span><span><strong>Warianty i opcje</strong> — kolor / wymiar / wykończenie / tkanina</span></li>
              <li><span className="chk"></span><span><strong>Polityka stanów magazynowych</strong> — śledzić, nie śledzić, dropship</span></li>
              <li><span className="chk"></span><span><strong>Mapa redirectów 301</strong> — eksport z PrestaShop, weryfikacja</span></li>
              <li><span className="chk"></span><span><strong>Integracje płatności</strong> — Przelewy24, BLIK, raty, leasing meblowy</span></li>
              <li><span className="chk"></span><span><strong>Dostawcy i kurierzy</strong> — DPD, GLS, dedykowana logistyka mebli</span></li>
              <li><span className="chk"></span><span><strong>Treści marketingowe i blog</strong> — zakres migracji artykułów</span></li>
              <li><span className="chk empty"></span><span style={{color:"var(--ink-3)"}}>Konta klientów i historia zamówień</span></li>
              <li><span className="chk empty"></span><span style={{color:"var(--ink-3)"}}>RODO, regulamin, polityka zwrotów (mebla custom)</span></li>
            </ul>
          </div>
          <a className="btn ghost" href="#cta" style={{alignSelf:"flex-start",marginTop:8}}>
            Pobierz przykładową checklistę
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ─────────── WDROŻENIE ───────────
const Wdrozenie = () => {
  const phases = [
    {wk:"Tydz. 1–2",  ph:"Audyt + checklista", sub:"Eksport ps_*, mapa danych, decyzje biznesowe", from:0, to:18},
    {wk:"Tydz. 2–3",  ph:"Ekstrakcja do CSV",  sub:"mysqldump → arkusze pośrednie, czyszczenie kodowania", from:14, to:32},
    {wk:"Tydz. 3–5",  ph:"Ustrukturyzowanie",  sub:"Spłaszczanie drzewa, mapowanie wariantów, metafields", from:28, to:55},
    {wk:"Tydz. 4–6",  ph:"Theme w Liquid",     sub:"Rekompozycja PFD/PSD do sekcji Online Store 2.0",      from:38, to:68},
    {wk:"Tydz. 5–7",  ph:"Wdrożenie Matrixify",sub:"Bulk import w partiach, dry-run, diff, korekta",      from:52, to:80},
    {wk:"Tydz. 6–8",  ph:"301 + QA + cutover", sub:"Mapa przekierowań, testy DNS, hyper-care 30 dni",     from:70, to:100}
  ];

  return (
    <section id="wdrozenie" data-screen-label="06 Wdrożenie" style={{background:"var(--paper)",borderTop:"1px solid var(--rule)",borderBottom:"1px solid var(--rule)"}}>
      <div className="wide">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Asset 02 / Wdrożenie</div>
            <h2>Sześć faz w&nbsp;<em>6–10 tygodni.</em></h2>
          </div>
          <div className="right">
            <p>
              Standardowy harmonogram migracji sklepu meblowego o katalogu 5–20 tys. SKU.
              Każda faza ma własny zestaw deliverables, akceptacji i punkt rollback. Zero
              "puszczenia w produkcję na piątek".
            </p>
          </div>
        </div>

        <div className="assets">
          <div className="asset full" data-comment-anchor="asset-roadmap" style={{minHeight:"auto"}}>
            <div className="asset-head">
              <h3>Harmonogram migracji — sklep meblowy 12k SKU</h3>
              <span className="tag">Gantt · 6 faz · 8 tyg.</span>
            </div>
            <div className="roadmap" style={{marginTop:8}}>
              {phases.map((p,i)=>(
                <div className="rm-row" key={i}>
                  <div className="wk">{p.wk}</div>
                  <div className="ph">{p.ph}<small>{p.sub}</small></div>
                  <div><div className="rm-bar"><i style={{left:`${p.from}%`,width:`${p.to-p.from}%`}}></i></div></div>
                </div>
              ))}
            </div>
            <div style={{display:"flex",gap:24,marginTop:8,fontSize:13,color:"var(--ink-3)"}}>
              <span className="mono">▸ Deliverables: audyt PDF, mapa danych, theme, redirect table, dokumentacja</span>
              <span className="mono" style={{marginLeft:"auto"}}>▸ Hyper-care: 30 dni po cutover</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────── CASE STUDY ───────────
const Case = () => (
  <section id="case" data-screen-label="07 Case">
    <div className="wide">
      <div className="sec-head">
        <div>
          <div className="eyebrow">Asset 03 / Case study</div>
          <h2>Klonowy <em>Meble</em> — z PrestaShop 1.6 do Shopify Plus.</h2>
        </div>
        <div className="right">
          <p>
            Polski producent mebli tapicerowanych z 11-letnią historią e-commerce. 12 tys. SKU,
            47 tys. URLi do zachowania, integracja z systemem produkcji na zamówienie. Cutover w 7 tygodni,
            zero spadku ruchu organicznego, +18% przychodu organicznego w kwartale po migracji.
          </p>
        </div>
      </div>

      <div className="case-grid">
        <div className="case-photo" data-comment-anchor="case-photo">
          <span className="ph-label">[ photo · klonowy meble — showroom ]</span>
        </div>
        <div className="case-info">
          <h4>Sklep meblowy · B2C + B2B</h4>
          <h3>Klonowy Meble Sp. z o.o.</h3>
          <p>
            <strong>Punkt wyjścia.</strong> PrestaShop 1.6 z 11-letnią historią modyfikacji, 340 plików .tpl,
            kategorie zagnieżdżone do 6 poziomów, ~12 000 SKU mebli tapicerowanych z 8 osiami wariantów
            (tkanina, kolor, pikowanie, szerokość, głębokość, funkcja spania, pojemnik, nóżki).
          </p>
          <p>
            <strong>Wyzwanie.</strong> Dwie poprzednie próby migracji (różne agencje, automatyczne wtyczki)
            zakończyły się 14 000+ błędami i rollbackiem. Spadek pozycji Google na frazach typu "sofa rozkładana skórzana"
            byłby dla klienta katastrofą sprzedażową.
          </p>
          <p>
            <strong>Co zrobiliśmy.</strong> Pełna ekstrakcja do CSV, ręczne spłaszczenie drzewa kategorii do
            17 kolekcji + system tagów, mapowanie kombinacji do wariantów Shopify (3 osie + reszta jako metafields),
            recoding szablonu w Liquid, 47 612 przekierowań 301.
          </p>

          <div className="case-quote">
            "Trzecie podejście — pierwsze udane. Po cutoverze nie zauważyliśmy w&nbsp;ogóle spadku ruchu,
            a&nbsp;w drugim miesiącu już rośliśmy. Audyt, który dostaliśmy na starcie, był dokładniejszy
            niż dokumentacja, którą sami mieliśmy."
            <footer>— M. Klonowski, CEO · Klonowy Meble</footer>
          </div>

          <div className="case-metrics">
            <div className="m"><div className="v">47 612</div><div className="l">URLi 301 zmapowanych</div></div>
            <div className="m"><div className="v">0<small>%</small></div><div className="l">spadek pozycji w Google</div></div>
            <div className="m"><div className="v">+18<small>%</small></div><div className="l">przychód organiczny po 90 dniach</div></div>
            <div className="m"><div className="v">7<small> tyg.</small></div><div className="l">od kick-offu do cutover</div></div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─────────── PRICING ───────────
const PricingCards = () => (
  <div className="pricing-cards" data-comment-anchor="pricing-cards">
    <div className="price">
      <div className="p-name">Migracja Light</div>
      <div className="p-desc">Sklep do 2 000 SKU, standardowa struktura, jeden język.</div>
      <div className="p-price">29&nbsp;000<small>PLN netto</small></div>
      <ul>
        <li>Audyt + checklista (zwrot, jeśli wejdziesz w pakiet)</li>
        <li>Ekstrakcja CSV i ustrukturyzowanie ręczne</li>
        <li>Wdrożenie via Matrixify</li>
        <li>Pełna tablica 301</li>
        <li>Theme Dawn z dostosowaniami brand (do 8 sekcji)</li>
        <li>Hyper-care 14 dni</li>
      </ul>
      <a className="btn ghost" href="#cta">Wybierz pakiet</a>
    </div>
    <div className="price feat">
      <span className="p-pop">Rekomendowany</span>
      <div className="p-name">Migracja Pro</div>
      <div className="p-desc">Sklep meblowy 2–15 tys. SKU, warianty wielowymiarowe, integracje.</div>
      <div className="p-price">58&nbsp;000<small>PLN netto</small></div>
      <ul>
        <li>Wszystko z pakietu Light</li>
        <li>Mapowanie wielowymiarowych wariantów + metafields</li>
        <li>Theme w pełni rekodowany w Liquid pod brand</li>
        <li>Integracja z ERP / BaseLinker / Allegro</li>
        <li>Strategia SEO + plan content recovery</li>
        <li>Hyper-care 30 dni + szkolenie zespołu (8h)</li>
      </ul>
      <a className="btn" href="#cta">Wybierz pakiet</a>
    </div>
    <div className="price">
      <div className="p-name">Migracja Enterprise</div>
      <div className="p-desc">Powyżej 15 tys. SKU, wielojęzyczność, B2B, custom produkcja.</div>
      <div className="p-price">od&nbsp;120k<small>PLN netto</small></div>
      <ul>
        <li>Wszystko z pakietu Pro</li>
        <li>Shopify Plus + Markets (multi-language, multi-currency)</li>
        <li>Custom configurator mebli na zamówienie</li>
        <li>Integracja z systemem produkcji (MES / WAPRO)</li>
        <li>Dedykowany Solution Architect</li>
        <li>Hyper-care 60 dni + SLA</li>
      </ul>
      <a className="btn ghost" href="#cta">Skontaktuj się</a>
    </div>
  </div>
);

const PricingTable = () => {
  const rows = [
    ["Audyt + checklista PDF", true, true, true],
    ["SKU w zakresie", "do 2 000", "2 000 – 15 000", "15 000+"],
    ["Mapowanie 301 URL", true, true, true],
    ["Wielowymiarowe warianty + metafields", false, true, true],
    ["Theme recoding (Liquid)", "Dawn + dostosowania", "Pełny custom", "Pełny custom + sekcje B2B"],
    ["Integracje ERP / BaseLinker / Allegro", false, true, true],
    ["Multi-language / multi-currency", false, false, true],
    ["Configurator mebli custom", false, false, true],
    ["Hyper-care", "14 dni", "30 dni", "60 dni + SLA"],
  ];
  const cell = (v) => v === true
    ? <span className="pt-check">w zakresie</span>
    : v === false
      ? <span className="pt-cross">poza zakresem</span>
      : <span style={{fontSize:13.5,color:"var(--ink-2)"}}>{v}</span>;

  return (
    <div className="pricing-table" data-comment-anchor="pricing-table">
      <div className="pt-row head">
        <div></div>
        <div>Light</div>
        <div>Pro · rekomendowany</div>
        <div>Enterprise</div>
      </div>
      <div className="pt-row tier">
        <div>
          <span className="pt-name">Cena netto</span>
          <span className="pt-desc">Wycena fixed-price po audycie</span>
        </div>
        <div style={{fontFamily:"var(--serif)",fontSize:28,letterSpacing:"-.02em"}}>29 000 PLN</div>
        <div style={{fontFamily:"var(--serif)",fontSize:28,letterSpacing:"-.02em",color:"var(--accent)"}}>58 000 PLN</div>
        <div style={{fontFamily:"var(--serif)",fontSize:28,letterSpacing:"-.02em"}}>od 120 000 PLN</div>
      </div>
      {rows.map((r,i)=>(
        <div className="pt-row" key={i}>
          <div style={{color:"var(--ink-2)"}}>{r[0]}</div>
          <div>{cell(r[1])}</div>
          <div>{cell(r[2])}</div>
          <div>{cell(r[3])}</div>
        </div>
      ))}
      <div className="pt-row cta">
        <div></div>
        <div><a className="btn ghost small" href="#cta">Wybierz Light</a></div>
        <div><a className="btn accent small" href="#cta">Wybierz Pro</a></div>
        <div><a className="btn ghost small" href="#cta">Porozmawiajmy</a></div>
      </div>
    </div>
  );
};

const Pricing = ({ layout }) => (
  <section id="cennik" data-screen-label="08 Cennik" style={{background:"var(--paper)",borderTop:"1px solid var(--rule)",borderBottom:"1px solid var(--rule)"}}>
    <div className="wide">
      <div className="sec-head">
        <div>
          <div className="eyebrow">Cennik · fixed price</div>
          <h2>Trzy pakiety. <em>Jeden</em> proces.</h2>
        </div>
        <div className="right">
          <p>
            Wszystkie pakiety obejmują pełną metodologię — różnią się skalą katalogu, zakresem integracji
            i głębokością custom-developmentu motywu. Po audycie dostajesz wycenę fixed-price z gwarancją
            zakresu i terminu.
          </p>
        </div>
      </div>
      {layout === "table" ? <PricingTable /> : <PricingCards />}
    </div>
  </section>
);

// ─────────── FAQ ───────────
const Faq = () => {
  const qs = [
    {q:"Czy moje konta klientów i historia zamówień przejdą do Shopify?",
     a:"Tak. Konta klientów migrujemy w formacie kompatybilnym z Shopify Customer Accounts. Historię zamówień ładujemy jako rekordy archiwalne — klient widzi swoje poprzednie zamówienia z PrestaShop w nowym panelu."},
    {q:"Co dzieje się z moimi pozycjami w Google podczas migracji?",
     a:"Każdy URL z PrestaShop dostaje przekierowanie 301 na nową ścieżkę Shopify. Bot Google traktuje to jak zmianę adresu — pozycje pozostają. W naszych projektach meblowych spadek to 0–2% w pierwszych dwóch tygodniach, z pełnym odbiciem w 4–6 tygodniu."},
    {q:"Dlaczego nie używacie po prostu wtyczki Cart2Cart lub LitExtension?",
     a:"Używamy ich punktowo — do prostych sklepów do ~500 SKU bez wariantów. Dla katalogów meblowych z kombinacjami kolor/tkanina/wymiar i głębokimi drzewami kategorii standardowe wtyczki nie radzą sobie z mapowaniem do płaskiego modelu Shopify. Wynik to setki sierot wariantów i utracone atrybuty."},
    {q:"Co z moim custom-modułem do leasingu mebli?",
     a:"Audyt obejmuje analizę wszystkich custom-modułów. Część odtwarzamy w Liquid + Shopify Apps, część przenosimy do dedykowanych aplikacji prywatnych. Dla leasingu meblowego najczęściej polecamy integrację z gotową apką płatności ratalnych — taniej w utrzymaniu."},
    {q:"Czy mogę zachować mój obecny szablon graficzny?",
     a:"Nie 1:1 — szablony PrestaShop oparte są na Smarty i .tpl, Shopify używa Liquid. Wizualnie jednak odtwarzamy każdy element brand 1:1, w nowoczesnej architekturze Online Store 2.0 z sekcjami JSON. Klient nie zauważa różnicy, performance rośnie."},
    {q:"Jak wygląda hyper-care po cutoverze?",
     a:"30 dni (Pro) lub 60 dni (Enterprise) aktywnego monitoringu — codzienny przegląd logów, weryfikacja redirectów, monitoring Google Search Console, hotfixy w 4h SLA. Większość problemów post-migracyjnych pojawia się w pierwszych 14 dniach."}
  ];
  return (
    <section data-screen-label="09 FAQ">
      <div className="wide">
        <div className="sec-head">
          <div>
            <div className="eyebrow">FAQ</div>
            <h2>Pytania, które padają <em>zawsze.</em></h2>
          </div>
          <div className="right">
            <p>
              Najczęściej powtarzające się pytania właścicieli sklepów meblowych w trakcie pierwszej rozmowy.
              Jeśli czegoś tu brakuje — zapytaj w formularzu poniżej.
            </p>
          </div>
        </div>
        <div className="faq">
          {qs.map((it,i)=>(
            <details key={i} {...(i===0?{open:true}:{})}>
              <summary>{it.q}</summary>
              <p>{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────── CTA + FOOTER ───────────
const Cta = () => (
  <section id="cta" data-screen-label="10 CTA" style={{paddingTop:32,paddingBottom:48}}>
    <div className="wide">
      <div className="cta">
        <div>
          <div className="eyebrow" style={{color:"color-mix(in oklch, var(--bg) 60%, transparent)"}}>Krok pierwszy</div>
          <h2 style={{marginTop:14}}>Zacznij od <em>bezpłatnego audytu.</em></h2>
          <p>
            Zostawiamy Twojemu zespołowi raport PDF na 24–32 strony i checklistę przed-migracyjną.
            Niezależnie od tego, czy ostatecznie wybierzesz nas, czy nie — to dokumenty, które
            powinieneś mieć przed każdą rozmową z dostawcą.
          </p>
          <div style={{display:"flex",gap:8,marginTop:24,flexWrap:"wrap"}}>
            <span className="mono" style={{fontSize:11,letterSpacing:".14em",textTransform:"uppercase",padding:"6px 10px",border:"1px solid color-mix(in oklch, var(--bg) 22%, transparent)",borderRadius:5,color:"color-mix(in oklch, var(--bg) 75%, transparent)"}}>7 dni na audyt</span>
            <span className="mono" style={{fontSize:11,letterSpacing:".14em",textTransform:"uppercase",padding:"6px 10px",border:"1px solid color-mix(in oklch, var(--bg) 22%, transparent)",borderRadius:5,color:"color-mix(in oklch, var(--bg) 75%, transparent)"}}>0 zł zaliczki</span>
            <span className="mono" style={{fontSize:11,letterSpacing:".14em",textTransform:"uppercase",padding:"6px 10px",border:"1px solid color-mix(in oklch, var(--bg) 22%, transparent)",borderRadius:5,color:"color-mix(in oklch, var(--bg) 75%, transparent)"}}>NDA standardem</span>
          </div>
        </div>
        <form className="cta-form" onSubmit={(e)=>{e.preventDefault();alert("Dziękujemy — odezwiemy się w ciągu 24h.")}}>
          <label>Adres sklepu (PrestaShop)</label>
          <input type="text" placeholder="https://twojsklep.pl" required />
          <label>E-mail kontaktowy</label>
          <input type="email" placeholder="imie@firma.pl" required />
          <label>Liczba SKU (orientacyjnie)</label>
          <input type="text" placeholder="np. 8 000" />
          <button className="btn accent" type="submit" style={{marginTop:8}}>
            Zamów bezpłatny audyt <span className="arrow">→</span>
          </button>
        </form>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="foot">
    <div className="wide">
      <div className="foot-grid">
        <div>
          <Brand />
          <p style={{marginTop:14,fontSize:13.5,color:"var(--ink-2)",maxWidth:340,lineHeight:1.6}}>
            Pakiety wdrożeniowe Gorilla Commerce — migracje e-commerce, produktów i contentu dla sklepów
            meblowych, wnętrzarskich i premium retail. Shopify Plus Partner.
          </p>
        </div>
        <div>
          <h6>Produkt</h6>
          <ul>
            <li><a href="#metoda">Metodologia</a></li>
            <li><a href="#audyt">Audyt + checklista</a></li>
            <li><a href="#wdrozenie">Wdrożenie</a></li>
            <li><a href="#cennik">Cennik</a></li>
          </ul>
        </div>
        <div>
          <h6>Materiały</h6>
          <ul>
            <li><a href="#case">Case: Klonowy Meble</a></li>
            <li><a href="#">Przewodnik PrestaShop → Shopify (PDF)</a></li>
            <li><a href="#">Checklista 86-punktowa</a></li>
            <li><a href="#">Blog migracyjny</a></li>
          </ul>
        </div>
        <div>
          <h6>Kontakt</h6>
          <ul>
            <li>migracje@gorillacommerce.pl</li>
            <li>+48 22 000 00 00</li>
            <li>ul. Migracyjna 1, Warszawa</li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Gorilla Commerce · Shopify Plus Partner</span>
        <span>v3.2 · methodology-2026.q2</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Strip, Problem, Methodology, Audit, Wdrozenie, Case, Pricing, Faq, Cta, Footer });