// v2-settings.jsx — Varsling: ventet e-post (fritekst) + hyppige kontakter.
// A settings sub-nav frames the screen (Kontoer / Varsling / Kategorier / Skins),
// with Varsling active. Skins is shown as "kommer" — locked to Stille for now.

function ASettings() {
  const nav = [
    ['mail', 'Kontoer', 'example-mail.com · Gmail'],
    ['bell', 'Varsling', ''],
    ['settings', 'Kategorier', 'AI-prompt per kategori'],
    ['layers', 'Skins', 'kommer'],
  ];
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="settings" />
        {/* settings sub-nav */}
        <div style={{ width: 250, flex: 'none', borderRight: '1px solid var(--line)', padding: '26px 16px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ ...v2Label, padding: '0 10px 14px' }}>Innstillinger</div>
          {nav.map((n, i) => {
            const on = n[1] === 'Varsling';
            const soon = n[2] === 'kommer';
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 12px', borderRadius: 12,
                background: on ? 'var(--accent-soft)' : 'transparent', border: '1px solid ' + (on ? 'color-mix(in oklab, var(--accent) 32%, transparent)' : 'transparent'),
                color: on ? 'var(--accent)' : soon ? 'var(--faint)' : 'var(--fg)', opacity: soon ? 0.7 : 1 }}>
                <IconX name={n[0]} s={18} />
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: on ? 600 : 500 }}>{n[1]}</div>
                  {n[2] ? <div style={{ fontSize: 11, color: 'var(--faint)' }}>{n[2]}</div> : null}
                </div>
                {soon && <span className="chip" style={{ marginLeft: 'auto', fontSize: 10, padding: '1px 7px', color: 'var(--faint)' }}>snart</span>}
              </div>
            );
          })}
          <div className="glass" style={{ marginTop: 'auto', borderRadius: 14, padding: '13px 15px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, fontWeight: 600, marginBottom: 6 }}>
              <span style={{ color: 'var(--accent)', display: 'flex' }}><IconX name="pulse" s={15} /></span> Sanntid
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.5 }}>E-post hentes og varsles så fort som mulig — ingen polling-forsinkelse.</div>
          </div>
        </div>
        {/* content */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 12, padding: '0 32px', borderBottom: '1px solid var(--line)' }}>
            <span style={{ color: 'var(--accent)', display: 'flex' }}><IconX name="bell" s={19} /></span>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Varsling</div>
            <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--faint)' }}>«Viktig» læres over tid — dette er startsignalene</span>
          </div>
          <div style={{ flex: 1, padding: '28px 32px', overflow: 'hidden' }}>
            {/* expected email */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 4 }}>
              <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Ventet e-post</h1>
              <span className="chip" style={{ fontSize: 11 }}>fritekst</span>
            </div>
            <div style={{ fontSize: 13.5, color: 'var(--muted)', marginBottom: 16 }}>Beskriv hva du venter på. drøm matcher innkommende e-post og varsler umiddelbart ved treff.</div>
            {/* input */}
            <div className="glass-2" style={{ borderRadius: 13, padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <IconX name="plus" s={17} style={{ color: 'var(--accent)' }} />
              <span style={{ fontSize: 14, color: 'var(--faint)', flex: 1 }}>F.eks. «venter på svar fra Kari om kontrakten»…</span>
              <span style={{ width: 1.5, height: 18, background: 'var(--accent)' }} />
              <button style={{ padding: '7px 14px', borderRadius: 10, background: 'var(--accent)', color: '#1a0d06', border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600 }}>Legg til</button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 30 }}>
              {EXPECTED.map((e, i) => (
                <div key={i} className="glass" style={{ borderRadius: 14, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 13,
                  ...(e.live ? { borderColor: 'color-mix(in oklab, var(--accent) 34%, transparent)' } : {}) }}>
                  <span style={{ width: 34, height: 34, flex: 'none', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: e.live ? 'var(--accent)' : 'var(--faint)', background: e.live ? 'var(--accent-soft)' : 'var(--glass-2)', border: '1px solid var(--glass-brd)' }}>
                    <IconX name={e.live ? 'bell' : 'clock'} s={16} />
                  </span>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 500 }}>«{e.txt}»</div>
                    <div style={{ fontSize: 12, color: e.live ? 'var(--accent)' : 'var(--faint)', marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
                      {e.live && <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent)' }} />}{e.match}
                    </div>
                  </div>
                  {e.live && <span className="chip chip-accent" style={{ fontSize: 11 }}>Varsler nå</span>}
                  <span style={{ color: 'var(--faint)', display: 'flex', cursor: 'pointer' }}><IconX name="trash" s={15} /></span>
                </div>
              ))}
            </div>
            {/* frequent contacts */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 4 }}>
              <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Hyppige kontakter</h1>
              <span className="chip" style={{ fontSize: 11 }}><IconX name="sparkle" s={12} /> læres automatisk</span>
            </div>
            <div style={{ fontSize: 13.5, color: 'var(--muted)', marginBottom: 16 }}>Folk du kommuniserer mye med prioriteres av seg selv. Slå på alltid-varsel for de viktigste.</div>
            <div className="glass" style={{ borderRadius: 16, overflow: 'hidden' }}>
              {CONTACTS.map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 16px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                  <div className="ava" style={{ width: 38, height: 38, borderRadius: 12, fontSize: 13, background: c.col, color: '#15110d' }}>{c.mono}</div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 600 }}>{c.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--faint)' }}>{c.n} e-poster siste året</div>
                  </div>
                  <span style={{ fontSize: 12.5, color: c.always ? 'var(--accent)' : 'var(--faint)' }}>Alltid varsel</span>
                  {/* toggle */}
                  <span style={{ width: 42, height: 24, flex: 'none', borderRadius: 13, padding: 3, display: 'flex',
                    background: c.always ? 'var(--accent)' : 'var(--glass-2)', border: '1px solid ' + (c.always ? 'transparent' : 'var(--line-strong)'),
                    justifyContent: c.always ? 'flex-end' : 'flex-start' }}>
                    <span style={{ width: 18, height: 18, borderRadius: '50%', background: c.always ? '#1a0d06' : 'var(--faint)' }} />
                  </span>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--faint)', marginTop: 16, lineHeight: 1.6, display: 'flex', alignItems: 'center', gap: 8 }}>
              <IconX name="sparkle" s={14} /> Flere varslingssignaler avdekkes over tid — systemet blir smartere jo lenger det brukes.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ASettings });