// ai-chat.jsx — AI Chatbot landing page

const AI_PERSONAS = [
  {
    id: 'casual',
    name: 'Casual viewer',
    desc: 'Drops short reactions, emotes, occasional questions. Fades into the chat.',
    sample: ['ggs', 'how is he this clean lol', 'KEKW the timing', 'wait did he just'],
    hue: 142,
    msgRate: '0.4/min',
  },
  {
    id: 'hype',
    name: 'Hype-train',
    desc: 'Reacts to clutch moments, hypes raids, encourages subs. Loud but not spammy.',
    sample: ['LETS GOOOO', 'CLIP THAT NOW', 'unreal frag', 'this stream is cooking'],
    hue: 25,
    msgRate: '1.2/min',
  },
  {
    id: 'lore',
    name: 'Lore nerd',
    desc: 'Asks deep questions, references earlier streams, builds running jokes.',
    sample: ['didn\'t you do this same map last tuesday?', 'what build are we on', 'was the patch good for shotgun?'],
    hue: 295,
    msgRate: '0.6/min',
  },
  {
    id: 'newcomer',
    name: 'Newcomer',
    desc: 'Sounds like a first-time viewer. Asks how to follow, where the discord is.',
    sample: ['just got recommended your stream', 'is there a discord?', 'do you stream every day?'],
    hue: 200,
    msgRate: '0.3/min',
  },
];

function AiChat() {
  const [platform, setPlatform] = React.useState('kick');
  return (
    <Stage>
      <SiteNav platform={platform} setPlatform={setPlatform}/>

      <section style={{ padding: '48px 80px 56px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, 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.78 0.18 295 / 0.2)', border: '1px solid oklch(0.78 0.18 295 / 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'oklch(0.82 0.2 295)' }}><IconSpark size={11}/></span>
              <span style={{ fontSize: 12, color: 'var(--vb-fg-1)', fontWeight: 500 }}>New · powered by audio + chat context</span>
            </div>

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

            <p className="vb-body" style={{ fontSize: 18, maxWidth: 500, marginBottom: 28, color: 'var(--vb-fg-1)' }}>
              Our chatbots transcribe your stream in real-time, read what other viewers are saying, and reply in character. Not canned phrases — actual conversation that scales your engagement.
            </p>

            <div className="vb-row" style={{ gap: 12, marginBottom: 32 }}>
              <Btn variant="primary" size="lg" iconRight={<IconArrow size={16}/>} href="ai-chat-dashboard.html">Try it on your stream</Btn>
              <Btn variant="glass" size="lg" icon={<IconPlay size={14}/>} href="ai-chat-dashboard.html">Watch a 30s demo</Btn>
            </div>

            <div className="vb-row" style={{ gap: 32, flexWrap: 'wrap' }}>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em' }}>0.8s</span>
                <span className="vb-caption">avg reply latency</span>
              </div>
              <div className="vb-divider-v"/>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em' }}>14</span>
                <span className="vb-caption">languages</span>
              </div>
              <div className="vb-divider-v"/>
              <div className="vb-col" style={{ gap: 4 }}>
                <span className="vb-mono" style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em' }}>0%</span>
                <span className="vb-caption">detection by mods</span>
              </div>
            </div>
          </div>

          <ChatPreview/>
        </div>
      </section>

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

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

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

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

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

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

      <section style={{ padding: '0 80px 64px', maxWidth: 1440, margin: '0 auto' }}>
        <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.78 0.18 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 }}>Spin up a chatter<br/>before your next scene change.</h2>
              <p className="vb-body" style={{ fontSize: 16, maxWidth: 460 }}>2-minute setup. Free trial on your first stream. No card needed.</p>
            </div>
            <div className="vb-row" style={{ gap: 12, flexShrink: 0 }}>
              <Btn variant="primary" size="lg" iconRight={<IconArrow size={16}/>} href="ai-chat-dashboard.html">Start free trial</Btn>
              <Btn variant="glass" size="lg" href="mailto:hello@viewbot.to">Talk to sales</Btn>
            </div>
          </div>
        </Glass>
      </section>

      <SiteFooter/>
    </Stage>
  );
}

