// dir-a-screens.jsx — Retning A, remaining screens: Kjøp archive, thread, mobile.

// ── A2 · Kjøp — searchable receipt archive ───────────────────
function ABuy() {
  const filters = ['Alle', 'Kvitteringer', 'Billetter', 'Reservasjoner'];
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailA active="buy" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <TopbarA title="Kjøp" />
          <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
            <div style={{ flex: 1, padding: '30px 34px', overflow: 'hidden' }}>
              {/* search */}
              <div className="glass-2" style={{ height: 50, borderRadius: 14, display: 'flex', alignItems: 'center', gap: 12, padding: '0 18px', color: 'var(--fg)' }}>
                <Icon name="search" s={18} />
                <span className="mono" style={{ fontSize: 14, color: 'var(--fg)' }}>thon hotel</span>
                <span style={{ width: 1.5, height: 18, background: 'var(--accent)', marginLeft: -2 }} />
                <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>6 treff · 0,02 s</span>
              </div>
              {/* stat + filters */}
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 24, margin: '24px 2px 18px' }}>
                <div>
                  <div style={{ fontSize: 12, color: 'var(--faint)', marginBottom: 4 }}>Brukt i mai</div>
                  <div className="mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.02em' }}>14 380<span style={{ fontSize: 16, color: 'var(--muted)' }}> kr</span></div>
                </div>
                <div style={{ display: 'flex', gap: 8, marginLeft: 'auto', marginBottom: 4 }}>
                  {filters.map((f, i) => <span key={f} className={i === 0 ? 'chip chip-accent' : 'chip'}>{f}</span>)}
                </div>
              </div>
              {/* list */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {BUY.map((b, i) => {
                  const ticket = b.kind !== 'receipt';
                  return (
                    <div key={i} className="glass" style={{ borderRadius: 16, padding: '15px 18px', display: 'flex', alignItems: 'center', gap: 15,
                      ...(i === 3 ? { borderColor: 'color-mix(in oklab, var(--accent) 40%, transparent)', background: 'var(--accent-soft)' } : {}) }}>
                      <div className="ava" style={{ width: 40, height: 40, borderRadius: 12, fontSize: 12, background: b.col, color: '#fff' }}>{b.mono || <Icon name="bag" s={16} />}</div>
                      <div style={{ minWidth: 0, flex: 1 }}>
                        <div style={{ fontSize: 15, fontWeight: 600 }}>{b.merch}</div>
                        <div style={{ fontSize: 12.5, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 7 }}>
                          <Icon name={b.kind === 'receipt' ? 'archive' : b.kind === 'ticket' ? 'ticket' : 'pin'} s={13} /> {b.what}
                        </div>
                      </div>
                      {ticket && <span className="chip chip-accent"><Icon name="calendar" s={13} /> {b.when}</span>}
                      <div className="mono" style={{ fontSize: 15, fontWeight: 600, minWidth: 92, textAlign: 'right' }}>{b.amt}</div>
                    </div>
                  );
                })}
              </div>
            </div>
            {/* receipt detail */}
            <div style={{ width: 372, flex: 'none', borderLeft: '1px solid var(--line)', padding: '30px 26px', overflow: 'hidden' }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--faint)', marginBottom: 16 }}>Kvittering · bevart</div>
              <div className="glass-2" style={{ borderRadius: 20, padding: 22 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                  <div className="ava" style={{ width: 44, height: 44, borderRadius: 13, fontSize: 14, background: '#7a9e7e', color: '#fff' }}>V</div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 16 }}>Vinmonopolet</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)' }}>2. jun 2026 · 14:02</div>
                  </div>
                  <div className="mono" style={{ marginLeft: 'auto', fontSize: 22, fontWeight: 600 }}>648,00</div>
                </div>
                {[['Barolo, Pio Cesare 2019', '349,00'], ['Riesling Kabinett', '199,00'], ['Pant', '0,00'], ['MVA (25%)', '129,60']].map((l, i) => (
                  <div key={i} style={{ display: 'flex', padding: '8px 0', borderTop: '1px solid var(--line)', fontSize: 13 }}>
                    <span style={{ color: 'var(--muted)' }}>{l[0]}</span>
                    <span className="mono" style={{ marginLeft: 'auto', color: 'var(--fg)' }}>{l[1]}</span>
                  </div>
                ))}
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 16, padding: '11px 13px', borderRadius: 11, background: 'var(--glass-2)', border: '1px solid var(--line)' }}>
                  <Icon name="archive" s={16} />
                  <span style={{ fontSize: 13 }}>kvittering-40219.pdf</span>
                  <span className="mono" style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>84 kB</span>
                </div>
                <div style={{ display: 'flex', gap: 9, marginTop: 14 }}>
                  <button style={{ ...btnA, marginTop: 0, flex: 1 }}><Icon name="archive" s={14} /> Eksporter</button>
                  <button style={{ ...btnA, marginTop: 0, flex: 1, background: 'transparent', color: 'var(--fg)', border: '1px solid var(--line-strong)' }}><Icon name="search" s={14} /> Lignende</button>
                </div>
              </div>
              <div style={{ fontSize: 12, color: 'var(--faint)', marginTop: 16, lineHeight: 1.6 }}>Alle kvitteringer arkiveres automatisk og er fulltekst-søkbare i 7 år — beløp, varelinje eller butikk.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── A3 · Fra mennesker — thread ──────────────────────────────
