// iPad overlays + page tools — iPad-tuned versions of the mobile overlays.
// Layout difference: popovers anchor to chrome elements instead of bottom-sheet.

// ─── Find in page (top-right popover) ──────────────────────────
function TFindInPage({ onClose }) {
  const [q, setQ] = React.useState('mesh');
  return (
    <div style={{
      position: 'absolute', top: 56, right: 16, zIndex: 86, width: 360,
      background: M_SURFACE, border: '1px solid ' + M_BORDER, borderRadius: 12,
      boxShadow: '0 10px 28px rgba(0,0,0,0.45)',
      animation: 'tFindIn 180ms ease-out',
    }}>
      <style>{`@keyframes tFindIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}`}</style>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px' }}>
        <div style={{
          flex: 1, display: 'flex', alignItems: 'center', gap: 8,
          padding: '7px 10px', background: M_BG,
          border: '1px solid rgba(96,165,250,0.45)', borderRadius: 8,
          boxShadow: '0 0 0 3px rgba(96,165,250,0.10)',
        }}>
          <span style={{ color: M_ACCENT_B }}>{MIc.search({ s: 13 })}</span>
          <input value={q} onChange={(e) => setQ(e.target.value)} autoFocus placeholder="Find on page"
            style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: M_FG, fontSize: 12.5, fontFamily: 'inherit', minWidth: 0 }}/>
          <span style={{ fontSize: 10, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>{q ? '3 of 12' : '0 of 0'}</span>
        </div>
        <button style={{ width: 28, height: 28, borderRadius: 7, background: 'transparent', border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED, display: 'grid', placeItems: 'center', cursor: 'pointer' }}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m18 15-6-6-6 6"/></svg></button>
        <button style={{ width: 28, height: 28, borderRadius: 7, background: 'transparent', border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED, display: 'grid', placeItems: 'center', cursor: 'pointer' }}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
        <button onClick={onClose} style={{ width: 28, height: 28, borderRadius: 7, background: 'transparent', border: 0, color: M_FG_MUTED, display: 'grid', placeItems: 'center', cursor: 'pointer' }}>{MIc.close({ s: 14 })}</button>
      </div>
      <div style={{ padding: '4px 12px 10px', display: 'flex', gap: 6 }}>
        {['Match case', 'Whole word', 'Regex'].map(c => (
          <button key={c} style={{
            padding: '4px 9px', borderRadius: 999, background: 'transparent',
            border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED,
            fontSize: 10, fontFamily: 'inherit', cursor: 'pointer',
          }}>{c}</button>
        ))}
      </div>
    </div>
  );
}

// ─── Zoom control (popover from menu) ──────────────────────────
function TZoomControl({ value = 100, onChange, onClose }) {
  const presets = [50, 75, 90, 100, 110, 125, 150, 200];
  return (
    <>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 86 }}/>
      <div style={{
        position: 'absolute', top: 56, right: 16, zIndex: 87, width: 320,
        background: M_SURFACE, border: '1px solid ' + M_BORDER, borderRadius: 12,
        padding: 14, boxShadow: '0 10px 28px rgba(0,0,0,0.45)',
        animation: 'tZoomIn 180ms ease-out',
      }}>
        <style>{`@keyframes tZoomIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}`}</style>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <div style={{ fontSize: 10.5, color: M_FG_DIM, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, fontFamily: 'JetBrains Mono, monospace' }}>Page zoom</div>
          <button onClick={() => onChange && onChange(100)} style={{ fontSize: 10.5, color: M_ACCENT_B, background: 'transparent', border: 0, fontFamily: 'inherit', cursor: 'pointer' }}>Reset</button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <button onClick={() => onChange && onChange(Math.max(50, value - 10))} style={{ width: 32, height: 32, borderRadius: 8, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, display: 'grid', placeItems: 'center', cursor: 'pointer', fontSize: 17 }}>−</button>
          <div style={{ flex: 1, textAlign: 'center', fontSize: 26, fontWeight: 700, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.03em' }}>{value}<span style={{ fontSize: 14, color: M_FG_MUTED }}>%</span></div>
          <button onClick={() => onChange && onChange(Math.min(300, value + 10))} style={{ width: 32, height: 32, borderRadius: 8, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, display: 'grid', placeItems: 'center', cursor: 'pointer', fontSize: 17 }}>+</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 5 }}>
          {presets.map(p => (
            <button key={p} onClick={() => onChange && onChange(p)} style={{
              padding: '5px 0', borderRadius: 7,
              background: value === p ? M_FG : 'transparent',
              border: '1px solid ' + (value === p ? M_FG : M_BORDER_SOFT),
              color: value === p ? '#0B0C0F' : M_FG_MUTED,
              fontSize: 10.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'JetBrains Mono, monospace',
            }}>{p}%</button>
          ))}
        </div>
      </div>
    </>
  );
}

