// dir-a.jsx — Retning A · "Stille"
// Dark OLED, frosted glass, warm amber accent. Hierarchy: ONE primary inbox
// (Fra mennesker) large & central; every other category handled quietly in a
// slim aside. Verification = a self-expiring glass panel.

// Reusable: verification quick-panel (one-tap copy + expiry ring + auto-fade)
function VerifyCard({ compact }) {
  const r = 15, c = 2 * Math.PI * r, frac = VERIFY.expires / 60;
  return (
    <div className="glass-2" style={{ borderRadius: 18, padding: compact ? 14 : 16, position: 'relative', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="shield" s={16} /></span>
        <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--muted)' }}>Verifikasjon</span>
        <span className="mono" style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{VERIFY.service}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div className="mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '0.08em', flex: 1 }}>{VERIFY.code}</div>
        <svg width="40" height="40" viewBox="0 0 40 40" style={{ transform: 'rotate(-90deg)', flex: 'none' }}>
          <circle cx="20" cy="20" r={r} fill="none" stroke="var(--line-strong)" strokeWidth="2.5" />
          <circle cx="20" cy="20" r={r} fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c * (1 - frac)} />
          <text x="20" y="20" transform="rotate(90 20 20)" textAnchor="middle" dominantBaseline="central"
            className="mono" fontSize="11" fill="var(--muted)">{VERIFY.expires}</text>
        </svg>
      </div>
      <button style={btnA}><Icon name="copy" s={14} /> Kopiér koden</button>
      <div style={{ fontSize: 11, color: 'var(--faint)', marginTop: 9, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="clock" s={12} /> Forsvinner av seg selv etter bruk
      </div>
    </div>
  );
}
const btnA = {
  width: '100%', marginTop: 13, padding: '10px', borderRadius: 11,
  background: 'var(--accent)', color: '#1a0d06', border: 'none', cursor: 'pointer',
  fontFamily: 'Sora', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
};

// Slim icon rail shared by A screens
function RailA({ active = 'people' }) {
  return (
    <div style={{ width: 74, flex: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '22px 0', borderRight: '1px solid var(--line)', gap: 4, position: 'relative', zIndex: 2 }}>
      <div style={{ width: 30, height: 30, borderRadius: 9, background: 'var(--accent)', display: 'flex',
        alignItems: 'center', justifyContent: 'center', color: '#1a0d06', fontWeight: 700, fontSize: 17, marginBottom: 18 }}>d</div>
      {CATS.map((c) => {
        const on = c.key === active;
        return (
          <div key={c.key} style={{ width: 46, height: 46, borderRadius: 13, display: 'flex', alignItems: 'center',
            justifyContent: 'center', color: on ? 'var(--accent)' : 'var(--faint)', position: 'relative',
            background: on ? 'var(--accent-soft)' : 'transparent', border: on ? '1px solid color-mix(in oklab, var(--accent) 35%, transparent)' : '1px solid transparent' }}>
            <Icon name={c.icon} s={19} />
            {c.n > 0 && c.key !== 'promo' && <span style={{ position: 'absolute', top: 7, right: 8, width: 5, height: 5, borderRadius: 3, background: on ? 'var(--accent)' : 'var(--ghost)' }} />}
          </div>
        );
      })}
      <div style={{ marginTop: 'auto', width: 30, height: 30, borderRadius: '50%', background: 'linear-gradient(135deg,#e8a87c,#c8866a)' }} />
    </div>
  );
}

function TopbarA({ title }) {
  return (
    <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 16, padding: '0 26px',
      borderBottom: '1px solid var(--line)', position: 'relative', zIndex: 2 }}>
      <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.02em' }}>{title}</div>
      <div className="glass" style={{ marginLeft: 18, flex: 1, maxWidth: 460, height: 38, borderRadius: 11, display: 'flex',
        alignItems: 'center', gap: 10, padding: '0 14px', color: 'var(--faint)' }}>
        <Icon name="search" s={16} />
        <span style={{ fontSize: 13 }}>Søk i alt — beløp, butikk, person, kode…</span>
        <span className="kbd" style={{ marginLeft: 'auto' }}>⌘K</span>
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, color: 'var(--faint)' }}>
        <div className="glass" style={iconBtnA}><Icon name="moon" s={16} /></div>
        <div className="glass" style={iconBtnA}><Icon name="filter" s={16} /></div>
      </div>
    </div>
  );
}
const iconBtnA = { width: 38, height: 38, borderRadius: 11, display: 'flex', alignItems: 'center', justifyContent: 'center' };

