/* variant-b.jsx — Bold editorial: serif headings, large typography,
   centered hero, asymmetric layouts, wydawniczy ton. */

function VariantB() {
  useReveal('#variant-b');

  return (
    <div id="variant-b" data-screen-label="B · Editorial" className="font-serif-head" style={{ background: '#fff', color: 'var(--ink)' }}>
      <Nav />
      <VBHero />
      <VBProblem />
      <VBPullQuote />
      <VBSolution />
      <VBTimeline />
      <VBComparison />
      <VBFAQ />
      <VBCTA />
      <Footer />
    </div>
  );
}

// ───────── Hero — centered, oversized serif ─────────
function VBHero() {
  return (
    <section style={{
      background: '#fff',
      borderBottom: '1px solid var(--line)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="container" style={{ padding: '96px 56px 80px', textAlign: 'center', position: 'relative', maxWidth: 1100 }}>
        <div data-reveal style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', borderRadius: 999, background: 'var(--bg-tint)', border: '1px solid var(--line)', font: '500 12.5px/1 var(--font-sans)', color: 'var(--ink-soft)', letterSpacing: '-0.005em' }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent)' }} />
          Nowy esej Gorilla Commerce
          <span style={{ width: 1, height: 12, background: 'var(--line)' }} />
          <span style={{ color: 'var(--ink-mute)' }}>14 min czytania</span>
        </div>

        <h1 data-reveal style={{
          font: '400 clamp(54px, 7.2vw, 104px)/0.98 var(--font-serif)',
          letterSpacing: '-0.035em',
          margin: '32px auto 0',
          maxWidth: 1000,
          textWrap: 'balance',
          color: 'var(--ink)',
          '--reveal-d': '80ms',
        }}>
          Nie sprzedawaj <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>od</em> Amazona.
          <br/>
          Sprzedawaj <em style={{ fontStyle: 'italic' }}>przez</em> Amazona.
        </h1>

        <p data-reveal className="lead" style={{ maxWidth: 660, margin: '32px auto 0', fontSize: 20, '--reveal-d': '160ms' }}>
          Migrujemy marki z marketplace na własny sklep, zachowując Amazon, Allegro i eBay jako kanały akwizycji. To nie ucieczka — to przejęcie kontroli nad własnym biznesem.
        </p>

        <div data-reveal style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, '--reveal-d': '220ms' }}>
          <button className="btn btn-primary btn-lg" style={{ background: 'var(--ink)', borderRadius: 999, padding: '0 28px' }}>
            Zamów wycenę migracji
          </button>
          <button className="btn btn-link" style={{ font: '500 15px/1 var(--font-sans)', textDecoration: 'underline', textUnderlineOffset: 4, color: 'var(--ink)' }}>
            Przeczytaj manifest →
          </button>
        </div>
      </div>

      {/* Bottom: marketplace badges + dramatic running number */}
      <div data-reveal style={{ borderTop: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '28px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
          <div style={{ display: 'flex', gap: 28, alignItems: 'center', 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 />
          </div>
          <div style={{ display: 'flex', gap: 36, alignItems: 'baseline' }}>
            <Mini stat="36" lbl="migracji w 2024" />
            <Mini stat="82M" lbl="GMV przeniesione" prefix="" suffix=" PLN" />
            <Mini stat="11" lbl="krajów EU" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Mini({ stat, lbl, prefix = '', suffix = '' }) {
  return (
    <div style={{ textAlign: 'right' }}>
      <div style={{ font: '600 22px/1 var(--font-serif)', letterSpacing: '-0.02em', color: 'var(--ink)' }}>{prefix}{stat}{suffix}</div>
      <div style={{ font: '400 11px/1.3 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 4 }}>{lbl}</div>
    </div>
  );
}

// ───────── Problem — editorial 4-column asymmetric grid ─────────
function VBProblem() {
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ marginBottom: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          <div>
            <span style={{ font: '500 12px/1 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Część I · Diagnoza</span>
            <h2 style={{ font: '400 clamp(36px, 4.4vw, 64px)/1 var(--font-serif)', letterSpacing: '-0.03em', marginTop: 14, color: 'var(--ink)' }}>
              Cztery powody, dla których <em style={{ fontStyle: 'italic' }}>marketplace ma sufit</em>.
            </h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'end' }}>
            <p className="lead" style={{ maxWidth: 460 }}>
              Każdy z czterech poniższych mechanizmów działa cicho. Razem stanowią różnicę między marką, która rośnie, a marką, która tylko sprzedaje.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--ink)' }}>
          {PROBLEMS.map((p, i) => (
            <article key={i} data-reveal style={{
              padding: '32px 24px 28px',
              borderRight: i < PROBLEMS.length - 1 ? '1px solid var(--line)' : 'none',
              '--reveal-d': `${i * 100}ms`,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <div style={{ font: '500 12px/1 var(--font-mono)', color: 'var(--ink-mute)' }}>0{i + 1} / 04</div>
                <ProblemIcon kind={p.icon} size={20} color="var(--ink-mute)" />
              </div>
              <h3 style={{ font: '400 24px/1.15 var(--font-serif)', letterSpacing: '-0.02em', color: 'var(--ink)', margin: '24px 0 16px', textWrap: 'balance' }}>{p.title}</h3>
              <p style={{ font: '400 14.5px/1.6 var(--font-body)', color: 'var(--ink-soft)', margin: 0, textWrap: 'pretty' }}>{p.body}</p>
              <div style={{ marginTop: 24, paddingTop: 18, borderTop: '1px solid var(--line-2)', display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{ font: '500 32px/1 var(--font-serif)', letterSpacing: '-0.02em', color: 'var(--bad)' }}>{p.metric}</span>
                <span style={{ font: '400 11px/1.3 var(--font-sans)', color: 'var(--ink-mute)' }}>{p.metricLbl}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Pull quote ─────────
function VBPullQuote() {
  return (
    <section style={{ background: 'var(--ink)', color: '#fff', padding: '96px 0' }}>
      <div className="container-tight" style={{ textAlign: 'center', maxWidth: 920 }}>
        <svg width="48" height="40" viewBox="0 0 48 40" data-reveal style={{ display: 'block', margin: '0 auto 32px', opacity: .35 }}>
          <path d="M0 40V22C0 9.85 6.45 0 18.3 0v8.4c-4.65 0-7.95 3.45-7.95 9V14H18v26H0zm26.4 0V22C26.4 9.85 32.85 0 44.7 0v8.4c-4.65 0-7.95 3.45-7.95 9V14H44.4v26H26.4z" fill="currentColor"/>
        </svg>
        <p data-reveal style={{
          font: '400 clamp(28px, 3.6vw, 44px)/1.22 var(--font-serif)',
          letterSpacing: '-0.02em',
          textWrap: 'balance',
          margin: 0,
          '--reveal-d': '100ms',
        }}>
          Marketplace to wynajem powierzchni handlowej. Własny sklep to <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>nieruchomość</em> — z prawem do remontu, podnajmu, kompozycji witryny i sprzedaży całej działalności. Większość marek e-commerce nie zauważa różnicy, dopóki nie chce sprzedać firmy.
        </p>
        <div data-reveal style={{ marginTop: 32, display: 'inline-flex', alignItems: 'center', gap: 14, '--reveal-d': '200ms' }}>
          <div style={{ width: 44, height: 44, borderRadius: 22, background: 'linear-gradient(135deg, #FF9900, #FF5A00)', display: 'grid', placeItems: 'center', font: '700 14px/1 var(--font-sans)', color: '#fff' }}>MK</div>
          <div style={{ textAlign: 'left' }}>
            <div style={{ font: '600 14px/1.2 var(--font-sans)', color: '#fff' }}>Marek Kowalski</div>
            <div style={{ font: '400 12.5px/1.2 var(--font-sans)', color: 'rgba(255,255,255,.6)', marginTop: 3 }}>Founder, Gorilla Commerce · 14 lat w marketplace</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Solution — vertical alternating ─────────
const VB_SOLUTIONS = [
  { ch: '01', title: 'Branding, który zostaje w głowie', body: 'Własny lookbook, motyw kolorystyczny, ton komunikacji. Zamiast „kupiłem na Amazonie" klient mówi „kupiłem u Ciebie". To zmienia całą ekonomię akwizycji.', highlight: 'Klient pamięta markę, nie szablon.' },
  { ch: '02', title: 'Dane, które pracują na Ciebie', body: 'Email, segmentacja, LTV, historia. Trafia do CRM, nie do bazy Amazona. Możesz robić retencję — najtańszą formę wzrostu.', highlight: '100% pełna własność danych klienta.' },
  { ch: '03', title: 'Newsletter, czyli kanał za 0 PLN', body: 'Klaviyo, Mailchimp, lifecycle flows. Welcome, win-back, post-purchase. ROI 4×–10× wyższy niż reklama płatna — bo nie konkurujesz z aukcją.', highlight: 'Średni ROI 4,2× vs. paid media.' },
  { ch: '04', title: 'UX skrojony pod Twój produkt', body: 'Quick checkout, recommended-for-you, bundles, lojalność, AR/3D, gift card. Wszystko, czego marketplace Ci nie da — bo nie ma na to UI.', highlight: '+0,9 pp konwersji vs. listing.' },
];

function VBSolution() {
  return (
    <section className="section-lg">
      <div className="container">
        <div data-reveal style={{ marginBottom: 64, maxWidth: 800 }}>
          <span style={{ font: '500 12px/1 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Część II · Co zyskujesz</span>
          <h2 style={{ font: '400 clamp(36px, 4.4vw, 64px)/1 var(--font-serif)', letterSpacing: '-0.03em', marginTop: 14, color: 'var(--ink)', textWrap: 'balance' }}>
            Cztery rzeczy, które sklep własny <em style={{ fontStyle: 'italic' }}>da Ci od pierwszego dnia</em>.
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {VB_SOLUTIONS.map((s, i) => (
            <article key={i} data-reveal style={{
              display: 'grid', gridTemplateColumns: '120px 1fr 1.2fr',
              gap: 48, alignItems: 'start',
              padding: '40px 0',
              borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--line)',
              '--reveal-d': `${i * 80}ms`,
            }}>
              <div style={{ font: '400 64px/1 var(--font-serif)', letterSpacing: '-0.03em', color: 'var(--accent)' }}>{s.ch}</div>
              <div>
                <h3 style={{ font: '400 32px/1.1 var(--font-serif)', letterSpacing: '-0.02em', color: 'var(--ink)', margin: 0, textWrap: 'balance' }}>{s.title}</h3>
              </div>
              <div>
                <p style={{ font: '400 16px/1.6 var(--font-body)', color: 'var(--ink-soft)', margin: 0, maxWidth: 520, textWrap: 'pretty' }}>{s.body}</p>
                <div style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'var(--accent-soft)', color: 'var(--accent)', font: '500 13px/1 var(--font-sans)', letterSpacing: '-0.005em' }}>
                  <span style={{ width: 5, height: 5, borderRadius: 3, background: 'var(--accent)' }} />
                  {s.highlight}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Timeline (DataFlowB) ─────────
function VBTimeline() {
  return (
    <section className="section-lg">
      <div className="container"><DataFlowB /></div>
    </section>
  );
}

// ───────── Comparison — editorial table style ─────────
function VBComparison() {
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ marginBottom: 48, maxWidth: 720 }}>
          <span style={{ font: '500 12px/1 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Część III · Porównanie</span>
          <h2 style={{ font: '400 clamp(36px, 4.4vw, 56px)/1 var(--font-serif)', letterSpacing: '-0.03em', marginTop: 14, color: 'var(--ink)' }}>
            Marketplace vs. sklep własny.
          </h2>
        </div>
        <ComparisonTable />
      </div>
    </section>
  );
}

// ───────── FAQ ─────────
function VBFAQ() {
  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={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <span style={{ font: '500 12px/1 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Część IV · FAQ</span>
          <h2 style={{ font: '400 clamp(36px, 4.4vw, 56px)/1 var(--font-serif)', letterSpacing: '-0.03em', marginTop: 14, color: 'var(--ink)' }}>
            Sześć pytań, które słyszymy <em style={{ fontStyle: 'italic' }}>najczęściej</em>.
          </h2>
        </div>
        <div data-reveal style={{ maxWidth: 920, margin: '0 auto' }}><FAQ /></div>
      </div>
    </section>
  );
}

// ───────── CTA ─────────
function VBCTA() {
  return (
    <section id="contact" className="section-lg" style={{ scrollMarginTop: 80 }}>
      <div className="container">
        <div data-reveal style={{ textAlign: 'center', maxWidth: 800, margin: '0 auto 56px' }}>
          <span style={{ font: '500 12px/1 var(--font-sans)', color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '0.16em' }}>Następny krok</span>
          <h2 style={{ font: '400 clamp(40px, 5vw, 72px)/1 var(--font-serif)', letterSpacing: '-0.03em', marginTop: 14, color: 'var(--ink)', textWrap: 'balance' }}>
            Zacznij od jednej liczby: <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>ile odpływa</em>.
          </h2>
          <p className="lead" style={{ marginTop: 20, fontSize: 18 }}>
            Wyceniamy migrację w 48h od pierwszej rozmowy. Bez ukrytych pozycji, bez pushy follow-upów.
          </p>
        </div>
        <div data-reveal style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <QuoteCalculator />
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VariantB });
