/* Vooice — extra screens: audit log (ticker tape), reminders (sticky notes),
   pricing (service menu), onboarding mobile, and how-it-works marketing. */

// ── Audit log: ticker tape / receipt printer ─────────────────────────────────
function AuditLog({ width = 1320, height = 880, onNavigate }) {
  const ENTRIES = [
    { t: '15:51:04', kind: 'CALL.START',     id: 'c_3F2A8B', body: 'OUTBOUND → +1 (415) 555-0142  · "Bayview Hair Studio"' },
    { t: '15:51:09', kind: 'TOOL.calendar.read',  body: 'check_availability(window=Wed-Thu, 13:00-17:00)  → 3 slots' },
    { t: '15:51:18', kind: 'LLM.turn',         body: 'Claude · 612 tokens in / 88 out · 920ms' },
    { t: '15:51:30', kind: 'SAFETY.readback',  body: '"Thursday at 2 with Marcus Wu, 45 minutes"  · awaited 4s' },
    { t: '15:51:38', kind: 'HONESTY.flag',     body: 'Callee asked: "are you a real person?"' },
    { t: '15:51:39', kind: 'POLICY.honesty',   body: 'rule=disclose_ai · response=truthful + offer_handoff' },
    { t: '15:51:46', kind: 'CALL.add_party',   body: 'Dialed +1 (415) 555-0188 (Jordan)  · joined at 39.5s' },
    { t: '15:52:24', kind: 'CALL.drop_party', body: 'Jordan dropped · 4.5s on the line' },
    { t: '15:52:48', kind: 'TOOL.calendar.write', body: 'create_event(Thu Apr 9 14:00-14:45, "Haircut · Marcus")' },
    { t: '15:52:50', kind: 'TOOL.contacts.upsert', body: 'Marcus Wu · +1 (415) 555-0142 · tag=barber,haircut' },
    { t: '15:52:58', kind: 'TOOL.message.send', body: 'Telegram → Jordan: "Booked Thu 2pm w/ Marcus"' },
    { t: '15:53:04', kind: 'CALL.END',          body: 'Duration 2:00 · cost $0.026 · audit=lograg/c/3F2A8B' },
    { t: '15:53:06', kind: 'EGRESS.recording', body: 'Sealed · vooice-recordings/c_3F2A8B.opus · sha256:9f2…' },
  ];

  return (
    <div className="vc-root" style={{
      width, minHeight: height, background: VC_TOKENS.paper, color: VC_TOKENS.ink,
      display:'grid', gridTemplateColumns:'minmax(0, 1fr) minmax(280px, 380px)', gridTemplateRows:'auto 1fr',
      borderTop: `1px solid ${VC_TOKENS.line}`,
    }}>
      <AppHeader onNavigate={onNavigate} current="audit" crumbs={[{label:'AUDIT LOG'}]} />
      <main style={{ padding:'28px 36px', display:'flex', flexDirection:'column', gap:18, minWidth: 0 }}>
        <div>
          <Mono>EVERY TOOL CALL · EVERY DIAL · EVERY MESSAGE</Mono>
          <h1 style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 56, fontWeight:700, letterSpacing:'-0.035em', lineHeight: 1, margin:'10px 0 6px' }}>
            Audit log
          </h1>
          <div style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 18, color: VC_TOKENS.ink2 }}>
            Receipt-style. Read by humans, signed by machines. Nothing she did is hidden.
          </div>
        </div>

        {/* The receipt */}
        <div style={{ flex:1, overflow:'auto', background: VC_TOKENS.paper2, border:`1px solid ${VC_TOKENS.line}`,
          padding: 24, fontFamily:"'JetBrains Mono', monospace",
          backgroundImage: `repeating-linear-gradient(to bottom, transparent 0 26px, ${VC_TOKENS.lineSoft} 26px 27px)`,
        }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 14 }}>
            <Mono>VOOICE · CALL c_3F2A8B · 2026-04-08</Mono>
            <Mono>SIGNED · ed25519/2F:8B…:9A</Mono>
          </div>
          {ENTRIES.map((e, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'90px 200px 1fr',
              gap: 14, padding: '6px 0', fontSize: 12.5,
              color: e.kind.startsWith('SAFETY') || e.kind.startsWith('HONESTY') || e.kind.startsWith('POLICY') ? VC_TOKENS.signal : VC_TOKENS.ink,
            }}>
              <span style={{ color: VC_TOKENS.ink3 }}>{e.t}</span>
              <span style={{ fontWeight: 700 }}>{e.kind}</span>
              <span>{e.body}</span>
            </div>
          ))}
          <div style={{ marginTop: 18, paddingTop: 14, borderTop: `1px dashed ${VC_TOKENS.line}` }}>
            <Mono color={VC_TOKENS.ink3}>END · 13 events · 2.0 min · $0.026 · all rules satisfied</Mono>
          </div>
        </div>
      </main>

      <aside style={{ background: VC_TOKENS.paper2, borderLeft:`1px solid ${VC_TOKENS.line}`, padding:28, display:'flex', flexDirection:'column', gap:18 }}>
        <Mono>POLICY THIS CALL</Mono>
        {[
          { p:'disclose_ai', d:'Honest about being AI when asked' },
          { p:'no_voice_clone', d:'Never speak in your voice' },
          { p:'readback_before_write', d:'Repeat slot before writing' },
          { p:'audit_all_tool_calls', d:'Log every tool invocation' },
          { p:'rate_limit_outbound', d:'Max 8 outbound calls / hour' },
        ].map(r => (
          <div key={r.p} style={{ padding:'10px 12px', background: VC_TOKENS.paper, border:`1px solid ${VC_TOKENS.lineSoft}`, borderLeft:`3px solid ${VC_TOKENS.sage}` }}>
            <Mono color={VC_TOKENS.sage}>{r.p.toUpperCase()}</Mono>
            <div style={{ fontSize: 13, marginTop: 4 }}>{r.d}</div>
          </div>
        ))}
        <div style={{ marginTop:'auto' }}>
          <button onClick={() => onNavigate && onNavigate('outbound-call')} style={{
            width:'100%', padding:'14px', background: VC_TOKENS.ink, color: VC_TOKENS.paper,
            border:'none', cursor:'pointer',
            fontFamily:"'JetBrains Mono', monospace", fontWeight:700, fontSize:11, letterSpacing:'.14em',
          }}>← BACK TO LIVE CALL</button>
        </div>
      </aside>
    </div>
  );
}