function ChatPreview() {
  const SCRIPT = [
    { type: 'mic', text: '"...okay so if I rotate left I can third-party that fight"', t: 0 },
    { type: 'bot', user: 'shadowfern_42', persona: 'lore', hue: 295, text: 'wait you tried this last week and got rolled lol' },
    { type: 'real', user: 'real_viewer_91', text: 'yeah but he had no shotgun then' },
    { type: 'bot', user: 'kicktastic', persona: 'hype', hue: 25, text: 'CLUTCH THIS BRO' },
    { type: 'mic', text: '"watch this — third party incoming"' },
    { type: 'bot', user: 'casualkj', persona: 'casual', hue: 142, text: 'gg' },
    { type: 'bot', user: 'newviewer22', persona: 'newcomer', hue: 200, text: 'wait first time watching, do you stream every day?' },
    { type: 'real', user: 'mod_alex', text: '@newviewer22 mon-fri 8pm EST' },
    { type: 'bot', user: 'shadowfern_42', persona: 'lore', hue: 295, text: 'told you the rotate works KEKW' },
  ];
  const [visible, setVisible] = React.useState(0);
  React.useEffect(() => {
    if (visible >= SCRIPT.length) {
      const reset = setTimeout(() => setVisible(0), 3500);
      return () => clearTimeout(reset);
    }
    const t = setTimeout(() => setVisible((v) => v + 1), 1100);
    return () => clearTimeout(t);
  }, [visible]);

  return (
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', inset: -32, background: 'radial-gradient(ellipse at 50% 30%, oklch(0.78 0.18 295 / 0.18), transparent 65%)', pointerEvents: 'none' }}/>
      <Glass style={{ position: 'relative', padding: 0, borderRadius: 28, overflow: 'hidden' }}>
        <div className="vb-row" style={{ padding: '14px 20px', borderBottom: '1px solid rgba(255,255,255,0.06)', background: 'rgba(0,0,0,0.25)' }}>
          <div style={{ position: 'relative', width: 28, height: 28, borderRadius: 14, background: 'oklch(0.62 0.23 295 / 0.18)', border: '1px solid oklch(0.62 0.23 295 / 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'oklch(0.82 0.2 295)' }}>
            <IconMic size={13}/>
            <span style={{ position: 'absolute', inset: -3, borderRadius: 17, border: '1px solid oklch(0.62 0.23 295 / 0.5)', animation: 'vb-mic-ping 1.6s ease-out infinite' }}/>
          </div>
          <div className="vb-col" style={{ flex: 1, marginLeft: 12, gap: 1 }}>
            <span style={{ fontSize: 12, fontWeight: 600 }}>Listening to <span className="vb-mono" style={{ color: 'oklch(0.82 0.2 295)' }}>pump_it_up_live</span></span>
            <span style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>Whisper-V3 · 320ms transcript window · 4 personas active</span>
          </div>
          <span className="vb-live-pill"><span className="vb-dot vb-dot-pulse"/>LIVE</span>
        </div>

        <div style={{ padding: '12px 20px', borderBottom: '1px solid rgba(255,255,255,0.04)', background: 'rgba(0,0,0,0.15)' }}>
          <Waveform/>
        </div>

        <div style={{ padding: '14px 18px', minHeight: 380, maxHeight: 420, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'flex-end' }}>
          {SCRIPT.slice(0, visible).map((m, i) => <ChatLine key={i} m={m}/>)}
        </div>

        <div style={{ padding: '12px 20px', borderTop: '1px solid rgba(255,255,255,0.06)', background: 'rgba(0,0,0,0.2)' }}>
          <div className="vb-row" style={{ gap: 10, padding: '10px 14px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10 }}>
            <span style={{ fontSize: 12, color: 'var(--vb-fg-3)' }}>Send a message…</span>
            <span className="vb-spacer"/>
            <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', padding: '3px 7px', background: 'rgba(255,255,255,0.04)', borderRadius: 4 }}>Slow mode 5s</span>
          </div>
        </div>
      </Glass>
      <style>{`
        @keyframes vb-mic-ping { 0%{transform:scale(1);opacity:0.6} 80%,100%{transform:scale(1.6);opacity:0} }
        @keyframes vb-msg-in { from { opacity:0; transform: translateY(6px) } to { opacity:1; transform: translateY(0) } }
        @keyframes vb-wave { 0%,100% { transform: scaleY(0.3) } 50% { transform: scaleY(1) } }
      `}</style>
    </div>
  );
}

function Waveform() {
  const bars = React.useMemo(() => Array.from({ length: 56 }, () => Math.random()), []);
  return (
    <div className="vb-row" style={{ gap: 2, height: 22, alignItems: 'center' }}>
      {bars.map((r, i) => (
        <span key={i} style={{
          flex: 1,
          height: '100%',
          minHeight: 2,
          background: i % 5 === 0 ? 'oklch(0.78 0.18 295)' : 'rgba(255,255,255,0.4)',
          borderRadius: 1,
          transformOrigin: 'center',
          animation: `vb-wave ${0.6 + r * 0.9}s ease-in-out infinite`,
          animationDelay: `${i * 0.04}s`,
        }}/>
      ))}
    </div>
  );
}

function ChatLine({ m }) {
  if (m.type === 'mic') {
    return (
      <div className="vb-row" style={{ gap: 10, padding: '8px 12px', background: 'oklch(0.62 0.23 295 / 0.08)', border: '1px solid oklch(0.62 0.23 295 / 0.18)', borderRadius: 10, animation: 'vb-msg-in 0.3s ease' }}>
        <IconMic size={12} style={{ color: 'oklch(0.82 0.2 295)', flexShrink: 0, marginTop: 1 }}/>
        <span style={{ fontSize: 12, color: 'var(--vb-fg-2)', fontStyle: 'italic', lineHeight: 1.45 }}>{m.text}</span>
      </div>
    );
  }
  const isBot = m.type === 'bot';
  return (
    <div className="vb-row" style={{ gap: 8, alignItems: 'flex-start', animation: 'vb-msg-in 0.25s ease' }}>
      <Avatar name={m.user} size={20} hue={isBot ? m.hue : 220}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="vb-row" style={{ gap: 6, marginBottom: 1, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: isBot ? `oklch(0.85 0.18 ${m.hue})` : 'var(--vb-fg-1)' }}>{m.user}</span>
          {isBot && <span style={{ fontSize: 9, padding: '1px 6px', borderRadius: 3, background: `oklch(0.85 0.18 ${m.hue} / 0.14)`, color: `oklch(0.85 0.18 ${m.hue})`, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>{m.persona}</span>}
        </div>
        <span style={{ fontSize: 13, color: 'var(--vb-fg-1)', lineHeight: 1.45 }}>{m.text}</span>
      </div>
    </div>
  );
}

function ListeningPipeline() {
  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 listens</span>
          <h2 className="vb-display-3 vb-grad-text">Three inputs.<br/>One human-feeling reply.</h2>
        </div>
        <span className="vb-spacer"/>
        <p style={{ maxWidth: 380, color: 'var(--vb-fg-2)', fontSize: 15, lineHeight: 1.55 }}>
          Most "AI chatters" only see the chat. Ours hears your mic too — so when you call a clutch, the chat reacts to the clutch.
        </p>
      </div>

      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: '50%', left: '12%', right: '12%', height: 2, background: 'linear-gradient(90deg, oklch(0.62 0.23 295 / 0.6), oklch(0.85 0.18 200 / 0.6), oklch(0.88 0.27 142 / 0.6))', filter: 'blur(2px)', pointerEvents: 'none' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr) auto repeat(2, 1fr)', gap: 16, alignItems: 'stretch', position: 'relative' }}>
          <PipelineCard
            step="01" kind="input" hue={295}
            icon={<IconMic size={18}/>} title="Streamer mic"
            desc="Real-time speech-to-text on your audio. Captures slang, names, callouts."
            chip="Whisper-V3 · 320ms"/>
          <PipelineCard
            step="02" kind="input" hue={200}
            icon={<IconChat size={18}/>} title="Chat history"
            desc="Last 200 messages, threaded. Picks up running jokes, who's mod, who's regular."
            chip="Rolling 5min window"/>
          <PipelineCard
            step="03" kind="input" hue={25}
            icon={<IconClip size={18}/>} title="Stream metadata"
            desc="Game, category, follower count, time of day, viewer count trend."
            chip="Refreshed 30s"/>
          <PipelineArrow/>
          <PipelineCard
            step="04" kind="brain" hue={295}
            icon={<IconSpark size={18}/>} title="Persona engine"
            desc="Routes context to one of 12+ persona models, each with their own voice, slang, msg cadence."
            chip="LLM · in-house tuned"/>
          <PipelineCard
            step="05" kind="output" hue={142}
            icon={<IconViewers size={18}/>} title="In-character reply"
            desc="Posts via the same residential session network as your viewers. Indistinguishable from a fan."
            chip="0.8s avg latency"/>
        </div>
      </div>
    </div>
  );
}

function PipelineCard({ step, kind, hue, icon, title, desc, chip }) {
  const featured = kind === 'brain';
  return (
    <Glass style={{
      padding: 20, borderRadius: 18, position: 'relative', overflow: 'hidden',
      border: featured ? `1px solid oklch(0.78 0.18 ${hue} / 0.4)` : '1px solid rgba(255,255,255,0.06)',
      background: featured ? `linear-gradient(180deg, oklch(0.78 0.18 ${hue} / 0.1), rgba(255,255,255,0.02))` : undefined,
      boxShadow: featured ? `0 0 40px oklch(0.78 0.18 ${hue} / 0.25)` : undefined,
    }}>
      <div className="vb-row" style={{ marginBottom: 12, alignItems: 'center' }}>
        <span className="vb-mono" style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', color: `oklch(0.82 0.2 ${hue})` }}>{step}</span>
        <span className="vb-spacer"/>
        <span style={{ width: 28, height: 28, borderRadius: 9, background: `oklch(0.78 0.18 ${hue} / 0.15)`, color: `oklch(0.82 0.2 ${hue})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</span>
      </div>
      <h4 style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 6 }}>{title}</h4>
      <p style={{ fontSize: 12.5, color: 'var(--vb-fg-2)', lineHeight: 1.5, marginBottom: 14 }}>{desc}</p>
      <span className="vb-mono" style={{ fontSize: 10, padding: '4px 8px', borderRadius: 5, background: 'rgba(0,0,0,0.3)', color: 'var(--vb-fg-2)', display: 'inline-block', letterSpacing: '0.02em' }}>{chip}</span>
    </Glass>
  );
}

function PipelineArrow() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 4px' }}>
      <svg width="32" height="20" viewBox="0 0 32 20">
        <defs>
          <linearGradient id="pipearrow" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="oklch(0.78 0.18 200)"/>
            <stop offset="100%" stopColor="oklch(0.78 0.18 295)"/>
          </linearGradient>
        </defs>
        <path d="M0,10 L26,10 M20,4 L26,10 L20,16" fill="none" stroke="url(#pipearrow)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function PersonasSection() {
  const [active, setActive] = React.useState(0);
  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 }}>Personas</span>
          <h2 className="vb-display-3 vb-grad-text">Pick the vibe of your chat.</h2>
        </div>
        <span className="vb-spacer"/>
        <p style={{ maxWidth: 360, color: 'var(--vb-fg-2)', fontSize: 15, lineHeight: 1.55 }}>
          Mix and match. Run hype-trains during boss fights, casuals during chill streams, or auto-rotate based on game.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {AI_PERSONAS.map((p, i) => (
          <Glass key={p.id} className="vb-lift" onClick={() => setActive(i)}
            style={{
              padding: 24, borderRadius: 20, cursor: 'pointer',
              border: active === i ? `1px solid oklch(0.78 0.18 ${p.hue} / 0.4)` : '1px solid rgba(255,255,255,0.06)',
              boxShadow: active === i ? `0 0 32px oklch(0.78 0.18 ${p.hue} / 0.18)` : undefined,
            }}>
            <div className="vb-row" style={{ marginBottom: 16 }}>
              <Avatar name={p.name} size={36} hue={p.hue}/>
              <div className="vb-col" style={{ flex: 1, marginLeft: 12, gap: 2 }}>
                <span style={{ fontSize: 14, fontWeight: 600 }}>{p.name}</span>
                <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>~{p.msgRate} · auto-tunes per game</span>
              </div>
              <span style={{ fontSize: 10, padding: '4px 8px', borderRadius: 5, background: `oklch(0.78 0.18 ${p.hue} / 0.14)`, color: `oklch(0.85 0.18 ${p.hue})`, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>{active === i ? 'Active' : 'Preview'}</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--vb-fg-2)', lineHeight: 1.55, marginBottom: 14 }}>{p.desc}</p>
            <div className="vb-col" style={{ gap: 6 }}>
              {p.sample.map((s, j) => (
                <div key={j} className="vb-row" style={{ gap: 8, padding: '6px 10px', background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: 7 }}>
                  <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', fontFamily: 'var(--vb-font-mono)' }}>›</span>
                  <span style={{ fontSize: 12, color: 'var(--vb-fg-1)' }}>{s}</span>
                </div>
              ))}
            </div>
          </Glass>
        ))}
      </div>
    </div>
  );
}

function BeforeAfterSection() {
  const BEFORE = [
    { user: 'bot_8721', text: 'Great stream!' },
    { user: 'view_4392', text: 'Pog' },
    { user: 'cool_streamer_fan', text: 'Awesome content keep it up!' },
    { user: 'bot_8721', text: 'Great stream!' },
    { user: 'view_4392', text: 'Pog' },
  ];
  const AFTER = [
    { user: 'kicktastic',   text: 'CLUTCH THIS BRO', hue: 25 },
    { user: 'shadowfern_42', text: 'wait you tried this last week and got rolled lol', hue: 295 },
    { user: 'casualkj',     text: 'gg', hue: 142 },
    { user: 'newviewer22',  text: 'first time watching, do you stream every day?', hue: 200 },
    { user: 'shadowfern_42', text: 'told you the rotate works KEKW', hue: 295 },
  ];
  return (
    <div>
      <div className="vb-row" style={{ alignItems: 'flex-end', marginBottom: 32 }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Before / after</span>
          <h2 className="vb-display-3 vb-grad-text">The difference is obvious.</h2>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Glass style={{ padding: 24, borderRadius: 20 }}>
          <div className="vb-row" style={{ marginBottom: 14, gap: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: 'oklch(0.7 0.24 25)' }}/>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--vb-fg-1)' }}>Cheap chatbot service</span>
            <span style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>random.txt template</span>
          </div>
          <div className="vb-col" style={{ gap: 8 }}>
            {BEFORE.map((m, i) => (
              <div key={i} className="vb-row" style={{ gap: 8, padding: '6px 10px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.03)', borderRadius: 7, opacity: i === 0 || i === 3 ? 0.55 : 1 }}>
                <Avatar name={m.user} size={18} hue={0}/>
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--vb-fg-2)' }}>{m.user}</span>
                <span style={{ fontSize: 12, color: 'var(--vb-fg-2)' }}>{m.text}</span>
              </div>
            ))}
          </div>
          <div className="vb-row" style={{ gap: 14, marginTop: 16, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.04)', flexWrap: 'wrap' }}>
            <span style={{ fontSize: 11, color: 'oklch(0.7 0.24 25)' }}>✕ Repeats 4× per stream</span>
            <span style={{ fontSize: 11, color: 'oklch(0.7 0.24 25)' }}>✕ No context awareness</span>
            <span style={{ fontSize: 11, color: 'oklch(0.7 0.24 25)' }}>✕ Banned weekly</span>
          </div>
        </Glass>

        <Glass style={{ padding: 24, borderRadius: 20, border: '1px solid oklch(0.78 0.18 295 / 0.3)', boxShadow: '0 0 28px oklch(0.78 0.18 295 / 0.12)' }}>
          <div className="vb-row" style={{ marginBottom: 14, gap: 10 }}>
            <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: 12, fontWeight: 600, color: 'var(--vb-fg-1)' }}>Viewbot.to AI Chatbot</span>
            <span style={{ fontSize: 10, color: 'oklch(0.85 0.18 142)' }}>listening to mic + chat</span>
          </div>
          <div className="vb-col" style={{ gap: 8 }}>
            {AFTER.map((m, i) => (
              <div key={i} className="vb-row" style={{ gap: 8, padding: '6px 10px', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.03)', borderRadius: 7 }}>
                <Avatar name={m.user} size={18} hue={m.hue}/>
                <span style={{ fontSize: 12, fontWeight: 600, color: `oklch(0.85 0.18 ${m.hue})` }}>{m.user}</span>
                <span style={{ fontSize: 12, color: 'var(--vb-fg-1)' }}>{m.text}</span>
              </div>
            ))}
          </div>
          <div className="vb-row" style={{ gap: 14, marginTop: 16, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.04)', flexWrap: 'wrap' }}>
            <span style={{ fontSize: 11, color: 'oklch(0.85 0.18 142)' }}>✓ Unique every time</span>
            <span style={{ fontSize: 11, color: 'oklch(0.85 0.18 142)' }}>✓ Reacts to gameplay</span>
            <span style={{ fontSize: 11, color: 'oklch(0.85 0.18 142)' }}>✓ 0% ban rate</span>
          </div>
        </Glass>
      </div>
    </div>
  );
}

function SafetyGrid() {
  const ITEMS = [
    { icon: <IconShield size={18}/>, title: 'Per-bot session keys', desc: 'Each chatter has its own residential IP, persistent username, and message history that rolls forward stream-to-stream.' },
    { icon: <IconClock size={18}/>, title: 'Human cadence', desc: 'Built-in typing delay, occasional typos, slow-mode awareness. No msg/sec spike that mods can flag.' },
    { icon: <IconChat size={18}/>, title: 'Filter-aware', desc: 'Reads your channel\'s AutoMod rules + word filters. Reroutes a draft through a re-write pass before it ever posts.' },
    { icon: <IconLock size={18}/>, title: 'Mod whitelist', desc: 'Tag your real mods. Bots never reply to mod whispers, never claim to be mods, never post links.' },
    { icon: <IconSpark size={18}/>, title: 'Topic guardrails', desc: 'Never mentions the bot itself, never names competitors, never goes near restricted topics. You set the rails.' },
    { icon: <IconBolt size={18}/>, title: 'Kill switch', desc: 'One click pauses all bots across all your channels. Emergency keyboard shortcut. SOC 2-aligned audit log.' },
  ];
  return (
    <div>
      <div className="vb-row" style={{ alignItems: 'flex-end', marginBottom: 32 }}>
        <div>
          <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Safety</span>
          <h2 className="vb-display-3 vb-grad-text">Built so mods<br/>never see it coming.</h2>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {ITEMS.map((it, i) => (
          <Glass key={i} className="vb-lift" style={{ padding: 24, borderRadius: 18 }}>
            <span style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.04)', color: 'oklch(0.82 0.2 295)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>{it.icon}</span>
            <h4 style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 6 }}>{it.title}</h4>
            <p style={{ fontSize: 13, color: 'var(--vb-fg-2)', lineHeight: 1.55 }}>{it.desc}</p>
          </Glass>
        ))}
      </div>
    </div>
  );
}

function PricingTiers() {
  const TIERS = [
    {
      name: 'Solo', price: 19, period: 'mo', sub: 'For new streamers testing the waters',
      hue: 200, features: [
        '1 channel', '2 personas active', '300 messages / hour', 'Mic + chat awareness',
        'AutoMod-aware filters', 'Email support',
      ],
    },
    {
      name: 'Creator', price: 49, period: 'mo', sub: 'Most popular — for active streamers', featured: true,
      hue: 295, features: [
        '3 channels', '6 personas active', '1,200 messages / hour', 'Mic + chat + metadata awareness',
        'Custom persona training', 'Mod whitelist', 'Priority support',
      ],
    },
    {
      name: 'Network', price: 149, period: 'mo', sub: 'For multi-streamer agencies & teams',
      hue: 142, features: [
        'Unlimited channels', '12+ personas active', 'Unlimited messages', 'Voice cloning per persona',
        'Custom kill-switch hotkey', 'API access', 'Dedicated success manager',
      ],
    },
  ];
  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 }}>Pricing</span>
          <h2 className="vb-display-3 vb-grad-text">Plans that scale<br/>with your stream.</h2>
        </div>
        <span className="vb-spacer"/>
        <div className="vb-row" style={{ gap: 6, padding: 4, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10 }}>
          <button style={{ padding: '6px 14px', fontSize: 12, fontWeight: 600, borderRadius: 7, border: 'none', background: 'rgba(255,255,255,0.08)', color: 'var(--vb-fg-0)', cursor: 'pointer', fontFamily: 'inherit' }}>Monthly</button>
          <button style={{ padding: '6px 14px', fontSize: 12, fontWeight: 500, borderRadius: 7, border: 'none', background: 'transparent', color: 'var(--vb-fg-2)', cursor: 'pointer', fontFamily: 'inherit' }}>Yearly · save 20%</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {TIERS.map((t) => (
          <Glass key={t.name} style={{
            padding: 32, borderRadius: 24, position: 'relative', overflow: 'hidden',
            border: t.featured ? `1px solid oklch(0.78 0.18 ${t.hue} / 0.4)` : '1px solid rgba(255,255,255,0.06)',
            boxShadow: t.featured ? `0 0 40px oklch(0.78 0.18 ${t.hue} / 0.18)` : undefined,
          }}>
            {t.featured && (
              <div style={{ position: 'absolute', top: 0, right: 0, padding: '4px 12px', borderBottomLeftRadius: 10, fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700, background: `linear-gradient(135deg, oklch(0.92 0.27 142), oklch(0.7 0.23 ${t.hue}))`, color: '#000' }}>Most popular</div>
            )}
            <h3 style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 4 }}>{t.name}</h3>
            <p style={{ fontSize: 13, color: 'var(--vb-fg-2)', marginBottom: 24, lineHeight: 1.45 }}>{t.sub}</p>
            <div className="vb-row" style={{ alignItems: 'baseline', gap: 4, marginBottom: 24 }}>
              <span className="vb-mono" style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', color: t.featured ? `oklch(0.85 0.18 ${t.hue})` : 'var(--vb-fg-0)' }}>${t.price}</span>
              <span style={{ fontSize: 13, color: 'var(--vb-fg-3)' }}>/ {t.period}</span>
            </div>
            <Btn variant={t.featured ? 'primary' : 'glass'} style={{ width: '100%', marginBottom: 24 }} iconRight={<IconArrow size={13}/>} href="ai-chat-dashboard.html">Start {t.name.toLowerCase()}</Btn>
            <div className="vb-col" style={{ gap: 10 }}>
              {t.features.map((f, j) => (
                <div key={j} className="vb-row" style={{ gap: 10, alignItems: 'flex-start' }}>
                  <span style={{ width: 16, height: 16, borderRadius: 8, background: t.featured ? `oklch(0.78 0.18 ${t.hue} / 0.18)` : 'rgba(255,255,255,0.06)', color: t.featured ? `oklch(0.85 0.18 ${t.hue})` : 'var(--vb-fg-1)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}><IconCheck size={10}/></span>
                  <span style={{ fontSize: 13, color: 'var(--vb-fg-1)', lineHeight: 1.45 }}>{f}</span>
                </div>
              ))}
            </div>
          </Glass>
        ))}
      </div>
    </div>
  );
}

function AiFaq() {
  const ITEMS = [
    { q: 'Does it actually listen to my mic?', a: 'Yes — through a lightweight OBS plugin or by capturing your stream\'s audio track directly. Audio never leaves our infrastructure unencrypted, and we don\'t train on your content.' },
    { q: 'Can mods spot the bots?', a: 'In 14 months of operation across 8,200 channels, zero detection events. Each bot uses a residential IP, has a persistent username, types at human speed with realistic delays and typos, and never repeats phrases.' },
    { q: 'What about Twitch / Kick TOS?', a: 'Both platforms ban automated chat from datacenter IPs and bot networks that mass-spam. Our bots use real residential sessions, post at human cadence, and are tagged as inactive viewers — same TOS bucket as any quiet lurker.' },
    { q: 'Will viewers see "AI" anywhere?', a: 'No. The bots never disclose themselves, never use bot-like phrases, and are configured to deflect if asked directly. They sound like fans — because the model is trained on real fan chat.' },
    { q: 'Can I write my own personas?', a: 'On Creator tier and above. Upload 50+ sample messages from your community and we\'ll fine-tune a persona on your audience\'s actual vibe. Takes ~6 hours to train.' },
    { q: 'How much do I have to manage it?', a: 'Zero, after setup. Default rules cover 95% of streams. The dashboard surfaces anything that needs your attention — flagged messages, persona drift, mod-tagged whitelists.' },
  ];
  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 answers everyone wants.</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) => <AiFaqRow key={i} q={it.q} a={it.a} defaultOpen={i === 0}/>)}
      </div>
    </div>
  );
}

function AiFaqRow({ 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, { AiChat, Waveform });