// screens-a.jsx — Home, Recording, Tag flow, Onboarding

// Shared eyebrow + section heading
function Eyebrow({ children, color = 'var(--slate)' }) {
  return <div className="eyebrow" style={{ color }}>{children}</div>;
}

// ─── 1. HOME ────────────────────────────────────────────────────────
function HomeScreen({ go }) {
  const recents = [
    { type: 'symptom',   title: 'Back pain · flared after PT',  time: '14:32', date: 'Today',     cond: 'MSK-back', sev: 7 },
    { type: 'incident',  title: 'Vehicle rollover · MRH-90 sim', time: '09:17', date: 'Today',     cond: 'PTSD',     sev: 8 },
    { type: 'reporting', title: 'Reporting attempt · MO',        time: '16:48', date: 'Yesterday', cond: 'tinnitus', sev: 5 },
  ];

  return (
    <div className="app-bg" style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      {/* Top: eyebrow + greeting + sync */}
      <div style={{
        paddingTop: 56, paddingLeft: 24, paddingRight: 24,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
      }}>
        <div>
          <Eyebrow>As It Happens</Eyebrow>
          <div style={{ marginTop: 6, fontSize: 24, fontWeight: 600, color: 'var(--navy)', letterSpacing: -0.5 }}>
            Good afternoon, Jamie
          </div>
          <div className="mono" style={{ marginTop: 4, fontSize: 10.5, color: 'var(--slate)', letterSpacing: 0.04 }}>
            Friday · 9 May 2026
          </div>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--slate)',
          background: 'rgba(255,255,255,0.5)', padding: '6px 10px', borderRadius: 999,
          border: '1px solid var(--hairline)',
          marginTop: 4,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--teal)', boxShadow: '0 0 6px rgba(42,163,154,0.5)' }} />
          synced
        </div>
      </div>

      {/* Centered record button with pulse rings */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', padding: '20px 0' }}>
        <Anno top={10} right={32} side="tr">teal #2AA39A · ≥80pt</Anno>

        {/* Button + rings group — tightly bounded, won't overlap captions */}
        <div style={{ position: 'relative', width: 200, height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* concentric registry rings */}
          <svg width="200" height="200" viewBox="0 0 200 200" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
            <circle cx="100" cy="100" r="96" fill="none" stroke="rgba(10,27,46,0.06)" strokeDasharray="2 6" />
            <circle cx="100" cy="100" r="84" fill="none" stroke="rgba(42,163,154,0.10)" />
            {[0, 90, 180, 270].map(a => {
              const rad = (a - 90) * Math.PI / 180;
              const x1 = 100 + Math.cos(rad) * 90, y1 = 100 + Math.sin(rad) * 90;
              const x2 = 100 + Math.cos(rad) * 98, y2 = 100 + Math.sin(rad) * 98;
              return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(10,27,46,0.18)" strokeWidth="1" />;
            })}
          </svg>

          {/* pulse rings behind button */}
          <div style={{ position: 'absolute', width: 152, height: 152, borderRadius: 76, border: '2px solid var(--teal)', animation: 'pulse-ring 2.4s ease-out infinite', opacity: 0.4 }} />
          <div style={{ position: 'absolute', width: 152, height: 152, borderRadius: 76, border: '2px solid var(--teal)', animation: 'pulse-ring 2.4s ease-out 1.2s infinite', opacity: 0.4 }} />

          <button
            onClick={() => go('record')}
            className="press"
            style={{
              width: 152, height: 152, borderRadius: 76,
              background: 'radial-gradient(circle at 35% 30%, #38b8ad 0%, #2AA39A 55%, #228a83 100%)',
              border: 'none', cursor: 'pointer',
              boxShadow: '0 18px 40px rgba(42,163,154,0.35), 0 6px 14px rgba(42,163,154,0.25), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 6px rgba(0,0,0,0.08)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#F5F1E8', position: 'relative', zIndex: 2,
            }}>
            <IconMic size={56} color="#F5F1E8" />
          </button>
        </div>

        <div style={{ marginTop: 26, fontSize: 15, color: 'var(--navy)', textAlign: 'center', lineHeight: 1.45, fontWeight: 500, letterSpacing: -0.1 }}>
          Hold to record
        </div>
        <div style={{ marginTop: 4, fontSize: 12.5, color: 'var(--slate)', textAlign: 'center' }}>
          Release to save
        </div>

        {/* trust line */}
        <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
          {[
            { icon: IconClock, label: 'time-stamped' },
            { icon: IconLink,  label: 'hashed' },
            { icon: IconShield,label: 'AU-resident' },
          ].map((t, i, arr) => (
            <React.Fragment key={t.label}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <t.icon size={11} color="var(--slate-50)" />
                <span className="mono" style={{ fontSize: 9.5, color: 'var(--slate-50)', letterSpacing: 0.04 }}>{t.label}</span>
              </div>
              {i < arr.length - 1 && <span style={{ width: 3, height: 3, borderRadius: 1.5, background: 'var(--slate-50)' }} />}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Recents — refined with sev meter */}
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          padding: '0 4px 12px',
        }}>
          <Eyebrow>Recent · last 24h</Eyebrow>
          <button onClick={() => go('records')} className="press" style={{ border: 'none', background: 'transparent', fontSize: 12, color: 'var(--teal)', fontWeight: 600, cursor: 'pointer', letterSpacing: -0.05 }}>
            See all 47 →
          </button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {recents.map((r, i) => (
            <button key={i} onClick={() => go('detail')} className="paper-card press" style={{
              textAlign: 'left',
              padding: '12px 14px',
              display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
              fontFamily: 'var(--sans)', border: '1px solid var(--hairline)',
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10,
                background: 'var(--paper)', border: '1px solid var(--hairline)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <TypeGlyph type={r.type} size={17} color="var(--navy)" />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--slate)', letterSpacing: 0.06, textTransform: 'uppercase' }}>
                  {r.date} · {r.time} · sev {r.sev}/10
                </div>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--navy)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', letterSpacing: -0.1 }}>
                  {r.title}
                </div>
              </div>
              <span className="mono" style={{ fontSize: 9.5, color: 'var(--teal)', background: 'var(--teal-12)', padding: '3px 7px', borderRadius: 4, letterSpacing: 0.04, fontWeight: 500, flexShrink: 0 }}>
                {r.cond}
              </span>
            </button>
          ))}
        </div>
      </div>
      <TabBar active="home" onNav={(id) => go(id)} />
    </div>
  );
}

