/* Vooice — Marketing landing page (expanded) */

function MarketingHero({ width = 1320, height = 880, onNavigate }) {
  const go = (k) => onNavigate && onNavigate(k);
  const NAV_ITEMS = [
    { l: 'Memory',       k: 'contacts-memory' },
    { l: 'Pricing',      k: 'pricing' },
    { l: 'Live demo',    k: 'home' },
  ];
  return (
    <div className="vc-root" style={{
      width, minHeight: height, background: VC_TOKENS.paper, color: VC_TOKENS.ink,
      borderTop: `1px solid ${VC_TOKENS.line}`, position:'relative',
    }}>
      <TopNav nav={NAV_ITEMS} go={go} />
      <Hero go={go} />
      <HowItWorksSection go={go} />
      <UseCasesSection />
      <LiveTranscriptDemo />
      <MemorySection go={go} />
      <TrustSection />
      <FAQSection />
      <CTAFooter go={go} />
    </div>
  );
}

// ── Top nav ───────────────────────────────────────────────────────────────
function TopNav({ nav, go }) {
  return (
    <div className="vc-stack-mobile" style={{
      display:'flex', justifyContent:'space-between', alignItems:'center',
      padding: '20px 40px', borderBottom: `1px solid ${VC_TOKENS.line}`,
      gap: 16, flexWrap:'wrap',
    }}>
      <span onClick={() => go('about')} style={{ cursor:'pointer' }}><VWordmark size={16} /></span>
      <div className="vc-hide-mobile" style={{ display:'flex', gap: 28 }}>
        {nav.map(it => (
          <span key={it.l} onClick={() => go(it.k)} style={{ fontSize: 14, color: VC_TOKENS.ink2, cursor:'pointer' }}>{it.l}</span>
        ))}
      </div>
      <button onClick={() => go('home')} style={{
        padding: '10px 16px', background: VC_TOKENS.ink, color: VC_TOKENS.paper, border:'none',
        fontFamily:"'JetBrains Mono', monospace", fontWeight: 700, fontSize: 11, letterSpacing:'.14em',
        cursor:'pointer',
      }}>OPEN APP →</button>
    </div>
  );
}

// ── Hero ──────────────────────────────────────────────────────────────────
function Hero({ go }) {
  return (
    <div className="vc-grid-2col" style={{
      display:'grid', gridTemplateColumns: '1.2fr 1fr',
      padding: '60px 40px 80px', gap: 60, alignItems: 'flex-start',
    }}>
      <div>
        <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 24 }}>
          <RingingRing size={10} color={VC_TOKENS.signal} />
          <Mono>PHONE‑FIRST · INVITE BETA · APR 2026</Mono>
        </div>
        <h1 style={{
          fontFamily:"'Inter Tight', sans-serif",
          fontSize: 'clamp(56px, 9vw, 124px)', fontWeight: 700,
          letterSpacing:'-0.045em', lineHeight: 0.92, margin: 0,
        }}>
          The assistant<br/>
          <span style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontWeight: 400 }}>
            you can&nbsp;call.
          </span>
        </h1>
        <div style={{
          marginTop: 28, fontSize: 'clamp(16px, 1.6vw, 20px)', lineHeight: 1.4,
          color: VC_TOKENS.ink2, maxWidth: 540,
        }}>
          Dial Vooice from any phone. Ask her to call your dentist, your contractor, your mom.
          She picks up, makes the call, repeats the details back, gets it done.
        </div>
        <div style={{ marginTop: 36, display:'flex', gap: 14, alignItems:'center', flexWrap:'wrap' }}>
          <button onClick={() => go('home')} style={{
            padding: '16px 22px', background: VC_TOKENS.signal, color: VC_TOKENS.paper, border:'none',
            fontFamily:"'JetBrains Mono', monospace", fontWeight: 700, letterSpacing:'.12em', fontSize: 12,
            cursor:'pointer',
          }}>GET YOUR NUMBER</button>
          <button style={{
            padding: '16px 22px', background: 'transparent', color: VC_TOKENS.ink,
            border:`1px solid ${VC_TOKENS.line}`,
            fontFamily:"'JetBrains Mono', monospace", fontWeight: 700, letterSpacing:'.12em', fontSize: 12,
            cursor:'pointer',
          }}>HEAR A REAL CALL ▶</button>
        </div>
        <div style={{ marginTop: 40 }}>
          <Mono color={VC_TOKENS.ink3}>STACK · CLAUDE · ELEVENLABS · DEEPGRAM · LIVEKIT · TWILIO</Mono>
        </div>
      </div>

      {/* Right — physical "call card" */}
      <div style={{
        background: VC_TOKENS.ink, color: VC_TOKENS.paper,
        padding: 28, position: 'relative',
        transform: 'rotate(1.2deg)',
        boxShadow: `-14px 14px 0 ${VC_TOKENS.signal}`,
      }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 20 }}>
          <Mono color={VC_TOKENS.signal}>OUTBOUND · LIVE</Mono>
          <Mono color={VC_TOKENS.paper}>00:42</Mono>
        </div>
        <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 34, fontWeight: 700, letterSpacing:'-0.025em', lineHeight: 1.1 }}>
          Bayview Hair Studio
        </div>
        <div style={{ color: '#aaa', marginTop: 6, fontSize: 14 }}>Calling for Jordan Reyes · Hayes Valley</div>
        <div style={{ marginTop: 22, padding: '14px 0', borderTop: `1px solid #333`, borderBottom: `1px solid #333` }}>
          <Waveform bars={48} height={42} speaker="vooice" color={VC_TOKENS.paper} accent={VC_TOKENS.signal} />
        </div>
        <div style={{ marginTop: 18, fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 17, lineHeight: 1.45 }}>
          "Thursday at 2 with Marcus, 45 minutes — confirming with Jordan's calendar before I commit."
        </div>
        <div style={{
          marginTop: 22, padding: 14, background: VC_TOKENS.signal, color: VC_TOKENS.ink,
          display:'flex', justifyContent:'space-between', alignItems:'center',
        }}>
          <Mono color={VC_TOKENS.ink}>SLOT READ‑BACK</Mono>
          <Mono color={VC_TOKENS.ink}>CONFIRM ✓</Mono>
        </div>
        <div style={{ position:'absolute', top: -18, left: -18 }}>
          <Stamp color={VC_TOKENS.signal} style={{ background: VC_TOKENS.paper, transform:'rotate(-8deg)' }}>
            HONEST ABOUT BEING AI
          </Stamp>
        </div>
      </div>
    </div>
  );
}

