/* onboarding.jsx — 5 onboarding screens */
/* global React, Icon, fmtKr, fmtPoeng, BONUS_TOTAL, BONUS_EXPECTED */

const { useState: useStateOB } = React;

// ════════════════════════════════════════════
// 1. INTRO — "Nytt: Bulder Bonus"
// ════════════════════════════════════════════
function OnboardingIntro({ onNext, onSkip }) {
  return (
    <div className="ob">
      <div className="ob-pattern" />
      <button className="ob-skip" onClick={onSkip}>Hopp over</button>
      <div className="ob-progress">
        <div className="ob-pdot active" />
        <div className="ob-pdot" />
        <div className="ob-pdot" />
        <div className="ob-pdot" />
        <div className="ob-pdot" />
      </div>

      <div className="ob-stage">
        <div style={{ color: 'var(--color-bulder)', width: 48, marginBottom: 36, marginTop: 8 }}>
          {Icon.bulderMark(48)}
        </div>
        <div className="ob-eyebrow">Nytt fra Bulder</div>
        <h1 className="ob-h1">Du tjener bonus<br/>bare ved å være<br/>kunde i Bulder.</h1>
        <div style={{ flex: 1 }} />
        <div style={{
          padding: '14px 16px',
          background: 'var(--bg-surface)',
          borderRadius: 'var(--radius-standard)',
          border: '1px solid rgba(255,255,255,0.04)',
          marginBottom: 8,
        }}>
          <div style={{ font: '700 11px var(--font-sans)', color: 'var(--fg-tertiary)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>
            Ditt forhold til Bulder
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ font: '500 14px var(--font-sans)', color: 'var(--fg-secondary)' }}>Boliglån</span>
            <span style={{ font: '700 17px var(--font-sans)', color: 'var(--fg-primary)', fontVariantNumeric: 'tabular-nums' }}>2 350 000 kr</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 4 }}>
            <span style={{ font: '500 14px var(--font-sans)', color: 'var(--fg-secondary)' }}>Innskudd</span>
            <span style={{ font: '700 17px var(--font-sans)', color: 'var(--fg-primary)', fontVariantNumeric: 'tabular-nums' }}>485 000 kr</span>
          </div>
        </div>
      </div>

      <div className="ob-foot">
        <button className="btn-primary" onClick={onNext}>Vis meg hvordan</button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 2. OVERSIKT — visuell INN → SALDO → UT-flyt
