// dir-c.jsx — Retning C · "Strøm"
// Cool iridescent glass on near-black indigo. ONE vertical "gravity" timeline:
// the critical floats to the top (bright, large); everything else sinks down
// the spine, shrinking and fading. Importance is literally altitude.

function fluxCard(extra) {
  return { borderRadius: 18, border: '1px solid var(--glass-brd)', background: 'var(--glass)',
    backdropFilter: 'blur(36px) saturate(1.6)', WebkitBackdropFilter: 'blur(36px) saturate(1.6)',
    boxShadow: '0 0 0 1px rgba(123,224,255,0.04), 0 18px 50px rgba(0,0,0,0.45)', ...extra };
}
function Node({ bright, dim }) {
  return (
    <div style={{ position: 'absolute', left: 24, top: 4, width: 17, height: 17, borderRadius: '50%',
      background: dim ? 'var(--ghost)' : 'var(--bg)', border: '2px solid', display: 'flex', alignItems: 'center', justifyContent: 'center',
      borderColor: bright ? 'var(--accent)' : dim ? 'var(--line-strong)' : 'var(--accent-2)',
      boxShadow: bright ? '0 0 16px var(--accent)' : dim ? 'none' : '0 0 10px var(--accent-2)' }}>
      <span style={{ width: 5, height: 5, borderRadius: 3, background: bright ? 'var(--accent)' : dim ? 'var(--faint)' : 'var(--accent-2)' }} />
    </div>
  );
}
function Stop({ label, sub, children, bright, dim, last }) {
  return (
    <div style={{ position: 'relative', paddingLeft: 72, paddingBottom: last ? 0 : 30 }}>
      <Node bright={bright} dim={dim} />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 11, marginBottom: 13 }}>
        <span className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', color: bright ? 'var(--accent)' : dim ? 'var(--faint)' : 'var(--accent-2)' }}>{label}</span>
        {sub && <span style={{ fontSize: 12, color: 'var(--faint)' }}>{sub}</span>}
      </div>
      {children}
    </div>
  );
}