// ── Section header utility ────────────────────────────────────────────────
function SectionEyebrow({ kicker, title, italic }) {
  return (
    <div style={{ marginBottom: 36 }}>
      <Mono color={VC_TOKENS.signal}>{kicker}</Mono>
      <h2 style={{
        fontFamily:"'Inter Tight', sans-serif",
        fontSize: 'clamp(40px, 6vw, 72px)', fontWeight: 700,
        letterSpacing:'-0.04em', lineHeight: 0.98,
        margin: '14px 0 0', maxWidth: 900,
      }}>
        {title}{italic && (
          <> <span style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontWeight: 400 }}>{italic}</span></>
        )}
      </h2>
    </div>
  );
}

// ── How it works (integrated from /how) ───────────────────────────────────
function HowItWorksSection({ go }) {
  const STEPS = [
    { n:'01', title:'You call her, or text her.', body:'Phone, Telegram, WhatsApp. Voice or text. Whatever surface you\u2019re on.', art:'self' },
    { n:'02', title:'She figures out what to do.', body:'Reads your calendar, your inbox, your contacts, what she remembers. Picks the right tools.', art:'memory' },
    { n:'03', title:'She does the thing.', body:'Calls people. Sends emails. Books appointments. Repeats key details back to confirm.', art:'phone' },
    { n:'04', title:'She tells you what happened.', body:'A voice note, a text, a card on the dashboard. Whichever channel suits the moment.', art:'card' },
  ];
  return (
    <section style={{ borderTop:`1px solid ${VC_TOKENS.line}` }}>
      <div style={{ padding:'72px 40px 32px' }}>
        <SectionEyebrow kicker="HOW IT WORKS · FOUR STEPS · NO MAGIC" title="You speak." italic="She handles it." />
      </div>
      <div className="vc-grid-4col" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', borderTop:`1px solid ${VC_TOKENS.line}` }}>
        {STEPS.map((s, i) => (
          <div key={s.n} style={{
            padding: '32px 28px',
            borderRight: i < 3 ? `1px solid ${VC_TOKENS.line}` : 'none',
            background: i % 2 === 0 ? VC_TOKENS.paper : VC_TOKENS.paper2,
            minHeight: 460, display:'flex', flexDirection:'column', gap: 18,
          }}>
            <Mono color={VC_TOKENS.signal}>{s.n}</Mono>
            <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 26, fontWeight: 600, letterSpacing:'-0.02em', lineHeight: 1.15 }}>
              {s.title}
            </div>
            <div style={{ fontSize: 15, color: VC_TOKENS.ink2, lineHeight: 1.5 }}>{s.body}</div>
            <div style={{ marginTop:'auto' }}><StepArt kind={s.art} /></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function StepArt({ kind }) {
  if (kind === 'self') return (
    <div style={{ height: 110, display:'flex', alignItems:'flex-end', gap: 4 }}>
      <Waveform bars={32} height={80} speaker="callee" color={VC_TOKENS.ink} accent={VC_TOKENS.signal} barWidth={3} gap={3} />
    </div>
  );
  if (kind === 'memory') return (
    <div style={{ height: 110, position:'relative' }}>
      {[0,1,2].map(i => (
        <div key={i} style={{
          position:'absolute', left: i*22, top: i*8, padding:'10px 14px',
          background: VC_TOKENS.paper, border:`1px solid ${VC_TOKENS.line}`, fontSize: 11,
          fontFamily:"'JetBrains Mono', monospace",
        }}>{['contact: lina','calendar.read','tool.dial'][i]}</div>
      ))}
    </div>
  );
  if (kind === 'phone') return (
    <div style={{ height: 110, display:'flex', alignItems:'center', gap: 10 }}>
      <RingingRing size={28} color={VC_TOKENS.signal} />
      <div style={{
        flex:1, padding: 14, background: VC_TOKENS.ink, color: VC_TOKENS.paper, fontSize: 13, fontFamily:"'Instrument Serif', serif", fontStyle:'italic',
      }}>"Hi Marcus, this is Vooice…"</div>
    </div>
  );
  return (
    <div style={{ height: 110, transform:'rotate(-1.5deg)', boxShadow: `4px 6px 0 ${VC_TOKENS.signal}`, padding: 14, background: VC_TOKENS.paper2, border: `1px solid ${VC_TOKENS.line}` }}>
      <Mono color={VC_TOKENS.signal}>BOOKED</Mono>
      <div style={{ fontSize: 14, marginTop: 6, fontWeight:600 }}>Thu 2pm · Marcus Wu</div>
      <div style={{ fontSize: 12, marginTop: 4, color: VC_TOKENS.ink3 }}>Added to calendar</div>
    </div>
  );
}

// ── Use cases ─────────────────────────────────────────────────────────────
function UseCasesSection() {
  const CASES = [
    {
      tag: 'THE BOOKER',
      who: 'For people who hate phone tag.',
      head: '"Book me a haircut Thursday after 1."',
      body: 'She finds your usual barber, dials, holds the line, negotiates the slot, repeats it back, drops it on your calendar. You never picked up the phone.',
      stamp: 'SAVES 14 MIN/WEEK',
      rotate: -1.2,
    },
    {
      tag: 'THE TRIAGER',
      who: 'For people whose inbox is a fire.',
      head: '"What\u2019s urgent today?"',
      body: 'She reads everything. Surfaces 3 things that need you. Drafts the answers. You confirm or correct. The rest she handles or files.',
      stamp: 'INBOX ZERO BY 10AM',
      rotate: 1.4,
    },
    {
      tag: 'THE FAMILY OPS',
      who: 'For people running a household.',
      head: '"Tell Mom dinner Sunday at 6."',
      body: 'She remembers Mom\u2019s number, her preferred channel (a call, not a text), the dynamic ("don\u2019t mention work stress"). She sends the note. She tells you it landed.',
      stamp: 'KEEPS YOU PRESENT',
      rotate: -0.8,
    },
    {
      tag: 'THE GATEKEEPER',
      who: 'For people who answer too many calls.',
      head: '"Pick up for me. Decide if it matters."',
      body: 'Forward unknowns to your Vooice number. She answers, screens, takes a message, transcribes. If it\u2019s real, she pings you. If it\u2019s spam, she hangs up.',
      stamp: 'BLOCKS 41 SPAM/MO',
      rotate: 1.0,
    },
  ];
  return (
    <section style={{ background: VC_TOKENS.paper2, borderTop:`1px solid ${VC_TOKENS.line}` }}>
      <div style={{ padding:'72px 40px 0' }}>
        <SectionEyebrow kicker="WHO SHE'S FOR" title="Four people," italic="four phones, four problems." />
        <div style={{ fontSize: 18, color: VC_TOKENS.ink2, maxWidth: 640, marginTop: -20, marginBottom: 40, fontFamily:"'Instrument Serif', serif", fontStyle:'italic' }}>
          She’s the same assistant — she just shows up differently depending on what your day needs.
        </div>
      </div>
      <div className="vc-grid-2col" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 32, padding:'0 40px 80px' }}>
        {CASES.map((c, i) => (
          <div key={c.tag} style={{
            background: VC_TOKENS.paper, border: `1px solid ${VC_TOKENS.line}`,
            padding: '32px 32px 28px', position:'relative',
            transform: `rotate(${c.rotate}deg)`,
            boxShadow: i % 2 === 0
              ? `8px 10px 0 ${VC_TOKENS.ink}`
              : `-8px 10px 0 ${VC_TOKENS.signal}`,
          }}>
            <Mono color={VC_TOKENS.signal}>{c.tag}</Mono>
            <div style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 16, color: VC_TOKENS.ink3, marginTop: 8 }}>
              {c.who}
            </div>
            <div style={{
              fontFamily:"'Inter Tight', sans-serif", fontSize: 28, fontWeight: 600,
              letterSpacing:'-0.02em', lineHeight: 1.15, margin: '20px 0 14px',
            }}>{c.head}</div>
            <div style={{ fontSize: 15, lineHeight: 1.55, color: VC_TOKENS.ink2 }}>{c.body}</div>
            <div style={{ marginTop: 22, paddingTop: 16, borderTop: `1px solid ${VC_TOKENS.lineSoft}` }}>
              <Stamp color={VC_TOKENS.ink}>{c.stamp}</Stamp>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Live transcript demo (animated) ───────────────────────────────────────
function LiveTranscriptDemo() {
  const SCRIPT = [
    { t: 0,    sp: 'callee', who: 'MARCUS', body: 'Bayview Hair, this is Marcus.' },
    { t: 2.2,  sp: 'vooice', who: 'VOOICE', body: 'Hi Marcus — this is Vooice, I\u2019m an AI calling on behalf of Jordan Reyes.' },
    { t: 6.0,  sp: 'vooice', who: 'VOOICE', body: 'Looking to book a cut, ideally Thursday after 1pm with you specifically.' },
    { t: 10.0, sp: 'callee', who: 'MARCUS', body: 'I\u2019ve got 2pm Thursday, 45 minutes. Works?' },
    { t: 13.0, sp: 'vooice', who: 'VOOICE', body: 'Reading back: Thursday 2pm, 45 minutes, with Marcus. Confirming with Jordan\u2019s calendar — one second.' },
    { t: 18.0, sp: 'vooice', who: 'VOOICE', body: 'Confirmed. Booked. Should I have him bring anything?' },
    { t: 22.0, sp: 'callee', who: 'MARCUS', body: 'Just himself. We\u2019re good.' },
    { t: 24.0, sp: 'vooice', who: 'VOOICE', body: 'Thank you, Marcus. Have a good one.' },
  ];
  const TOTAL = 28;
  const [tSec, setTSec] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setTSec(t => (t + 0.1) % TOTAL);
    }, 100);
    return () => clearInterval(id);
  }, []);
  const visible = SCRIPT.filter(l => l.t <= tSec + 0.05);
  const current = visible[visible.length - 1];

  return (
    <section style={{ background: VC_TOKENS.ink, color: VC_TOKENS.paper, borderTop:`1px solid ${VC_TOKENS.line}` }}>
      <div style={{ padding:'72px 40px 40px' }}>
        <Mono color={VC_TOKENS.signal}>LIVE DEMO · NOT A RECORDING</Mono>
        <h2 style={{
          fontFamily:"'Inter Tight', sans-serif",
          fontSize: 'clamp(40px, 6vw, 72px)', fontWeight: 700,
          letterSpacing:'-0.04em', lineHeight: 0.98,
          margin: '14px 0 0', maxWidth: 900,
        }}>
          What it sounds like <span style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontWeight: 400 }}>when she calls.</span>
        </h2>
      </div>

      <div className="vc-grid-2col" style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 0, borderTop:`1px solid #2a2724` }}>
        {/* Transcript */}
        <div style={{ padding: '40px', borderRight:`1px solid #2a2724`, minHeight: 560, display:'flex', flexDirection:'column' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 28 }}>
            <Mono color={VC_TOKENS.signal}>● LIVE · {Math.floor(tSec).toString().padStart(2,'0')}:{Math.floor((tSec*10)%10)}{Math.floor((tSec*100)%10)}</Mono>
            <Mono color={'#888'}>BAYVIEW HAIR · MARCUS WU</Mono>
          </div>
          <div style={{ display:'flex', flexDirection:'column-reverse', gap: 18, flex: 1, justifyContent:'flex-start' }}>
            {[...visible].reverse().slice(0, 4).map((l, i) => {
              const isVooice = l.sp === 'vooice';
              const isCurrent = i === 0;
              return (
                <div key={l.t} style={{
                  display:'flex', flexDirection:'column', gap: 6,
                  alignItems: isVooice ? 'flex-start' : 'flex-end',
                  opacity: isCurrent ? 1 : Math.max(0.2, 0.55 - i * 0.12),
                  transition: 'opacity 200ms ease',
                }}>
                  <Mono color={isVooice ? VC_TOKENS.signal : '#aaa'}>{l.who}</Mono>
                  <div style={{
                    maxWidth: '85%',
                    padding: '14px 18px',
                    background: isVooice ? VC_TOKENS.signal : '#2a2724',
                    color: isVooice ? VC_TOKENS.paper : VC_TOKENS.paper,
                    fontFamily:"'Instrument Serif', serif", fontStyle:'italic',
                    fontSize: 18, lineHeight: 1.45,
                  }}>
                    {l.body}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Side rail — what she's doing */}
        <div style={{ padding: 40, display:'flex', flexDirection:'column', gap: 24 }}>
          <div>
            <Mono color={'#888'}>RIGHT NOW SHE'S</Mono>
            <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 26, fontWeight: 600, letterSpacing:'-0.02em', marginTop: 8 }}>
              {current?.sp === 'vooice' ? 'Speaking.' : 'Listening.'}
            </div>
          </div>
          <div style={{ padding: '14px 0', borderTop: `1px solid #2a2724`, borderBottom: `1px solid #2a2724` }}>
            <Waveform
              bars={48} height={56}
              speaker={current?.sp === 'vooice' ? 'vooice' : 'callee'}
              color={VC_TOKENS.paper} accent={VC_TOKENS.signal}
            />
          </div>

          <div>
            <Mono color={'#888'}>TOOL CALLS</Mono>
            <div style={{ marginTop: 10, display:'flex', flexDirection:'column', gap: 6 }}>
              {[
                { t: 6, label: 'calendar.read · jordan' },
                { t: 13, label: 'slot.readback · thu 2pm' },
                { t: 18, label: 'calendar.write · 45min · marcus' },
              ].map(tc => (
                <div key={tc.label} style={{
                  fontFamily:"'JetBrains Mono', monospace", fontSize: 11,
                  padding: '8px 12px', background: tSec >= tc.t ? '#2a2724' : 'transparent',
                  border: `1px solid ${tSec >= tc.t ? '#3a3530' : '#2a2724'}`,
                  color: tSec >= tc.t ? VC_TOKENS.paper : '#666',
                  transition: 'all 200ms ease',
                }}>
                  {tSec >= tc.t ? '✓ ' : '○ '}{tc.label}
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 'auto', padding: 16, background: VC_TOKENS.signal, color: VC_TOKENS.ink }}>
            <Mono color={VC_TOKENS.ink}>OUTCOME</Mono>
            <div style={{ fontSize: 16, marginTop: 8, fontFamily:"'Instrument Serif', serif", fontStyle:'italic' }}>
              {tSec >= 18 ? '"Booked Thu 2pm w/ Marcus."' : 'In progress…'}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Memory section ────────────────────────────────────────────────────────
function MemorySection({ go }) {
  const MEMORIES = [
    { who: 'MOM', body: 'Prefers a phone call to a text. Don\u2019t mention work stress. Birthday May 4.', tone: 'butter' },
    { who: 'LINA', body: 'Wednesday afternoons only. Husband Pete. Daughter Eli, kindergarten 2026.', tone: 'sage' },
    { who: 'DR. HAN\u2019S OFFICE', body: 'Front desk is Maria. They take calls 8\u201311 and 1\u20134, Pacific. Annual physical due April.', tone: 'paper' },
    { who: 'BAYVIEW HAIR', body: 'Marcus is your barber. 45 minutes. Walk-ins only Tuesday.', tone: 'signalSoft' },
  ];
  return (
    <section style={{ borderTop:`1px solid ${VC_TOKENS.line}` }}>
      <div className="vc-grid-2col" style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap: 0 }}>
        <div style={{ padding:'72px 40px', borderRight:`1px solid ${VC_TOKENS.line}` }}>
          <SectionEyebrow kicker="MEMORY · YOURS, NOT OURS" title="She remembers" italic="the things you'd tell a good assistant." />
          <div style={{ fontSize: 17, lineHeight: 1.6, color: VC_TOKENS.ink2, maxWidth: 480 }}>
            Vooice keeps a private memory of the people in your life — how they prefer to be reached,
            what they care about, what you’ve told her not to say. You can read every line of it.
            You can edit it. You can delete it.
          </div>
          <div style={{ marginTop: 32, display:'flex', flexDirection:'column', gap: 14 }}>
            {[
              'Yours alone. Not used to train models.',
              'Source-traced. Every fact links to the call, message, or note it came from.',
              'Forgettable. Tell her to forget something. She does.',
            ].map((p, i) => (
              <div key={i} style={{ display:'flex', gap: 14, alignItems:'flex-start' }}>
                <span style={{ width: 8, height: 8, background: VC_TOKENS.signal, marginTop: 8 }} />
                <span style={{ fontSize: 16, lineHeight: 1.45 }}>{p}</span>
              </div>
            ))}
          </div>
          <button onClick={() => go('contacts-memory')} style={{
            marginTop: 36, padding: '14px 20px', background: 'transparent', color: VC_TOKENS.ink,
            border:`1px solid ${VC_TOKENS.line}`, cursor:'pointer',
            fontFamily:"'JetBrains Mono', monospace", fontWeight: 700, fontSize: 12, letterSpacing:'.12em',
          }}>SEE WHAT SHE REMEMBERS →</button>
        </div>

        {/* Memory cards collage */}
        <div style={{
          padding: '60px 48px', background: VC_TOKENS.paper2,
          display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24, alignContent:'center',
        }}>
          {MEMORIES.map((m, i) => {
            const tones = {
              butter: { bg: VC_TOKENS.butter, fg: VC_TOKENS.ink, sh: VC_TOKENS.ink },
              sage:   { bg: VC_TOKENS.sage,   fg: VC_TOKENS.paper, sh: VC_TOKENS.ink },
              paper:  { bg: VC_TOKENS.paper,  fg: VC_TOKENS.ink, sh: VC_TOKENS.signal },
              signalSoft: { bg: VC_TOKENS.signalSoft, fg: VC_TOKENS.ink, sh: VC_TOKENS.ink },
            };
            const tone = tones[m.tone];
            const rot = [(-1.5), (1.4), (1.0), (-1.2)][i];
            return (
              <div key={m.who} style={{
                background: tone.bg, color: tone.fg, padding: '20px 22px',
                border: `1px solid ${VC_TOKENS.line}`,
                transform: `rotate(${rot}deg)`,
                boxShadow: `4px 6px 0 ${tone.sh}`,
              }}>
                <Mono color={tone.fg} style={{ opacity: 0.7 }}>{m.who}</Mono>
                <div style={{ marginTop: 10, fontSize: 14, lineHeight: 1.5, fontFamily:"'Instrument Serif', serif", fontStyle:'italic' }}>
                  {m.body}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── Trust & safety ────────────────────────────────────────────────────────
function TrustSection() {
  const COMMITMENTS = [
    {
      t: 'She will not impersonate you.',
      b: 'When she calls on your behalf she identifies herself as an AI and names you as the person she\u2019s calling for. Always. The first thing out of her mouth.',
      icon: 'identity',
    },
    {
      t: 'She will not train on your data.',
      b: 'Your calls, your messages, your memory — yours. Not in any training set, not shared with model providers for improvement, not seen by us beyond what\u2019s needed to deliver the service.',
      icon: 'lock',
    },
    {
      t: 'She will dial you in if asked.',
      b: 'Any party on a call can ask "can I talk to a human?" and she\u2019ll bridge you in or end the call and ping you. No chatbot loops. No "I\u2019m sorry, I can\u2019t do that."',
      icon: 'bridge',
    },
    {
      t: 'She will read back before writing.',
      b: 'Before she books, sends, replies, or commits — she repeats the key details out loud, in plain language, and waits for confirmation. Slot read-back is a safety feature, not a flourish.',
      icon: 'readback',
    },
  ];
  return (
    <section style={{ borderTop:`1px solid ${VC_TOKENS.line}` }}>
      <div style={{ padding:'72px 40px 24px' }}>
        <SectionEyebrow kicker="THE FOUR PROMISES · ENGRAVED, NOT POSTED" title="What she" italic="will not do." />
        <div style={{ fontSize: 17, lineHeight: 1.55, color: VC_TOKENS.ink2, maxWidth: 720, marginTop: -16, marginBottom: 8 }}>
          A voice that calls people on your behalf is a serious thing. We took the boundaries seriously
          and put them in writing. Pinned to the wall. Hard to move.
        </div>
      </div>
      <div className="vc-grid-2col" style={{
        display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0,
        borderTop:`1px solid ${VC_TOKENS.line}`,
      }}>
        {COMMITMENTS.map((c, i) => (
          <div key={c.t} style={{
            padding: '36px 40px',
            borderRight: i % 2 === 0 ? `1px solid ${VC_TOKENS.line}` : 'none',
            borderBottom: i < 2 ? `1px solid ${VC_TOKENS.line}` : 'none',
            display:'grid', gridTemplateColumns:'auto 1fr', gap: 24, alignItems:'flex-start',
          }}>
            <PromiseIcon kind={c.icon} />
            <div>
              <div style={{
                fontFamily:"'Inter Tight', sans-serif", fontSize: 26, fontWeight: 600,
                letterSpacing:'-0.02em', lineHeight: 1.15,
              }}>{c.t}</div>
              <div style={{ marginTop: 12, fontSize: 15, lineHeight: 1.55, color: VC_TOKENS.ink2 }}>{c.b}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function PromiseIcon({ kind }) {
  const sz = 56;
  const stroke = VC_TOKENS.ink;
  const accent = VC_TOKENS.signal;
  if (kind === 'identity') return (
    <svg width={sz} height={sz} viewBox="0 0 56 56" fill="none">
      <rect x="6" y="6" width="44" height="44" stroke={stroke} strokeWidth="1.5" />
      <circle cx="28" cy="22" r="6" stroke={stroke} strokeWidth="1.5" />
      <path d="M16 42c2-6 8-9 12-9s10 3 12 9" stroke={stroke} strokeWidth="1.5" />
      <line x1="10" y1="48" x2="46" y2="12" stroke={accent} strokeWidth="2" />
    </svg>
  );
  if (kind === 'lock') return (
    <svg width={sz} height={sz} viewBox="0 0 56 56" fill="none">
      <rect x="10" y="24" width="36" height="26" stroke={stroke} strokeWidth="1.5" />
      <path d="M18 24v-6a10 10 0 0120 0v6" stroke={stroke} strokeWidth="1.5" />
      <circle cx="28" cy="36" r="3" fill={accent} />
      <line x1="28" y1="38" x2="28" y2="44" stroke={accent} strokeWidth="2" />
    </svg>
  );
  if (kind === 'bridge') return (
    <svg width={sz} height={sz} viewBox="0 0 56 56" fill="none">
      <circle cx="14" cy="28" r="6" stroke={stroke} strokeWidth="1.5" />
      <circle cx="42" cy="28" r="6" stroke={stroke} strokeWidth="1.5" />
      <path d="M20 28h16" stroke={accent} strokeWidth="2" />
      <path d="M32 24l4 4-4 4" stroke={accent} strokeWidth="2" fill="none" />
    </svg>
  );
  return (
    <svg width={sz} height={sz} viewBox="0 0 56 56" fill="none">
      <path d="M10 14h36v22H22l-8 8v-8h0z" stroke={stroke} strokeWidth="1.5" />
      <path d="M18 22h20M18 28h14" stroke={stroke} strokeWidth="1.5" />
      <path d="M14 38l4 4 8-8" stroke={accent} strokeWidth="2" fill="none" />
    </svg>
  );
}

// ── FAQ ───────────────────────────────────────────────────────────────────
function FAQSection() {
  const QS = [
    {
      q: 'What does it cost?',
      a: 'Free for the first 200 minutes a month while we\u2019re in beta. Pricing tiers go live this summer; existing users keep beta pricing for a year.',
    },
    {
      q: 'Whose voice does she use?',
      a: 'A neutral, warm voice we built with ElevenLabs. You\u2019ll be able to pick from a small set of voices later, but never one cloned from you. We won\u2019t do that even if you ask.',
    },
    {
      q: 'What if she gets it wrong on a call?',
      a: 'She\u2019ll say so. Her instructions tell her to admit confusion, repeat back, and offer to bring you in. The slot read-back catches most errors before they commit. The audit log catches the rest.',
    },
    {
      q: 'Does she record the calls?',
      a: 'Yes, with consent — she announces recording at the start and stores them encrypted, accessible only to you. Two-party-consent states get an explicit prompt; one-party states get a notification.',
    },
    {
      q: 'Can I bring my own phone number?',
      a: 'Not yet. Today every user gets a Vooice number in their area code. Number porting is on the roadmap.',
    },
  ];
  return (
    <section style={{ background: VC_TOKENS.paper2, borderTop:`1px solid ${VC_TOKENS.line}` }}>
      <div style={{ padding:'72px 40px 24px' }}>
        <SectionEyebrow kicker="FAQ · WHAT PEOPLE ASK" title="Reasonable" italic="questions, plainly answered." />
      </div>
      <div style={{ padding:'0 40px 80px', maxWidth: 960 }}>
        {QS.map((item, i) => <FAQItem key={i} q={item.q} a={item.a} startOpen={i === 0} />)}
      </div>
    </section>
  );
}

function FAQItem({ q, a, startOpen }) {
  const [open, setOpen] = React.useState(!!startOpen);
  return (
    <div style={{ borderTop: `1px solid ${VC_TOKENS.line}` }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width:'100%', padding: '24px 0', display:'flex', justifyContent:'space-between',
        alignItems:'center', background:'transparent', border:'none', cursor:'pointer',
        textAlign:'left', color: VC_TOKENS.ink,
      }}>
        <span style={{
          fontFamily:"'Inter Tight', sans-serif", fontSize: 22, fontWeight: 600,
          letterSpacing:'-0.015em',
        }}>{q}</span>
        <span style={{
          fontFamily:"'JetBrains Mono', monospace", fontSize: 14,
          color: open ? VC_TOKENS.signal : VC_TOKENS.ink3,
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          transition: 'transform 200ms ease',
          width: 20, height: 20, display:'inline-flex', alignItems:'center', justifyContent:'center',
        }}>+</span>
      </button>
      {open && (
        <div style={{
          paddingBottom: 24, fontSize: 16, lineHeight: 1.6, color: VC_TOKENS.ink2,
          maxWidth: 720, fontFamily:"'Instrument Serif', serif", fontStyle:'italic',
        }}>{a}</div>
      )}
    </div>
  );
}

// ── CTA + Footer ──────────────────────────────────────────────────────────
function CTAFooter({ go }) {
  return (
    <>
      <section style={{
        background: VC_TOKENS.ink, color: VC_TOKENS.paper,
        padding: '80px 40px', borderTop: `1px solid ${VC_TOKENS.line}`,
        position:'relative', overflow:'hidden',
      }}>
        <div className="vc-grid-2col" style={{
          display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 60, alignItems:'center',
          maxWidth: 1240, margin:'0 auto',
        }}>
          <div>
            <Mono color={VC_TOKENS.signal}>READY TO TRY HER?</Mono>
            <h2 style={{
              fontFamily:"'Inter Tight', sans-serif",
              fontSize: 'clamp(40px, 7vw, 84px)', fontWeight: 700,
              letterSpacing:'-0.04em', lineHeight: 0.96,
              margin: '14px 0 24px',
            }}>
              Get a phone number<br/>
              <span style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontWeight: 400 }}>that thinks.</span>
            </h2>
            <div style={{ fontSize: 18, lineHeight: 1.5, color: '#bbb', maxWidth: 540 }}>
              Beta is invite-only and free for 200 minutes a month. Drop your number;
              we’ll text you when your line is provisioned.
            </div>
          </div>
          <div style={{ background: VC_TOKENS.paper, color: VC_TOKENS.ink, padding: 28, transform:'rotate(-1.4deg)', boxShadow:`14px 14px 0 ${VC_TOKENS.signal}` }}>
            <Mono color={VC_TOKENS.signal}>WAITLIST · 90 SECONDS</Mono>
            <div style={{ marginTop: 14 }}>
              <label style={{ display:'block' }}>
                <Mono color={VC_TOKENS.ink3}>YOUR PHONE</Mono>
                <input
                  type="tel"
                  placeholder="+1 (415) 555 0188"
                  style={{
                    width:'100%', boxSizing:'border-box', padding: '14px 0', marginTop: 8,
                    background:'transparent', border:'none', borderBottom:`1.5px solid ${VC_TOKENS.line}`,
                    fontFamily:"'Inter Tight', sans-serif", fontSize: 22, fontWeight: 500,
                    color: VC_TOKENS.ink, outline:'none',
                  }}
                />
              </label>
            </div>
            <div style={{ marginTop: 22 }}>
              <label style={{ display:'block' }}>
                <Mono color={VC_TOKENS.ink3}>WHAT WOULD YOU ASK HER FIRST?</Mono>
                <input
                  type="text"
                  placeholder="Book me a haircut Thursday after 1."
                  style={{
                    width:'100%', boxSizing:'border-box', padding: '14px 0', marginTop: 8,
                    background:'transparent', border:'none', borderBottom:`1.5px solid ${VC_TOKENS.line}`,
                    fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 18,
                    color: VC_TOKENS.ink, outline:'none',
                  }}
                />
              </label>
            </div>
            <button onClick={() => go('home')} style={{
              marginTop: 28, width:'100%', padding: '18px 22px',
              background: VC_TOKENS.signal, color: VC_TOKENS.paper, border:'none',
              fontFamily:"'JetBrains Mono', monospace", fontWeight: 700, letterSpacing:'.14em', fontSize: 12,
              cursor:'pointer',
            }}>GET YOUR NUMBER →</button>
            <div style={{ marginTop: 14, fontSize: 11, color: VC_TOKENS.ink3, fontFamily:"'JetBrains Mono', monospace", letterSpacing:'.04em' }}>
              We text once when your line is ready. Never sold, never spammed.
            </div>
          </div>
        </div>
      </section>

      {/* Bottom commitments strip */}
      <div style={{
        background: VC_TOKENS.paper, color: VC_TOKENS.ink,
        padding: '20px 40px',
        display:'flex', gap: 32, alignItems:'center', flexWrap:'wrap',
        borderTop: `1px solid ${VC_TOKENS.line}`,
        borderBottom: `1px solid ${VC_TOKENS.line}`,
        justifyContent:'center',
      }}>
        {[
          'WILL NOT IMPERSONATE',
          'WILL NOT TRAIN ON YOUR DATA',
          'WILL DIAL YOU IN',
          'WILL READ BACK',
        ].map((t, i, arr) => (
          <React.Fragment key={t}>
            <Mono color={VC_TOKENS.ink}>{t}</Mono>
            {i < arr.length - 1 && <Mono color={VC_TOKENS.signal}>★</Mono>}
          </React.Fragment>
        ))}
      </div>

      {/* Footer */}
      <footer style={{ background: VC_TOKENS.paper, padding: '48px 40px 32px', color: VC_TOKENS.ink }}>
        <div className="vc-grid-4col" style={{
          display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap: 40,
          maxWidth: 1240, margin: '0 auto',
        }}>
          <div>
            <VWordmark size={20} />
            <div style={{ marginTop: 16, fontSize: 14, color: VC_TOKENS.ink2, lineHeight: 1.55, maxWidth: 320 }}>
              The assistant you can call. Built in San Francisco. Phone-first by design.
            </div>
            <div style={{ marginTop: 20 }}>
              <Mono color={VC_TOKENS.ink3}>+1 (415) 555‑0188</Mono>
            </div>
          </div>
          <FooterCol title="PRODUCT" links={[
            { l: 'Memory', k: 'contacts-memory' },
            { l: 'Pricing', k: 'pricing' },
            { l: 'Live demo', k: 'home' },
          ]} go={go} />
          <FooterCol title="COMPANY" links={[
            { l: 'About', k: 'about' },
            { l: 'Careers' },
            { l: 'Press' },
            { l: 'Contact' },
          ]} go={go} />
          <FooterCol title="LEGAL" links={[
            { l: 'Privacy' },
            { l: 'Terms' },
            { l: 'Recording policy' },
            { l: 'AI commitments' },
          ]} go={go} />
        </div>
        <div style={{
          maxWidth: 1240, margin: '32px auto 0', paddingTop: 24,
          borderTop: `1px solid ${VC_TOKENS.lineSoft}`,
          display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap: 12,
        }}>
          <Mono color={VC_TOKENS.ink3}>© 2026 VOOICE · MADE WITH PATIENCE IN SF</Mono>
          <Mono color={VC_TOKENS.ink3}>STATUS · ALL SYSTEMS NOMINAL</Mono>
        </div>
      </footer>
    </>
  );
}

function FooterCol({ title, links, go }) {
  return (
    <div>
      <Mono color={VC_TOKENS.ink3}>{title}</Mono>
      <div style={{ marginTop: 14, display:'flex', flexDirection:'column', gap: 10 }}>
        {links.map(l => (
          <span
            key={l.l}
            onClick={() => l.k && go && go(l.k)}
            style={{ fontSize: 14, color: VC_TOKENS.ink, cursor: l.k ? 'pointer' : 'default' }}
          >
            {l.l}
          </span>
        ))}
      </div>
    </div>
  );
}

window.MarketingHero = MarketingHero;