// ════════════════════════════════════════════
function OnboardingOversikt({ onNext, onBack }) {
  return (
    <div className="ob">
      <div className="ob-progress">
        <div className="ob-pdot done" />
        <div className="ob-pdot active" />
        <div className="ob-pdot" />
        <div className="ob-pdot" />
      </div>

      <div className="ob-stage">
        <div className="ob-eyebrow">02 — Oversikt</div>
        <h1 className="ob-h1">Slik fungerer<br/>Bulder Bonus.</h1>

        {/* ── SOURCES ─────────────────────────────────────────── */}
        <div className="ovr-block in">
          <div className="ovr-block-head">
            <span className="ovr-block-tag in">3 kilder</span>
            <span className="ovr-block-title">Tjener bonus</span>
          </div>

          <div className="ovr-row">
            <div className="ovr-row-info">
              <div className="ovr-row-name">Kundeutbytte</div>
              <div className="ovr-row-desc">Lån & innskudd · automatisk</div>
            </div>
            <div className="ovr-row-amt in">+6 580 kr</div>
          </div>

          <div className="ovr-row">
            <div className="ovr-row-info">
              <div className="ovr-row-name">Renteomdirigering</div>
              <div className="ovr-row-desc">Sparerente blir bonus</div>
            </div>
            <div className="ovr-row-amt in">+19 400 kr</div>
          </div>

          <div className="ovr-row">
            <div className="ovr-row-info">
              <div className="ovr-row-name">Vervebonus & atferd</div>
              <div className="ovr-row-desc">Tips venner · kortbruk</div>
            </div>
            <div className="ovr-row-amt in">+800 kr</div>
          </div>
        </div>

        {/* ── FLOW → HERO ─────────────────────────────────────── */}
        <div className="ovr-pipe in">
          <span className="ovr-pipe-line" />
          <span className="ovr-pipe-text">blir til</span>
          <span className="ovr-pipe-line" />
        </div>

        <div className="ovr-hero">
          <div className="ovr-hero-pattern" />
          <div className="ovr-hero-content">
            <div className="ovr-hero-top">
              <span className="ovr-hero-eyebrow">Bulder Bonus · 2026</span>
              <span className="ovr-hero-chevron">{Icon.chevronRight(18)}</span>
            </div>
            <div className="ovr-hero-num">{fmtKr(BONUS_TOTAL)} <span>kr</span></div>
            <div className="ovr-hero-meta">av forventet {fmtKr(BONUS_EXPECTED)} kr i år</div>
            <div className="ovr-hero-progress">
              <div className="ovr-hero-fill" style={{ width: `${(BONUS_TOTAL / BONUS_EXPECTED) * 100}%` }} />
            </div>
            <div className="ovr-hero-foot">
              <strong>+{fmtKr(2215)} kr denne måneden</strong>
            </div>
          </div>
        </div>

        <div className="ovr-pipe out">
          <span className="ovr-pipe-line" />
          <span className="ovr-pipe-text">kan brukes som</span>
          <span className="ovr-pipe-line" />
        </div>

        {/* ── DESTINATIONS ───────────────────────────────────── */}
        <div className="ovr-block out">
          <div className="ovr-block-head">
            <span className="ovr-block-tag out">4 måter</span>
            <span className="ovr-block-title">Bruker bonus</span>
          </div>

          <div className="ovr-dest">
            <div className="ovr-dest-ico eb">{Icon.plane(20)}</div>
            <div className="ovr-dest-info">
              <div className="ovr-dest-name">EuroBonus</div>
              <div className="ovr-dest-desc">SAS-poeng · 1 kr = 10 poeng</div>
            </div>
            <div className="ovr-dest-tag eb">10× verdi</div>
          </div>

          <div className="ovr-dest">
            <div className="ovr-dest-ico kr">{Icon.coin(20)}</div>
            <div className="ovr-dest-info">
              <div className="ovr-dest-name">Kontant</div>
              <div className="ovr-dest-desc">Direkte til brukskonto</div>
            </div>
            <div className="ovr-dest-tag kr">1 : 1</div>
          </div>

          <div className="ovr-dest">
            <div className="ovr-dest-ico pt">{Icon.partner(20)}</div>
            <div className="ovr-dest-info">
              <div className="ovr-dest-name">Partnere</div>
              <div className="ovr-dest-desc">Tibber · Spotify · Netflix</div>
            </div>
            <div className="ovr-dest-tag pt">+10 %</div>
          </div>

          <div className="ovr-dest">
            <div className="ovr-dest-ico ch">{Icon.heart(20)}</div>
            <div className="ovr-dest-info">
              <div className="ovr-dest-name">Veldedighet</div>
              <div className="ovr-dest-desc">Ocean Cleanup · Røde Kors</div>
            </div>
            <div className="ovr-dest-tag ch">1 : 1</div>
          </div>
        </div>
      </div>

      <div className="ob-foot">
        <button className="btn-primary" onClick={onNext}>Regn ut min bonus</button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 3. KALKULATOR — Personalized
// ════════════════════════════════════════════
function OnboardingKalkulator({ onNext, onBack }) {
  const [lan, setLan] = useStateOB(2350000);
  const [innskudd, setInnskudd] = useStateOB(485000);

  const utbytte = (lan / 50000) * 140;     // bein 1 — passiv
  const renteBonus = innskudd * 0.04;       // bein 2 — bonuskonto
  const total = utbytte + renteBonus;

  return (
    <div className="ob">
      <div className="ob-progress">
        <div className="ob-pdot done" />
        <div className="ob-pdot done" />
        <div className="ob-pdot active" />
        <div className="ob-pdot" />
      </div>

      <div className="ob-stage">
        <div className="ob-eyebrow">03 — Din bonus</div>
        <h1 className="ob-h1">Så mye<br/>kan du tjene.</h1>
        <p className="ob-lede" style={{ marginBottom: 18 }}>
          Lån gir bonus automatisk. Aktiver bonuskonto for å gjøre sparerenten din til bonus også.
        </p>

        <div className="calc-result">
          <div className="calc-result-label">Din potensielle bonus</div>
          <div className="calc-result-num">{fmtKr(total)}</div>
          <div className="calc-result-unit">kr i året</div>
          <div className="calc-result-break">
            <div className="calc-break-row">
              <span>Kundeutbytte fra lån</span>
              <strong>{fmtKr(utbytte)} kr</strong>
            </div>
            <div className="calc-break-row">
              <span style={{ color: 'var(--color-bulder)' }}>Renteomdirigering (opt-in)</span>
              <strong>{fmtKr(renteBonus)} kr</strong>
            </div>
          </div>
        </div>

        <div className="slider-block">
          <div className="slider-header">
            <span className="slider-lbl">Boliglån <span style={{ color: 'var(--fg-tertiary)', fontWeight: 400 }}>· 140 kr per 50 000 kr</span></span>
            <span className="slider-val">{fmtKr(lan)} <span>kr</span></span>
          </div>
          <input
            type="range" className="slider"
            min="0" max="5000000" step="50000"
            value={lan}
            onChange={e => setLan(parseInt(e.target.value))}
          />
        </div>

        <div className="slider-block">
          <div className="slider-header">
            <span className="slider-lbl">Innskudd <span style={{ color: 'var(--fg-tertiary)', fontWeight: 400 }}>· 4 % som bonus</span></span>
            <span className="slider-val">{fmtKr(innskudd)} <span>kr</span></span>
          </div>
          <input
            type="range" className="slider"
            min="0" max="2000000" step="10000"
            value={innskudd}
            onChange={e => setInnskudd(parseInt(e.target.value))}
          />
        </div>

      </div>

      <div className="ob-foot">
        <button className="btn-primary" onClick={onNext}>Aktiver bonuskonto</button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 4. KLAR — Success
// ════════════════════════════════════════════
function OnboardingKlar({ onNext, optedIn }) {
  // Calculate the projected balance (bonuskonto aktivert som default)
  const utbytte = (2350000 / 50000) * 140;     // 6 580
  const rente = optedIn ? 485000 * 0.04 : 0;    // 19 400 (alltid aktivt nå)
  const projected = utbytte + rente;

  return (
    <div className="ob">
      <div className="ob-pattern" />
      <div className="ob-progress">
        <div className="ob-pdot done" />
        <div className="ob-pdot done" />
        <div className="ob-pdot done" />
        <div className="ob-pdot done" />
      </div>

      <div className="klar-wrap">
        <div className="klar-mark">{Icon.bulderMark(80)}</div>
        <div className="klar-h">Du er med.</div>
        <div className="klar-sub">
          Bonus tjenes allerede. Saldoen oppdateres månedlig og utbetales i januar.
        </div>
        <div className="klar-balance">
          <div className="klar-balance-lbl">Forventet bonus i år</div>
          <div className="klar-balance-num">~{fmtKr(projected)} <span>kr</span></div>
          {optedIn && (
            <div style={{ font: '400 12px var(--font-sans)', color: 'var(--fg-tertiary)', marginTop: 6 }}>
              Inkl. {fmtKr(rente)} kr fra bonuskonto
            </div>
          )}
        </div>
      </div>

      <div className="ob-foot">
        <button className="btn-primary" onClick={onNext}>Til appen</button>
      </div>
    </div>
  );
}

Object.assign(window, {
  OnboardingIntro, OnboardingOversikt, OnboardingKalkulator, OnboardingKlar,
});