/* variant-c.jsx — Data-driven / dark mode, full-bleed hero,
   interaktywne wykresy, scrollytelling. */

const { useState: vcUseState, useEffect: vcUseEffect } = React;

function VariantC() {
  useReveal('#variant-c');
  return (
    <div id="variant-c" data-screen-label="C · Data-driven" style={{ background: '#050B1F', color: '#fff' }}>
      <Nav variant="dark" />
      <VCHero />
      <VCProblemScroll />
      <VCDataFlow />
      <VCSolutionStack />
      <VCComparison />
      <VCFAQ />
      <VCCTA />
      <Footer variant="dark" />
    </div>
  );
}

// ───────── Hero — full-bleed, dark, animated chart background ─────────
function VCHero() {
  return (
    <section style={{
      position: 'relative',
      background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(61,90,254,.28) 0%, transparent 60%), #050B1F',
      borderBottom: '1px solid rgba(255,255,255,.08)',
      overflow: 'hidden',
      minHeight: 740,
    }}>
      {/* Bg grid */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)', backgroundSize: '52px 52px', maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)', WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)' }} />

      {/* hero chart, abs */}
      <VCHeroChart />

      <div className="container" style={{ position: 'relative', padding: '88px 56px 96px' }}>
        <div data-reveal style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '7px 14px', borderRadius: 999, background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.1)', color: 'rgba(255,255,255,.85)', font: '500 12.5px/1 var(--font-sans)' }}>
          <span style={{ display: 'inline-flex', position: 'relative', width: 8, height: 8 }}>
            <span style={{ position: 'absolute', inset: 0, borderRadius: 4, background: '#00C896' }} />
            <span style={{ position: 'absolute', inset: -3, borderRadius: 7, background: '#00C896', opacity: .3, animation: 'pulse 1.6s infinite' }} />
          </span>
          Live · 14 migracji w trakcie
        </div>

        <h1 data-reveal className="h1" style={{
          color: '#fff',
          marginTop: 28, maxWidth: 1000,
          fontSize: 'clamp(48px, 6.4vw, 86px)',
          letterSpacing: '-0.035em',
          '--reveal-d': '80ms',
        }}>
          Zamień prowizje marketplace<br/>
          w <span style={{ background: 'linear-gradient(135deg, #3D5AFE, #00C896)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>własne dane</span>, własny ruch, własną markę.
        </h1>

        <p data-reveal className="lead" style={{ color: 'rgba(255,255,255,.7)', maxWidth: 580, marginTop: 24, '--reveal-d': '160ms' }}>
          Migrujemy marki sprzedające na Amazon, Allegro i eBay na własny sklep — z zachowaniem marketplace jako kanału akwizycji. Pełna integracja przez BaseLinker i nasz silnik EPP.
        </p>

        <div data-reveal style={{ display: 'flex', gap: 12, marginTop: 36, '--reveal-d': '220ms' }}>
          <button onClick={() => document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth', block: 'start' })} className="btn btn-accent btn-lg" style={{ boxShadow: '0 0 0 1px rgba(61,90,254,.4), 0 12px 32px rgba(61,90,254,.4)' }}>
            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 onClick={() => document.querySelector('#how-it-works')?.scrollIntoView({ behavior: 'smooth', block: 'start' })} className="btn btn-ghost btn-lg" style={{ background: 'rgba(255,255,255,.04)', borderColor: 'rgba(255,255,255,.12)', color: '#fff' }}>
            Jak to działa?
          </button>
        </div>

        {/* Live KPI strip */}
        <div data-reveal style={{ marginTop: 64, '--reveal-d': '320ms' }}>
          <VCLiveKPIs />
        </div>
      </div>

      <style>{`@keyframes pulse { 0%,100% { transform: scale(.6); opacity:.6 } 50% { transform: scale(1.6); opacity: 0 } }`}</style>
    </section>
  );
}

// ───── Hero chart — abstract abs-positioned animated chart on the right ─────
function VCHeroChart() {
  return (
    <div style={{ position: 'absolute', top: 80, right: -40, width: 700, height: 560, opacity: .85, pointerEvents: 'none' }}>
      <svg viewBox="0 0 700 560" style={{ width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id="vc-h1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#3D5AFE" stopOpacity=".6"/>
            <stop offset="100%" stopColor="#3D5AFE" stopOpacity="0"/>
          </linearGradient>
          <linearGradient id="vc-h2" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#00C896" stopOpacity=".5"/>
            <stop offset="100%" stopColor="#00C896" stopOpacity="0"/>
          </linearGradient>
        </defs>

        {/* marketplace line — declining */}
        <path d="M50,180 L120,170 L190,200 L260,240 L330,290 L400,330 L470,360 L540,380 L610,395" fill="none" stroke="#FF5A00" strokeWidth="2" strokeLinecap="round" strokeDasharray="4 4" opacity=".7" />

        {/* own store — rising */}
        <path d="M50,460 L120,420 L190,360 L260,300 L330,240 L400,170 L470,120 L540,90 L610,60" fill="none" stroke="#3D5AFE" strokeWidth="3" strokeLinecap="round">
          <animate attributeName="stroke-dasharray" values="0 800;800 0" dur="2.5s" begin="0.3s" fill="freeze"/>
        </path>
        <path d="M50,460 L120,420 L190,360 L260,300 L330,240 L400,170 L470,120 L540,90 L610,60 L610,560 L50,560 Z" fill="url(#vc-h1)" opacity=".7"/>

        {/* combined */}
        <path d="M50,420 L120,380 L190,340 L260,280 L330,230 L400,180 L470,140 L540,110 L610,80" fill="none" stroke="#00C896" strokeWidth="2" strokeLinecap="round" opacity=".7" strokeDasharray="2 4"/>

        {/* anchor points */}
        {[[50,460],[260,300],[400,170],[610,60]].map(([x,y],i) => (
          <g key={i}>
            <circle cx={x} cy={y} r="5" fill="#0A1F44" stroke="#3D5AFE" strokeWidth="2" />
            <circle cx={x} cy={y} r="10" fill="#3D5AFE" opacity=".15">
              <animate attributeName="r" values="6;14;6" dur="2.4s" begin={`${i*0.3}s`} repeatCount="indefinite" />
            </circle>
          </g>
        ))}

        {/* labels */}
        <g fontFamily="var(--font-mono)" fontSize="10" fill="rgba(255,255,255,.5)">
          <text x="630" y="395">marketplace</text>
          <text x="630" y="60" fill="#3D5AFE">własny sklep</text>
          <text x="630" y="80" fill="#00C896">razem</text>
        </g>
      </svg>
    </div>
  );
}

function VCLiveKPIs() {
  const kpis = [
    { v: 36,    s: '',     l: 'zakończonych migracji' },
    { v: 82,    s: 'M PLN',l: 'GMV przeniesione' },
    { v: 4.2,   s: '×',    l: 'śr. ROI z newslettera' },
    { v: 100,   s: '%',    l: 'pełna własność danych' },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
      borderRadius: 16,
      background: 'rgba(255,255,255,.03)',
      border: '1px solid rgba(255,255,255,.08)',
      backdropFilter: 'blur(20px)',
      maxWidth: 720,
    }}>
      {kpis.map((k, i) => (
        <div key={i} style={{
          padding: '20px 24px',
          borderRight: i < kpis.length - 1 ? '1px solid rgba(255,255,255,.06)' : 'none',
        }}>
          <div style={{ font: '700 32px/1 var(--font-head)', letterSpacing: '-0.025em', color: '#fff' }}>
            <StatNumber value={k.v} suffix={k.s} />
          </div>
          <div style={{ font: '500 11px/1.3 var(--font-sans)', color: 'rgba(255,255,255,.55)', marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{k.l}</div>
        </div>
      ))}
    </div>
  );
}

// ───────── Problem — scrollytelling: sticky left chart + scrolling right narration ─────────
function VCProblemScroll() {
  const [active, setActive] = vcUseState(0);

  vcUseEffect(() => {
    const items = document.querySelectorAll('[data-vc-step]');
    if (!items.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) setActive(+e.target.dataset.vcStep);
      });
    }, { rootMargin: '-40% 0px -40% 0px' });
    items.forEach((i) => io.observe(i));
    return () => io.disconnect();
  }, []);

  return (
    <section style={{ position: 'relative', borderTop: '1px solid rgba(255,255,255,.06)' }}>
      <div className="container" style={{ padding: '120px 56px 80px' }}>
        <div data-reveal style={{ marginBottom: 80, maxWidth: 780 }}>
          <span className="eyebrow" style={{ color: '#3D5AFE' }}>Część I · Diagnoza</span>
          <h2 className="h2" style={{ marginTop: 16, color: '#fff' }}>
            Twoje cztery największe straty są niewidoczne w panelu.
          </h2>
          <p className="lead" style={{ color: 'rgba(255,255,255,.65)', marginTop: 16 }}>
            Przewiń, żeby zobaczyć je w danych. Wykres po lewej reaguje na to, co czytasz.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100, height: 'fit-content' }}>
            <VCStickyChart active={active} />
          </div>
          <div>
            {PROBLEMS.map((p, i) => (
              <div key={i} data-vc-step={i} style={{
                padding: '60px 0',
                opacity: active === i ? 1 : 0.4,
                transition: 'opacity .5s',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                  <div style={{ font: '500 12px/1 var(--font-mono)', color: 'rgba(255,255,255,.4)' }}>0{i + 1} / 04</div>
                  <div style={{ flex: 1, height: 1, background: active === i ? '#3D5AFE' : 'rgba(255,255,255,.08)', transition: 'background .4s' }} />
                </div>
                <h3 className="h3" style={{ color: '#fff', marginTop: 18 }}>{p.title}</h3>
                <p style={{ font: '400 16px/1.6 var(--font-body)', color: 'rgba(255,255,255,.6)', marginTop: 14, maxWidth: 520, textWrap: 'pretty' }}>{p.body}</p>
                <div style={{ marginTop: 22, padding: 18, borderRadius: 12, background: 'rgba(255,255,255,.03)', border: '1px solid rgba(255,255,255,.08)', display: 'flex', gap: 16, alignItems: 'baseline' }}>
                  <span style={{ font: '700 36px/1 var(--font-head)', color: '#FF5A6E', letterSpacing: '-0.025em' }}>{p.metric}</span>
                  <span style={{ font: '400 13px/1.4 var(--font-sans)', color: 'rgba(255,255,255,.6)' }}>{p.metricLbl}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Sticky chart — switches visualization based on `active`
function VCStickyChart({ active }) {
  return (
    <div style={{
      background: 'rgba(255,255,255,.02)',
      border: '1px solid rgba(255,255,255,.08)',
      borderRadius: 20, padding: 28,
      backdropFilter: 'blur(20px)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
        <div>
          <div style={{ font: '500 11px/1 var(--font-mono)', color: 'rgba(255,255,255,.45)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>
            {['Wyświetlenia w czasie', 'Twoja baza klientów', 'Pamięć marki', 'Czas na akcję'][active]}
          </div>
          <div style={{ font: '600 20px/1.2 var(--font-head)', color: '#fff', marginTop: 8, letterSpacing: '-0.01em' }}>
            {['−63% po zmianie algorytmu', '0 kontaktów po roku', 'Tylko 15% pamięta markę', '4 dni na zatwierdzenie kampanii'][active]}
          </div>
        </div>
        <span style={{ font: '500 11px/1 var(--font-mono)', color: '#FF5A6E', background: 'rgba(255,90,110,.15)', padding: '4px 8px', borderRadius: 6 }}>
          {PROBLEMS[active].metric}
        </span>
      </div>

      <svg viewBox="0 0 460 280" style={{ width: '100%', height: 280, display: 'block' }}>
        <defs>
          <linearGradient id="vc-c1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#FF5A6E" stopOpacity=".4"/>
            <stop offset="100%" stopColor="#FF5A6E" stopOpacity="0"/>
          </linearGradient>
        </defs>

        {/* axes */}
        {[0,1,2,3,4].map((i) => (
          <line key={i} x1="40" y1={40 + i * 50} x2="440" y2={40 + i * 50} stroke="rgba(255,255,255,.05)" />
        ))}

        {active === 0 && (
          <g>
            <path d="M40,80 L120,75 L200,90 L240,180 L320,200 L400,220 L440,230" fill="none" stroke="#FF5A6E" strokeWidth="2.5" strokeLinecap="round"/>
            <path d="M40,80 L120,75 L200,90 L240,180 L320,200 L400,220 L440,230 L440,240 L40,240 Z" fill="url(#vc-c1)"/>
            <line x1="220" y1="40" x2="220" y2="240" stroke="rgba(255,90,110,.4)" strokeDasharray="4 4"/>
            <text x="228" y="60" fontSize="11" fill="#FF5A6E" fontFamily="var(--font-mono)">algorytm zmieniony</text>
            <text x="40" y="32" fontSize="10" fill="rgba(255,255,255,.4)" fontFamily="var(--font-mono)">imp./d</text>
          </g>
        )}
        {active === 1 && (
          <g>
            {/* Empty CRM viz — flatline at 0 */}
            <line x1="40" y1="240" x2="440" y2="240" stroke="#FF5A6E" strokeWidth="2.5" strokeDasharray="6 4"/>
            <text x="240" y="160" fontSize="14" fill="rgba(255,255,255,.6)" fontFamily="var(--font-sans)" textAnchor="middle">Twoje CRM:</text>
            <text x="240" y="190" fontSize="36" fontWeight="700" fill="#FF5A6E" fontFamily="var(--font-head)" textAnchor="middle">∅</text>
            {/* fake "their" line going up */}
            <path d="M40,200 L120,170 L200,140 L280,110 L360,80 L440,55" fill="none" stroke="rgba(255,255,255,.2)" strokeWidth="2" strokeDasharray="4 4"/>
            <text x="380" y="48" fontSize="10" fill="rgba(255,255,255,.4)" fontFamily="var(--font-mono)">Amazon CRM</text>
          </g>
        )}
        {active === 2 && (
          <g>
            {/* Bar chart: brand recall vs marketplace */}
            {[
              { x: 70,  v: 0.85, lbl: 'Amazon',  c: '#FF9900' },
              { x: 140, v: 0.78, lbl: 'Allegro', c: '#FF5A00' },
              { x: 210, v: 0.72, lbl: 'eBay',    c: '#86B817' },
              { x: 320, v: 0.15, lbl: 'Twoja marka', c: '#FF5A6E' },
            ].map((b, i) => (
              <g key={i}>
                <rect x={b.x} y={240 - b.v * 180} width="48" height={b.v * 180} fill={b.c} opacity=".85" rx="3"/>
                <text x={b.x + 24} y="258" fontSize="10" fill="rgba(255,255,255,.6)" fontFamily="var(--font-sans)" textAnchor="middle">{b.lbl}</text>
                <text x={b.x + 24} y={234 - b.v * 180} fontSize="11" fontWeight="700" fill={b.c} fontFamily="var(--font-mono)" textAnchor="middle">{Math.round(b.v * 100)}%</text>
              </g>
            ))}
            <line x1="280" y1="40" x2="280" y2="260" stroke="rgba(255,255,255,.08)" strokeDasharray="3 3"/>
          </g>
        )}
        {active === 3 && (
          <g>
            {/* Timeline of approval days */}
            {[
              { lbl: 'Wniosek',   d: 0 },
              { lbl: 'Akceptacja',d: 24 },
              { lbl: 'Recenzja',  d: 56 },
              { lbl: 'Korekta',   d: 80 },
              { lbl: 'Live',      d: 96 },
            ].map((s, i) => (
              <g key={i}>
                <circle cx={60 + s.d * 4} cy="140" r="7" fill={i === 4 ? '#00C896' : '#FF5A6E'} />
                <line x1={60 + s.d * 4} y1="140" x2={i < 4 ? 60 + ([24,56,80,96][i]) * 4 : 60 + s.d * 4} y2="140" stroke="#FF5A6E" strokeWidth="2"/>
                <text x={60 + s.d * 4} y="120" fontSize="11" fill="rgba(255,255,255,.7)" fontFamily="var(--font-mono)" textAnchor="middle">{s.lbl}</text>
                <text x={60 + s.d * 4} y="170" fontSize="10" fill="rgba(255,255,255,.4)" fontFamily="var(--font-mono)" textAnchor="middle">d+{s.d}h</text>
              </g>
            ))}
            <text x="240" y="220" fontSize="12" fill="#FF5A6E" fontFamily="var(--font-sans)" textAnchor="middle" fontWeight="600">96h = 4 dni utraconej kampanii</text>
          </g>
        )}
      </svg>

      <div style={{ marginTop: 16, display: 'flex', gap: 4 }}>
        {PROBLEMS.map((_, i) => (
          <span key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: i === active ? '#3D5AFE' : 'rgba(255,255,255,.1)', transition: 'background .3s' }} />
        ))}
      </div>
    </div>
  );
}

// ───────── DataFlow C ─────────
function VCDataFlow() {
  return (
    <section id="how-it-works" className="section" style={{ borderTop: '1px solid rgba(255,255,255,.06)', scrollMarginTop: 80 }}>
      <div className="container"><DataFlowC /></div>
    </section>
  );
}

// ───────── Solution stack — feature-grid with mini visualizations ─────────
function VCSolutionStack() {
  const cards = [
    { tag: 'BRAND',     title: 'Branding',  body: 'Lookbook, motyw, ton komunikacji. Marka zostaje w głowie.',         viz: 'brand', accent: '#3D5AFE' },
    { tag: 'DANE',      title: 'Dane',      body: 'Email, segmentacja, LTV. Wszystko trafia do CRM.',                  viz: 'data',  accent: '#00C896' },
    { tag: 'NEWSLETTER',title: 'Newsletter',body: 'Klaviyo, lifecycle flows, win-back. ROI 4,2× vs. paid.',           viz: 'mail',  accent: '#7A5AE0' },
    { tag: 'UX',        title: 'UX',        body: 'Quick checkout, bundles, loyalty, AR/3D. UI dopasowany do produktu.', viz: 'ux',  accent: '#F59E0B' },
  ];
  return (
    <section className="section" style={{ borderTop: '1px solid rgba(255,255,255,.06)' }}>
      <div className="container">
        <div data-reveal style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow" style={{ color: '#00C896' }}>Część II · Stack</span>
          <h2 className="h2" style={{ color: '#fff', marginTop: 16 }}>Co staje się Twoje pierwszego dnia po migracji.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {cards.map((c, i) => (
            <div key={i} data-reveal style={{
              padding: 24, borderRadius: 16,
              background: 'rgba(255,255,255,.03)',
              border: '1px solid rgba(255,255,255,.08)',
              display: 'flex', flexDirection: 'column', gap: 16,
              minHeight: 280,
              '--reveal-d': `${i * 80}ms`,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ font: '500 11px/1 var(--font-mono)', color: c.accent, padding: '4px 8px', borderRadius: 6, background: `${c.accent}22`, letterSpacing: '0.1em' }}>{c.tag}</span>
                <div style={{ width: 6, height: 6, borderRadius: 3, background: c.accent, boxShadow: `0 0 12px ${c.accent}` }} />
              </div>
              <VCMiniViz kind={c.viz} accent={c.accent} />
              <div>
                <h3 style={{ font: '600 20px/1.2 var(--font-head)', color: '#fff', letterSpacing: '-0.015em', margin: 0 }}>{c.title}</h3>
                <p style={{ font: '400 14px/1.5 var(--font-body)', color: 'rgba(255,255,255,.6)', margin: '8px 0 0' }}>{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VCMiniViz({ kind, accent }) {
  if (kind === 'brand') return (
    <svg viewBox="0 0 220 80" style={{ width: '100%' }}>
      <rect x="10" y="20" width="80" height="48" rx="8" fill="rgba(255,255,255,.06)" stroke="rgba(255,255,255,.1)"/>
      <rect x="20" y="32" width="40" height="6" rx="3" fill={accent}/>
      <rect x="20" y="44" width="60" height="3" rx="1.5" fill="rgba(255,255,255,.3)"/>
      <rect x="20" y="52" width="50" height="3" rx="1.5" fill="rgba(255,255,255,.2)"/>
      <rect x="110" y="20" width="100" height="48" rx="8" fill={accent} opacity=".15" stroke={accent} strokeOpacity=".5"/>
      <text x="160" y="48" fontSize="11" fill={accent} textAnchor="middle" fontFamily="var(--font-mono)" fontWeight="700">Twoja Marka</text>
    </svg>
  );
  if (kind === 'data') return (
    <svg viewBox="0 0 220 80" style={{ width: '100%' }}>
      {[0,1,2,3,4,5,6].map((i) => (
        <rect key={i} x={20 + i * 28} y={70 - (i+1) * 8} width="20" height={(i+1) * 8} fill={accent} opacity={.4 + i * 0.08} rx="2"/>
      ))}
      <text x="20" y="14" fontSize="9" fill="rgba(255,255,255,.5)" fontFamily="var(--font-mono)">CRM rośnie z każdym zamówieniem</text>
    </svg>
  );
  if (kind === 'mail') return (
    <svg viewBox="0 0 220 80" style={{ width: '100%' }}>
      {[0,1,2].map((i) => (
        <g key={i}>
          <rect x={10 + i * 12} y={14 + i * 10} width="180" height="50" rx="6" fill="rgba(255,255,255,.05)" stroke="rgba(255,255,255,.1)"/>
        </g>
      ))}
      <rect x="34" y="34" width="60" height="6" rx="3" fill={accent}/>
      <rect x="34" y="46" width="100" height="3" rx="1.5" fill="rgba(255,255,255,.3)"/>
      <rect x="34" y="54" width="80" height="3" rx="1.5" fill="rgba(255,255,255,.2)"/>
      <rect x="158" y="42" width="26" height="14" rx="3" fill={accent}/>
    </svg>
  );
  if (kind === 'ux') return (
    <svg viewBox="0 0 220 80" style={{ width: '100%' }}>
      <rect x="10" y="14" width="200" height="60" rx="8" fill="rgba(255,255,255,.05)" stroke="rgba(255,255,255,.1)"/>
      <circle cx="30" cy="44" r="12" fill={accent} opacity=".25"/>
      <rect x="50" y="34" width="80" height="5" rx="2" fill={accent}/>
      <rect x="50" y="44" width="120" height="3" rx="1.5" fill="rgba(255,255,255,.3)"/>
      <rect x="50" y="52" width="60" height="3" rx="1.5" fill="rgba(255,255,255,.2)"/>
      <rect x="172" y="36" width="30" height="18" rx="4" fill={accent}/>
      <text x="187" y="48" fontSize="9" fill="#fff" textAnchor="middle" fontFamily="var(--font-sans)" fontWeight="700">+1</text>
    </svg>
  );
}

// ───────── Comparison (dark style override) ─────────
function VCComparison() {
  return (
    <section className="section" style={{ borderTop: '1px solid rgba(255,255,255,.06)' }}>
      <div className="container">
        <div data-reveal style={{ marginBottom: 40, maxWidth: 760 }}>
          <span className="eyebrow" style={{ color: '#00C896' }}>Część III · Porównanie</span>
          <h2 className="h2" style={{ color: '#fff', marginTop: 16 }}>Marketplace vs. własny sklep — wymiar po wymiarze</h2>
        </div>
        <VCDarkComparison />
      </div>
    </section>
  );
}

function VCDarkComparison() {
  return (
    <div data-reveal style={{
      borderRadius: 16, overflow: 'hidden',
      background: 'rgba(255,255,255,.03)',
      border: '1px solid rgba(255,255,255,.08)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1.4fr 1.4fr', borderBottom: '1px solid rgba(255,255,255,.08)' }}>
        <div style={{ padding: '20px 28px', background: 'rgba(255,255,255,.02)' }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>Porównanie</div>
          <div style={{ font: '600 16px/1.2 var(--font-sans)', marginTop: 6, color: '#fff' }}>8 wymiarów</div>
        </div>
        <div style={{ padding: '20px 28px' }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
            <MarketplaceMarks.Amazon size={22} color="#fff" /><MarketplaceMarks.Allegro size={22} color="#fff" /><MarketplaceMarks.Ebay size={22} color="#fff" />
          </div>
          <div style={{ font: '600 16px/1.2 var(--font-sans)', marginTop: 8, color: '#fff' }}>Marketplace</div>
        </div>
        <div style={{ padding: '20px 28px', background: 'rgba(61,90,254,.1)' }}>
          <div className="eyebrow" style={{ color: '#3D5AFE' }}>Twoje</div>
          <div style={{ font: '600 16px/1.2 var(--font-sans)', marginTop: 6, color: '#fff' }}>Sklep własny</div>
        </div>
      </div>
      {COMPARISON.map((r, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.2fr 1.4fr 1.4fr', borderBottom: i === COMPARISON.length - 1 ? 'none' : '1px solid rgba(255,255,255,.05)' }}>
          <div style={{ padding: '18px 28px', font: '600 14.5px/1.4 var(--font-sans)', color: 'rgba(255,255,255,.85)', background: 'rgba(255,255,255,.02)' }}>{r.row}</div>
          <div style={{ padding: '18px 28px' }}><VCCell {...r.mp} /></div>
          <div style={{ padding: '18px 28px', background: 'rgba(61,90,254,.04)' }}><VCCell {...r.own} /></div>
        </div>
      ))}
    </div>
  );
}

function VCCell({ v, t }) {
  const color = t === 'ok' ? '#00C896' : t === 'bad' ? '#FF5A6E' : '#F59E0B';
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
      <div style={{ width: 18, height: 18, borderRadius: 9, background: `${color}22`, display: 'grid', placeItems: 'center', flex: '0 0 auto', marginTop: 2 }}>
        {t === 'ok'
          ? <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5l2 2 4-5" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          : t === 'bad'
            ? <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2.5 2.5l5 5M7.5 2.5l-5 5" stroke={color} strokeWidth="2" strokeLinecap="round"/></svg>
            : <span style={{ width: 6, height: 6, borderRadius: 3, background: color }} />}
      </div>
      <span style={{ font: '500 14px/1.4 var(--font-sans)', color: 'rgba(255,255,255,.85)' }}>{v}</span>
    </div>
  );
}

// ───────── FAQ (dark) ─────────
function VCFAQ() {
  const [open, setOpen] = vcUseState(0);
  return (
    <section className="section" style={{ borderTop: '1px solid rgba(255,255,255,.06)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
        <div data-reveal>
          <span className="eyebrow" style={{ color: '#00C896' }}>FAQ</span>
          <h2 className="h2" style={{ color: '#fff', marginTop: 16 }}>Pytania, które słyszymy najczęściej.</h2>
        </div>
        <div data-reveal>
          {FAQS.map((f, i) => (
            <div key={i} style={{ borderBottom: '1px solid rgba(255,255,255,.08)', padding: '22px 0' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ all: 'unset', cursor: 'pointer', width: '100%', display: 'flex', justifyContent: 'space-between', gap: 24, alignItems: 'flex-start' }}>
                <span style={{ font: '600 18px/1.35 var(--font-head)', color: '#fff', letterSpacing: '-0.015em', flex: 1 }}>{f.q}</span>
                <span style={{ width: 28, height: 28, borderRadius: 14, background: open === i ? '#3D5AFE' : 'rgba(255,255,255,.06)', color: '#fff', display: 'grid', placeItems: 'center', transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'all .2s' }}>
                  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
                </span>
              </button>
              <div style={{ maxHeight: open === i ? 240 : 0, overflow: 'hidden', transition: 'max-height .35s cubic-bezier(.2,.7,.2,1), margin-top .25s', marginTop: open === i ? 12 : 0 }}>
                <p style={{ font: '400 15.5px/1.6 var(--font-body)', color: 'rgba(255,255,255,.65)', margin: 0, maxWidth: 720 }}>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── CTA — minimalna, ze sprawdzeniem ─────────
function VCCTA() {
  return (
    <section id="contact" className="section-lg" style={{ borderTop: '1px solid rgba(255,255,255,.06)', position: 'relative', overflow: 'hidden', scrollMarginTop: 80 }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, rgba(61,90,254,.2) 0%, transparent 60%)' }} />
      <div className="container" style={{ position: 'relative' }}>
        <div data-reveal style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <span className="eyebrow" style={{ color: '#3D5AFE' }}>Następny krok</span>
          <h2 className="h2" style={{ color: '#fff', marginTop: 16 }}>Sprawdź, ile odpływa. Zamów wycenę w 48h.</h2>
        </div>
        <div data-reveal style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div className="card" style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', color: '#fff', padding: 0 }}>
            <div style={{ padding: 32 }}>
              <VCCalculator />
            </div>
          </div>
          <div className="card" style={{ background: '#fff', padding: 32 }}>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

// dark-mode calculator (inline simplified)
function VCCalculator() {
  const [gmv, setGmv] = vcUseState(180);
  const [fee, setFee] = vcUseState(14);
  const monthly = Math.round(gmv * 1000 * fee / 100);
  const yearly = monthly * 12;
  return (
    <div>
      <span className="eyebrow" style={{ color: '#00C896' }}>Kalkulator</span>
      <h3 className="h3" style={{ color: '#fff', marginTop: 12 }}>Ile rocznie zostawiasz na marketplace?</h3>
      <p style={{ font: '400 14.5px/1.5 var(--font-sans)', color: 'rgba(255,255,255,.6)', marginTop: 10 }}>
        Suwaki to twoje wartości. Wynik to kwota, którą po migracji możesz wpompować we własną akwizycję.
      </p>

      <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <DarkRange label="GMV miesięczne" val={`${gmv.toLocaleString('pl-PL')} tys. PLN`} v={gmv} on={setGmv} min={20} max={2000} step={10} />
        <DarkRange label="Prowizja marketplace" val={`${fee}%`} v={fee} on={setFee} min={5} max={25} step={1} />
      </div>

      <div style={{ marginTop: 32, padding: 24, borderRadius: 14, background: 'rgba(61,90,254,.15)', border: '1px solid rgba(61,90,254,.3)' }}>
        <div style={{ font: '500 12px/1 var(--font-mono)', color: 'rgba(255,255,255,.6)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Rocznie do marketplace</div>
        <div style={{ font: '700 56px/1 var(--font-head)', letterSpacing: '-0.03em', color: '#fff', marginTop: 12 }}>
          {yearly >= 1_000_000 ? `${(yearly/1_000_000).toFixed(1).replace('.', ',')} mln` : `${Math.round(yearly/1000)} tys.`} PLN
        </div>
        <div style={{ font: '500 13px/1.5 var(--font-sans)', color: 'rgba(255,255,255,.7)', marginTop: 14 }}>
          ~55% tej kwoty możesz przekierować do własnej akwizycji po migracji.
        </div>
      </div>
    </div>
  );
}

function DarkRange({ label, val, v, on, min, max, step }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <span style={{ font: '500 12px/1 var(--font-sans)', color: 'rgba(255,255,255,.55)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{label}</span>
        <span style={{ font: '600 15px/1 var(--font-head)', color: '#fff' }}>{val}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={v} onChange={(e) => on(+e.target.value)} style={{ width: '100%', accentColor: '#3D5AFE' }} />
    </div>
  );
}

Object.assign(window, { VariantC });