/* variant-a.jsx — Korporacyjny, Stripe-like, split hero
   Granat + biel, czyste siatki, ścisłe baseline. */

const { useState: vaUseState } = React;

function VariantA() {
  useReveal('#variant-a');

  return (
    <div id="variant-a" data-screen-label="A · Korporacyjny" style={{ background: '#fff', color: 'var(--ink)' }}>
      <Nav />
      <VAHero />
      <VAProblem />
      <VASolution />
      <VAMarketplaceTogether />
      <VAComparison />
      <VAFAQ />
      <VACTA />
      <Footer />
    </div>
  );
}

// ───────── Hero — split, lewa kolumna copy, prawa kolumna ilustracja ─────────
function VAHero() {
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(180deg, #FAFBFE 0%, #F2F5FA 100%)',
      borderBottom: '1px solid var(--line)',
    }}>
      {/* dotted bg */}
      <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: .5, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', padding: '88px 56px 96px', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div data-reveal className="tag" style={{ marginBottom: 22 }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent)' }} />
            Migracja sklepu · Q1 2025
          </div>
          <h1 data-reveal className="h1" style={{ marginBottom: 24 }}>
            Marketplace daje sprzedaż.<br/>
            <span style={{ color: 'var(--accent)' }}>Własny sklep</span> daje biznes.
          </h1>
          <p data-reveal className="lead" style={{ maxWidth: 540, marginBottom: 32 }}>
            Migrujemy marki sprzedające na Amazonie, Allegro i eBay na własny sklep — z zachowaniem marketplace jako kanału akwizycji. Łączymy oba światy przez BaseLinker i EPP.
          </p>
          <div data-reveal style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button className="btn btn-accent btn-lg">
              Zamów wycenę migracji
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10m-4-4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <button className="btn btn-ghost btn-lg">Pobierz checklist migracji</button>
          </div>

          {/* mini trust row */}
          <div data-reveal style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
            <span style={{ font: '500 12px/1 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>Migrujemy z</span>
            <MarketplaceMarks.Amazon />
            <MarketplaceMarks.Allegro />
            <MarketplaceMarks.Ebay />
            <span style={{ width: 1, height: 18, background: 'var(--line)' }} />
            <span style={{ font: '500 13px/1 var(--font-sans)', color: 'var(--ink-soft)' }}>+ BaseLinker, EPP, Shopify Plus</span>
          </div>
        </div>

        {/* Hero illustration: stylized dashboard */}
        <VAHeroDashboard />
      </div>
    </section>
  );
}

