// v3-newfirst.jsx — Forsiden («Innkommende»), forside-først.
// Den menneskelige forsiden: ett tall som rammer inn «hva er nytt», ett
// spotlight-kort for det som betyr mest akkurat nå, og en rolig «kan vente»-
// rad for resten. Byggeklossene eksporteres slik at forside-overflater (som
// verifikasjonskoden i v3-verifycode.jsx) kan gjenbruke dem.
//
// Eksporterer: CountHero, Spotlight, SoftRow, ANewFirst.

// ── CountHero ────────────────────────────────────────────────
// Ett stort tall som svarer «hva er nytt siden sist». Ikke en innboks-teller —
// en hilsen. `breakdown` = [{label, n, col}] gir rolige kategori-chips under.
function CountHero({
  greeting = 'God morgen, Alex',
  count = 7,
  label = 'nye siden i går',
  sub = 'Ingenting haster. Tre er fra folk du kjenner.',
  breakdown = [
    { label: 'Mennesker', n: 3, col: '#e8a87c' },
    { label: 'Bedrifter', n: 2, col: '#7fb088' },
    { label: 'Billetter', n: 1, col: '#c89a5c' },
    { label: 'Kjøp', n: 1, col: '#7aa0a0' },
  ],
}) {
  return (
    <div style={{ marginBottom: 26 }}>
      <div style={{ fontSize: 13.5, color: 'var(--muted)', marginBottom: 10 }}>{greeting}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
        <span className="mono" style={{ fontSize: 52, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>{count}</span>
        <span style={{ fontSize: 18, color: 'var(--fg)', fontWeight: 500 }}>{label}</span>
      </div>
      {sub ? <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 10 }}>{sub}</div> : null}
      {breakdown && breakdown.length ? (
        <div style={{ display: 'flex', gap: 9, marginTop: 16, flexWrap: 'wrap' }}>
          {breakdown.map((b, i) => (
            <span key={i} className="chip" style={{ fontSize: 12, paddingLeft: 9 }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: b.col, flex: 'none' }} />
              {b.label}<span className="mono" style={{ color: 'var(--faint)', marginLeft: 2 }}>{b.n}</span>
            </span>
          ))}
        </div>
      ) : null}
    </div>
  );
}

// ── Spotlight ────────────────────────────────────────────────
// Det ene som betyr mest akkurat nå — én avsender, ett AI-sammendrag, og et
// hurtig svar rett i kortet. Fylt accent-knapp er den eneste på forsiden.
function Spotlight({
  person = { from: 'Nora Dahl', mono: 'IS', col: '#e8a87c' },
  subj = 'Re: Hytta i påsken',
  summary = 'Nora bekrefter fredag til mandag og spør om du tar med skiene. Venter på et kort svar.',
  meta = 'Mottatt 09:24 · venter på svar fra deg',
  suggest = 'Ja, jeg booker — tar med skiene 👍',
}) {
  return (
    <div className="glass" style={{ borderRadius: 20, padding: '20px 22px', borderColor: 'color-mix(in oklab, var(--accent) 30%, transparent)', background: 'var(--accent-soft)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <span style={{ ...v2Label, color: 'var(--accent)' }}>Verdt å se nå</span>
        <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        <span style={{ fontSize: 11.5, color: 'var(--faint)' }}>{meta}</span>
      </div>
      <div style={{ display: 'flex', gap: 15, alignItems: 'flex-start' }}>
        <div className="ava" style={{ width: 46, height: 46, borderRadius: 14, fontSize: 14, background: person.col, color: '#fff' }}>{person.mono}</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 600 }}>{person.from}</div>
          <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 1 }}>{subj}</div>
          <div style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.55, marginTop: 12, display: 'flex', gap: 9 }}>
            <span style={{ color: 'var(--accent)', display: 'flex', flex: 'none', marginTop: 2 }}><IconX name="sparkle" s={15} /></span>
            <span>{summary}</span>
          </div>
        </div>
      </div>
      {/* quick reply rett i kortet */}
      <div className="glass-2" style={{ borderRadius: 13, padding: '11px 14px', marginTop: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontSize: 13.5, color: 'var(--muted)', minWidth: 0, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          <span style={{ color: 'var(--faint)' }}>Foreslått: </span>{suggest}
        </span>
        <button style={{ flex: 'none', padding: '8px 15px', borderRadius: 10, background: 'var(--accent)', color: '#1a0d06',
          border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 7 }}>
          <IconX name="send" s={14} /> Send
        </button>
        <button style={{ flex: 'none', padding: '8px 13px', borderRadius: 10, background: 'transparent', color: 'var(--fg)',
          border: '1px solid var(--line-strong)', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, display: 'flex', alignItems: 'center', gap: 7 }}>
          <IconX name="pencil" s={14} /> Endre
        </button>
      </div>
    </div>
  );
}

// ── SoftRow ──────────────────────────────────────────────────
// En rolig rad for «kan vente» — lavere kontrast, ingen handling påtvunget.
function SoftRow({ p }) {
  return (
    <div style={{ display: 'flex', gap: 13, padding: '13px 4px', alignItems: 'center', borderBottom: '1px solid var(--line)' }}>
      <div className="ava" style={{ width: 36, height: 36, borderRadius: '50%', fontSize: 12, background: p.col, color: '#fff', opacity: 0.92 }}>{p.mono}</div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 14, fontWeight: p.unread ? 600 : 500 }}>{p.from}</span>
          {p.pin && <span style={{ color: 'var(--faint)', display: 'flex' }}><IconX name="pin" s={12} /></span>}
          <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--faint)' }}>{p.time}</span>
          {p.unread && <span className="dot" />}
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>{p.subj}</div>
      </div>
    </div>
  );
}

// ── ANewFirst — hele forsiden (uten verifikasjonskode) ───────
// Kanonisk forside. v3-verifycode.jsx/AFrontVerify gjenbruker de samme
// byggeklossene og legger LiveVerify øverst.
function ANewFirst() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="overview" omit={['verify']} />
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          <TopbarV2 title="Innkommende" sub="Forsiden · det som er nytt siden sist" />
          <div style={{ flex: 1, overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
            <div style={{ width: '100%', maxWidth: 720, padding: '30px 36px' }}>
              <CountHero />
              <Spotlight />
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, margin: '26px 0 6px' }}>
                <span style={v2Label}>Kan vente</span>
                <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
                <span style={{ fontSize: 11.5, color: 'var(--faint)' }}>3 fra folk du kjenner</span>
              </div>
              {PEOPLE.slice(1).map((p, i) => <SoftRow key={i} p={p} />)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CountHero, Spotlight, SoftRow, ANewFirst });