// ─── Page info (popover from shield in pill) ──────────────────
function TPageInfo({ url = 'linear.app/inbox', onClose }) {
  return (
    <>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 86, background: 'rgba(0,0,0,0.3)' }}/>
      <div style={{
        position: 'absolute', top: 50, left: '50%', transform: 'translateX(-50%)', zIndex: 87,
        width: 360, maxHeight: '78%', overflowY: 'auto',
        background: M_SURFACE, border: '1px solid ' + M_BORDER, borderRadius: 12,
        boxShadow: '0 12px 32px rgba(0,0,0,0.5)', padding: 14,
        animation: 'tPiIn 180ms ease-out',
      }}>
        <style>{`@keyframes tPiIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}`}</style>

        <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
          <div style={{ width: 34, height: 34, borderRadius: 9, background: 'rgba(110,231,183,0.16)', color: '#6EE7B7', display: 'grid', placeItems: 'center', border: '1px solid rgba(110,231,183,0.32)' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.01em' }}>Connection is secure</div>
            <div style={{ fontSize: 10.5, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>https://{url}</div>
          </div>
          <button onClick={onClose} style={{ width: 26, height: 26, borderRadius: 6, background: 'transparent', border: 0, color: M_FG_DIM, display: 'grid', placeItems: 'center', cursor: 'pointer' }}>{MIc.close({ s: 12 })}</button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 7, marginBottom: 12 }}>
          {[
            { n: '12', l: 'Trackers',    c: '#6EE7B7' },
            { n: '4',  l: 'Cookies',     c: '#FBBF24' },
            { n: '2',  l: 'Permissions', c: '#A78BFA' },
          ].map(s => (
            <div key={s.l} style={{ padding: '8px 10px', background: M_BG, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 9 }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: s.c, fontFamily: 'Geist', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontSize: 9, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', marginTop: 4, letterSpacing: '0.04em' }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ fontSize: 10, fontWeight: 700, color: M_FG_DIM, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace', padding: '0 2px 5px' }}>Permissions</div>
        <div style={{ background: M_BG, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 10, overflow: 'hidden', marginBottom: 10 }}>
          {[
            { l: 'Notifications', v: 'Allow' },
            { l: 'Camera',        v: 'Ask'   },
            { l: 'Microphone',    v: 'Ask'   },
            { l: 'Location',      v: 'Block' },
            { l: 'Clipboard',     v: 'Block' },
          ].map((p, i) => (
            <div key={p.l} style={{ display: 'flex', alignItems: 'center', padding: '8px 11px', borderTop: i === 0 ? 0 : '1px solid ' + M_BORDER_SOFT }}>
              <span style={{ flex: 1, fontSize: 12, color: M_FG, fontFamily: 'Geist' }}>{p.l}</span>
              <span style={{
                fontSize: 9.5, padding: '2px 7px', borderRadius: 999, fontWeight: 600,
                background: p.v === 'Allow' ? 'rgba(110,231,183,0.10)' : p.v === 'Block' ? 'rgba(248,113,113,0.10)' : 'rgba(255,255,255,0.05)',
                color:      p.v === 'Allow' ? '#6EE7B7'                : p.v === 'Block' ? '#F87171'                : M_FG_MUTED,
                fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.05em',
              }}>{p.v.toUpperCase()}</span>
            </div>
          ))}
        </div>

        <div style={{ fontSize: 10, fontWeight: 700, color: M_FG_DIM, letterSpacing: '0.12em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace', padding: '0 2px 5px' }}>Certificate</div>
        <div style={{ padding: '8px 11px', background: M_BG, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 10, fontSize: 11, color: M_FG, fontFamily: 'JetBrains Mono, monospace', lineHeight: 1.6 }}>
          Cloudflare Inc. ECC CA-3<br/>Valid until Aug 14, 2026<br/>TLS_AES_256_GCM_SHA384
        </div>
      </div>
    </>
  );
}

// ─── Clear browsing data (centered modal) ─────────────────────
function TClearDataSheet({ onClose }) {
  const [range, setRange] = React.useState('hour');
  const [picked, setPicked] = React.useState({ history: true, cookies: true, cache: true, downloads: false, forms: false, passwords: false });
  const opts = [
    { id: 'history',   label: 'History',           size: '47 entries today' },
    { id: 'cookies',   label: 'Cookies & site data', size: '142 sites · 8.4 MB' },
    { id: 'cache',     label: 'Cached files',      size: '184 MB' },
    { id: 'downloads', label: 'Downloads',         size: 'List only · keeps files' },
    { id: 'forms',     label: 'Autofill form data',size: '38 entries' },
    { id: 'passwords', label: 'Saved passwords',   size: '128 saved · synced' },
  ];
  const ranges = [
    { id: 'hour',  label: 'Last hour' },
    { id: 'day',   label: 'Last 24 hours' },
    { id: 'week',  label: 'Last 7 days' },
    { id: 'month', label: 'Last 4 weeks' },
    { id: 'all',   label: 'All time' },
  ];
  return (
    <>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 86, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}/>
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
        zIndex: 87, width: 440, maxHeight: '85%', overflowY: 'auto',
        background: M_SURFACE, border: '1px solid ' + M_BORDER, borderRadius: 14,
        padding: 18, boxShadow: '0 18px 50px rgba(0,0,0,0.6)',
        animation: 'tClearIn 200ms cubic-bezier(0.2,0.85,0.3,1)',
      }}>
        <style>{`@keyframes tClearIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}`}</style>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
          <div style={{ width: 36, height: 36, borderRadius: 9, background: 'rgba(248,113,113,0.14)', color: '#F87171', display: 'grid', placeItems: 'center' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.02em' }}>Clear browsing data</div>
            <div style={{ fontSize: 11, color: M_FG_MUTED, marginTop: 2 }}>Only on this device. Synced data stays on your other devices.</div>
          </div>
        </div>

        <div style={{ fontSize: 10, fontWeight: 700, color: M_FG_DIM, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace', padding: '0 2px 7px' }}>Time range</div>
        <div style={{ display: 'flex', gap: 5, marginBottom: 16, flexWrap: 'wrap' }}>
          {ranges.map(r => (
            <button key={r.id} onClick={() => setRange(r.id)} style={{
              padding: '6px 11px', borderRadius: 999,
              background: range === r.id ? M_FG : 'transparent',
              border: '1px solid ' + (range === r.id ? M_FG : M_BORDER_SOFT),
              color: range === r.id ? '#0B0C0F' : M_FG_MUTED,
              fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            }}>{r.label}</button>
          ))}
        </div>

        <div style={{ fontSize: 10, fontWeight: 700, color: M_FG_DIM, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace', padding: '0 2px 7px' }}>What to clear</div>
        <div style={{ background: M_BG, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 11, overflow: 'hidden', marginBottom: 18 }}>
          {opts.map((o, i) => (
            <div key={o.id} onClick={() => setPicked(p => ({ ...p, [o.id]: !p[o.id] }))} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
              borderTop: i === 0 ? 0 : '1px solid ' + M_BORDER_SOFT, cursor: 'pointer',
            }}>
              <div style={{
                width: 18, height: 18, borderRadius: 4,
                background: picked[o.id] ? M_FG : 'transparent',
                border: '1.5px solid ' + (picked[o.id] ? M_FG : M_BORDER),
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>{picked[o.id] && <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#0B0C0F" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, color: M_FG, fontFamily: 'Geist', fontWeight: 500 }}>{o.label}</div>
                <div style={{ fontSize: 10, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>{o.size}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button onClick={onClose} style={{ padding: '9px 18px', borderRadius: 9, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer' }}>Cancel</button>
          <button onClick={onClose} style={{ padding: '9px 18px', borderRadius: 9, background: '#F87171', border: 0, color: '#0B0C0F', fontSize: 12.5, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer' }}>Clear data</button>
        </div>
      </div>
    </>
  );
}

// ─── Permission prompt (top-center) ────────────────────────────
function TPermissionPrompt({ type = 'camera', site = 'meet.google.com', onResolve }) {
  const meta = {
    camera:   { label: 'use your camera',    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h4l2-3h6l2 3h4v12H3z"/><circle cx="12" cy="13" r="4"/></svg>, color: '#F472B6' },
    mic:      { label: 'use your microphone',icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>, color: '#22D3EE' },
    location: { label: 'know your location', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-8 8-13a8 8 0 1 0-16 0c0 5 8 13 8 13z"/><circle cx="12" cy="9" r="3"/></svg>, color: '#FBBF24' },
    notif:    { label: 'send notifications', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>, color: '#A78BFA' },
  }[type];
  return (
    <div style={{
      position: 'absolute', top: 56, left: '50%', transform: 'translateX(-50%)', zIndex: 89,
      background: M_SURFACE, border: '1px solid ' + meta.color + '38',
      borderRadius: 14, padding: 14, width: 420,
      boxShadow: '0 12px 32px rgba(0,0,0,0.5), 0 0 0 3px ' + meta.color + '14',
      animation: 'tPermIn 180ms cubic-bezier(0.2,0.85,0.3,1)',
    }}>
      <style>{`@keyframes tPermIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}`}</style>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <div style={{ width: 34, height: 34, borderRadius: 9, background: meta.color + '22', color: meta.color, display: 'grid', placeItems: 'center', flexShrink: 0 }}>{meta.icon}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11.5, color: M_FG_MUTED, fontFamily: 'JetBrains Mono, monospace', marginBottom: 2 }}>{site}</div>
          <div style={{ fontSize: 13.5, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.01em', lineHeight: 1.4 }}>wants to {meta.label}.</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 7, marginBottom: 10 }}>
        <button onClick={() => onResolve && onResolve('block')}  style={{ flex: 1, padding: '8px 0', borderRadius: 8, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED, fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' }}>Block</button>
        <button onClick={() => onResolve && onResolve('once')}   style={{ flex: 1, padding: '8px 0', borderRadius: 8, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, fontSize: 12, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' }}>This time</button>
        <button onClick={() => onResolve && onResolve('always')} style={{ flex: 1, padding: '8px 0', borderRadius: 8, background: meta.color, border: 0, color: '#0B0C0F', fontSize: 12, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer' }}>Allow</button>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        <span>Choice stays on this device. Allowed sites stay allowed.</span>
      </div>
    </div>
  );
}

// ─── Sad tab ───────────────────────────────────────────────────
function TSadTab({ kind = 'offline', url = 'linear.app/inbox', onClose }) {
  const cases = {
    offline:  { title: "You're offline",            sub: "We couldn't reach this page. Try the mesh — a peer might have it cached.", icon: '⛅', detail: 'ERR_INTERNET_DISCONNECTED', primary: 'Try mesh', secondary: 'Reload' },
    dns:      { title: "We can't find that site",   sub: "The domain didn't resolve.",                                                 icon: '🔎', detail: 'ERR_NAME_NOT_RESOLVED',     primary: 'Reload',    secondary: 'Search instead' },
    cert:     { title: "This connection isn't private", sub: "The site's certificate doesn't check out.",                              icon: '⚠️', detail: 'NET::ERR_CERT_AUTHORITY_INVALID', primary: 'Go back',   secondary: 'Show details' },
    crash:    { title: "This tab crashed",          sub: "Something went wrong rendering this page.",                                  icon: '💥', detail: 'STATUS_ACCESS_VIOLATION',   primary: 'Reload',    secondary: 'Send report' },
  }[kind];
  return (
    <div style={{ height: '100%', display: 'grid', placeItems: 'center', background: M_BG, color: M_FG, padding: 40 }}>
      <div style={{ maxWidth: 480, textAlign: 'center' }}>
        <div style={{ fontSize: 80, marginBottom: 22 }}>{cases.icon}</div>
        <div style={{ fontSize: 32, fontWeight: 700, fontFamily: 'Geist', letterSpacing: '-0.03em', marginBottom: 12 }}>{cases.title}</div>
        <div style={{ fontSize: 15, color: M_FG_MUTED, lineHeight: 1.55, marginBottom: 26 }}>{cases.sub}</div>
        <div style={{ padding: '12px 16px', background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 11, marginBottom: 26, fontFamily: 'JetBrains Mono, monospace', textAlign: 'left', maxWidth: 380, margin: '0 auto 26px' }}>
          <div style={{ fontSize: 10, color: M_FG_DIM, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>Tried to load</div>
          <div style={{ fontSize: 12, color: M_FG, wordBreak: 'break-all', marginBottom: 6 }}>{url}</div>
          <div style={{ fontSize: 10.5, color: M_FG_DIM }}>{cases.detail}</div>
        </div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          <button onClick={onClose} style={{ padding: '11px 22px', borderRadius: 10, background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, fontSize: 13, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer' }}>{cases.secondary}</button>
          <button onClick={onClose} style={{ padding: '11px 22px', borderRadius: 10, background: M_FG, border: 0, color: '#0B0C0F', fontSize: 13, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' }}>{cases.primary}</button>
        </div>
      </div>
    </div>
  );
}

// ─── Voice search overlay (iPad — centered card) ───────────────
function TVoiceSearch({ onClose, onCommit }) {
  const [phase, setPhase] = React.useState('listening');
  const transcript = 'search for distributed protocols';
  React.useEffect(() => { const t = setTimeout(() => setPhase('heard'), 1800); return () => clearTimeout(t); }, []);
  return (
    <>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 88, background: 'radial-gradient(ellipse at 50% 50%, rgba(96,165,250,0.16), transparent 60%), rgba(0,0,0,0.7)', backdropFilter: 'blur(6px)' }}/>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
        zIndex: 89, width: 460, padding: '42px 32px 32px',
        background: M_SURFACE, border: '1px solid ' + M_BORDER, borderRadius: 18,
        textAlign: 'center', color: M_FG, animation: 'tVoiceIn 220ms ease-out',
      }}>
        <style>{`@keyframes tVoiceIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
          @keyframes tPulse{0%,100%{transform:scale(1);opacity:0.85}50%{transform:scale(1.16);opacity:1}}
          @keyframes tPulse2{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.32);opacity:0.7}}
        `}</style>
        <div style={{ position: 'relative', width: 150, height: 150, margin: '0 auto 30px' }}>
          <div style={{ position: 'absolute', inset: -18, borderRadius: '50%', background: 'radial-gradient(circle, rgba(96,165,250,0.32), transparent 70%)', animation: 'tPulse2 1.6s ease-in-out infinite' }}/>
          <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'linear-gradient(135deg,#6EE7B7,#60A5FA)', display: 'grid', placeItems: 'center', animation: 'tPulse 1.6s ease-in-out infinite', boxShadow: '0 12px 30px rgba(96,165,250,0.36)' }}>
            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#0B0C0F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6"/></svg>
          </div>
        </div>
        <div style={{ fontSize: 11, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 14 }}>{phase === 'listening' ? 'Listening' : 'Heard'}</div>
        <div style={{ fontSize: 24, fontWeight: 600, fontFamily: 'Geist', letterSpacing: '-0.025em', lineHeight: 1.3, marginBottom: 22, minHeight: 60 }}>
          {phase === 'listening' ? <span style={{ color: M_FG_MUTED }}>I'm listening…</span> : '"' + transcript + '"'}
        </div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          <button onClick={onClose} style={{ padding: '10px 18px', borderRadius: 9, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED, fontSize: 12.5, fontFamily: 'inherit', cursor: 'pointer' }}>Cancel</button>
          <button onClick={() => onCommit && onCommit(transcript)} disabled={phase !== 'heard'} style={{ padding: '10px 22px', borderRadius: 9, background: phase === 'heard' ? M_FG : 'rgba(255,255,255,0.08)', border: 0, color: phase === 'heard' ? '#0B0C0F' : M_FG_DIM, fontSize: 12.5, fontWeight: 700, fontFamily: 'inherit', cursor: phase === 'heard' ? 'pointer' : 'default' }}>Use this</button>
        </div>
      </div>
    </>
  );
}

// ─── Reader render (iPad — wider, more polish) ────────────────
function TReader({ onClose }) {
  const [theme, setTheme] = React.useState('dark');
  const [size, setSize] = React.useState(2);
  const [font, setFont] = React.useState('serif');
  const sizes = [14, 16, 18, 20, 23];
  const themes = {
    dark:  { bg: '#0F1115', text: '#E5E7EB', mute: '#9CA3AF', border: 'rgba(255,255,255,0.08)' },
    sepia: { bg: '#F4ECDC', text: '#3F2D1B', mute: '#6B4F33', border: 'rgba(63,45,27,0.16)' },
    light: { bg: '#FFFFFF', text: '#111827', mute: '#6B7280', border: 'rgba(0,0,0,0.08)' },
  }[theme];
  const fontFamily = font === 'serif' ? "'Iowan Old Style', Georgia, serif"
                  : font === 'mono'  ? "'JetBrains Mono', monospace"
                  : "Geist, -apple-system, sans-serif";
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 84, background: themes.bg, color: themes.text, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 22px', borderBottom: '1px solid ' + themes.border }}>
        <button onClick={onClose} style={{ padding: '6px 12px', borderRadius: 8, background: 'transparent', border: '1px solid ' + themes.border, color: themes.text, fontSize: 11.5, fontFamily: 'inherit', cursor: 'pointer' }}>← Exit reader</button>
        <div style={{ flex: 1, textAlign: 'center', fontSize: 11, color: themes.mute, fontFamily: 'JetBrains Mono, monospace' }}>engineering.ajna.dev / mesh · 18 min read</div>
        {/* Type controls inline (no bottom bar — iPad has room) */}
        <div style={{ display: 'flex', gap: 7 }}>
          <div style={{ display: 'flex', gap: 3, padding: 3, background: theme === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)', borderRadius: 8 }}>
            {['dark', 'sepia', 'light'].map(t => (
              <button key={t} onClick={() => setTheme(t)} style={{
                width: 26, height: 26, borderRadius: 6,
                background: t === 'dark' ? '#0F1115' : t === 'sepia' ? '#F4ECDC' : '#FFFFFF',
                border: theme === t ? '2px solid ' + (theme === 'dark' ? '#fff' : '#111827') : '1px solid ' + themes.border,
                padding: 0, cursor: 'pointer',
              }}/>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 3, padding: 3, background: theme === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)', borderRadius: 8 }}>
            {[
              { id: 'serif', f: "Georgia, serif" },
              { id: 'sans',  f: "Geist, sans-serif" },
              { id: 'mono',  f: "'JetBrains Mono', monospace" },
            ].map(o => (
              <button key={o.id} onClick={() => setFont(o.id)} style={{
                padding: '4px 9px', borderRadius: 6,
                background: font === o.id ? (theme === 'dark' ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.08)') : 'transparent',
                border: 0, color: themes.text, fontFamily: o.f, fontSize: 12, fontWeight: 600, cursor: 'pointer',
              }}>Aa</button>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0 10px', background: theme === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)', borderRadius: 8 }}>
            <button onClick={() => setSize(s => Math.max(0, s - 1))} style={{ background: 'transparent', border: 0, color: themes.text, fontFamily: 'Geist', fontSize: 12, fontWeight: 700, cursor: 'pointer', padding: 4 }}>A</button>
            <button onClick={() => setSize(s => Math.min(4, s + 1))} style={{ background: 'transparent', border: 0, color: themes.text, fontFamily: 'Geist', fontSize: 18, fontWeight: 700, cursor: 'pointer', padding: 4 }}>A</button>
          </div>
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '40px 22px 80px' }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <div style={{ fontSize: 11, color: themes.mute, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 14 }}>Ajna Engineering · 18 min read</div>
          <h1 style={{ fontFamily, fontWeight: 700, fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.03em', margin: '0 0 18px' }}>Engineering an offline-first mesh</h1>
          <div style={{ fontSize: 14, color: themes.mute, marginBottom: 32 }}>By Maya Chen · May 12, 2026</div>
          <div style={{ fontFamily, fontSize: sizes[size], lineHeight: 1.7 }}>
            <p style={{ margin: '0 0 22px' }}>The first time we shipped Ajna's mesh, three iPhones in a coffee shop in Berlin discovered each other in 380ms and finished a 4MB exchange before the espresso landed. The second time, in a hotel basement with no internet, it just worked. That second moment is the one we kept chasing.</p>
            <p style={{ margin: '0 0 22px' }}>Going from five devices in a lab to five thousand in the wild took eighteen months and three protocol revisions. Along the way we threw out two transports, learned that BLE is not a Wi-Fi replacement (it's a different animal entirely), and discovered that the hardest part of a peer network isn't the peers — it's recovering gracefully when half of them disappear at once.</p>
            <h2 style={{ fontFamily, fontWeight: 700, fontSize: sizes[size] * 1.5, lineHeight: 1.2, letterSpacing: '-0.02em', margin: '36px 0 16px' }}>Why offline-first, why now</h2>
            <p style={{ margin: '0 0 22px' }}>The web spent twenty years assuming a stable connection. Most of those years, that assumption held — in cities. The rest of the time, especially on the move, we ran into the same wall: latency, captive portals, rate limits, paywalls, deplatforming. Mesh networks have always offered an alternative, but the bandwidth used to be too low and the discovery too painful.</p>
            <p style={{ margin: '0 0 22px' }}>Two things changed. Bluetooth 5.4 made device-to-device throughput practical (we're seeing 600KB/s sustained on iPhone 14+), and DIDComm v2 gave us a clean identity primitive that doesn't require a server. With both in hand, it became cheaper to ship a mesh than to keep building around its absence.</p>
            <h2 style={{ fontFamily, fontWeight: 700, fontSize: sizes[size] * 1.5, lineHeight: 1.2, letterSpacing: '-0.02em', margin: '36px 0 16px' }}>What we learned from 5000 devices</h2>
            <p style={{ margin: '0 0 22px' }}>Peer counts are not linear. At ten peers, everything works because everyone can see everyone. At a hundred, you start needing routing. At a thousand, you stop pretending the mesh is flat — it isn't, and the sooner your protocol admits that, the simpler your code gets.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Privacy review (iPad) ─────────────────────────────────────
function TPrivacyReview({ onClose }) {
  const [step, setStep] = React.useState(0);
  const steps = [
    { title: 'Privacy review',         sub: 'Four quick checks. About 60 seconds.',                                          kind: 'intro' },
    { title: 'Tracking protection',    sub: 'We block third-party trackers and cross-site cookies by default.',              kind: 'option', key: 'tracking', value: 'strict',
      options: [
        { id: 'strict',   label: 'Strict',   sub: 'Block everything cross-site',     icon: '🛡' },
        { id: 'balanced', label: 'Balanced', sub: 'Block known trackers',            icon: '⚖' },
        { id: 'off',      label: 'Off',      sub: 'Compatibility — not recommended', icon: '⚠' },
      ]},
    { title: 'Search engine',          sub: "Pick what should power the command bar. We never log your queries.",            kind: 'option', key: 'search', value: 'ajna',
      options: [
        { id: 'ajna',   label: 'Ajna',       sub: 'No logs, no profiles, mesh-aware', icon: 'A' },
        { id: 'ddg',    label: 'DuckDuckGo', sub: 'No tracking',                       icon: 'D' },
        { id: 'google', label: 'Google',     sub: 'Personalized but logged',           icon: 'G' },
      ]},
    { title: 'Permissions',            sub: 'Review which sites have access to camera, mic, and location.',                  kind: 'perms' },
    { title: "You're all set",         sub: 'You can revisit any of these in Settings → Privacy.',                           kind: 'done' },
  ];
  const s = steps[step];
  return (
    <>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 86, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)' }}/>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
        zIndex: 87, width: 560, maxHeight: '85%', overflowY: 'auto',
        background: M_SURFACE, border: '1px solid ' + M_BORDER, borderRadius: 18,
        boxShadow: '0 18px 50px rgba(0,0,0,0.6)', color: M_FG,
      }}>
        <div style={{ padding: '22px 26px 16px', borderBottom: '1px solid ' + M_BORDER_SOFT, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.06)', overflow: 'hidden' }}>
            <div style={{ height: '100%', width: ((step + 1) / steps.length * 100) + '%', background: 'linear-gradient(90deg,#6EE7B7,#60A5FA)', transition: 'width 240ms' }}/>
          </div>
          <div style={{ fontSize: 10.5, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>{step + 1} / {steps.length}</div>
          <button onClick={onClose} style={{ width: 28, height: 28, borderRadius: 7, background: 'transparent', border: 0, color: M_FG_MUTED, display: 'grid', placeItems: 'center', cursor: 'pointer' }}>{MIc.close({ s: 14 })}</button>
        </div>

        <div style={{ padding: '26px 30px' }}>
          <div style={{ fontSize: 28, fontWeight: 700, fontFamily: 'Geist', letterSpacing: '-0.03em', lineHeight: 1.15, marginBottom: 10 }}>{s.title}</div>
          <div style={{ fontSize: 14, color: M_FG_MUTED, lineHeight: 1.55, marginBottom: 22 }}>{s.sub}</div>

          {s.kind === 'intro' && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { l: 'Tracking protection',  icon: '🛡', c: '#6EE7B7' },
                { l: 'Search engine',        icon: '🔎', c: '#60A5FA' },
                { l: 'Site permissions',     icon: '🔓', c: '#A78BFA' },
                { l: "You're all set",       icon: '✓',  c: '#FBBF24' },
              ].map((b, i) => (
                <div key={b.l} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: M_BG, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 12 }}>
                  <span style={{ width: 32, height: 32, borderRadius: 8, background: b.c + '22', color: b.c, display: 'grid', placeItems: 'center', fontSize: 15 }}>{b.icon}</span>
                  <span style={{ fontSize: 13.5, color: M_FG, fontFamily: 'Geist' }}>{i + 1}. {b.l}</span>
                </div>
              ))}
            </div>
          )}

          {s.kind === 'option' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {s.options.map(o => (
                <div key={o.id} style={{
                  display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
                  background: M_BG, borderRadius: 11,
                  border: '1px solid ' + (s.value === o.id ? 'rgba(96,165,250,0.45)' : M_BORDER_SOFT),
                  boxShadow: s.value === o.id ? '0 0 0 3px rgba(96,165,250,0.10)' : 'none',
                  cursor: 'pointer',
                }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: 'rgba(255,255,255,0.04)', display: 'grid', placeItems: 'center', fontSize: 16, fontFamily: 'Geist', fontWeight: 700 }}>{o.icon}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.01em' }}>{o.label}</div>
                    <div style={{ fontSize: 11.5, color: M_FG_MUTED, marginTop: 2 }}>{o.sub}</div>
                  </div>
                  <div style={{ width: 20, height: 20, borderRadius: 10, background: s.value === o.id ? M_ACCENT_B : 'transparent', border: '2px solid ' + (s.value === o.id ? M_ACCENT_B : M_BORDER), display: 'grid', placeItems: 'center' }}>
                    {s.value === o.id && <span style={{ width: 8, height: 8, borderRadius: 4, background: '#0B0C0F' }}/>}
                  </div>
                </div>
              ))}
            </div>
          )}

          {s.kind === 'perms' && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {A_PERMS_SUMMARY.slice(0, 6).map(p => (
                <div key={p.id} style={{ padding: 14, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 11 }}>
                  <div style={{ fontSize: 12.5, color: M_FG, fontFamily: 'Geist', fontWeight: 600 }}>{p.label}</div>
                  <div style={{ marginTop: 8, fontSize: 11, fontFamily: 'JetBrains Mono, monospace' }}>
                    <span style={{ color: '#6EE7B7' }}>{p.allowed} allow</span>
                    <span style={{ color: M_FG_DIM, margin: '0 6px' }}>·</span>
                    <span style={{ color: '#F87171' }}>{p.blocked} block</span>
                  </div>
                </div>
              ))}
            </div>
          )}

          {s.kind === 'done' && (
            <div style={{
              padding: 28,
              background: 'linear-gradient(135deg, rgba(110,231,183,0.10), rgba(96,165,250,0.10)), ' + M_BG,
              border: '1px solid rgba(110,231,183,0.32)', borderRadius: 14, textAlign: 'center',
            }}>
              <div style={{ fontSize: 72, marginBottom: 8 }}>✓</div>
              <div style={{ fontSize: 15, color: M_FG, fontFamily: 'Geist', fontWeight: 600 }}>Privacy review complete</div>
            </div>
          )}
        </div>

        <div style={{ padding: '14px 26px 22px', borderTop: '1px solid ' + M_BORDER_SOFT, display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          {step > 0 && <button onClick={() => setStep(step - 1)} style={{ padding: '10px 22px', borderRadius: 9, background: M_BG, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer' }}>Back</button>}
          <button onClick={() => step === steps.length - 1 ? onClose() : setStep(step + 1)} style={{ padding: '10px 26px', borderRadius: 9, background: M_FG, border: 0, color: '#0B0C0F', fontSize: 12.5, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer' }}>{step === steps.length - 1 ? 'Done' : step === 0 ? 'Start' : 'Continue'}</button>
        </div>
      </div>
    </>
  );
}

// ─── Help + Credits as full screens ────────────────────────────
function TScreenHelp() {
  const links = [
    { id: 'release',   label: 'Release notes',   sub: 'v0.4.2 · 12 changes',     icon: '📰' },
    { id: 'support',   label: 'Get support',     sub: 'support.ajna.dev',         icon: '💬' },
    { id: 'docs',      label: 'Documentation',   sub: 'docs.ajna.dev',            icon: '📘' },
    { id: 'community', label: 'Community',       sub: 'community.ajna.dev',       icon: '🏛' },
    { id: 'roadmap',   label: 'Roadmap',         sub: 'roadmap.ajna.dev',         icon: '🗺' },
    { id: 'feedback',  label: 'Send feedback',   sub: 'Direct to engineering',    icon: '✉' },
    { id: 'bug',       label: 'Report a bug',    sub: 'Auto-attaches diagnostics',icon: '🐞' },
    { id: 'privacy',   label: 'Privacy policy',  sub: 'ajna.dev/privacy',         icon: '🔒' },
    { id: 'terms',     label: 'Terms of service',sub: 'ajna.dev/terms',           icon: '📄' },
  ];
  return (
    <TLPage>
      <TLHeader
        icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>}
        color="#FBBF24"
        title="Help & feedback"
        sub="Real humans · responses in under 24 hours"
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
        {links.map(l => (
          <div key={l.id} style={{
            padding: '14px 16px', background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 12,
            cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <span style={{ fontSize: 22 }}>{l.icon}</span>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.01em' }}>{l.label}</div>
            <div style={{ fontSize: 11, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>{l.sub}</div>
          </div>
        ))}
      </div>
    </TLPage>
  );
}

function TScreenCredits() {
  const team = [
    { name: 'Maya Chen',      role: 'Founder · Mesh',     bg: '#A78BFA', i: 'MC' },
    { name: 'Aishwarya Iyer', role: 'Identity · DIDComm', bg: '#EF4444', i: 'AI' },
    { name: 'Rohan Sharma',   role: 'Browser · UI',       bg: '#F472B6', i: 'RS' },
    { name: 'Noah Okafor',    role: 'Sync · CRDT',        bg: '#10B981', i: 'NO' },
    { name: 'Léa Dubois',     role: 'Design',             bg: '#22D3EE', i: 'LD' },
    { name: 'Ken Watanabe',   role: 'Web compat',         bg: '#FBBF24', i: 'KW' },
  ];
  const oss = [
    { name: 'React',          v: '18.3.1' },
    { name: 'Babel standalone', v: '7.29.0' },
    { name: 'Geist',          v: '1.3' },
    { name: 'JetBrains Mono', v: '2.304' },
    { name: 'Tailwind tokens',v: '4.0' },
    { name: 'DIDComm v2',     v: '1.0' },
    { name: 'UCAN spec',      v: '0.10' },
    { name: 'noble crypto',   v: '1.7' },
    { name: 'libp2p',         v: '1.4' },
    { name: 'simpleparser',   v: '0.9' },
  ];
  return (
    <TLPage>
      <TLHeader
        icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/></svg>}
        color={M_ACCENT}
        title="Credits"
        sub="People and code that built Ajna"
      />
      <div style={{
        padding: 26, marginBottom: 24, borderRadius: 16,
        background: 'linear-gradient(135deg, rgba(110,231,183,0.10), rgba(96,165,250,0.10)), ' + M_SURFACE,
        border: '1px solid ' + M_BORDER_SOFT,
        display: 'flex', alignItems: 'center', gap: 22,
      }}>
        <div style={{ width: 68, height: 68, borderRadius: 18, background: 'linear-gradient(135deg,#6EE7B7,#60A5FA)', display: 'grid', placeItems: 'center', color: '#0B0C0F', fontFamily: 'Geist', fontWeight: 700, fontSize: 38, flexShrink: 0 }}>A</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'Geist', letterSpacing: '-0.025em' }}>Ajna Browser</div>
          <div style={{ fontSize: 11.5, color: M_FG_MUTED, fontFamily: 'JetBrains Mono, monospace', marginTop: 4 }}>v0.4.2 · build 24891 · May 28 2026</div>
          <div style={{ fontSize: 12.5, color: M_FG_DIM, marginTop: 8, lineHeight: 1.5 }}>Made with care in Berlin, Bangalore, and San Francisco.</div>
        </div>
      </div>

      <div style={{ fontSize: 11, fontWeight: 700, color: M_FG_DIM, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace', padding: '0 4px 10px' }}>Team</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 22 }}>
        {team.map(p => (
          <div key={p.name} style={{ padding: 14, background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 11, display: 'flex', alignItems: 'center', gap: 11 }}>
            <MTile size={34} bg={p.bg} color="#fff" label={p.i} radius={8}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.01em' }}>{p.name}</div>
              <div style={{ fontSize: 11, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', marginTop: 1 }}>{p.role}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ fontSize: 11, fontWeight: 700, color: M_FG_DIM, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace', padding: '0 4px 10px' }}>Open source</div>
      <div style={{ background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, borderRadius: 12, overflow: 'hidden' }}>
        {oss.map((o, i) => (
          <div key={o.name} style={{ display: 'flex', padding: '12px 16px', borderTop: i === 0 ? 0 : '1px solid ' + M_BORDER_SOFT }}>
            <span style={{ flex: 1, fontSize: 13, color: M_FG, fontFamily: 'Geist' }}>{o.name}</span>
            <span style={{ fontSize: 11, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>v{o.v}</span>
          </div>
        ))}
      </div>
    </TLPage>
  );
}

Object.assign(window, {
  TFindInPage, TZoomControl, TPageInfo, TClearDataSheet, TPermissionPrompt,
  TSadTab, TVoiceSearch, TReader, TPrivacyReview, TScreenHelp, TScreenCredits,
});