// landing.jsx — Viewbot.to Landing Page (V1: Morphing showcase)

const SERVICES = [
  { id: 'live',     name: 'Live Viewers',  desc: 'Real-time concurrent viewers that hold for hours.', icon: <IconViewers size={20}/>, accent: 'oklch(0.88 0.27 142)', stat: { v: '12,847', l: 'delivered now' } },
  { id: 'chat',     name: 'Chat Bots',     desc: 'Smart AI chatters that talk in your stream context.', icon: <IconChat size={20}/>, accent: 'oklch(0.78 0.18 295)', stat: { v: '3,219', l: 'msgs / hour' } },
  { id: 'followers',name: 'Followers',     desc: 'Drip-fed real-looking follower growth.', icon: <IconHeart size={20}/>, accent: 'oklch(0.82 0.2 25)', stat: { v: '+8,400', l: 'this week' } },
  { id: 'clips',    name: 'Clip Views',    desc: 'Viral push for clips on Kick & Twitch.', icon: <IconClip size={20}/>, accent: 'oklch(0.78 0.18 200)', stat: { v: '2.1M', l: 'clips boosted' } },
  { id: 'vod',      name: 'VOD Views',     desc: 'Backlog views for past streams & uploads.', icon: <IconPlay size={20}/>, accent: 'oklch(0.78 0.16 60)', stat: { v: '480K', l: 'VODs delivered' } },
];