function AThread() {
  const thread = [
    { me: false, who: 'Nora Dahl', col: '#e8a87c', t: '08:51', txt: 'Tenkte vi kunne ta hytta i påsken? Jeg sjekket kalenderen og det ser ut til at uke 15 funker fint for alle.' },
    { me: true, who: 'Deg', t: '09:10', txt: 'Åh, ja! Det hadde vært helt nydelig. Skal vi si fredag til mandag?' },
    { me: false, who: 'Nora Dahl', col: '#e8a87c', t: '09:24', txt: 'Høres helt perfekt ut — jeg booker fredag til mandag. Skal jeg ta med skiene, eller blir det for vått nå?' },
  ];
  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={{ width: 300, flex: 'none', borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 60, display: 'flex', alignItems: 'center', padding: '0 22px', borderBottom: '1px solid var(--line)', fontWeight: 600 }}>Fra mennesker</div>
          <div style={{ flex: 1, overflow: 'hidden' }}>
            {PEOPLE.map((m, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, padding: '15px 20px', alignItems: 'center', background: i === 0 ? 'var(--glass)' : 'transparent', borderLeft: i === 0 ? '2px solid var(--accent)' : '2px solid transparent' }}>
                <div className="ava" style={{ width: 36, height: 36, fontSize: 13, background: m.col, color: '#15110d' }}>{m.mono}</div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ display: 'flex' }}><span style={{ fontSize: 14, fontWeight: m.unread ? 600 : 500 }}>{m.from}</span><span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{m.time}</span></div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.subj}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 13, padding: '0 30px', borderBottom: '1px solid var(--line)' }}>
            <div className="ava" style={{ width: 36, height: 36, fontSize: 13, background: '#e8a87c', color: '#15110d' }}>IS</div>
            <div><div style={{ fontWeight: 600, fontSize: 15 }}>Nora Dahl</div><div style={{ fontSize: 12, color: 'var(--faint)' }}>Hytta i påsken</div></div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, color: 'var(--faint)' }}>
              <div className="glass" style={iconBtnA}><Icon name="archive" s={16} /></div>
              <div className="glass" style={iconBtnA}><Icon name="calendar" s={16} /></div>
            </div>
          </div>
          <div style={{ flex: 1, padding: '34px 40px', display: 'flex', flexDirection: 'column', gap: 26, overflow: 'hidden' }}>
            {thread.map((m, i) => (
              <div key={i} style={{ maxWidth: 560, alignSelf: m.me ? 'flex-end' : 'flex-start' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 8, flexDirection: m.me ? 'row-reverse' : 'row' }}>
                  {!m.me && <div className="ava" style={{ width: 26, height: 26, fontSize: 10, background: m.col, color: '#15110d' }}>IS</div>}
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{m.who}</span>
                  <span style={{ fontSize: 11, color: 'var(--faint)' }}>{m.t}</span>
                </div>
                <div className={m.me ? '' : 'glass'} style={{ borderRadius: 18, padding: '15px 19px', fontSize: 14.5, lineHeight: 1.6, color: m.me ? '#1a0d06' : 'var(--fg)', background: m.me ? 'var(--accent)' : undefined, borderTopRightRadius: m.me ? 4 : 18, borderTopLeftRadius: m.me ? 18 : 4 }}>{m.txt}</div>
              </div>
            ))}
          </div>
          <div style={{ padding: '0 40px 28px' }}>
            <div className="glass-2" style={{ borderRadius: 16, padding: '15px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 14, color: 'var(--faint)', flex: 1 }}>Svar Nora …</span>
              <span className="chip"><Icon name="sparkle" s={13} /> Foreslå svar</span>
              <button style={{ ...btnA, marginTop: 0, width: 'auto', padding: '9px 16px' }}><Icon name="reply" s={14} /> Send</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── A4 · Mobile ──────────────────────────────────────────────
function AMobile() {
  return (
    <Phone theme="theme-dark" amb="amb-dark">
      <StatusBar />
      <div style={{ flex: 1, overflow: 'hidden', padding: '6px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, marginBottom: 2 }}>
          <h1 style={{ margin: 0, fontSize: 27, fontWeight: 600, letterSpacing: '-0.03em' }}>Fra mennesker</h1>
          <span className="chip chip-accent" style={{ marginBottom: 5, fontSize: 11 }}>4</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 18 }}>Det som haster i dag.</div>
        <div className="glass" style={{ borderRadius: 18, overflow: 'hidden' }}>
          {PEOPLE.slice(0, 4).map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 15px', borderTop: i ? '1px solid var(--line)' : 'none', background: m.pin ? 'var(--accent-soft)' : 'transparent' }}>
              <div className="ava" style={{ width: 38, height: 38, fontSize: 13, background: m.col, color: '#15110d' }}>{m.mono}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ fontSize: 14, fontWeight: m.unread ? 600 : 500 }}>{m.from}</span>
                  {m.pin && <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="pin" s={12} /></span>}
                  <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{m.time}</span>
                  {m.unread && <span className="dot" />}
                </div>
                <div style={{ fontSize: 13, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>{m.subj}</div>
              </div>
            </div>
          ))}
        </div>
        {/* floating verify pill */}
        <div className="glass-2" style={{ borderRadius: 16, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, marginTop: 14 }}>
          <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="shield" s={17} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--faint)' }}>Github-kode</div>
            <div className="mono" style={{ fontSize: 18, fontWeight: 600, letterSpacing: '0.08em' }}>084 219</div>
          </div>
          <button style={{ ...btnA, marginTop: 0, width: 'auto', padding: '9px 13px' }}><Icon name="copy" s={13} /> Kopiér</button>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <MobileQuiet icon="bag" label="Kjøp" sub="11" />
          <MobileQuiet icon="pulse" label="Oppdat." sub="2" />
          <MobileQuiet icon="tag" label="Reklame" sub="138" dim />
        </div>
      </div>
      <TabBar active="people" />
    </Phone>
  );
}
function MobileQuiet({ icon, label, sub, dim }) {
  return (
    <div className="glass" style={{ flex: 1, borderRadius: 14, padding: '12px 10px', textAlign: 'center', opacity: dim ? 0.6 : 1 }}>
      <div style={{ display: 'flex', justifyContent: 'center', color: dim ? 'var(--faint)' : 'var(--fg)' }}><Icon name={icon} s={17} /></div>
      <div style={{ fontSize: 12, fontWeight: 500, marginTop: 6 }}>{label}</div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--faint)', marginTop: 1 }}>{sub}</div>
    </div>
  );
}