// ─── 2. RECORDING IN PROGRESS ─────────────────────────────────────────
function RecordingScreen({ go }) {
  const [seconds, setSeconds] = React.useState(43);
  React.useEffect(() => {
    const id = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const mm = String(Math.floor(seconds / 60)).padStart(2, '0');
  const ss = String(seconds % 60).padStart(2, '0');

  return (
    <div style={{
      flex: 1,
      background: 'radial-gradient(ellipse at top, #142a44 0%, #0A1B2E 50%, #060f1c 100%)',
      display: 'flex', flexDirection: 'column', position: 'relative', color: '#F5F1E8',
    }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
        <PaperStatusBar dark />
      </div>

      {/* recording dot + label */}
      <div style={{ paddingTop: 84, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 14px', borderRadius: 999, background: 'rgba(42,163,154,0.12)', border: '1px solid rgba(42,163,154,0.3)' }}>
          <span style={{
            width: 7, height: 7, borderRadius: 4, background: 'var(--teal)',
            boxShadow: '0 0 12px rgba(42,163,154,0.8)',
            animation: 'wave-pulse 1.6s ease-in-out infinite',
          }} />
          <span className="mono" style={{ fontSize: 10, letterSpacing: 0.2, color: 'var(--teal)', textTransform: 'uppercase', fontWeight: 600 }}>
            Recording
          </span>
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'rgba(245,241,232,0.4)', letterSpacing: 0.05, marginTop: 2 }}>
          Fri 9 May · 14:33:24 AEST
        </div>
      </div>

      {/* Timer */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40, padding: '0 20px' }}>
        <div className="mono tabnums" style={{
          fontSize: 84, fontWeight: 300, letterSpacing: -2,
          color: '#F5F1E8',
          textShadow: '0 0 30px rgba(42,163,154,0.15)',
          lineHeight: 1,
        }}>
          {mm}<span style={{ opacity: 0.4 }}>:</span>{ss}
        </div>
        <div style={{ width: '100%', position: 'relative' }}>
          {/* center axis line */}
          <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'rgba(42,163,154,0.15)' }} />
          <Waveform bars={48} color="var(--teal)" height={72} playing seed={7} />
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'rgba(245,241,232,0.45)', letterSpacing: 0.15, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 4, height: 4, borderRadius: 2, background: 'rgba(245,241,232,0.45)' }} />
          input · iphone built-in mic · 48 kHz
        </div>
      </div>

      {/* Bottom: stop + hash badge */}
      <div style={{ paddingBottom: 60, paddingLeft: 24, paddingRight: 24 }}>
        <button onClick={() => go('tag')} className="press" style={{
          width: '100%', height: 64, borderRadius: 18,
          background: 'var(--paper)', color: 'var(--navy)',
          border: 'none', fontSize: 16, fontWeight: 600, letterSpacing: -0.2,
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
          boxShadow: '0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.6)',
        }}>
          <span style={{ width: 14, height: 14, background: 'var(--navy)', borderRadius: 3 }} />
          Stop & tag
        </button>
        <div style={{
          marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 8, color: 'rgba(245,241,232,0.55)',
        }}>
          <IconLink size={11} color="rgba(42,163,154,0.7)" />
          <span className="mono" style={{ fontSize: 10, letterSpacing: 0.05 }}>
            hashed at capture · sha-256 · syd-1
          </span>
        </div>
      </div>

      <Anno top={310} right={22} side="tr">teal · live waveform</Anno>
      <Anno bottom={138} left={22} side="bl">cream button = primary on navy</Anno>
    </div>
  );
}