// ── Reminders: sticky notes pinned ───────────────────────────────────────────
function Reminders({ width = 1320, height = 880, onNavigate }) {
  // Grouped by horizon, in chronological order. Each item has a person, a
  // verb-led label, an optional channel/source, and a state.
  const GROUPS = [
    {
      label: 'Today',
      sub: 'Apr 8',
      items: [
        { time: '6:30 PM',  who: 'Lina',   text: 'Pick up Pickle on the way home',     via: 'Telegram',  fire: 'Vooice will ping you 30 min before' },
        { time: '9:00 PM',  who: 'Self',   text: 'Start fasting — physical tomorrow',  via: 'iCal',      fire: 'Silent — confirmation only',     pinned: true },
      ],
    },
    {
      label: 'This week',
      sub: 'Apr 9 – Apr 14',
      items: [
        { time: 'Wed PM',   who: 'Lina',   text: 'Check in about the lease — let her vent',  via: 'Voice',    fire: 'Soft nudge if you haven\u2019t called by 5 PM' },
        { time: 'Fri 9:00', who: 'Self',   text: 'Call the dentist re: cleaning',           via: 'Vooice',   fire: 'Vooice will offer to place the call' },
        { time: 'Mon EOD',  who: 'David',  text: 'Send the Q3 deck',                        via: 'Email',    fire: 'Reminder at 3 PM Monday' },
      ],
    },
    {
      label: 'Later',
      sub: 'After Apr 14',
      items: [
        { time: 'Apr 21',   who: 'Eli',    text: 'Kindergarten play — RSVP yes',  via: 'Calendar', fire: '24h advance notice' },
        { time: 'Apr 22',   who: 'Mom',    text: 'Sunday dinner — bring the bread',         via: 'Telegram', fire: 'Saturday morning reminder' },
        { time: 'Apr 24',   who: 'Jared',  text: 'Follow up — hasn\u2019t replied in 11 days', via: 'SMS',     fire: 'Vooice will draft a check-in' },
      ],
    },
  ];

  return (
    <div className="vc-root" style={{
      width, minHeight: height, background: VC_TOKENS.paper, color: VC_TOKENS.ink,
      display:'grid', gridTemplateRows:'auto 1fr',
      borderTop: `1px solid ${VC_TOKENS.line}`,
    }}>
      <AppHeader onNavigate={onNavigate} current="reminders" crumbs={[{label:'REMINDERS'}]} />
      <main style={{ padding:'36px 48px 56px', overflow:'auto' }}>
        {/* Header strip */}
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'flex-end',
          paddingBottom: 24, borderBottom: `1px solid ${VC_TOKENS.line}`, marginBottom: 28,
          gap: 24, flexWrap:'wrap',
        }}>
          <div style={{ maxWidth: 720 }}>
            <Mono>8 OPEN · 3 FIRING THIS WEEK · LAST UPDATED 2 MIN AGO</Mono>
            <h1 style={{
              fontFamily:"'Inter Tight', sans-serif", fontSize: 56, fontWeight: 700,
              letterSpacing:'-0.035em', lineHeight: 1, margin:'12px 0 8px',
            }}>
              Reminders
            </h1>
            <div style={{
              fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 19,
              color: VC_TOKENS.ink2, lineHeight: 1.4,
            }}>
              Vooice will surface each one at the right moment — by call, text, or a quiet ping. Never naggy.
            </div>
          </div>
          <div style={{ display:'flex', gap: 10, alignItems:'center', flexWrap:'wrap' }}>
            <div style={{
              display:'flex', alignItems:'center', gap: 10, padding:'10px 14px',
              border:`1px solid ${VC_TOKENS.line}`, background: VC_TOKENS.paper2,
              minWidth: 220,
            }}>
              <Mono color={VC_TOKENS.ink3}>FILTER</Mono>
              <Mono>ALL · ANY CHANNEL</Mono>
            </div>
            <button style={{
              padding:'12px 18px', background: VC_TOKENS.ink, color: VC_TOKENS.paper, border:'none',
              fontFamily:"'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, letterSpacing:'.14em',
              cursor:'pointer',
            }}>+ NEW REMINDER</button>
          </div>
        </div>

        {/* Summary metrics */}
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, marginBottom: 36,
          border:`1px solid ${VC_TOKENS.line}`, background: VC_TOKENS.paper2,
        }}>
          {[
            { k: 'OPEN',           v: '8',  s: 'across 3 horizons' },
            { k: 'FIRING TODAY',   v: '2',  s: '6:30 PM · 9:00 PM' },
            { k: 'AWAITING REPLY', v: '1',  s: 'Jared · 11 days' },
            { k: 'COMPLETED · WK', v: '14', s: '+3 vs. last week' },
          ].map((m, i) => (
            <div key={i} style={{
              padding:'18px 22px',
              borderRight: i < 3 ? `1px solid ${VC_TOKENS.line}` : 'none',
            }}>
              <Mono color={VC_TOKENS.ink3}>{m.k}</Mono>
              <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 32, fontWeight: 700, letterSpacing:'-0.02em', margin:'4px 0 2px' }}>
                {m.v}
              </div>
              <Mono color={VC_TOKENS.ink3}>{m.s}</Mono>
            </div>
          ))}
        </div>

        {/* Ledger groups */}
        <div style={{ display:'flex', flexDirection:'column', gap: 36 }}>
          {GROUPS.map((g, gi) => (
            <section key={gi}>
              <div style={{
                display:'flex', alignItems:'baseline', gap: 14,
                paddingBottom: 10, marginBottom: 6,
                borderBottom: `1px solid ${VC_TOKENS.line}`,
              }}>
                <h2 style={{
                  fontFamily:"'Inter Tight', sans-serif", fontSize: 22, fontWeight: 700,
                  letterSpacing:'-0.02em', margin: 0,
                }}>
                  {g.label}
                </h2>
                <Mono color={VC_TOKENS.ink3}>{g.sub.toUpperCase()}</Mono>
                <span style={{ flex: 1 }} />
                <Mono color={VC_TOKENS.ink3}>{g.items.length} ITEM{g.items.length === 1 ? '' : 'S'}</Mono>
              </div>
              <div>
                {g.items.map((it, i) => (
                  <ReminderRow key={i} item={it} last={i === g.items.length - 1} />
                ))}
              </div>
            </section>
          ))}
        </div>
      </main>
    </div>
  );
}