// Phone shell + chrome (reused by other directions via theme prop)
function Phone({ theme, amb, children }) {
  return (
    <div className={'screen ' + theme} style={{ borderRadius: 0 }}>
      {amb && <div className={'amb ' + amb} />}
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>{children}</div>
    </div>
  );
}
function StatusBar() {
  return (
    <div style={{ height: 50, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px 0 28px' }}>
      <span className="mono" style={{ fontSize: 14, fontWeight: 600 }}>9:41</span>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center', opacity: 0.85 }}>
        <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="1"/><rect x="4.5" y="4" width="3" height="7" rx="1"/><rect x="9" y="2" width="3" height="9" rx="1"/><rect x="13.5" y="0" width="3" height="11" rx="1"/></svg>
        <svg width="22" height="11" viewBox="0 0 22 11" fill="none" stroke="currentColor" strokeWidth="1"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5"/><rect x="2" y="2" width="13" height="7" rx="1" fill="currentColor"/><rect x="20" y="3.5" width="1.5" height="4" rx="1" fill="currentColor"/></svg>
      </div>
    </div>
  );
}
function TabBar({ active }) {
  return (
    <div style={{ flex: 'none', height: 78, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'flex-start', padding: '13px 20px 0', gap: 4 }}>
      {CATS.map((c) => (
        <div key={c.key} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, color: c.key === active ? 'var(--accent)' : 'var(--faint)' }}>
          <Icon name={c.icon} s={21} />
          <span style={{ width: 4, height: 4, borderRadius: 2, background: c.key === active ? 'var(--accent)' : 'transparent' }} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { ABuy, AThread, AMobile, Phone, StatusBar, TabBar, iconBtnA });