// ─── 3. TAG FLOW (key screen) ────────────────────────────────────────
function TagFlow({ go }) {
  const [type, setType] = React.useState('symptom');
  const [conds, setConds] = React.useState(['MSK-back']);
  const [severity, setSeverity] = React.useState(7);
  const [reportedTo, setReportedTo] = React.useState('no-one');
  const [medical, setMedical] = React.useState('not yet');

  const types = [
    { id: 'incident',  label: 'Incident' },
    { id: 'symptom',   label: 'Symptom' },
    { id: 'exposure',  label: 'Exposure' },
    { id: 'reporting', label: 'Report' },
    { id: 'trigger',   label: 'Trigger' },
  ];
  const conditions = ['PTSD', 'hearing', 'tinnitus', 'MSK-back', 'MSK-knee', 'sleep', 'exposure', 'other'];
  const reports = ['CO', 'MO', 'chaplain', 'peer', 'no-one', 'not yet'];

  const Section = ({ n, total = 7, title, optional, children }) => (
    <div style={{ marginBottom: 24, animation: 'soft-fade 240ms ease both' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 11 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--slate-50)', letterSpacing: 0.06 }}>{String(n).padStart(2,'0')}/{String(total).padStart(2,'0')}</span>
        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--navy)', letterSpacing: -0.2 }}>{title}</span>
        {optional && <span className="mono" style={{ fontSize: 9.5, color: 'var(--slate-50)', marginLeft: 'auto', letterSpacing: 0.04, textTransform: 'uppercase' }}>optional</span>}
      </div>
      {children}
    </div>
  );

  return (
    <div className="app-bg" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <TopBar
        left={<IconBtn onClick={() => go('home')}><IconChevL size={18} /></IconBtn>}
        right={<button onClick={() => go('home')} className="press" style={{ border: 'none', background: 'transparent', fontSize: 13, color: 'var(--slate)', fontWeight: 500, cursor: 'pointer', padding: '8px 4px' }}>Skip</button>}
        title="Tag this record"
        subtitle="00:01:24 · captured 14:33:24"
      />
      <div className="no-sb" style={{ flex: 1, overflow: 'auto', padding: '4px 20px 20px' }}>
        {/* Audio strip pinned at top */}
        <div className="paper-card" style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '12px 14px', marginBottom: 22,
        }}>
          <button className="press" style={{
            width: 40, height: 40, borderRadius: 20,
            background: 'var(--teal)', border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            boxShadow: '0 4px 10px rgba(42,163,154,0.3)',
          }}>
            <IconPlay size={16} color="#F5F1E8" />
          </button>
          <div style={{ flex: 1 }}>
            <Waveform bars={28} color="var(--navy-50)" height={22} playing={false} seed={11} />
          </div>
          <span className="mono tabnums" style={{ fontSize: 11, color: 'var(--slate)' }}>01:24</span>
        </div>

        <Section n={1} title="Note type">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {types.map(t => {
              const sel = type === t.id;
              return (
                <button key={t.id} onClick={() => setType(t.id)} className="press" style={{
                  border: `1.5px solid ${sel ? 'var(--teal)' : 'var(--hairline-strong)'}`,
                  background: sel ? 'var(--teal-12)' : 'var(--surface)',
                  borderRadius: 12, padding: '13px 12px',
                  display: 'flex', alignItems: 'center', gap: 10,
                  cursor: 'pointer', textAlign: 'left',
                  boxShadow: sel ? '0 0 0 4px rgba(42,163,154,0.08)' : 'none',
                  transition: 'all 140ms ease',
                }}>
                  <TypeGlyph type={t.id} size={18} color={sel ? 'var(--teal)' : 'var(--slate)'} />
                  <span style={{ fontSize: 13, fontWeight: sel ? 600 : 500, color: sel ? 'var(--teal)' : 'var(--navy)', letterSpacing: -0.1 }}>{t.label}</span>
                </button>
              );
            })}
          </div>
        </Section>

        <Section n={2} title="Condition">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {conditions.map(c => (
              <Chip key={c} selected={conds.includes(c)} onClick={() => setConds(conds.includes(c) ? conds.filter(x => x !== c) : [...conds, c])} mono>
                {c}
              </Chip>
            ))}
          </div>
        </Section>

        <Section n={3} title="Service connection" optional>
          <div className="paper-card-flat" style={{
            padding: '12px 14px', fontSize: 14, color: 'var(--navy)', lineHeight: 1.5,
          }}>
            Loading stores at Holsworthy, lifted a 25kg crate.
          </div>
        </Section>

        <Section n={4} title="Severity">
          <div className="paper-card-flat" style={{ padding: '14px 16px 16px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
              <span className="mono tabnums" style={{ fontSize: 11, color: 'var(--slate-50)' }}>00</span>
              <span className="mono tabnums" style={{ fontSize: 40, fontWeight: 300, color: 'var(--navy)', letterSpacing: -1.5, lineHeight: 1 }}>{String(severity).padStart(2,'0')}</span>
              <span className="mono tabnums" style={{ fontSize: 11, color: 'var(--slate-50)' }}>10</span>
            </div>
            <input type="range" min="0" max="10" value={severity} onChange={e => setSeverity(+e.target.value)}
              style={{ width: '100%', accentColor: '#2AA39A' }} />
            {/* tick marks */}
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, padding: '0 4px' }}>
              {Array.from({length: 11}, (_, i) => (
                <span key={i} style={{ width: 1, height: 4, background: i === severity ? 'var(--teal)' : 'var(--navy-12)' }} />
              ))}
            </div>
          </div>
        </Section>

        <Section n={5} title="Reported to">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: reportedTo !== 'no-one' && reportedTo !== 'not yet' ? 10 : 0 }}>
            {reports.map(r => (
              <Chip key={r} selected={reportedTo === r} onClick={() => setReportedTo(r)} mono>{r}</Chip>
            ))}
          </div>
          {reportedTo !== 'no-one' && reportedTo !== 'not yet' && (
            <div style={{
              background: 'var(--surface)', border: '1px dashed var(--teal)',
              borderRadius: 12, padding: '11px 14px',
              fontSize: 13, color: 'var(--slate)', fontStyle: 'italic',
            }}>
              What did they say? (optional)
            </div>
          )}
        </Section>

        <Section n={6} title="Medical attention">
          <div style={{ display: 'flex', gap: 6 }}>
            {['yes', 'no', 'not yet'].map(r => (
              <Chip key={r} selected={medical === r} onClick={() => setMedical(r)} mono>{r}</Chip>
            ))}
          </div>
        </Section>

        <Section n={7} title="Witnesses" optional>
          <div className="paper-card-flat" style={{
            padding: '11px 14px',
            fontSize: 13, color: 'var(--slate-70)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span>Names or service numbers…</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--slate)' }}>
              <span style={{ width: 28, height: 16, background: 'var(--teal)', borderRadius: 999, position: 'relative' }}>
                <span style={{ position: 'absolute', right: 1, top: 1, width: 14, height: 14, background: '#F5F1E8', borderRadius: 999, boxShadow: '0 1px 2px rgba(0,0,0,0.15)' }} />
              </span>
              <span className="mono" style={{ fontSize: 9.5 }}>code</span>
            </span>
          </div>
        </Section>

        <button onClick={() => go('home')} className="press" style={{
          width: '100%', height: 56, borderRadius: 14, marginTop: 8,
          background: 'var(--teal)', color: '#F5F1E8',
          border: 'none', fontSize: 15, fontWeight: 600, letterSpacing: -0.2,
          cursor: 'pointer',
          boxShadow: '0 8px 18px rgba(42,163,154,0.28), inset 0 1px 0 rgba(255,255,255,0.2)',
        }}>
          Save record
        </button>
        <div className="mono" style={{ marginTop: 12, textAlign: 'center', fontSize: 9.5, color: 'var(--slate-50)', letterSpacing: 0.06, textTransform: 'uppercase' }}>
          all fields optional · skip anytime
        </div>
      </div>
    </div>
  );
}

