// dir-b.jsx — Retning B · "Papir"
// Light, near paper-white, monochrome. Hierarchy via a bento grid: the most
// important category is physically the biggest tile.

function paperTile(area, extra) {
  return { gridArea: area, borderRadius: 22, padding: 20, background: 'var(--glass-2)',
    backdropFilter: 'blur(30px) saturate(1.4)', WebkitBackdropFilter: 'blur(30px) saturate(1.4)',
    border: '1px solid var(--glass-brd)', boxShadow: 'var(--shadow)', overflow: 'hidden', display: 'flex', flexDirection: 'column', ...extra };
}
function TileHead({ icon, title, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
      <span style={{ display: 'flex' }}><Icon name={icon} s={17} /></span>
      <span style={{ fontSize: 14, fontWeight: 600 }}>{title}</span>
      {right !== undefined && <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--muted)' }}>{right}</span>}
    </div>
  );
}

function BHome() {
  return (
    <div className="screen theme-paper"><div className="amb amb-paper" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', padding: 26 }}>
        {/* header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 22 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--fg)', color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 18 }}>d</div>
            <span style={{ fontSize: 16, fontWeight: 600 }}>drøm</span>
          </div>
          <div className="glass" style={{ marginLeft: 14, flex: 1, maxWidth: 440, height: 40, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10, padding: '0 15px', 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', fontSize: 13, color: 'var(--muted)' }}>tirsdag 2. juni</div>
          <div className="ava" style={{ width: 34, height: 34, background: 'linear-gradient(135deg,#d8c4a8,#c8a87c)', color: '#fff', fontSize: 13 }}>K</div>
        </div>
        {/* bento */}
        <div style={{ flex: 1, display: 'grid', gap: 14, minHeight: 0,
          gridTemplateColumns: 'repeat(12,1fr)',
          gridTemplateRows: 'repeat(6,1fr)',
          gridTemplateAreas: '"ppl ppl ppl ppl ppl ppl ppl buy buy buy buy buy" "ppl ppl ppl ppl ppl ppl ppl buy buy buy buy buy" "ppl ppl ppl ppl ppl ppl ppl buy buy buy buy buy" "ppl ppl ppl ppl ppl ppl ppl ver ver ver ver ver" "ppl ppl ppl ppl ppl ppl ppl upd upd upd upd upd" "ppl ppl ppl ppl ppl ppl ppl upd upd upd upd upd"' }}>
          {/* people — the big one */}
          <div style={paperTile('ppl')}>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginBottom: 4 }}>
              <h1 style={{ margin: 0, fontSize: 30, fontWeight: 600, letterSpacing: '-0.03em' }}>Fra mennesker</h1>
              <span className="chip" style={{ marginBottom: 5, borderColor: 'var(--fg)', color: 'var(--fg)' }}>4 nye</span>
            </div>
            <div style={{ fontSize: 13.5, color: 'var(--muted)', marginBottom: 18 }}>Det eneste som egentlig haster i dag.</div>
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
              {PEOPLE.map((m, i) => (
                <div key={i} style={{ display: 'flex', gap: 14, padding: '14px 4px', borderTop: i ? '1px solid var(--line)' : 'none', alignItems: 'center' }}>
                  <div className="ava" style={{ width: 42, height: 42, fontSize: 15, background: m.col, color: '#fff' }}>{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={{ display: 'flex', color: 'var(--muted)' }}><Icon name="pin" s={13} /></span>}
                      <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>{m.time}</span>
                      {m.unread && <span style={{ width: 7, height: 7, borderRadius: 4, background: 'var(--fg)' }} />}
                    </div>
                    <div style={{ fontSize: 13.5, fontWeight: 500, marginTop: 2 }}>{m.subj}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 1 }}>{m.prev}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* kjøp */}
          <div style={paperTile('buy')}>
            <TileHead icon="bag" title="Kjøp" right="11 denne uka" />
            <div className="glass" style={{ height: 34, borderRadius: 9, display: 'flex', alignItems: 'center', gap: 8, padding: '0 11px', color: 'var(--faint)', marginBottom: 12 }}>
              <Icon name="search" s={13} /><span style={{ fontSize: 12 }} className="mono">søk kvitteringer…</span>
            </div>
            {BUY.slice(0, 4).map((b, i) => {
              const t = b.kind !== 'receipt';
              return (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px 2px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                  <div className="ava" style={{ width: 28, height: 28, borderRadius: 8, fontSize: 10, background: b.col, color: '#fff' }}>{b.mono || <Icon name="bag" s={12} />}</div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{b.merch}</div>
                    {t && <div style={{ fontSize: 11, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="calendar" s={11} /> {b.when}</div>}
                  </div>
                  <span className="mono" style={{ fontSize: 13, color: 'var(--fg)' }}>{b.amt}</span>
                </div>
              );
            })}
            <div className="chip" style={{ marginTop: 12, alignSelf: 'flex-start', borderColor: 'var(--fg)', color: 'var(--fg)' }}><Icon name="calendar" s={12} /> 2 billetter lagt i kalender</div>
          </div>
          {/* verifikasjon — wide short */}
          <div style={paperTile('ver', { flexDirection: 'row', alignItems: 'center', gap: 16, padding: '0 20px' })}>
            <span style={{ display: 'flex' }}><Icon name="shield" s={18} /></span>
            <div>
              <div style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Verifikasjon · Github</div>
              <div className="mono" style={{ fontSize: 26, fontWeight: 600, letterSpacing: '0.08em' }}>084 219</div>
            </div>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span className="mono" style={{ fontSize: 12, color: 'var(--faint)' }}>38s</span>
              <button style={{ padding: '10px 16px', borderRadius: 11, background: 'var(--fg)', color: 'var(--bg)', border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 7 }}><Icon name="copy" s={14} /> Kopiér</button>
            </div>
          </div>
          {/* oppdateringer */}
          <div style={paperTile('upd')}>
            <TileHead icon="pulse" title="Viktige oppdateringer" right="2" />
            {[['Skatteetaten', 'Skattemeldingen er klar'], ['Tibber', 'Strøm dyrere fra mandag']].map((it, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 2px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--muted)' }} />
                <span style={{ fontSize: 13.5, fontWeight: 500 }}>{it[0]}</span>
                <span style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it[1]}</span>
              </div>
            ))}
            <div style={{ marginTop: 'auto', paddingTop: 12, display: 'flex', alignItems: 'center', gap: 9, color: 'var(--faint)', fontSize: 12.5 }}>
              <span style={{ flex: 1, borderTop: '1px dashed var(--line-strong)', display: 'flex', alignItems: 'center', gap: 8, paddingTop: 12 }}><Icon name="tag" s={14} /> 138 reklame ryddet bort <span style={{ marginLeft: 'auto', textDecoration: 'underline', textUnderlineOffset: 3 }}>Vis</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── B · Mobile ───────────────────────────────────────────────