function ReminderRow({ item, last }) {
  return (
    <div style={{
      display:'grid',
      gridTemplateColumns:'120px 110px 1fr 200px 32px',
      gap: 20, alignItems:'center',
      padding:'18px 4px',
      borderBottom: last ? 'none' : `1px solid ${VC_TOKENS.lineSoft}`,
    }}>
      {/* Time */}
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        {item.pinned && (
          <span style={{
            width: 6, height: 6, background: VC_TOKENS.signal, borderRadius: '50%',
            display: 'inline-block', flexShrink: 0,
          }} />
        )}
        <Mono>{item.time.toUpperCase()}</Mono>
      </div>
      {/* Who */}
      <div style={{ display:'flex', alignItems:'center', gap: 10, minWidth: 0 }}>
        <Avatar name={item.who} size={22} />
        <span style={{ fontSize: 14, fontWeight: 500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
          {item.who}
        </span>
      </div>
      {/* Body */}
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 17, lineHeight: 1.35, fontWeight: 500 }}>
          {item.text}
        </div>
        <div style={{ marginTop: 4 }}>
          <Mono color={VC_TOKENS.ink3}>{item.fire}</Mono>
        </div>
      </div>
      {/* Channel */}
      <div style={{ display:'flex', alignItems:'center', gap: 8, justifySelf:'end' }}>
        <Mono color={VC_TOKENS.ink3}>VIA</Mono>
        <span style={{
          padding:'4px 8px', border:`1px solid ${VC_TOKENS.line}`, background: VC_TOKENS.paper2,
          fontFamily:"'JetBrains Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing:'.1em',
        }}>
          {item.via.toUpperCase()}
        </span>
      </div>
      {/* Action */}
      <button title="Mark done" style={{
        width: 24, height: 24, border:`1px solid ${VC_TOKENS.line}`, background: 'transparent',
        cursor:'pointer', padding: 0, justifySelf:'end',
      }} />
    </div>
  );
}