// ─── 7. ONBOARDING ───────────────────────────────────────────────────
function OnboardingScreen({ go, tagline = "Capture it as it happens." }) {
  return (
    <div className="app-bg" style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 28px 56px', position: 'relative' }}>
      {/* tiny corner registry marks */}
      <svg style={{ position: 'absolute', top: 56, left: 20 }} width="14" height="14"><path d="M0 5 V0 H5 M9 0 H14 V5 M14 9 V14 H9 M5 14 H0 V9" fill="none" stroke="rgba(10,27,46,0.2)" strokeWidth="1"/></svg>
      <svg style={{ position: 'absolute', top: 56, right: 20 }} width="14" height="14"><path d="M0 5 V0 H5 M9 0 H14 V5 M14 9 V14 H9 M5 14 H0 V9" fill="none" stroke="rgba(10,27,46,0.2)" strokeWidth="1"/></svg>

      <div style={{ paddingTop: 84, textAlign: 'center' }}>
        <Eyebrow>Australia · v1.0</Eyebrow>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', gap: 32 }}>
        {/* App mark — navy tile with teal waveform inside a subtle inset */}
        <div style={{ position: 'relative' }}>
          {/* concentric rings for documentary feel */}
          <svg width="160" height="160" viewBox="0 0 160 160" style={{ position: 'absolute', top: -40, left: -40 }}>
            <circle cx="80" cy="80" r="78" fill="none" stroke="rgba(10,27,46,0.06)" strokeDasharray="2 5" />
            <circle cx="80" cy="80" r="62" fill="none" stroke="rgba(10,27,46,0.05)" />
          </svg>
          <div style={{
            width: 80, height: 80, borderRadius: 22,
            background: 'linear-gradient(155deg, #102945 0%, #0A1B2E 60%, #060f1c 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 16px 32px rgba(10,27,46,0.25), inset 0 1px 0 rgba(255,255,255,0.08)',
            position: 'relative',
          }}>
            <IconWaveform size={40} color="var(--teal)" />
            {/* tiny corner mark */}
            <span style={{ position: 'absolute', bottom: 8, right: 8, width: 6, height: 6, borderRadius: 1, background: 'var(--teal)', boxShadow: '0 0 8px rgba(42,163,154,0.6)' }} />
          </div>
        </div>

        <div>
          <div style={{ fontSize: 36, fontWeight: 600, color: 'var(--navy)', letterSpacing: -0.8, lineHeight: 1.05 }}>
            As It Happens
          </div>
          <div style={{ fontSize: 15, color: 'var(--slate)', marginTop: 16, lineHeight: 1.55, maxWidth: 290, textWrap: 'pretty' }}>
            {tagline}
          </div>
          <div style={{ fontSize: 13, color: 'var(--slate-70)', marginTop: 10, lineHeight: 1.55, maxWidth: 280 }}>
            Time-stamped, tamper-evident, and yours.
          </div>
        </div>

        {/* three pillars — refined */}
        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', maxWidth: 320, marginTop: 12, gap: 8 }}>
          {[
            { icon: IconClock,  label: 'Time-\u00ADstamped' },
            { icon: IconLink,   label: 'Hashed' },
            { icon: IconShield, label: 'AU-\u00ADresident' },
          ].map((p, i) => {
            const I = p.icon;
            return (
              <div key={i} className="paper-card" style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, padding: '14px 8px' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: 'var(--paper)', border: '1px solid var(--hairline)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <I size={18} color="var(--navy)" />
                </div>
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--slate)', letterSpacing: 0.04, textAlign: 'center', lineHeight: 1.3 }}>{p.label}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
        <button onClick={() => go('home')} className="press" style={{
          width: '100%', height: 56, borderRadius: 14,
          background: 'var(--teal)', color: '#F5F1E8',
          border: 'none', fontSize: 15, fontWeight: 600, letterSpacing: -0.2,
          cursor: 'pointer',
          boxShadow: '0 8px 18px rgba(42,163,154,0.28), inset 0 1px 0 rgba(255,255,255,0.2)',
        }}>
          Get started
        </button>
        <button className="press" style={{
          border: 'none', background: 'transparent',
          fontSize: 13, color: 'var(--slate)', cursor: 'pointer',
          textDecoration: 'underline', textUnderlineOffset: 4, textDecorationColor: 'var(--navy-25)',
          padding: '6px 12px',
        }}>
          Why this exists
        </button>
      </div>

      <Anno top={130} left={28} side="tl">app mark · waveform-in-tag</Anno>
    </div>
  );
}

Object.assign(window, { HomeScreen, RecordingScreen, TagFlow, OnboardingScreen });