function Landing() {
  const [active, setActive] = React.useState(0);
  const [platform, setPlatform] = React.useState('kick');

  React.useEffect(() => {
    const t = setInterval(() => setActive((i) => (i + 1) % SERVICES.length), 3800);
    return () => clearInterval(t);
  }, []);

  const svc = SERVICES[active];

  return (
    <Stage>
      <SiteNav platform={platform} setPlatform={setPlatform}/>

      {/* === HERO === */}
      <section style={{ padding: '48px 80px 48px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px 6px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', marginBottom: 20 }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'oklch(0.88 0.27 142 / 0.2)', border: '1px solid oklch(0.88 0.27 142 / 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'oklch(0.88 0.27 142)' }}><IconBolt size={11}/></span>
              <span style={{ fontSize: 12, color: 'var(--vb-fg-1)', fontWeight: 500 }}>Powering 14,200+ creators across Kick & Twitch</span>
            </div>

            <h1 className="vb-display-1 vb-grad-text" style={{ marginBottom: 18 }}>
              Streams that<br/>actually <em style={{ fontStyle: 'italic', fontWeight: 700, color: 'var(--vb-fg-0)' }}>land</em>.
            </h1>

            <p className="vb-body" style={{ fontSize: 18, maxWidth: 480, marginBottom: 28, color: 'var(--vb-fg-1)' }}>
              Premium viewer, chat and engagement services for Kick and Twitch.
              Deliver in seconds. Hold for hours. Indistinguishable from organic.
            </p>

            <div style={{ display: 'flex', gap: 12, marginBottom: 36 }}>
              <Btn variant="primary" size="lg" iconRight={<IconArrow size={16}/>} href="pricing.html">Start a stream boost</Btn>
              <Btn variant="glass" size="lg" href="pricing.html">View pricing</Btn>
            </div>

            <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em' }}>
                  <LiveCounter base={847291} jitter={4} interval={1100}/>
                </span>
                <span className="vb-caption">viewers delivered today</span>
              </div>
              <div className="vb-divider-v"/>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em' }}>99.4<span style={{ fontSize: 18, color: 'var(--vb-fg-2)' }}>%</span></span>
                <span className="vb-caption">stream hold rate</span>
              </div>
              <div className="vb-divider-v"/>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em' }}>~8s</span>
                <span className="vb-caption">avg time to start</span>
              </div>
            </div>
          </div>

          <ShowcaseCard svc={svc} active={active} setActive={setActive} platform={platform}/>
        </div>
      </section>

      {/* === LIVE TICKER === */}
      <section style={{ padding: '0 0 56px' }}>
        <Glass soft style={{ margin: '0 80px', padding: '20px 0', borderRadius: 22 }}>
          <div className="vb-marquee">
            <div className="vb-marquee-inner">
              {[...Array(2)].flatMap((_, k) => [
                ['kick', 'xQc-style variety stream', '+2,400 viewers', 142],
                ['twitch', 'Just Chatting · ENG', '+850 viewers', 295],
                ['kick', 'Slot night · live', '+5,100 viewers', 142],
                ['twitch', 'Valorant ranked', '+1,200 viewers', 295],
                ['kick', 'IRL · Tokyo walk', '+3,800 viewers', 142],
                ['twitch', 'Fortnite · creative', '+960 viewers', 295],
                ['kick', 'Late night chat', '+1,750 viewers', 142],
              ].map((row, i) => <TickerRow key={`${k}-${i}`} platform={row[0]} title={row[1]} delta={row[2]} hue={row[3]}/>))}
            </div>
          </div>
        </Glass>
      </section>

      {/* === SERVICES GRID === */}
      <section id="services" style={{ padding: '8px 80px 64px', maxWidth: 1440, margin: '0 auto', scrollMarginTop: 90 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>What we deliver</span>
            <h2 className="vb-display-3 vb-grad-text">Five surfaces.<br/>One quiet engine.</h2>
          </div>
          <p style={{ maxWidth: 360, color: 'var(--vb-fg-2)', fontSize: 15, lineHeight: 1.55 }}>
            Every service runs on the same residential network with rotating fingerprints, real watch sessions and per-stream pacing.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {SERVICES.slice(0, 3).map((s) => <ServiceCard key={s.id} svc={s}/>)}
          <div style={{ gridColumn: 'span 3', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {SERVICES.slice(3).map((s) => <ServiceCard key={s.id} svc={s} wide/>)}
          </div>
        </div>
      </section>

      {/* === HOW IT WORKS === */}
      <section style={{ padding: '0 80px 80px', maxWidth: 1440, margin: '0 auto' }}>
        <HowItWorks/>
      </section>

      {/* === GLOBAL NETWORK === */}
      <section id="network" style={{ padding: '0 80px 80px', maxWidth: 1440, margin: '0 auto', scrollMarginTop: 90 }}>
        <NetworkSection/>
      </section>

      {/* === COMPARISON === */}
      <section style={{ padding: '0 80px 80px', maxWidth: 1440, margin: '0 auto' }}>
        <ComparisonSection/>
      </section>

      {/* === TESTIMONIALS === */}
      <section style={{ padding: '0 80px 80px', maxWidth: 1440, margin: '0 auto' }}>
        <Testimonials/>
      </section>

      {/* === TRUST BAND === */}
      <section id="trust" style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto', scrollMarginTop: 90 }}>
        <Glass style={{ padding: 36, borderRadius: 32 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            <TrustItem icon={<IconShield/>} title="Anti-detection" desc="Residential IPs from 180+ regions, rotating UA + viewport fingerprints, real session tokens."/>
            <TrustItem icon={<IconClock/>} title="On-demand & scheduled" desc="Spin up instantly or queue boosts to fire at stream-start. No babysitting."/>
            <TrustItem icon={<IconLock/>} title="Encrypted dashboard" desc="No password storage. OAuth-only sessions. Your account never touches our infra."/>
            <TrustItem icon={<IconBolt/>} title="Refill guarantee" desc="If viewers drop below your target during the window, we top them up automatically."/>
          </div>
        </Glass>
      </section>

      {/* === FAQ === */}
      <section style={{ padding: '0 80px 80px', maxWidth: 1440, margin: '0 auto' }}>
        <FaqSection/>
      </section>

      {/* === CTA === */}
      <section id="cta" style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto', scrollMarginTop: 90 }}>
        <Glass style={{ padding: '48px 64px', borderRadius: 32, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 100% at 80% 50%, oklch(0.62 0.23 295 / 0.25), transparent 70%), radial-gradient(ellipse 50% 80% at 0% 50%, oklch(0.88 0.27 142 / 0.18), transparent 70%)', pointerEvents: 'none' }}/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>
            <div>
              <h2 className="vb-display-3 vb-grad-text" style={{ marginBottom: 12 }}>Boost your next stream<br/>in under a minute.</h2>
              <p className="vb-body" style={{ fontSize: 16, maxWidth: 460 }}>Plug in your channel, pick a plan, watch the graph climb. Unlimited monthly. Cancel anytime.</p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
              <Btn variant="primary" size="lg" iconRight={<IconArrow size={16}/>} href="pricing.html">Get started</Btn>
              <Btn variant="glass" size="lg" href="mailto:hello@viewbot.to">Talk to a human</Btn>
            </div>
          </div>
        </Glass>
      </section>

      <SiteFooter/>
    </Stage>
  );
}

function ShowcaseCard({ svc, active, setActive, platform }) {
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => {
      setProgress((p) => (p >= 100 ? 32 : Math.min(100, p + 1.2)));
    }, 140);
    return () => clearInterval(t);
  }, []);

  const targetViewers = 2500;
  const currentViewers = Math.round(targetViewers * (progress / 100));
  const accent = platform === 'kick' ? 'oklch(0.88 0.27 142)' : 'oklch(0.62 0.23 295)';

  const points = Array.from({ length: 40 }, (_, i) => {
    const x = i / 39;
    const ramp = Math.min(1, (x * 1.6 + (progress / 100) * 0.4));
    const noise = Math.sin(i * 0.7 + progress * 0.04) * 0.04;
    return Math.max(0, ramp + noise) * 100;
  });

  return (
    <div style={{ position: 'relative', height: 580 }}>
      <div style={{ position: 'absolute', inset: -40, background: `radial-gradient(circle at 50% 50%, ${accent.replace(')', ' / 0.22)')}, transparent 60%)`, transition: 'background 0.6s ease', pointerEvents: 'none' }}/>

      <Glass style={{ position: 'relative', height: '100%', padding: 28, borderRadius: 32, display: 'flex', flexDirection: 'column' }}>
        <div className="vb-row" style={{ marginBottom: 20 }}>
          <div className="vb-row" style={{ gap: 8 }}>
            <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em', color: 'var(--vb-fg-3)', textTransform: 'uppercase' }}>Boost console</span>
            <span style={{ width: 3, height: 3, borderRadius: 2, background: 'rgba(255,255,255,0.2)' }}/>
            <span className="vb-mono" style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>VB-2042-8C19</span>
          </div>
          <div className="vb-spacer"/>
          <span className="vb-live-pill"><span className="vb-dot vb-dot-pulse"/>LIVE</span>
        </div>

        <div className="vb-row" style={{ gap: 12, padding: '14px 16px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 14, marginBottom: 16 }}>
          <Avatar name="P" size={40} hue={platform === 'kick' ? 142 : 295}/>
          <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
            <div className="vb-row" style={{ gap: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>pump_it_up_live</span>
              <PlatformPill platform={platform}/>
            </div>
            <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>Variety · ENG · started 01:24:18 ago</span>
          </div>
          <div className="vb-col" style={{ alignItems: 'flex-end' }}>
            <span className="vb-mono" style={{ fontSize: 11, color: accent, fontWeight: 600 }}>{Math.round(progress)}%</span>
            <span style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>ramped</span>
          </div>
        </div>

        <div style={{ position: 'relative', borderRadius: 18, overflow: 'hidden', padding: 18, marginBottom: 14, background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))', border: '1px solid rgba(255,255,255,0.06)' }}>
          <div className="vb-row" style={{ alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
            <span className="vb-caption">Concurrent viewers</span>
            <span className="vb-spacer"/>
            <span style={{ fontSize: 11, color: 'oklch(0.85 0.18 142)', display: 'flex', alignItems: 'center', gap: 4 }}>
              <IconTrend size={11}/>+{Math.round(progress * 1.3)}/min
            </span>
          </div>
          <div className="vb-row" style={{ alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
            <span className="vb-mono" style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--vb-fg-0)' }}>{fmtNum(currentViewers)}</span>
            <span className="vb-mono" style={{ fontSize: 14, color: 'var(--vb-fg-3)' }}>/ {fmtNum(targetViewers)}</span>
          </div>

          <svg width="100%" height="60" viewBox="0 0 400 60" preserveAspectRatio="none" style={{ display: 'block', marginTop: 4 }}>
            <defs>
              <linearGradient id="rampFill" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={accent} stopOpacity="0.5"/>
                <stop offset="100%" stopColor={accent} stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d={`M0,${60 - points[0] * 0.55} ${points.map((p, i) => `L${(i/39)*400},${60 - p * 0.55}`).join(' ')} L400,60 L0,60 Z`} fill="url(#rampFill)"/>
            <path d={`M0,${60 - points[0] * 0.55} ${points.map((p, i) => `L${(i/39)*400},${60 - p * 0.55}`).join(' ')}`} fill="none" stroke={accent} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            <circle cx={(progress/100)*400 * 0.95} cy={60 - points[Math.floor((progress/100)*39)] * 0.55} r="3.5" fill={accent}/>
            <circle cx={(progress/100)*400 * 0.95} cy={60 - points[Math.floor((progress/100)*39)] * 0.55} r="8" fill={accent} opacity="0.25"/>
          </svg>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 14 }}>
          <MiniStat icon={<IconChat size={13}/>} label="Chat msgs" value={`${Math.round(progress * 2.4)}/min`} accent="oklch(0.78 0.18 295)"/>
          <MiniStat icon={<IconHeart size={13}/>} label="New followers" value={`+${Math.round(progress * 0.34)}`} accent="oklch(0.82 0.2 25)"/>
          <MiniStat icon={<IconGlobe size={13}/>} label="IPs active" value={fmtNum(Math.round(progress * 24))} accent="oklch(0.85 0.18 200)"/>
          <MiniStat icon={<IconShield size={13}/>} label="Detection score" value="0.02" accent="oklch(0.88 0.27 142)" suffix="safe"/>
        </div>

        <div style={{ flex: 1, padding: '12px 14px', background: 'rgba(0,0,0,0.25)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: 12, fontFamily: 'var(--vb-font-mono)', fontSize: 11, lineHeight: 1.6, overflow: 'hidden', position: 'relative' }}>
          <div className="vb-row" style={{ marginBottom: 6 }}>
            <span style={{ color: 'var(--vb-fg-3)', fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Session log</span>
            <span className="vb-spacer"/>
            <span style={{ color: 'oklch(0.85 0.18 142)', fontSize: 9, display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 5, height: 5, borderRadius: 2.5, background: 'oklch(0.85 0.18 142)', boxShadow: '0 0 6px oklch(0.85 0.18 142)' }}/> streaming
            </span>
          </div>
          <SessionLog progress={progress} accent={accent}/>
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 24, background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.5))', pointerEvents: 'none' }}/>
        </div>
      </Glass>
    </div>
  );
}

function MiniStat({ icon, label, value, accent, suffix }) {
  return (
    <div style={{ padding: '10px 12px', background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: 10 }}>
      <div className="vb-row" style={{ gap: 6, marginBottom: 4, color: accent }}>{icon}<span style={{ fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>{label}</span></div>
      <div className="vb-row" style={{ alignItems: 'baseline', gap: 4 }}>
        <span className="vb-mono" style={{ fontSize: 16, fontWeight: 600, color: 'var(--vb-fg-0)' }}>{value}</span>
        {suffix && <span style={{ fontSize: 9, color: accent, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{suffix}</span>}
      </div>
    </div>
  );
}

function SessionLog({ progress, accent }) {
  const regions = ['DE-FRA', 'US-NYC', 'BR-SAO', 'JP-TYO', 'GB-LON', 'NL-AMS', 'CA-TOR', 'AU-SYD', 'FR-PAR', 'IN-MUM', 'SG-SIN', 'ES-MAD'];
  const [lines, setLines] = React.useState(() => Array.from({ length: 4 }, (_, i) => ({
    id: i, region: regions[i % regions.length], ms: 80 + Math.round(Math.random() * 200), status: 'connected',
  })));
  React.useEffect(() => {
    const t = setInterval(() => {
      setLines((prev) => {
        const next = [...prev];
        next.unshift({
          id: Date.now() + Math.random(),
          region: regions[Math.floor(Math.random() * regions.length)],
          ms: 60 + Math.round(Math.random() * 240),
          status: Math.random() > 0.85 ? 'verifying' : 'connected',
        });
        return next.slice(0, 4);
      });
    }, 1100);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="vb-col" style={{ gap: 2 }}>
      {lines.map((l, i) => (
        <div key={l.id} className="vb-row" style={{ gap: 8, opacity: 1 - i * 0.18, transition: 'opacity 0.4s' }}>
          <span style={{ color: l.status === 'connected' ? accent : 'oklch(0.82 0.18 75)', width: 8 }}>{l.status === 'connected' ? '●' : '◐'}</span>
          <span style={{ color: 'var(--vb-fg-2)', width: 60 }}>{l.region}</span>
          <span style={{ color: 'var(--vb-fg-3)' }}>session.join</span>
          <span className="vb-spacer"/>
          <span style={{ color: 'var(--vb-fg-3)' }}>{l.ms}ms</span>
          <span style={{ color: accent }}>{l.status === 'connected' ? 'OK' : '...'}</span>
        </div>
      ))}
    </div>
  );
}

function TickerRow({ platform, title, delta, hue }) {
  return (
    <div className="vb-row" style={{ gap: 10, padding: '0 8px', flexShrink: 0 }}>
      <PlatformPill platform={platform}/>
      <span style={{ fontSize: 13, color: 'var(--vb-fg-1)', fontWeight: 500 }}>{title}</span>
      <span className="vb-mono" style={{ fontSize: 12, color: `oklch(0.85 0.16 ${hue})`, fontWeight: 600 }}>{delta}</span>
      <span style={{ width: 4, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.2)' }}/>
    </div>
  );
}

function ServiceCard({ svc, wide }) {
  return (
    <Glass className="vb-lift" style={{ padding: 28, borderRadius: 24, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, background: `radial-gradient(circle, ${svc.accent.replace(')', ' / 0.2)')}, transparent 70%)`, pointerEvents: 'none' }}/>
      <div style={{ position: 'relative' }}>
        <div style={{ width: 40, height: 40, borderRadius: 11, background: svc.accent.replace(')', ' / 0.14)'), border: `1px solid ${svc.accent.replace(')', ' / 0.28)')}`, color: svc.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>{svc.icon}</div>
        <h3 className="vb-h3" style={{ marginBottom: 6 }}>{svc.name}</h3>
        <p style={{ color: 'var(--vb-fg-2)', fontSize: 14, lineHeight: 1.5, marginBottom: 16 }}>{svc.desc}</p>
        <div className="vb-row" style={{ justifyContent: 'space-between' }}>
          <span className="vb-mono" style={{ color: svc.accent, fontSize: 13, fontWeight: 600 }}>{svc.stat.v} <span style={{ color: 'var(--vb-fg-3)', fontWeight: 400 }}>{svc.stat.l}</span></span>
          <span style={{ color: 'var(--vb-fg-2)' }}><IconArrow size={16}/></span>
        </div>
      </div>
    </Glass>
  );
}

function TrustItem({ icon, title, desc }) {
  return (
    <div className="vb-col" style={{ gap: 12 }}>
      <span style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'var(--vb-fg-0)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</span>
      <h4 className="vb-h4">{title}</h4>
      <p style={{ color: 'var(--vb-fg-2)', fontSize: 13, lineHeight: 1.55, margin: 0 }}>{desc}</p>
    </div>
  );
}

// ─── HOW IT WORKS ─────────────────────────────────────────────────
function HowItWorks() {
  const [step, setStep] = React.useState(0);
  const STEPS = [
    {
      num: '01', title: 'Connect your channel', kicker: '8 seconds',
      desc: 'Paste your Kick or Twitch handle. We verify it\'s live, pull stream metadata, and detect platform region automatically.',
      detail: { label: 'Detected', value: 'pump_it_up_live · Variety · ENG · 1080p60 · DE region' },
    },
    {
      num: '02', title: 'Configure the boost', kicker: 'Drag, done',
      desc: 'Pick a service, dial in viewer count and duration, choose ramp shape (instant, gradual, organic curve). Pricing updates live.',
      detail: { label: 'Boost', value: '2,500 viewers · 4h · organic-curve · with chat' },
    },
    {
      num: '03', title: 'Pay how you want', kicker: 'No KYC',
      desc: 'Card, USDT, BTC, ETH, or wire. Top up your balance once and fire boosts on-demand without re-entering payment.',
      detail: { label: 'Method', value: 'USDT (TRC20) · 0% fee · same-block confirmation' },
    },
    {
      num: '04', title: 'Watch it land', kicker: '~12s to start',
      desc: 'Sessions fan out across our residential network. Real-time dashboard shows IPs joining, chat warming up, viewer count holding.',
      detail: { label: 'Status', value: 'LIVE · 2,487 / 2,500 viewers · 0.02 detection score' },
    },
  ];

  React.useEffect(() => {
    const t = setInterval(() => setStep((s) => (s + 1) % STEPS.length), 4500);
    return () => clearInterval(t);
  }, []);

  return (
    <div>
      <div className="vb-row" style={{ alignItems: 'flex-end', marginBottom: 36, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>How it works</span>
          <h2 className="vb-display-3 vb-grad-text">From idle to ranked<br/>in under a minute.</h2>
        </div>
        <span className="vb-spacer"/>
        <p style={{ maxWidth: 360, color: 'var(--vb-fg-2)', fontSize: 15, lineHeight: 1.55 }}>
          Built so you can boost a stream between two scenes. Click play to walk through each step.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 24, alignItems: 'stretch' }}>
        <div className="vb-col" style={{ gap: 8 }}>
          {STEPS.map((s, i) => (
            <button key={i} onClick={() => setStep(i)} style={{
              textAlign: 'left', padding: '20px 22px', borderRadius: 18,
              background: step === i ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.02)',
              border: step === i ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(255,255,255,0.04)',
              cursor: 'pointer', color: 'inherit', fontFamily: 'inherit',
              transition: 'all 0.3s ease', position: 'relative', overflow: 'hidden',
            }}>
              {step === i && (
                <span style={{ position: 'absolute', left: 0, top: 16, bottom: 16, width: 2, background: 'linear-gradient(180deg, oklch(0.88 0.27 142), oklch(0.62 0.23 295))', borderRadius: 1 }}/>
              )}
              <div className="vb-row" style={{ gap: 16, alignItems: 'flex-start' }}>
                <span className="vb-mono" style={{ fontSize: 12, color: step === i ? 'oklch(0.88 0.27 142)' : 'var(--vb-fg-3)', fontWeight: 600, letterSpacing: '0.08em', flexShrink: 0, marginTop: 2 }}>{s.num}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="vb-row" style={{ gap: 10, marginBottom: step === i ? 6 : 0, alignItems: 'baseline' }}>
                    <h4 style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em', color: step === i ? 'var(--vb-fg-0)' : 'var(--vb-fg-1)', margin: 0 }}>{s.title}</h4>
                    <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{s.kicker}</span>
                  </div>
                  {step === i && <p style={{ fontSize: 13, color: 'var(--vb-fg-2)', lineHeight: 1.55, margin: 0 }}>{s.desc}</p>}
                </div>
              </div>
            </button>
          ))}
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', inset: -24, background: 'radial-gradient(ellipse at 50% 30%, oklch(0.62 0.23 295 / 0.18), transparent 60%)', pointerEvents: 'none' }}/>
          <Glass style={{ position: 'relative', height: '100%', minHeight: 380, padding: 32, borderRadius: 28, display: 'flex', flexDirection: 'column' }}>
            <div className="vb-row" style={{ marginBottom: 24 }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em', color: 'var(--vb-fg-3)', textTransform: 'uppercase' }}>Preview · step {STEPS[step].num}</span>
              <span className="vb-spacer"/>
              <div className="vb-row" style={{ gap: 4 }}>
                {STEPS.map((_, i) => (
                  <button key={i} onClick={() => setStep(i)}
                    style={{ width: i === step ? 22 : 6, height: 6, borderRadius: 3, border: 'none',
                      background: i === step ? 'oklch(0.88 0.27 142)' : 'rgba(255,255,255,0.16)',
                      cursor: 'pointer', transition: 'all 0.4s cubic-bezier(0.34,1.56,0.64,1)' }}/>
                ))}
              </div>
            </div>
            <StepVisual step={step}/>
            <div className="vb-spacer"/>
            <div style={{ marginTop: 20, padding: '14px 16px', background: 'rgba(0,0,0,0.25)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12 }}>
              <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'block', marginBottom: 4 }}>{STEPS[step].detail.label}</span>
              <span className="vb-mono" style={{ fontSize: 13, color: 'var(--vb-fg-1)' }}>{STEPS[step].detail.value}</span>
            </div>
          </Glass>
        </div>
      </div>
    </div>
  );
}

function StepVisual({ step }) {
  if (step === 0) {
    return (
      <div className="vb-col" style={{ gap: 12 }}>
        <div className="vb-row" style={{ gap: 0, padding: 4, background: 'rgba(0,0,0,0.3)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14 }}>
          <div className="vb-row" style={{ flex: 1, padding: '8px 14px', gap: 8 }}>
            <IconLink size={14} style={{ color: 'var(--vb-fg-3)' }}/>
            <span className="vb-mono" style={{ fontSize: 13, color: 'var(--vb-fg-1)' }}>kick.com/pump_it_up_live</span>
            <span className="vb-spacer"/>
            <span style={{ fontSize: 10, color: 'oklch(0.85 0.18 142)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 5, height: 5, borderRadius: 3, background: 'oklch(0.85 0.18 142)' }}/>VERIFIED
            </span>
          </div>
          <Btn variant="primary" size="sm" iconRight={<IconArrow size={12}/>}>Connect</Btn>
        </div>
        <div className="vb-row" style={{ gap: 12, padding: '14px 16px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 14 }}>
          <Avatar name="P" size={40} hue={142}/>
          <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
            <div className="vb-row" style={{ gap: 8 }}><span style={{ fontSize: 14, fontWeight: 600 }}>pump_it_up_live</span><PlatformPill platform="kick"/></div>
            <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>Variety · ENG · live now</span>
          </div>
          <span className="vb-live-pill"><span className="vb-dot vb-dot-pulse"/>LIVE</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[['Region', 'DE-FRA'], ['Bitrate', '6,200 kbps'], ['Started', '01:24 ago']].map(([l, v]) => (
            <div key={l} style={{ padding: '10px 12px', background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: 10 }}>
              <span style={{ fontSize: 9, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', display: 'block', marginBottom: 4 }}>{l}</span>
              <span className="vb-mono" style={{ fontSize: 13, fontWeight: 600 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (step === 1) {
    return (
      <div className="vb-col" style={{ gap: 14 }}>
        <div>
          <div className="vb-row" style={{ marginBottom: 6 }}>
            <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>Concurrent viewers</span>
            <span className="vb-spacer"/>
            <span className="vb-mono" style={{ fontSize: 13, fontWeight: 600 }}>2,500</span>
          </div>
          <div style={{ position: 'relative', height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
            <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '62%', background: 'linear-gradient(90deg, oklch(0.88 0.27 142), oklch(0.62 0.23 295))', borderRadius: 3, boxShadow: '0 0 10px oklch(0.88 0.27 142 / 0.6)' }}/>
            <div style={{ position: 'absolute', left: '62%', top: -5, width: 16, height: 16, borderRadius: 8, background: 'oklch(0.88 0.27 142)', boxShadow: '0 0 14px oklch(0.88 0.27 142), 0 0 0 4px rgba(0,0,0,0.4) inset' }}/>
          </div>
        </div>
        <div>
          <div className="vb-row" style={{ marginBottom: 6 }}>
            <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>Duration</span>
            <span className="vb-spacer"/>
            <span className="vb-mono" style={{ fontSize: 13, fontWeight: 600 }}>4 hours</span>
          </div>
          <div style={{ position: 'relative', height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
            <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '40%', background: 'linear-gradient(90deg, oklch(0.7 0.23 295), oklch(0.62 0.23 295))', borderRadius: 3 }}/>
            <div style={{ position: 'absolute', left: '40%', top: -5, width: 16, height: 16, borderRadius: 8, background: 'oklch(0.7 0.23 295)', boxShadow: '0 0 14px oklch(0.7 0.23 295)' }}/>
          </div>
        </div>
        <div>
          <span style={{ fontSize: 11, color: 'var(--vb-fg-3)', display: 'block', marginBottom: 8 }}>Ramp shape</span>
          <div className="vb-row" style={{ gap: 6 }}>
            {[
              { label: 'Instant', d: 'M0,20 L80,20' },
              { label: 'Gradual', d: 'M0,20 L20,18 L40,14 L60,8 L80,2' },
              { label: 'Organic', active: true, d: 'M0,20 Q20,18 35,12 T80,2' },
            ].map((r) => (
              <div key={r.label} style={{ flex: 1, padding: 10, background: r.active ? 'oklch(0.88 0.27 142 / 0.1)' : 'rgba(255,255,255,0.025)', border: r.active ? '1px solid oklch(0.88 0.27 142 / 0.3)' : '1px solid rgba(255,255,255,0.05)', borderRadius: 10 }}>
                <svg width="100%" height="22" viewBox="0 0 80 22"><path d={r.d} fill="none" stroke={r.active ? 'oklch(0.88 0.27 142)' : 'rgba(255,255,255,0.4)'} strokeWidth="1.6" strokeLinecap="round"/></svg>
                <span style={{ fontSize: 10, color: r.active ? 'oklch(0.88 0.27 142)' : 'var(--vb-fg-2)', display: 'block', marginTop: 4, textAlign: 'center', fontWeight: r.active ? 600 : 400 }}>{r.label}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="vb-row" style={{ padding: '12px 14px', background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: 12 }}>
          <span style={{ fontSize: 12, color: 'var(--vb-fg-2)' }}>Add chat (smart AI chatters)</span>
          <span className="vb-spacer"/>
          <span style={{ width: 32, height: 18, borderRadius: 9, background: 'oklch(0.88 0.27 142)', position: 'relative' }}>
            <span style={{ position: 'absolute', right: 2, top: 2, width: 14, height: 14, borderRadius: 7, background: '#fff' }}/>
          </span>
        </div>
        <div className="vb-row" style={{ alignItems: 'baseline', padding: '14px 16px', background: 'linear-gradient(135deg, oklch(0.88 0.27 142 / 0.1), oklch(0.62 0.23 295 / 0.1))', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 12 }}>
          <span style={{ fontSize: 11, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Total</span>
          <span className="vb-spacer"/>
          <span className="vb-mono" style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>$48.<span style={{ fontSize: 14, color: 'var(--vb-fg-2)' }}>00</span></span>
        </div>
      </div>
    );
  }
  if (step === 2) {
    const methods = [
      { name: 'USDT', sub: 'TRC20 · 0% fee', glyph: '₮', hue: 142, active: true },
      { name: 'Bitcoin', sub: 'On-chain', glyph: '₿', hue: 50 },
      { name: 'Ethereum', sub: 'ERC20', glyph: 'Ξ', hue: 250 },
      { name: 'Card', sub: 'Visa / MC', glyph: '◰', hue: 200 },
    ];
    return (
      <div className="vb-col" style={{ gap: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {methods.map((m) => (
            <div key={m.name} className="vb-row" style={{
              gap: 12, padding: '12px 14px', borderRadius: 12,
              background: m.active ? 'oklch(0.88 0.27 142 / 0.1)' : 'rgba(255,255,255,0.025)',
              border: m.active ? '1px solid oklch(0.88 0.27 142 / 0.3)' : '1px solid rgba(255,255,255,0.05)',
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: 9,
                background: `linear-gradient(135deg, oklch(0.7 0.18 ${m.hue}), oklch(0.5 0.2 ${m.hue + 40}))`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
                fontSize: 14, fontWeight: 700, fontFamily: 'var(--vb-font-mono)',
              }}>{m.glyph}</span>
              <div className="vb-col" style={{ minWidth: 0, flex: 1 }}>
                <span style={{ fontSize: 12, fontWeight: 600 }}>{m.name}</span>
                <span style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>{m.sub}</span>
              </div>
              {m.active && <IconCheck size={14} style={{ color: 'oklch(0.88 0.27 142)' }}/>}
            </div>
          ))}
        </div>
        <div className="vb-row" style={{ padding: '14px 16px', background: 'rgba(0,0,0,0.3)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12 }}>
          <div className="vb-col" style={{ flex: 1, gap: 4 }}>
            <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Send to</span>
            <span className="vb-mono" style={{ fontSize: 11, color: 'var(--vb-fg-1)' }}>TXyHk29mPq3fZv7…ALn</span>
          </div>
          <Btn variant="glass" size="sm" icon={<IconCopy size={11}/>}>Copy</Btn>
        </div>
        <div className="vb-row" style={{ gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: 4, background: 'oklch(0.85 0.18 142)', boxShadow: '0 0 8px oklch(0.85 0.18 142)' }}/>
          <span style={{ fontSize: 11, color: 'var(--vb-fg-2)' }}>Confirmed in <span className="vb-mono" style={{ color: 'oklch(0.88 0.27 142)' }}>1.2s</span> · balance updated</span>
        </div>
      </div>
    );
  }
  return (
    <div className="vb-col" style={{ gap: 14 }}>
      <div className="vb-row" style={{ gap: 8 }}>
        <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>Status</span>
        <span className="vb-live-pill"><span className="vb-dot vb-dot-pulse"/>LIVE · STREAMING</span>
        <span className="vb-spacer"/>
        <span className="vb-mono" style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>uptime 00:14:22</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {[
          { l: 'Viewers', v: <LiveCounter base={2487} jitter={6} interval={1100}/>, c: 'oklch(0.88 0.27 142)' },
          { l: 'IPs active', v: '1,418', c: 'oklch(0.78 0.18 200)' },
          { l: 'Detection', v: '0.02', c: 'oklch(0.88 0.27 142)' },
        ].map((s, i) => (
          <div key={i} style={{ padding: '12px 14px', background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: 10 }}>
            <span style={{ fontSize: 9, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', display: 'block', marginBottom: 4 }}>{s.l}</span>
            <span className="vb-mono" style={{ fontSize: 18, fontWeight: 600, color: s.c, letterSpacing: '-0.01em' }}>{s.v}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: 16, background: 'rgba(0,0,0,0.3)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12 }}>
        <div className="vb-row" style={{ marginBottom: 10 }}>
          <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Ramp curve · last 14m</span>
          <span className="vb-spacer"/>
          <span style={{ fontSize: 10, color: 'oklch(0.85 0.18 142)' }}>+178/min</span>
        </div>
        <svg width="100%" height="60" viewBox="0 0 320 60" preserveAspectRatio="none">
          <defs>
            <linearGradient id="liveRampFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.88 0.27 142)" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="oklch(0.88 0.27 142)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0,55 Q40,52 70,42 T140,18 T220,8 L320,4 L320,60 L0,60 Z" fill="url(#liveRampFill)"/>
          <path d="M0,55 Q40,52 70,42 T140,18 T220,8 L320,4" fill="none" stroke="oklch(0.88 0.27 142)" strokeWidth="1.6" strokeLinecap="round"/>
          <circle cx="320" cy="4" r="3.5" fill="oklch(0.88 0.27 142)"/>
          <circle cx="320" cy="4" r="9" fill="oklch(0.88 0.27 142)" opacity="0.25"/>
        </svg>
      </div>
    </div>
  );
}

// ─── GLOBAL NETWORK ───────────────────────────────────────────────
function NetworkSection() {
  const REGIONS = [
    { code: 'US-NYC', city: 'New York', x: 27, y: 30, count: 2840000, hue: 200 },
    { code: 'US-LAX', city: 'Los Angeles', x: 18, y: 32, count: 2120000, hue: 200 },
    { code: 'BR-SAO', city: 'São Paulo', x: 33, y: 56, count: 980000, hue: 60 },
    { code: 'GB-LON', city: 'London', x: 48, y: 26, count: 1840000, hue: 142 },
    { code: 'DE-FRA', city: 'Frankfurt', x: 51, y: 28, count: 2410000, hue: 142 },
    { code: 'NL-AMS', city: 'Amsterdam', x: 50, y: 26, count: 1280000, hue: 142 },
    { code: 'JP-TYO', city: 'Tokyo', x: 88, y: 32, count: 1640000, hue: 295 },
    { code: 'SG-SIN', city: 'Singapore', x: 80, y: 50, count: 920000, hue: 295 },
    { code: 'AU-SYD', city: 'Sydney', x: 89, y: 62, count: 480000, hue: 25 },
    { code: 'IN-MUM', city: 'Mumbai', x: 73, y: 40, count: 1320000, hue: 25 },
    { code: 'CA-TOR', city: 'Toronto', x: 25, y: 26, count: 740000, hue: 200 },
    { code: 'FR-PAR', city: 'Paris', x: 49, y: 28, count: 1180000, hue: 142 },
  ];
  const [hovered, setHovered] = React.useState(3);

  return (
    <Glass style={{ padding: 36, borderRadius: 32, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 80% 60% at 50% 50%, oklch(0.62 0.23 295 / 0.12), transparent 70%)', pointerEvents: 'none' }}/>
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 40, alignItems: 'center' }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Network</span>
          <h2 className="vb-display-3 vb-grad-text" style={{ marginBottom: 16 }}>20M+ residential IPs.<br/>180+ regions.</h2>
          <p style={{ color: 'var(--vb-fg-2)', fontSize: 15, lineHeight: 1.6, marginBottom: 24 }}>
            We don't lease datacenter ranges. Every viewer comes from a real ISP — Comcast, Vodafone, NTT, Bell — distributed across the globe so your audience graph looks like the audience you actually want.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 20 }}>
            <NetStat label="Residential IPs" value="20.4M+" accent="oklch(0.88 0.27 142)"/>
            <NetStat label="Countries" value="142" accent="oklch(0.62 0.23 295)"/>
            <NetStat label="ASN diversity" value="8,400+" accent="oklch(0.78 0.18 200)"/>
            <NetStat label="Rotation" value="6 min avg" accent="oklch(0.82 0.2 25)"/>
          </div>
          <Btn variant="glass" iconRight={<IconArrow size={13}/>}>Network details</Btn>
        </div>

        <div style={{ position: 'relative', aspectRatio: '16 / 9', background: 'rgba(0,0,0,0.25)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 20, overflow: 'hidden' }}>
          <DottedMap/>
          {REGIONS.map((r, i) => {
            const active = hovered === i;
            return (
              <button key={r.code} onMouseEnter={() => setHovered(i)} style={{
                position: 'absolute', left: `${r.x}%`, top: `${r.y}%`, transform: 'translate(-50%, -50%)',
                width: 10, height: 10, borderRadius: 5,
                background: `oklch(0.78 0.18 ${r.hue})`,
                border: 'none', padding: 0, cursor: 'pointer',
                boxShadow: active ? `0 0 0 4px oklch(0.78 0.18 ${r.hue} / 0.3), 0 0 20px oklch(0.78 0.18 ${r.hue})` : `0 0 8px oklch(0.78 0.18 ${r.hue})`,
                zIndex: active ? 10 : 1,
              }}>
                <span style={{ position: 'absolute', inset: -6, borderRadius: 11, border: `1px solid oklch(0.78 0.18 ${r.hue} / 0.5)`, animation: 'vb-ping 2s ease-out infinite' }}/>
              </button>
            );
          })}
          <div style={{ position: 'absolute', bottom: 16, left: 16, padding: '12px 16px', background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(20px)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12 }}>
            <div className="vb-row" style={{ gap: 10, marginBottom: 4 }}>
              <span style={{ width: 8, height: 8, borderRadius: 4, background: `oklch(0.78 0.18 ${REGIONS[hovered].hue})`, boxShadow: `0 0 8px oklch(0.78 0.18 ${REGIONS[hovered].hue})` }}/>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{REGIONS[hovered].city}</span>
              <span className="vb-mono" style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>{REGIONS[hovered].code}</span>
            </div>
            <div className="vb-row" style={{ gap: 16 }}>
              <span className="vb-mono" style={{ fontSize: 11, color: 'var(--vb-fg-2)' }}>{(REGIONS[hovered].count / 1_000_000).toFixed(2)}M IPs active</span>
              <span style={{ fontSize: 11, color: 'oklch(0.85 0.18 142)' }}>● online</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`@keyframes vb-ping{0%{transform:scale(1);opacity:0.6}80%,100%{transform:scale(2.2);opacity:0}}`}</style>
    </Glass>
  );
}

function NetStat({ label, value, accent }) {
  return (
    <div style={{ padding: '12px 14px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: 12 }}>
      <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', display: 'block', marginBottom: 4 }}>{label}</span>
      <span className="vb-mono" style={{ fontSize: 20, fontWeight: 600, color: accent, letterSpacing: '-0.01em' }}>{value}</span>
    </div>
  );
}

function DottedMap() {
  const dots = React.useMemo(() => {
    const continents = [
      [10,18],[13,18],[16,18],[19,18],[7,20],[10,20],[13,20],[16,20],[19,20],[22,20],[25,20],
      [10,22],[13,22],[16,22],[19,22],[22,22],[25,22],[28,22],[31,22],
      [13,24],[16,24],[19,24],[22,24],[25,24],[28,24],[31,24],
      [16,26],[19,26],[22,26],[25,26],[28,26],[31,26],
      [16,28],[19,28],[22,28],[25,28],[28,28],[31,28],
      [19,30],[22,30],[25,30],[28,30],[31,30],
      [22,32],[25,32],[28,32],
      [22,34],[25,34],[22,36],[25,36],[25,38],[28,38],
      [28,42],[31,42],[28,44],[31,44],[34,44],[28,46],[31,46],[34,46],
      [28,48],[31,48],[34,48],[28,50],[31,50],[34,50],
      [28,52],[31,52],[34,52],[28,54],[31,54],[34,54],
      [28,56],[31,56],[34,56],[28,58],[31,58],
      [28,60],[31,60],[31,62],[31,64],[31,66],[31,68],[28,70],[31,70],
      [40,16],[43,16],[40,18],[43,18],[40,20],
      [46,24],[49,24],[52,24],[46,26],[49,26],[52,26],[55,26],
      [46,28],[49,28],[52,28],[55,28],
      [46,30],[49,30],[52,30],[55,30],[58,30],
      [49,32],[52,32],[55,32],[58,32],
      [49,36],[52,36],[55,36],[58,36],
      [49,38],[52,38],[55,38],[58,38],[61,38],
      [49,40],[52,40],[55,40],[58,40],[61,40],
      [49,42],[52,42],[55,42],[58,42],[61,42],
      [52,44],[55,44],[58,44],[61,44],
      [52,46],[55,46],[58,46],[61,46],
      [52,48],[55,48],[58,48],
      [52,50],[55,50],[58,50],
      [55,52],[58,52],[55,54],[58,54],[55,56],[58,56],
      [55,58],[55,60],
      [58,30],[61,30],[58,32],[61,32],[64,32],[61,34],[64,34],[61,36],[64,36],
      [55,18],[58,18],[61,18],[64,18],[67,18],[70,18],[73,18],[76,18],[79,18],[82,18],[85,18],[88,18],
      [55,20],[58,20],[61,20],[64,20],[67,20],[70,20],[73,20],[76,20],[79,20],[82,20],[85,20],[88,20],
      [58,22],[61,22],[64,22],[67,22],[70,22],[73,22],[76,22],[79,22],[82,22],[85,22],[88,22],[91,22],
      [61,24],[64,24],[67,24],[70,24],[73,24],[76,24],[79,24],[82,24],[85,24],[88,24],
      [64,26],[67,26],[70,26],[73,26],[76,26],[79,26],[82,26],[85,26],[88,26],
      [64,28],[67,28],[70,28],[73,28],[76,28],[79,28],[82,28],[85,28],
      [67,30],[70,30],[73,30],[76,30],[79,30],[82,30],[85,30],
      [67,32],[70,32],[73,32],[76,32],[79,32],[82,32],[85,32],
      [70,34],[73,34],[76,34],[79,34],[82,34],
      [70,36],[73,36],[76,36],[79,36],[82,36],
      [70,38],[73,38],[76,38],[79,38],[82,38],[85,38],
      [70,40],[73,40],[76,40],[79,40],[82,40],
      [76,42],[79,42],[82,42],
      [79,44],[82,44],[79,46],[82,46],
      [82,58],[85,58],[88,58],
      [82,60],[85,60],[88,60],[91,60],
      [82,62],[85,62],[88,62],[91,62],
      [85,64],[88,64],
      [94,66],[94,68],
      [88,32],[88,34],[91,32],
      [44,26],[44,28],
      [49,20],[52,20],[49,22],[52,22],
      [44,22],
      [82,48],[85,48],[88,48],[82,50],[85,50],[88,48],
      [85,46],[88,46],
    ];
    const seen = new Set();
    const unique = [];
    for (const [x, y] of continents) {
      const k = `${x},${y}`;
      if (!seen.has(k)) { seen.add(k); unique.push([x, y]); }
    }
    return unique;
  }, []);
  return (
    <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none" viewBox="0 0 100 100">
      {dots.map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r="0.55" fill="rgba(255,255,255,0.55)"/>
      ))}
    </svg>
  );
}

// ─── COMPARISON ───────────────────────────────────────────────────
function ComparisonSection() {
  const ROWS = [
    { label: 'Real residential IPs (not datacenter)',     us: true, them: false, sketch: false },
    { label: 'Watch-time + chat session simulation',      us: true, them: false, sketch: false },
    { label: 'Per-stream pacing & ramp curves',           us: true, them: 'partial', sketch: false },
    { label: 'Live refill if viewers drop',               us: true, them: false, sketch: false },
    { label: 'OAuth-only · no password storage',          us: true, them: 'partial', sketch: false },
    { label: 'Crypto + card · same-day refunds',          us: true, them: true, sketch: 'partial' },
    { label: 'Detection score below 0.05 across 30d',     us: true, them: false, sketch: false },
    { label: 'Telegram support',                          us: true, them: true, sketch: true },
  ];
  return (
    <div>
      <div className="vb-row" style={{ alignItems: 'flex-end', marginBottom: 32, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Why us</span>
          <h2 className="vb-display-3 vb-grad-text">Most boost services<br/>get your channel banned.</h2>
        </div>
        <span className="vb-spacer"/>
        <p style={{ maxWidth: 380, color: 'var(--vb-fg-2)', fontSize: 15, lineHeight: 1.55 }}>
          We built Viewbot.to because we got tired of losing accounts. Here's what's different.
        </p>
      </div>
      <Glass style={{ padding: 0, borderRadius: 28, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', padding: '20px 28px', borderBottom: '1px solid rgba(255,255,255,0.06)', alignItems: 'end', gap: 16 }}>
          <span style={{ fontSize: 11, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Feature</span>
          <div className="vb-col" style={{ alignItems: 'center', gap: 4 }}>
            <span style={{ fontSize: 12, color: 'var(--vb-fg-3)' }}>Generic competitor</span>
            <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em', color: 'var(--vb-fg-1)' }}>Datacenter bots</span>
          </div>
          <div className="vb-col" style={{ alignItems: 'center', gap: 4 }}>
            <span style={{ fontSize: 12, color: 'var(--vb-fg-3)' }}>Sketchy Telegram seller</span>
            <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em', color: 'var(--vb-fg-1)' }}>Pay & pray</span>
          </div>
          <div className="vb-col" style={{ alignItems: 'center', gap: 4, padding: '12px 0', background: 'linear-gradient(180deg, oklch(0.88 0.27 142 / 0.12), transparent)', borderRadius: 16, position: 'relative' }}>
            <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.015em', color: 'var(--vb-fg-0)' }}>Viewbot.to</span>
          </div>
        </div>
        {ROWS.map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
            padding: '16px 28px', alignItems: 'center', gap: 16,
            borderBottom: i < ROWS.length - 1 ? '1px solid rgba(255,255,255,0.03)' : 'none',
          }}>
            <span style={{ fontSize: 14, color: 'var(--vb-fg-1)' }}>{r.label}</span>
            <div style={{ display: 'flex', justifyContent: 'center' }}><CompCell value={r.them}/></div>
            <div style={{ display: 'flex', justifyContent: 'center' }}><CompCell value={r.sketch}/></div>
            <div style={{ display: 'flex', justifyContent: 'center', background: 'oklch(0.88 0.27 142 / 0.04)', borderRadius: 8, padding: '6px 0' }}><CompCell value={r.us} highlight/></div>
          </div>
        ))}
      </Glass>
    </div>
  );
}

function CompCell({ value, highlight }) {
  if (value === true) return (
    <span style={{
      width: 24, height: 24, borderRadius: 12,
      background: highlight ? 'oklch(0.88 0.27 142 / 0.2)' : 'rgba(255,255,255,0.06)',
      color: highlight ? 'oklch(0.88 0.27 142)' : 'var(--vb-fg-1)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: highlight ? '0 0 12px oklch(0.88 0.27 142 / 0.4)' : 'none',
    }}><IconCheck size={13}/></span>
  );
  if (value === 'partial') return (
    <span style={{
      width: 24, height: 24, borderRadius: 12,
      background: 'rgba(255,255,255,0.04)',
      color: 'oklch(0.85 0.18 75)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 14, fontWeight: 700, lineHeight: 1,
    }}>~</span>
  );
  return (
    <span style={{
      width: 24, height: 24, borderRadius: 12,
      background: 'rgba(255,255,255,0.025)', color: 'var(--vb-fg-3)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}><IconClose size={11}/></span>
  );
}

// ─── TESTIMONIALS ─────────────────────────────────────────────────
function Testimonials() {
  const QUOTES = [
    { name: 'streamlord', handle: '@streamlord_kick', plat: 'kick', hue: 142, viewers: '14.2K avg', quote: 'Switched from three other services. Channel never warned, never throttled. Concurrent viewers held flat for the full 6h block — looked exactly like organic.' },
    { name: 'viralqueen',  handle: '@viralqueen', plat: 'twitch', hue: 295, viewers: '8.4K avg', quote: 'The chat bots are the killer feature. They actually respond to what I\'m saying. My real audience can\'t tell — neither can the mods.' },
    { name: 'pump_master', handle: '@pumpmaster_live', plat: 'kick', hue: 142, viewers: '22K avg', quote: 'Top-up balance + on-demand boosts is the workflow I always wanted. Fire one between scenes, watch the graph climb, get back to streaming.' },
  ];
  return (
    <div>
      <div className="vb-row" style={{ alignItems: 'flex-end', marginBottom: 32, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>What streamers say</span>
          <h2 className="vb-display-3 vb-grad-text">Quiet wins.<br/>Loud growth.</h2>
        </div>
        <span className="vb-spacer"/>
        <div className="vb-row" style={{ gap: 24 }}>
          <div className="vb-col" style={{ gap: 2 }}>
            <span className="vb-mono" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>4.9<span style={{ fontSize: 14, color: 'var(--vb-fg-3)' }}>/5</span></span>
            <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>2,418 reviews</span>
          </div>
          <div className="vb-divider-v"/>
          <div className="vb-col" style={{ gap: 2 }}>
            <span className="vb-mono" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', color: 'oklch(0.88 0.27 142)' }}>0<span style={{ fontSize: 14, color: 'var(--vb-fg-3)' }}>%</span></span>
            <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>account suspensions</span>
          </div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {QUOTES.map((q) => (
          <Glass key={q.name} className="vb-lift" style={{ padding: 28, borderRadius: 24, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, background: `radial-gradient(circle, oklch(0.62 0.23 ${q.hue} / 0.12), transparent 65%)`, pointerEvents: 'none' }}/>
            <div style={{ position: 'relative' }}>
              <svg width="28" height="22" viewBox="0 0 28 22" style={{ marginBottom: 16, opacity: 0.4 }}>
                <path d="M0 22V14C0 6 4 2 12 0L13 3C8 5 6 8 6 12H12V22H0ZM16 22V14C16 6 20 2 28 0L29 3C24 5 22 8 22 12H28V22H16Z" fill="currentColor"/>
              </svg>
              <p style={{ fontSize: 14, color: 'var(--vb-fg-1)', lineHeight: 1.6, marginBottom: 24, letterSpacing: '-0.005em' }}>{q.quote}</p>
              <div className="vb-row" style={{ gap: 12 }}>
                <Avatar name={q.name} size={36} hue={q.hue}/>
                <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
                  <div className="vb-row" style={{ gap: 6 }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{q.name}</span>
                    <PlatformPill platform={q.plat}/>
                  </div>
                  <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>{q.handle} · {q.viewers}</span>
                </div>
                <div className="vb-row" style={{ gap: 1 }}>
                  {[0,1,2,3,4].map((i) => (
                    <svg key={i} width="11" height="11" viewBox="0 0 11 11" fill="oklch(0.85 0.18 75)"><path d="M5.5 0L7 4H11L7.8 6.5L9 10.5L5.5 8.2L2 10.5L3.2 6.5L0 4H4L5.5 0Z"/></svg>
                  ))}
                </div>
              </div>
            </div>
          </Glass>
        ))}
      </div>
    </div>
  );
}

// ─── FAQ ──────────────────────────────────────────────────────────
function FaqSection() {
  const ITEMS = [
    { q: 'Will my channel get banned?', a: 'In 18 months and ~2.4M boosts, zero account-level actions. We use real residential IPs from rotating ASNs, simulate genuine watch sessions including scrolling and pause behavior, and pace concurrents to match your existing audience curve.' },
    { q: 'How fast do viewers actually arrive?', a: 'First viewers join within ~8 seconds of clicking start. Full ramp depends on the curve you pick — instant fills the target in ~30 seconds, organic spreads it over 4-6 minutes to look natural.' },
    { q: 'Do the chat bots get caught?', a: 'They run on the same residential network as the viewers. Each bot has a persistent username, message history, and uses an LLM tuned for stream-context replies. We avoid spammy phrasing and cap msg/min per session.' },
    { q: 'What if I stop streaming mid-boost?', a: 'Sessions detect the channel going offline and disconnect cleanly within 30s. Unused time is credited back to your balance. No partial-charge nonsense.' },
    { q: 'Do you support OBS / Streamlabs?', a: 'You don\'t need to integrate anything — boosts hit your public stream URL the same way real viewers do. The only thing you do in OBS is hit "Go Live".' },
    { q: 'Can I pay with crypto?', a: 'Yes — USDT (TRC20/ERC20), BTC, ETH, SOL, plus card and wire. Crypto top-ups credit your balance the moment they confirm on-chain.' },
  ];
  return (
    <div>
      <div className="vb-row" style={{ alignItems: 'flex-end', marginBottom: 32, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>FAQ</span>
          <h2 className="vb-display-3 vb-grad-text">The questions everyone asks.</h2>
        </div>
        <span className="vb-spacer"/>
        <Btn variant="glass" iconRight={<IconArrow size={13}/>}>Read full docs</Btn>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {ITEMS.map((it, i) => <FaqRow key={i} q={it.q} a={it.a} defaultOpen={i === 0}/>)}
      </div>
    </div>
  );
}

function FaqRow({ q, a, defaultOpen }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <Glass soft style={{ borderRadius: 16, overflow: 'hidden', alignSelf: 'flex-start' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', padding: '16px 20px', background: 'transparent', border: 'none',
        color: 'var(--vb-fg-0)', cursor: 'pointer', textAlign: 'left',
        display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'inherit',
      }}>
        <span style={{ fontSize: 14, fontWeight: 500, flex: 1 }}>{q}</span>
        <span style={{ color: 'var(--vb-fg-3)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.25s', display: 'flex' }}>
          <IconChevron size={16}/>
        </span>
      </button>
      {open && <div style={{ padding: '0 20px 18px', fontSize: 13, color: 'var(--vb-fg-2)', lineHeight: 1.6 }}>{a}</div>}
    </Glass>
  );
}

Object.assign(window, { Landing, SERVICES });