function CHome() {
  return (
    <div className="screen theme-flux"><div className="amb amb-flux" /><div className="grain" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* header */}
        <div style={{ height: 64, flex: 'none', display: 'flex', alignItems: 'center', gap: 16, padding: '0 36px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ width: 30, height: 30, borderRadius: 9, background: 'linear-gradient(135deg,var(--accent),var(--accent-2))', color: '#07080f', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 17 }}>d</div>
            <span style={{ fontSize: 15, fontWeight: 600 }}>drøm</span>
          </div>
          <div style={{ marginLeft: 18, display: 'flex', alignItems: 'center', gap: 9, fontSize: 13, color: 'var(--muted)' }}>
            <span className="dot" style={{ background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }} />
            <span><b style={{ color: 'var(--fg)', fontWeight: 600 }}>1</b> haster nå · <b style={{ color: 'var(--fg)', fontWeight: 600 }}>9</b> flyter under</span>
          </div>
          <div className="glass" style={{ marginLeft: 'auto', width: 38, height: 38, borderRadius: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)' }}><Icon name="search" s={17} /></div>
        </div>
        {/* the gravity timeline */}
        <div style={{ flex: 1, padding: '20px 40px 0', overflow: 'hidden', position: 'relative' }}>
          {/* spine gradient line */}
          <div style={{ position: 'absolute', left: 71, top: 24, bottom: 0, width: 2,
            background: 'linear-gradient(var(--accent), var(--accent-2) 55%, transparent)' }} />
          <Stop label="NÅ · HASTER" sub="Fra mennesker" bright>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {PEOPLE.slice(0, 3).map((m, i) => (
                <div key={i} style={fluxCard({ padding: '16px 18px', display: 'flex', gap: 15, alignItems: 'center',
                  ...(i === 0 ? { border: '1px solid color-mix(in oklab, var(--accent) 40%, transparent)', boxShadow: '0 0 30px rgba(123,224,255,0.10), 0 18px 50px rgba(0,0,0,0.45)' } : {}) })}>
                  <div className="ava" style={{ width: 44, height: 44, fontSize: 15, background: m.col, color: '#0c0e1a' }}>{m.mono}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                      <span style={{ fontWeight: 600, fontSize: 15.5 }}>{m.from}</span>
                      {m.pin && <span className="chip chip-accent" style={{ fontSize: 10, padding: '2px 8px' }}>haster</span>}
                      <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>{m.time}</span>
                    </div>
                    <div style={{ fontSize: 14, fontWeight: 500, margin: '3px 0 2px' }}>{m.subj}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.prev}</div>
                  </div>
                </div>
              ))}
            </div>
          </Stop>
          <Stop label="I DAG · HÅNDTERT" sub="Koder, kjøp, oppdateringer">
            <div style={{ display: 'flex', gap: 12 }}>
              {/* verify */}
              <div style={fluxCard({ flex: 1, padding: 16 })}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 11, color: 'var(--accent)' }}><Icon name="shield" s={15} /><span style={{ fontSize: 12, fontWeight: 600, color: 'var(--muted)' }}>Verifikasjon</span><span className="mono" style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--faint)' }}>38s</span></div>
                <div className="mono" style={{ fontSize: 23, fontWeight: 600, letterSpacing: '0.07em', background: 'linear-gradient(90deg,var(--accent),var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>084 219</div>
                <button style={{ width: '100%', marginTop: 12, padding: '8px', borderRadius: 10, background: 'linear-gradient(135deg,var(--accent),var(--accent-2))', color: '#07080f', border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 12.5, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}><Icon name="copy" s={13} /> Kopiér</button>
              </div>
              {/* kjøp */}
              <div style={fluxCard({ flex: 1.3, padding: 16 })}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 11 }}><Icon name="bag" s={15} /><span style={{ fontSize: 12, fontWeight: 600 }}>Kjøp</span><span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>11 denne uka</span></div>
                {BUY.slice(0, 2).map((b, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                    <div className="ava" style={{ width: 24, height: 24, borderRadius: 7, fontSize: 9, background: b.col, color: '#fff' }}>{b.mono || <Icon name="bag" s={11} />}</div>
                    <span style={{ fontSize: 12.5 }}>{b.merch}</span>
                    <span className="mono" style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--muted)' }}>{b.amt}</span>
                  </div>
                ))}
                <span className="chip chip-accent" style={{ marginTop: 11, fontSize: 10.5, padding: '3px 9px' }}><Icon name="calendar" s={11} /> 2 → kalender</span>
              </div>
              {/* updates */}
              <div style={fluxCard({ flex: 1, padding: 16 })}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 11 }}><Icon name="pulse" s={15} /><span style={{ fontSize: 12, fontWeight: 600 }}>Oppdat.</span><span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>2</span></div>
                {['Skatteetaten', 'Tibber'].map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                    <span style={{ width: 5, height: 5, borderRadius: 3, background: 'var(--muted)' }} />
                    <span style={{ fontSize: 12.5 }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </Stop>
          <Stop label="SYNKER UT" sub="Reklame — ute av veien" dim last>
            <div style={{ borderRadius: 14, border: '1px dashed var(--line-strong)', padding: '13px 18px', display: 'flex', alignItems: 'center', gap: 12, color: 'var(--faint)', opacity: 0.7 }}>
              <Icon name="tag" s={15} />
              <span style={{ fontSize: 13 }}><b style={{ color: 'var(--muted)', fontWeight: 600 }}>138</b> reklame siste 7 dager</span>
              <div style={{ flex: 1, display: 'flex', gap: 4, opacity: 0.6 }}>{Array.from({ length: 18 }).map((_, i) => <span key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: 'var(--line-strong)' }} />)}</div>
              <span style={{ fontSize: 12, textDecoration: 'underline', textUnderlineOffset: 3 }}>Vis alt</span>
            </div>
          </Stop>
        </div>
      </div>
    </div>
  );
}