function VAHeroDashboard() {
  return (
    <div data-reveal style={{ position: 'relative' }}>
      {/* Browser frame */}
      <div style={{
        background: '#fff', borderRadius: 16,
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-3)',
        overflow: 'hidden',
      }}>
        {/* chrome */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '12px 16px', borderBottom: '1px solid var(--line-2)', background: '#FAFBFE' }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F57' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FFBD2E' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#28C840' }} />
          </div>
          <div style={{ marginLeft: 16, padding: '4px 12px', background: '#fff', border: '1px solid var(--line)', borderRadius: 6, font: '500 11px/1 var(--font-mono)', color: 'var(--ink-mute)', flex: 1, maxWidth: 280 }}>
            twoja-marka.com / panel
          </div>
        </div>
        {/* dashboard body */}
        <div style={{ padding: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <DashCard label="Przychód miesięczny" value="287 412 PLN" delta="+34%" tone="ok" sparkUp />
          <DashCard label="Klienci w CRM"        value="32 487"      delta="+1 287" tone="ok" />
          <DashCard label="Konwersja sklep"      value="3,8%"        delta="+0,9 pp" tone="ok" full />
          <DashCard label="Allegro · GMV"        value="118 240 PLN" delta="−12%"  tone="bad" />
          <DashCard label="Amazon · GMV"         value="74 920 PLN"  delta="+8%"   tone="ok" />
        </div>
      </div>

      {/* floating notification card */}
      <div data-reveal style={{
        position: 'absolute', bottom: -22, right: -16,
        background: '#fff', borderRadius: 12, padding: '14px 16px',
        boxShadow: 'var(--shadow-3)', border: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', gap: 12,
        '--reveal-d': '300ms',
      }}>
        <div style={{ width: 32, height: 32, borderRadius: 16, background: 'var(--ok)', display: 'grid', placeItems: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7l3 3 5-6" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
        <div>
          <div style={{ font: '600 13px/1.2 var(--font-sans)', color: 'var(--ink)' }}>Allegro zsynchronizowane</div>
          <div style={{ font: '400 11.5px/1.2 var(--font-sans)', color: 'var(--ink-mute)', marginTop: 2 }}>BaseLinker · 287 produktów · 2s temu</div>
        </div>
      </div>
    </div>
  );
}

function DashCard({ label, value, delta, tone, full, sparkUp }) {
  const color = tone === 'ok' ? 'var(--ok)' : 'var(--bad)';
  const bg = tone === 'ok' ? '#E0FAF1' : '#FBE5E5';
  return (
    <div style={{
      gridColumn: full ? '1 / -1' : 'auto',
      padding: 16, borderRadius: 12,
      border: '1px solid var(--line-2)',
      background: '#fff',
    }}>
      <div style={{ font: '500 11px/1 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 8 }}>
        <span style={{ font: '700 22px/1 var(--font-head)', letterSpacing: '-0.02em', color: 'var(--ink)' }}>{value}</span>
        <span style={{ font: '600 11px/1 var(--font-sans)', color, background: bg, padding: '3px 7px', borderRadius: 6 }}>{delta}</span>
      </div>
      {full && (
        <svg viewBox="0 0 320 60" style={{ width: '100%', marginTop: 12, height: 50 }}>
          <defs>
            <linearGradient id="va-spark" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="var(--accent)" stopOpacity=".25"/>
              <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0,40 C40,38 60,30 100,28 C140,26 160,18 200,14 C240,10 280,12 320,6" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
          <path d="M0,40 C40,38 60,30 100,28 C140,26 160,18 200,14 C240,10 280,12 320,6 L320,60 L0,60 Z" fill="url(#va-spark)"/>
        </svg>
      )}
    </div>
  );
}

// ───────── Problem ─────────
function VAProblem() {
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <span className="eyebrow">Sufit marketplace</span>
            <h2 className="h2" style={{ marginTop: 16 }}>
              Im więcej sprzedajesz, tym mniej masz.
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: 480 }}>
            Pierwsze 100 tysięcy GMV na Allegro to sukces. Pierwsze 10 milionów — pułapka. Bo wraz z wolumenem rosną prowizje, a Twoja kontrola nad biznesem maleje.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {PROBLEMS.map((p, i) => (
            <div key={i} data-reveal className="card" style={{ padding: 32, '--reveal-d': `${i * 80}ms`, display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 22, alignItems: 'start' }}>
              <div style={{ width: 52, height: 52, borderRadius: 12, background: 'var(--bg-tint)', display: 'grid', placeItems: 'center', color: 'var(--accent)' }}>
                <ProblemIcon kind={p.icon} size={26} />
              </div>
              <div>
                <h3 style={{ font: '600 19px/1.3 var(--font-head)', letterSpacing: '-0.015em', color: 'var(--ink)', margin: 0 }}>{p.title}</h3>
                <p style={{ font: '400 14.5px/1.55 var(--font-body)', color: 'var(--ink-soft)', margin: '10px 0 0', textWrap: 'pretty' }}>{p.body}</p>
              </div>
              <div style={{ textAlign: 'right', paddingLeft: 16, borderLeft: '1px solid var(--line-2)' }}>
                <div style={{ font: '700 28px/1 var(--font-head)', letterSpacing: '-0.025em', color: 'var(--bad)' }}>{p.metric}</div>
                <div style={{ font: '400 11px/1.3 var(--font-sans)', color: 'var(--ink-mute)', maxWidth: 110, marginTop: 6 }}>{p.metricLbl}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Solution ─────────
const SOLUTIONS = [
  { title: 'Branding', body: 'Własny lookbook, motyw kolorystyczny, ton komunikacji. Klient pamięta Twoją markę — nie szablon listingu.', stat: '+72%', statLbl: 'recall marki po 30 dniach' },
  { title: 'Dane', body: 'Email, segmentacja, LTV, historia. Wszystko trafia do CRM i do Twojego BI — nie do bazy Amazona.', stat: '100%', statLbl: 'pełna własność danych' },
  { title: 'Newsletter', body: 'Klaviyo, Mailchimp, lifecycle flows. Tani kanał re-engagement bez prowizji.', stat: '4,2x', statLbl: 'średni ROI vs. reklama' },
  { title: 'UX', body: 'Quick checkout, recommended-for-you, własna lojalność. UX skrojony pod Twój produkt — nie pod katalog z 600 mln SKU.', stat: '+0,9pp', statLbl: 'konwersja vs. marketplace' },
];

function VASolution() {
  return (
    <section className="section" style={{ background: 'var(--bg-tint)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 56 }}>
          <span className="eyebrow">Co zyskujesz po migracji</span>
          <h2 className="h2" style={{ marginTop: 16 }}>Własny sklep to nie kolejny kanał. To Twój ekosystem.</h2>
          <p className="lead" style={{ marginTop: 16 }}>Marketplace to wynajem powierzchni. Własny sklep to nieruchomość — z prawem do remontu, podnajmu i sprzedaży.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {SOLUTIONS.map((s, i) => (
            <div key={i} data-reveal className="card" style={{ padding: 28, '--reveal-d': `${i * 70}ms`, background: '#fff' }}>
              <div style={{ font: '700 36px/1 var(--font-head)', letterSpacing: '-0.025em', color: 'var(--accent)' }}>{s.stat}</div>
              <div style={{ font: '400 11.5px/1.3 var(--font-sans)', color: 'var(--ink-mute)', marginTop: 6, minHeight: 28 }}>{s.statLbl}</div>
              <div style={{ height: 1, background: 'var(--line-2)', margin: '22px 0' }} />
              <h3 style={{ font: '600 18px/1.2 var(--font-head)', letterSpacing: '-0.015em', color: 'var(--ink)', margin: 0 }}>{s.title}</h3>
              <p style={{ font: '400 14px/1.55 var(--font-body)', color: 'var(--ink-soft)', margin: '8px 0 0' }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Marketplace + sklep własny razem (DataFlow A) ─────────
function VAMarketplaceTogether() {
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 48 }}>
          <div>
            <span className="eyebrow">Marketplace dalej działa</span>
            <h2 className="h2" style={{ marginTop: 16 }}>Nie wyłączamy Amazona. Ustawiamy go po właściwej stronie lejka.</h2>
          </div>
          <p className="lead" style={{ maxWidth: 480 }}>
            BaseLinker i nasz silnik EPP łączą Twój sklep, magazyn i wszystkie marketplace w jeden system. Jeden stan magazynowy, jedna obsługa, jedno źródło prawdy.
          </p>
        </div>
        <DataFlowA />
      </div>
    </section>
  );
}

// ───────── Comparison ─────────
function VAComparison() {
  return (
    <section className="section" style={{ background: 'var(--bg-tint)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div data-reveal style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 40, gap: 40 }}>
          <div>
            <span className="eyebrow">Tabela porównawcza</span>
            <h2 className="h2" style={{ marginTop: 16, maxWidth: 720 }}>Marketplace vs. sklep własny — wymiar po wymiarze</h2>
          </div>
          <div style={{ font: '400 13px/1.4 var(--font-sans)', color: 'var(--ink-mute)', maxWidth: 280 }}>
            Każdy wymiar oceniony na podstawie danych z ostatnich 36 migracji.
          </div>
        </div>
        <ComparisonTable />
      </div>
    </section>
  );
}

// ───────── FAQ ─────────
function VAFAQ() {
  return (
    <section className="section">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
        <div data-reveal>
          <span className="eyebrow">FAQ</span>
          <h2 className="h2" style={{ marginTop: 16 }}>Najczęstsze pytania od marek przed migracją.</h2>
          <p className="lead" style={{ marginTop: 16 }}>Jeśli nie znajdziesz odpowiedzi — napisz: <a style={{ color: 'var(--accent)', borderBottom: '1px solid var(--accent)' }}>hello@gorilla.commerce</a></p>
        </div>
        <div data-reveal><FAQ /></div>
      </div>
    </section>
  );
}

// ───────── CTA — formularz + kalkulator ─────────
function VACTA() {
  return (
    <section id="contact" className="section-lg" style={{ background: 'var(--ink)', position: 'relative', overflow: 'hidden', scrollMarginTop: 80 }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at top right, rgba(61,90,254,.25) 0%, transparent 50%)' }} />
      <div className="container" style={{ position: 'relative' }}>
        <div data-reveal style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px', color: '#fff' }}>
          <span className="eyebrow" style={{ color: 'var(--accent)' }}>Następny krok</span>
          <h2 className="h2" style={{ color: '#fff', marginTop: 16 }}>Zacznij od policzenia, ile odpływa.</h2>
          <p className="lead" style={{ color: 'rgba(255,255,255,.7)', marginTop: 16 }}>
            Wyceniamy migrację w 48h od pierwszej rozmowy. Bez ukrytych kosztów, bez nagabywania.
          </p>
        </div>
        <div data-reveal style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <QuoteCalculator />
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VariantA });