// verify-detail.jsx — close-up of the verification behaviour: a 2FA code that
// arrives, is copied in one tap, then disappears on its own. Three states.

function VState({ phase }) {
  const r = 16, c = 2 * Math.PI * r;
  const conf = {
    live:    { frac: 0.63, badge: 'Ankom nå', code: '084 219', dim: false },
    copied:  { frac: 0.4,  badge: 'Kopiert ✓', code: '084 219', dim: false },
    gone:    { frac: 0,    badge: 'Brukt · borte', code: '• • •  • • •', dim: true },
  }[phase];
  return (
    <div className="glass-2" style={{ flex: 1, borderRadius: 20, padding: 22, opacity: conf.dim ? 0.5 : 1, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
        <span style={{ color: phase === 'copied' ? 'var(--accent)' : 'var(--muted)', display: 'flex' }}><Icon name="shield" s={16} /></span>
        <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--muted)' }}>Github</span>
        <span className="chip" style={{ marginLeft: 'auto', fontSize: 10.5, padding: '3px 9px',
          ...(phase === 'copied' ? { color: 'var(--accent)', borderColor: 'color-mix(in oklab,var(--accent) 45%,transparent)', background: 'var(--accent-soft)' } : {}) }}>{conf.badge}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div className="mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '0.08em', flex: 1, color: conf.dim ? 'var(--faint)' : 'var(--fg)' }}>{conf.code}</div>
        {phase !== 'gone' && (
          <svg width="42" height="42" viewBox="0 0 42 42" style={{ transform: 'rotate(-90deg)', flex: 'none' }}>
            <circle cx="21" cy="21" r={r} fill="none" stroke="var(--line-strong)" strokeWidth="2.5" />
            <circle cx="21" cy="21" r={r} fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - conf.frac)} />
          </svg>
        )}
      </div>
      <button style={{ width: '100%', marginTop: 16, padding: '11px', borderRadius: 12, border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
        background: phase === 'gone' ? 'transparent' : phase === 'copied' ? 'var(--accent-soft)' : 'var(--accent)',
        color: phase === 'gone' ? 'var(--faint)' : phase === 'copied' ? 'var(--accent)' : '#1a0d06',
        border: phase !== 'live' ? '1px solid var(--line-strong)' : 'none' }}>
        <Icon name={phase === 'copied' ? 'check' : phase === 'gone' ? 'clock' : 'copy'} s={14} />
        {phase === 'copied' ? 'Limt inn i utklippstavlen' : phase === 'gone' ? 'Slettet etter bruk' : 'Kopiér koden'}
      </button>
    </div>
  );
}

function VerifyDetail() {
  return (
    <div className="screen theme-dark" style={{ padding: 0 }}>
      <div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, padding: '46px 52px', height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 8, color: 'var(--accent)' }}>
          <Icon name="shield" s={18} /><span className="mono" style={{ fontSize: 12, letterSpacing: '0.1em' }}>VERIFIKASJON</span>
        </div>
        <h2 style={{ margin: 0, fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em' }}>Vises. Brukes. Forsvinner.</h2>
        <p style={{ maxWidth: 640, fontSize: 15, lineHeight: 1.6, color: 'var(--muted)', margin: '12px 0 34px' }}>
          2FA-koder havner aldri i innboksen. De dukker opp som et eget hurtigpanel, kan kopieres med ett trykk,
          og sletter seg selv så snart de er brukt eller utløpt — ingen opprydding, ingen gamle koder på avveie.
        </p>
        <div style={{ display: 'flex', gap: 18, alignItems: 'stretch' }}>
          <VState phase="live" />
          <div style={{ display: 'flex', alignItems: 'center', color: 'var(--faint)' }}><Icon name="arrow" s={22} /></div>
          <VState phase="copied" />
          <div style={{ display: 'flex', alignItems: 'center', color: 'var(--faint)' }}><Icon name="arrow" s={22} /></div>
          <VState phase="gone" />
        </div>
        <div style={{ display: 'flex', gap: 28, marginTop: 30, fontSize: 13, color: 'var(--faint)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="dot" /> Ett trykk kopierer</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="dot" /> Auto-utløp på 60s</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="dot" /> Lenker åpnes, så arkiveres de</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { VerifyDetail });