function BMobile() {
  return (
    <Phone theme="theme-paper" amb="amb-paper">
      <StatusBar />
      <div style={{ flex: 1, overflow: 'hidden', padding: '4px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, marginBottom: 2 }}>
          <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: '-0.03em' }}>Fra mennesker</h1>
          <span className="chip" style={{ marginBottom: 5, fontSize: 11, borderColor: 'var(--fg)', color: 'var(--fg)' }}>4</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 16 }}>Det som haster i dag.</div>
        <div style={{ ...paperTile('a'), padding: 6, marginBottom: 12 }}>
          {PEOPLE.slice(0, 4).map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 11, padding: '12px 12px', borderTop: i ? '1px solid var(--line)' : 'none', alignItems: 'center' }}>
              <div className="ava" style={{ width: 36, height: 36, fontSize: 13, background: m.col, color: '#fff' }}>{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>
                  <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{m.time}</span>
                  {m.unread && <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--fg)' }} />}
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>{m.subj}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ ...paperTile('a', { flexDirection: 'row', alignItems: 'center', gap: 12 }), padding: 14, marginBottom: 12 }}>
          <Icon name="shield" s={17} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--muted)' }}>Verifikasjon · Github</div>
            <div className="mono" style={{ fontSize: 18, fontWeight: 600, letterSpacing: '0.08em' }}>084 219</div>
          </div>
          <button style={{ padding: '9px 13px', borderRadius: 10, background: 'var(--fg)', color: 'var(--bg)', border: 'none', fontFamily: 'Sora', fontSize: 12.5, fontWeight: 600, display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="copy" s={13} /> Kopiér</button>
        </div>
        <div style={{ ...paperTile('a'), padding: 16 }}>
          <TileHead icon="bag" title="Kjøp" right="11 denne uka" />
          {BUY.slice(0, 2).map((b, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 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={11} />}</div>
              <span style={{ fontSize: 13 }}>{b.merch}</span>
              <span className="mono" style={{ marginLeft: 'auto', fontSize: 13, color: 'var(--muted)' }}>{b.amt}</span>
            </div>
          ))}
          <div className="chip" style={{ marginTop: 11, alignSelf: 'flex-start', fontSize: 11, borderColor: 'var(--fg)', color: 'var(--fg)' }}><Icon name="calendar" s={11} /> 2 → kalender</div>
        </div>
      </div>
      <TabBar active="people" />
    </Phone>
  );
}

Object.assign(window, { BHome, BMobile });