// ── C · Mobile ───────────────────────────────────────────────
function CMobile() {
  return (
    <Phone theme="theme-flux" amb="amb-flux">
      <div className="grain" />
      <StatusBar />
      <div style={{ flex: 1, overflow: 'hidden', padding: '6px 18px 0', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 18, fontSize: 13, color: 'var(--muted)' }}>
          <span className="dot" style={{ background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)' }} />
          <span><b style={{ color: 'var(--fg)', fontWeight: 600 }}>1</b> haster · 9 flyter under</span>
        </div>
        <div style={{ position: 'absolute', left: 28, top: 60, bottom: 0, width: 2, background: 'linear-gradient(var(--accent),var(--accent-2) 60%,transparent)' }} />
        <div style={{ position: 'relative', paddingLeft: 30 }}>
          <Stop label="NÅ · HASTER" bright>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {PEOPLE.slice(0, 2).map((m, i) => (
                <div key={i} style={fluxCard({ padding: 13, display: 'flex', gap: 11, alignItems: 'center',
                  ...(i === 0 ? { border: '1px solid color-mix(in oklab, var(--accent) 40%, transparent)' } : {}) })}>
                  <div className="ava" style={{ width: 36, height: 36, fontSize: 13, background: m.col, color: '#0c0e1a' }}>{m.mono}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}><span style={{ fontWeight: 600, fontSize: 14 }}>{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', marginTop: 2 }}>{m.subj}</div>
                  </div>
                </div>
              ))}
            </div>
          </Stop>
          <Stop label="I DAG">
            <div style={fluxCard({ padding: 13, display: 'flex', alignItems: 'center', gap: 11, marginBottom: 10 })}>
              <Icon name="shield" s={16} style={{ color: 'var(--accent)' }} />
              <div style={{ flex: 1 }}><div style={{ fontSize: 10.5, color: 'var(--faint)' }}>Github</div><div className="mono" style={{ fontSize: 17, fontWeight: 600, letterSpacing: '0.07em', background: 'linear-gradient(90deg,var(--accent),var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>084 219</div></div>
              <button style={{ padding: '8px 12px', borderRadius: 10, background: 'linear-gradient(135deg,var(--accent),var(--accent-2))', color: '#07080f', border: 'none', fontFamily: 'Sora', fontSize: 12, fontWeight: 600, display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="copy" s={12} /> Kopiér</button>
            </div>
            <div style={fluxCard({ padding: 14 })}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}><Icon name="bag" s={15} /><span style={{ fontSize: 12.5, fontWeight: 600 }}>Kjøp</span><span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>11</span></div>
              {BUY.slice(0, 2).map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                  <div className="ava" style={{ width: 24, height: 24, borderRadius: 7, fontSize: 9, background: b.col, color: '#fff' }}>{b.mono || <Icon name="bag" s={11} />}</div>
                  <span style={{ fontSize: 12.5 }}>{b.merch}</span><span className="mono" style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--muted)' }}>{b.amt}</span>
                </div>
              ))}
              <span className="chip chip-accent" style={{ marginTop: 10, fontSize: 10.5 }}><Icon name="calendar" s={11} /> 2 → kalender</span>
            </div>
          </Stop>
          <Stop label="SYNKER UT" dim last>
            <div style={{ borderRadius: 12, border: '1px dashed var(--line-strong)', padding: '11px 14px', display: 'flex', alignItems: 'center', gap: 10, color: 'var(--faint)', opacity: 0.7 }}>
              <Icon name="tag" s={14} /><span style={{ fontSize: 12.5 }}><b style={{ color: 'var(--muted)' }}>138</b> reklame</span><span style={{ marginLeft: 'auto', fontSize: 11.5, textDecoration: 'underline' }}>Vis</span>
            </div>
          </Stop>
        </div>
      </div>
      <TabBar active="people" />
    </Phone>
  );
}

Object.assign(window, { CHome, CMobile });