// ── Pricing: restaurant service menu ─────────────────────────────────────────
function Pricing({ width = 1320, height = 880, onNavigate }) {
  return (
    <div className="vc-root" style={{
      width, minHeight: height, background: VC_TOKENS.paper, color: VC_TOKENS.ink, padding:0,
      borderTop:`1px solid ${VC_TOKENS.line}`, display:'grid', gridTemplateRows:'auto 1fr',
    }}>
      <AppHeader onNavigate={onNavigate} current="pricing" crumbs={[{label:'PRICING'}]} />
      <main style={{ padding:'56px 80px', overflow:'auto' }}>
        <div style={{ textAlign:'center', marginBottom: 40 }}>
          <Mono>EST. 2026 · ONE NUMBER · ONE PERSON</Mono>
          <h1 style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 96, fontWeight: 400, letterSpacing:'-0.02em', lineHeight: 1, margin:'10px 0 4px' }}>
            The Service Menu
          </h1>
          <div style={{ fontSize: 16, color: VC_TOKENS.ink3, marginTop: 10 }}>
            Plain prices. No seats, no surprises. Cancel any time.
          </div>
        </div>

        <div style={{
          maxWidth: 880, margin:'0 auto',
          border:`1.5px solid ${VC_TOKENS.line}`, padding:'40px 48px', background: VC_TOKENS.paper2,
        }}>
          <PriceRow name="Personal"
            price="$20 / month"
            sub="Hosted by us. One Vooice number. The default."
            details={['200 voice minutes','Unlimited Telegram & WhatsApp','Calendar · email · contacts','30-day recording retention']}
          />
          <PriceRow name="Pro"
            price="$50 / month"
            sub="More headroom. Bring your existing number."
            featured
            details={['1,000 voice minutes','Number porting','Multi-channel + WhatsApp Business','1-year recording retention','Priority routing','Email support']}
          />
          <PriceRow name="Dial cost"
            price="$0.013 / min"
            sub="Outbound carrier minutes (pass-through)."
            tail
          />
        </div>

        <div style={{ textAlign:'center', marginTop: 32, fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 18, color: VC_TOKENS.ink2 }}>
          Tax & gratuity not included. Honesty included.
        </div>
      </main>
    </div>
  );
}

