// intro.jsx — opening "concept brief" board: assumptions, reasoning, the five
// categories and how they're weighted, and a map of the three directions.

function IntroBoard() {
  const weights = [
    { label: 'Fra mennesker', w: 1.0, note: 'Samtaler. Det eneste som egentlig haster.' },
    { label: 'Verifikasjon', w: 0.42, note: '2FA-koder & lenker — vises, brukes, forsvinner.' },
    { label: 'Viktige oppdateringer', w: 0.5, note: 'Det offentlige, banken, strøm.' },
    { label: 'Kjøp', w: 0.62, note: 'Kvitteringer arkiveres & søkbart · billetter → kalender.' },
    { label: 'Reklame', w: 0.12, note: 'Ryddes bort. Tilgjengelig, aldri påtrengende.' },
  ];
  const dirs = [
    { tag: 'A', name: 'Stille', desc: 'Mørk OLED, frosted glass, varm aksent. Én primær innboks i sentrum — resten lever stille i en sidekolonne.', sw: ['#060607', '#ff7d54', '#f3f1ef'] },
    { tag: 'B', name: 'Papir', desc: 'Lys, nesten papirhvit, monokrom. Bento-fliser i ulik størrelse gir vekt — det viktige er størst.', sw: ['#f3f2ee', '#15140f', '#c9c6bd'] },
    { tag: 'C', name: 'Strøm', desc: 'Kjølig iriserende glass. Én vertikal tidslinje der det kritiske flyter til topp, resten synker.', sw: ['#07080f', '#7be0ff', '#b69cff'] },
  ];
  return (
    <div className="screen theme-dark" style={{ padding: 0 }}>
      <div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, padding: '56px 60px', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 40 }}>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1a0d06', fontWeight: 700, fontSize: 22 }}>d</div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>drøm</div>
            <div style={{ fontSize: 12, color: 'var(--faint)' }}>konsept · epostklient</div>
          </div>
          <span className="chip" style={{ marginLeft: 'auto' }}>Statisk konsept · 3 retninger</span>
        </div>

        <h1 style={{ margin: 0, fontSize: 58, fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1.02, maxWidth: 880 }}>
          Lite haster.<br /><span style={{ color: 'var(--muted)' }}>Alt det andre ryddes bort.</span>
        </h1>
        <p style={{ maxWidth: 720, fontSize: 16, lineHeight: 1.65, color: 'var(--muted)', margin: '24px 0 0' }}>
          Du får mye e-post, men nesten ingenting er kritisk. Premisset er å snu standard-innboksen på hodet:
          <b style={{ color: 'var(--fg)', fontWeight: 600 }}> mennesker</b> får all plassen, mens kjøp, oppdateringer,
          koder og reklame sorteres, brukes og forsvinner i bakgrunnen. Minimalistisk i formen, framtidsrettet i følelsen.
        </p>

        <div style={{ display: 'flex', gap: 48, marginTop: 46, flex: 1, minHeight: 0 }}>
          {/* weighting */}
          <div style={{ flex: 1.05 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--faint)', marginBottom: 20 }}>Fem kategorier · ulik vekt</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {weights.map((c, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 7 }}>
                    <span style={{ fontSize: 15, fontWeight: i === 0 ? 600 : 500 }}>{c.label}</span>
                    <span style={{ fontSize: 12.5, color: 'var(--faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.note}</span>
                  </div>
                  <div style={{ height: 7, borderRadius: 4, background: 'var(--line)', overflow: 'hidden' }}>
                    <div style={{ width: (c.w * 100) + '%', height: '100%', borderRadius: 4, background: i === 0 ? 'var(--accent)' : 'color-mix(in oklab, var(--accent) 55%, var(--fg) 0%)', opacity: i === 0 ? 1 : 0.5 }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* directions */}
          <div style={{ flex: 1, borderLeft: '1px solid var(--line)', paddingLeft: 48 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--faint)', marginBottom: 20 }}>Tre retninger å sammenligne</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {dirs.map((d) => (
                <div key={d.tag} className="glass" style={{ borderRadius: 16, padding: '16px 18px', display: 'flex', gap: 15, alignItems: 'flex-start' }}>
                  <div style={{ display: 'flex', gap: 4, flex: 'none', marginTop: 3 }}>
                    {d.sw.map((s, j) => <span key={j} style={{ width: 13, height: 26, borderRadius: 4, background: s, border: '1px solid var(--line-strong)' }} />)}
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span className="mono" style={{ fontSize: 12, color: 'var(--accent)' }}>{d.tag}</span>
                      <span style={{ fontSize: 15, fontWeight: 600 }}>{d.name}</span>
                    </div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.55, marginTop: 5 }}>{d.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { IntroBoard });