// ── A1 · Home ────────────────────────────────────────────────
function AHome() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailA active="people" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <TopbarA title="drøm" />
          <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
            {/* primary inbox */}
            <div style={{ flex: 1, padding: '34px 36px', overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginBottom: 4 }}>
                <h1 style={{ margin: 0, fontSize: 34, fontWeight: 600, letterSpacing: '-0.03em' }}>Fra mennesker</h1>
                <span className="chip chip-accent" style={{ marginBottom: 6 }}>4 nye</span>
              </div>
              <div style={{ color: 'var(--muted)', fontSize: 14, marginBottom: 26 }}>Det eneste som egentlig haster i dag.</div>
              <div className="glass" style={{ borderRadius: 20, overflow: 'hidden' }}>
                {PEOPLE.map((m, i) => (
                  <div key={i} style={{ display: 'flex', gap: 15, padding: '18px 20px',
                    borderTop: i ? '1px solid var(--line)' : 'none', background: m.pin ? 'var(--accent-soft)' : 'transparent' }}>
                    <div className="ava" style={{ width: 42, height: 42, fontSize: 15, background: m.col, color: '#15110d' }}>{m.mono}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                        <span style={{ fontWeight: m.unread ? 600 : 500, fontSize: 15 }}>{m.from}</span>
                        {m.pin && <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="pin" s={13} /></span>}
                        <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>{m.time}</span>
                        {m.unread && <span className="dot" />}
                      </div>
                      <div style={{ fontSize: 14, fontWeight: 500, margin: '3px 0 2px' }}>{m.subj}</div>
                      <div style={{ fontSize: 13, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.prev}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            {/* the quiet aside */}
            <div style={{ width: 350, flex: 'none', borderLeft: '1px solid var(--line)', padding: '34px 26px', display: 'flex', flexDirection: 'column', gap: 16, overflow: 'hidden' }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--faint)' }}>Resten — ryddet for deg</div>
              <VerifyCard />
              <BuyMini />
              <UpdatesMini />
              <PromoMini />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function BuyMini() {
  return (
    <div className="glass" style={{ borderRadius: 18, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 13 }}>
        <span style={{ display: 'flex', color: 'var(--fg)' }}><Icon name="bag" s={16} /></span>
        <span style={{ fontSize: 13, fontWeight: 600 }}>Kjøp</span>
        <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>11 denne uka</span>
      </div>
      {BUY.slice(0, 2).map((b, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
          <div className="ava" style={{ width: 26, height: 26, borderRadius: 8, fontSize: 10, background: b.col, color: '#fff' }}>{b.mono || <Icon name="bag" s={12} />}</div>
          <span style={{ fontSize: 13 }}>{b.merch}</span>
          <span className="mono" style={{ marginLeft: 'auto', fontSize: 13, color: 'var(--muted)' }}>{b.amt}</span>
        </div>
      ))}
      <div style={{ display: 'flex', gap: 8, marginTop: 13 }}>
        <span className="chip chip-accent" style={{ fontSize: 11 }}><Icon name="calendar" s={12} /> 2 → kalender</span>
        <span className="chip" style={{ fontSize: 11 }}><Icon name="search" s={11} /> Søkbart arkiv</span>
      </div>
    </div>
  );
}
function UpdatesMini() {
  const items = [['Skatteetaten', 'Skattemeldingen er klar'], ['Tibber', 'Strøm dyrere fra mandag']];
  return (
    <div className="glass" style={{ borderRadius: 18, padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <span style={{ display: 'flex' }}><Icon name="pulse" s={16} /></span>
        <span style={{ fontSize: 13, fontWeight: 600 }}>Viktige oppdateringer</span>
        <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>2</span>
      </div>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
          <span style={{ width: 5, height: 5, borderRadius: 3, background: 'var(--muted)' }} />
          <span style={{ fontSize: 13, fontWeight: 500 }}>{it[0]}</span>
          <span style={{ fontSize: 12, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>· {it[1]}</span>
        </div>
      ))}
    </div>
  );
}
function PromoMini() {
  return (
    <div style={{ borderRadius: 18, padding: '14px 16px', border: '1px dashed var(--line-strong)', display: 'flex', alignItems: 'center', gap: 11, color: 'var(--faint)' }}>
      <Icon name="tag" s={15} />
      <span style={{ fontSize: 13 }}><b style={{ color: 'var(--muted)', fontWeight: 600 }}>138</b> reklame ryddet bort</span>
      <span style={{ marginLeft: 'auto', fontSize: 12, textDecoration: 'underline', textUnderlineOffset: 3 }}>Vis</span>
    </div>
  );
}

Object.assign(window, { VerifyCard, RailA, TopbarA, AHome, btnA });