function PriceRow({ name, price, sub, details = [], featured, tail }) {
  return (
    <div style={{ padding:'24px 0', borderBottom: tail ? 'none' : `1px dashed ${VC_TOKENS.line}` }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr auto', alignItems:'baseline', gap: 24 }}>
        <div>
          <div style={{ display:'flex', alignItems:'baseline', gap: 12 }}>
            <span style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 36, fontWeight: 400 }}>{name}</span>
            {featured && <Stamp color={VC_TOKENS.signal}>HOUSE PICK</Stamp>}
          </div>
          <div style={{ fontSize: 14, color: VC_TOKENS.ink3, marginTop: 4 }}>{sub}</div>
        </div>
        <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize: 20, fontWeight: 600 }}>{price}</div>
      </div>
      {details.length > 0 && (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'4px 24px', marginTop: 14 }}>
          {details.map(d => (
            <div key={d} style={{ fontSize: 13, color: VC_TOKENS.ink2, display:'flex', gap:8 }}>
              <span style={{ color: VC_TOKENS.signal }}>·</span> {d}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Onboarding mobile flow ──────────────────────────────────────────────────
function MobileOnboarding() {
  const [step, setStep] = React.useState(0);
  const STEPS = [
    { title: 'Hi.', sub: 'Vooice is the assistant you call. Let\u2019s set you up — about 90 seconds.', cta:'BEGIN' },
    { title: 'Your number.', sub: 'We assigned you +1 (415) 555-0188. Save it as "Vooice" in your contacts.', cta:'SAVED', code: '+1 (415) 555-0188' },
    { title: 'Connect Telegram?', sub: 'So you can text her too — voice and written. We recommend it.', cta:'CONNECT' },
    { title: 'Calendar?', sub: 'So she can read your week and book without checking with you.', cta:'CONNECT GOOGLE' },
    { title: 'One promise.', sub: 'Vooice will never impersonate you, never train on your data, and will say she\u2019s AI when asked.', cta:'GOT IT' },
    { title: 'Try her.', sub: 'Call your Vooice number now. Ask her anything — "what\u2019s on my calendar today" is a good start.', cta:'CALL VOOICE', call: true },
  ];
  const s = STEPS[step];
  return (
    <IOSDevice width={390} height={844}>
      <div style={{ background: VC_TOKENS.paper, height:'100%', display:'flex', flexDirection:'column' }}>
        <div style={{ padding:'14px 20px', display:'flex', justifyContent:'space-between' }}>
          <Mono color={VC_TOKENS.ink3}>STEP {step+1} / {STEPS.length}</Mono>
          <Mono color={VC_TOKENS.ink3}>SKIP</Mono>
        </div>
        <div style={{ padding:'8px 20px' }}>
          <div style={{ display:'flex', gap: 4 }}>
            {STEPS.map((_, i) => (
              <div key={i} style={{
                flex: 1, height: 3, background: i <= step ? VC_TOKENS.signal : VC_TOKENS.lineSoft,
              }} />
            ))}
          </div>
        </div>

        <div style={{ padding:'40px 24px', flex: 1, display:'flex', flexDirection:'column', gap: 20 }}>
          <VLogo size={36} />
          <div style={{ fontFamily:"'Inter Tight', sans-serif", fontSize: 44, fontWeight: 700, letterSpacing:'-0.04em', lineHeight: 1, marginTop: 12 }}>
            {s.title}
          </div>
          <div style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontSize: 19, lineHeight: 1.4, color: VC_TOKENS.ink2 }}>
            {s.sub}
          </div>

          {s.code && (
            <div style={{
              border: `1.5px dashed ${VC_TOKENS.signal}`, padding: '20px 24px',
              fontFamily:"'JetBrains Mono', monospace", fontSize: 22, fontWeight: 700, letterSpacing:'0.02em',
              textAlign:'center', color: VC_TOKENS.ink, marginTop: 10,
            }}>{s.code}</div>
          )}

          {s.call && (
            <div style={{ marginTop: 'auto', display:'flex', flexDirection:'column', alignItems:'center', gap: 18, paddingBottom: 30 }}>
              <RingingRing size={64} color={VC_TOKENS.signal} />
              <Mono color={VC_TOKENS.ink3}>TAP TO DIAL · ALWAYS FREE</Mono>
            </div>
          )}
        </div>

        <div style={{ padding: 20 }}>
          <button onClick={() => setStep(s2 => Math.min(STEPS.length - 1, s2 + 1))} style={{
            width:'100%', padding: 18, background: VC_TOKENS.signal, color: VC_TOKENS.paper, border:'none',
            fontFamily:"'JetBrains Mono', monospace", fontWeight:700, letterSpacing:'.14em', fontSize: 12,
          }}>{s.cta} →</button>
        </div>
      </div>
    </IOSDevice>
  );
}

// ── Shared header for new screens ──────────────────────────────────────────
function Header({ onNavigate, crumbs = [], dark }) {
  const fg = dark ? VC_TOKENS.paper : VC_TOKENS.ink;
  const bg = dark ? VC_TOKENS.ink : VC_TOKENS.paper;
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '0 28px', borderBottom: `1px solid ${dark ? '#2a2724' : VC_TOKENS.line}`,
      background: bg, color: fg,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
        <span onClick={() => onNavigate && onNavigate('home')} style={{ cursor:'pointer' }}>
          <VWordmark size={15} color={fg} />
        </span>
        <span style={{ width: 1, height: 16, background: dark ? '#2a2724' : VC_TOKENS.lineSoft }} />
        {crumbs.map((c, i) => (
          <Mono key={i} color={i === crumbs.length - 1 ? fg : (dark ? '#807a72' : VC_TOKENS.ink3)}>
            {c}{i < crumbs.length - 1 ? ' /' : ''}
          </Mono>
        ))}
      </div>
      <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
        <Mono color={dark ? '#807a72' : VC_TOKENS.ink3}>+1 (415) 555‑0188</Mono>
        <Avatar name="Jordan Reyes" size={28} bg={dark ? VC_TOKENS.paper : VC_TOKENS.ink} fg={dark ? VC_TOKENS.ink : VC_TOKENS.paper} />
      </div>
    </div>
  );
}

Object.assign(window, { AuditLog, Reminders, Pricing, MobileOnboarding });