/* product.jsx — Screens 6-14: in-app experience */
/* global React, Icon, fmtKr, fmtPoeng, BottomNav */

const { useState: useStateP } = React;

// Shared totals — recalculated with correct rates
// Bein 1: 140 kr per 50 000 kr i BOLIGLÅN (passiv, hele 2026)
// Bein 2: 4 % av sparing (opt-in, fra mars 2026 = 9 mnd)
// Bein 3: Atferd + verving
const BONUS_TOTAL = 21785;
const BONUS_EXPECTED = 26800; // forventet ved årsslutt
const KUNDEUTBYTTE = 6580;   // 2 350 000 / 50 000 × 140
const RENTE = 14550;          // 485 000 × 4% × 9/12
const ATFERD = 655;

// ════════════════════════════════════════════
// 6. HJEM — Bulder app with Bonus integrated
// ════════════════════════════════════════════
function Hjem({ optedIn, goto, goToTab }) {
  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="app-header">
          <div className="app-header-left">
            <div className="app-avatar">N</div>
            <div className="app-title">Hjem</div>
          </div>
          <div className="app-header-right">
            <button className="icon-btn">{Icon.bell()}</button>
            <button className="icon-btn">{Icon.search()}</button>
          </div>
        </div>

        <div className="tabs">
          <button className="tab-pill active">Oversikt</button>
          <button className="tab-pill">Kort</button>
        </div>

        {/* BONUS BANNER — prominent, taps into bonus dashboard */}
        <button className="bonus-banner" onClick={() => goto('bonus-hjem')}>
          <div className="bonus-banner-pattern" />
          <div className="bonus-banner-content">
            <div className="bonus-banner-top">
              <div className="bonus-banner-eyebrow">Bulder Bonus · 2026</div>
              <div className="bonus-banner-chevron">{Icon.chevronRight(18)}</div>
            </div>
            <div className="bonus-banner-num">{fmtKr(BONUS_TOTAL)} <span>kr</span></div>
            <div className="bonus-banner-meta">av forventet {fmtKr(BONUS_EXPECTED)} kr i år</div>
            <div className="bonus-banner-progress">
              <div className="bonus-banner-fill" style={{ width: `${(BONUS_TOTAL / BONUS_EXPECTED) * 100}%` }} />
            </div>
            <div className="bonus-banner-foot">
              <strong>+{fmtKr(2215)} kr denne måneden</strong>
            </div>
          </div>
        </button>

        <div className="section-label">Mine penger (4)</div>
        <div className="group">
          <div className="row">
            <div className="row-mark">{Icon.bulderMark(16)}</div>
            <div className="row-body">
              <div className="row-name">Brukskonto</div>
              <div className="row-sub">···· 2847</div>
            </div>
            <div className="row-val">42 318</div>
          </div>
          <div className="row">
            <div className="row-mark" style={{ background: 'rgba(133,255,134,0.12)', color: 'var(--color-positive)' }}>
              {Icon.coin(16)}
            </div>
            <div className="row-body">
              <div className="row-name">Sparekonto</div>
              <div className="row-sub">{optedIn ? '0 % · omdirigert til bonus' : '4,00 % · vanlig sparing'}</div>
            </div>
            <div className="row-val">485 000</div>
          </div>
          <div className="row">
            <div className="row-mark" style={{ background: 'rgba(9,38,214,0.18)', color: '#8AA7FF' }}>
              {Icon.building(true, 16)}
            </div>
            <div className="row-body">
              <div className="row-name">Boliglån</div>
              <div className="row-sub">3,89 % · Søråshøgda 308</div>
            </div>
            <div className="row-val muted">−2 350 000</div>
          </div>
          <div className="row">
            <div className="row-mark" style={{ background: 'rgba(147,97,248,0.16)', color: 'var(--purple-400)' }}>
              {Icon.card(true, 16)}
            </div>
            <div className="row-body">
              <div className="row-name">Bulder kredittkort</div>
              <div className="row-sub">Brukt 1 240 av 25 000 kr</div>
            </div>
            <div className="row-val muted">−1 240</div>
          </div>
        </div>

        {optedIn && (
          <div className="info-banner">
            <div className="info-banner-i">i</div>
            <div>
              <div className="info-banner-title">Bonuskontoen er aktivert</div>
              <div className="info-banner-body">
                Renten på sparekontoen din omdirigeres til Bulder Bonus. Du kan endre dette i innstillinger.
              </div>
            </div>
          </div>
        )}

        <div style={{ height: 20 }} />
      </div>

      <BottomNav active="hjem" onChange={goToTab} />
    </div>
  );
}

// ════════════════════════════════════════════
// 7. BONUS DASHBOARD
// ════════════════════════════════════════════
function BonusHjem({ goto, goToTab }) {
  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="app-header">
          <div className="app-header-left">
            <div className="app-avatar">N</div>
            <div className="app-title">Bulder Bonus</div>
          </div>
          <div className="app-header-right">
            <button className="icon-btn">{Icon.bell()}</button>
          </div>
        </div>

        <div className="bonus-hero">
          <div className="bonus-hero-eyebrow">Bonus opptjent 2026</div>
          <div className="bonus-hero-num">{fmtKr(BONUS_TOTAL)} <span>kr</span></div>
          <div className="bonus-hero-delta">+ {fmtKr(2215)} kr denne måneden</div>
        </div>

        <div className="section-row">
          <span className="section-label" style={{ padding: 0 }}>Slik har du tjent</span>
          <button className="section-row-link" onClick={() => goto('opptjening')}>Se formel →</button>
        </div>

        <div className="kilde-list">
          <button className="kilde-row" onClick={() => goto('opptjening')}>
            <div className="kilde-dot passiv" />
            <div className="kilde-info">
              <div className="kilde-name">Kundeutbytte</div>
              <div className="kilde-sub">Lån + innskudd · automatisk</div>
            </div>
            <div className="kilde-val">{fmtKr(KUNDEUTBYTTE)} <span>kr</span></div>
          </button>
          <button className="kilde-row" onClick={() => goto('opptjening')}>
            <div className="kilde-dot optin" />
            <div className="kilde-info">
              <div className="kilde-name">Renteomdirigering</div>
              <div className="kilde-sub">Bonuskonto · aktivert mars</div>
            </div>
            <div className="kilde-val">{fmtKr(RENTE)} <span>kr</span></div>
          </button>
          <button className="kilde-row" onClick={() => goto('opptjening')}>
            <div className="kilde-dot aktiv" />
            <div className="kilde-info">
              <div className="kilde-name">Vervebonus + atferd</div>
              <div className="kilde-sub">1 venn vervet · 1. kortbruk · avtalegiro</div>
            </div>
            <div className="kilde-val">{fmtKr(ATFERD)} <span>kr</span></div>
          </button>
        </div>

        <div className="section-row">
          <span className="section-label" style={{ padding: 0 }}>Bruk bonus</span>
          <span style={{ font: '400 12px var(--font-sans)', color: 'var(--fg-tertiary)', fontVariantNumeric: 'tabular-nums' }}>
            {fmtKr(BONUS_TOTAL)} kr tilgjengelig
          </span>
        </div>

        <div className="bruk-grid">
          <button className="bruk-card" onClick={() => goto('eurobonus')}>
            <div className="bruk-ico eb">{Icon.plane(20)}</div>
            <div className="bruk-name">EuroBonus</div>
            <div className="bruk-desc">Konverter til SAS-poeng</div>
            <div className="bruk-rate">1 kr = 10 poeng</div>
          </button>
          <button className="bruk-card" onClick={() => goto('kontant')}>
            <div className="bruk-ico kr">{Icon.coin(20)}</div>
            <div className="bruk-name">Kontant</div>
            <div className="bruk-desc">Overfør til brukskonto</div>
            <div className="bruk-rate">1 kr = 1 kr</div>
          </button>
          <button className="bruk-card" onClick={() => goto('compare')}>
            <div className="bruk-ico ch">{Icon.heart(20)}</div>
            <div className="bruk-name">Veldedighet</div>
            <div className="bruk-desc">Ocean Cleanup · Røde Kors</div>
            <div className="bruk-rate">1 kr = 1 kr</div>
          </button>
          <button className="bruk-card" onClick={() => goto('compare')}>
            <div className="bruk-ico pt">{Icon.partner(20)}</div>
            <div className="bruk-name">Partnere</div>
            <div className="bruk-desc">Tibber · Spotify · Netflix</div>
            <div className="bruk-rate">10 % bedre pris</div>
          </button>
        </div>

        <div style={{ height: 16 }} />
      </div>

      <BottomNav active="bulder" onChange={goToTab} />
    </div>
  );
}

// ════════════════════════════════════════════
// 8. OPPTJENING DETALJ — formula transparency
// ════════════════════════════════════════════
function OpptjeningDetalj({ goto }) {
  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="inner-header">
          <button className="back-btn" onClick={() => goto('bonus-hjem')}>{Icon.arrowLeft()}</button>
          <div className="inner-title">Opptjening</div>
        </div>

        {/* Kundeutbytte formel */}
        <div className="formula-card">
          <div className="formula-head">
            <div className="formula-name">
              <span style={{ color: 'var(--color-positive)' }}>●</span> Kundeutbytte
            </div>
            <div className="formula-total">{fmtKr(KUNDEUTBYTTE)} <span>kr</span></div>
          </div>
          <div className="formula-equation">
            <strong>2 350 000 kr</strong>
            <span className="op">÷</span>
            <strong>50 000</strong>
            <span className="op">×</span>
            <strong>140 kr</strong>
            <span className="op">=</span>
            <strong>{fmtKr(KUNDEUTBYTTE)} kr</strong>
          </div>
          <div className="formula-rows">
            <div className="formula-row"><span>Boliglån</span><span>2 350 000 kr</span></div>
            <div className="formula-row"><span>Sats</span><span>140 kr per 50 000 kr</span></div>
          </div>
        </div>

        {/* Renteomdirigering */}
        <div className="formula-card">
          <div className="formula-head">
            <div className="formula-name">
              <span style={{ color: 'var(--color-bulder)' }}>●</span> Renteomdirigering
            </div>
            <div className="formula-total">{fmtKr(RENTE)} <span>kr</span></div>
          </div>
          <div className="formula-equation">
            <strong>485 000 kr</strong>
            <span className="op">×</span>
            <strong>4,00 %</strong>
            <span className="op">×</span>
            <strong>9/12</strong>
            <span className="op">=</span>
            <strong>{fmtKr(RENTE)} kr</strong>
          </div>
          <div className="formula-rows">
            <div className="formula-row"><span>Bonuskonto saldo</span><span>485 000 kr</span></div>
            <div className="formula-row"><span>Årsrate (bonus)</span><span>4,00 %</span></div>
            <div className="formula-row"><span>Aktivert siden</span><span>1. mars 2026</span></div>
          </div>
        </div>

        {/* Vervebonus + atferd */}
        <div className="formula-card">
          <div className="formula-head">
            <div className="formula-name">
              <span style={{ color: 'var(--color-warning)' }}>●</span> Vervebonus + atferd
            </div>
            <div className="formula-total">{fmtKr(ATFERD)} <span>kr</span></div>
          </div>
          <div className="formula-rows">
            <div className="formula-row"><span>1 venn vervet (Lise)</span><span>500 kr</span></div>
            <div className="formula-row"><span>1. gang Bulder-kortet brukes</span><span>50 kr</span></div>
            <div className="formula-row"><span>Avtalegiro satt opp</span><span>50 kr</span></div>
            <div className="formula-row"><span>Kontoutskrift digital</span><span>55 kr</span></div>
          </div>
        </div>

        <div className="total-card">
          <div>
            <div className="total-card-lbl">Totalt opptjent 2026</div>
            <div style={{ font: '400 12px var(--font-sans)', opacity: 0.85, marginTop: 4 }}>Per 19. november</div>
          </div>
          <div className="total-card-num">{fmtKr(BONUS_TOTAL)} <span>kr</span></div>
        </div>

        <div style={{ height: 20 }} />
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 9. BRUK MENY — Innløsningsalternativer (dedicated screen)
// ════════════════════════════════════════════
function BrukMeny({ goto }) {
  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="inner-header">
          <button className="back-btn" onClick={() => goto('bonus-hjem')}>{Icon.arrowLeft()}</button>
          <div className="inner-title">Bruk bonus</div>
        </div>

        <div className="balance-display">
          <div className="balance-display-lbl">Tilgjengelig saldo</div>
          <div className="balance-display-num">{fmtKr(BONUS_TOTAL)} <span>kr</span></div>
        </div>

        <div className="option-list">
          <button className="option-card" onClick={() => goto('eurobonus')}>
            <div className="option-card-ico eb">{Icon.plane(22)}</div>
            <div className="option-card-body">
              <div className="option-card-name">EuroBonus-poeng</div>
              <div className="option-card-sub">Konverter til SAS — 1 kr = 10 poeng</div>
            </div>
            <div className="option-card-arrow">{Icon.chevronRight(20)}</div>
          </button>
          <button className="option-card" onClick={() => goto('kontant')}>
            <div className="option-card-ico kr">{Icon.coin(22)}</div>
            <div className="option-card-body">
              <div className="option-card-name">Kontantutbetaling</div>
              <div className="option-card-sub">Til brukskonto ····2847 — umiddelbart</div>
            </div>
            <div className="option-card-arrow">{Icon.chevronRight(20)}</div>
          </button>
          <button className="option-card" onClick={() => goto('compare')}>
            <div className="option-card-ico ch">{Icon.heart(22)}</div>
            <div className="option-card-body">
              <div className="option-card-name">Veldedighet</div>
              <div className="option-card-sub">Ocean Cleanup · Røde Kors · Redningsselskapet</div>
            </div>
            <div className="option-card-arrow">{Icon.chevronRight(20)}</div>
          </button>
          <button className="option-card" onClick={() => goto('compare')}>
            <div className="option-card-ico pt">{Icon.partner(22)}</div>
            <div className="option-card-body">
              <div className="option-card-name">Partneravtaler</div>
              <div className="option-card-sub">Tibber strøm · Spotify · Netflix</div>
            </div>
            <div className="option-card-arrow">{Icon.chevronRight(20)}</div>
          </button>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 10. EuroBonus konvertering
// ════════════════════════════════════════════
function EuroBonusFlow({ goto, setEuroAmt }) {
  const [amt, setAmt] = useStateP(10000);

  const handleConvert = () => {
    setEuroAmt(amt);
    goto('eurobonus-success');
  };

  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="inner-header">
          <button className="back-btn" onClick={() => goto('bruk-meny')}>{Icon.arrowLeft()}</button>
          <div className="inner-title">EuroBonus</div>
        </div>

        <div className="flow-balance-strip">
          <span className="flow-balance-lbl">Tilgjengelig saldo</span>
          <span className="flow-balance-val">{fmtKr(BONUS_TOTAL)} kr</span>
        </div>

        <div style={{ padding: '0 20px 12px', font: '700 12px var(--font-sans)', color: 'var(--fg-tertiary)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          Velg beløp
        </div>

        <div className="amt-grid">
          {[2000, 5000, 10000].map(v => (
            <button
              key={v}
              className={`amt-btn${amt === v ? ' selected' : ''}`}
              onClick={() => setAmt(v)}
            >
              <div className="amt-btn-main">{fmtKr(v)} kr</div>
              <div className="amt-btn-sub">{fmtPoeng(v * 10)} poeng</div>
            </button>
          ))}
          <button
            className={`amt-btn${amt === BONUS_TOTAL ? ' selected' : ''}`}
            onClick={() => setAmt(BONUS_TOTAL)}
          >
            <div className="amt-btn-main">Alt — {fmtKr(BONUS_TOTAL)} kr</div>
            <div className="amt-btn-sub">{fmtPoeng(BONUS_TOTAL * 10)} poeng</div>
          </button>
          <button
            className={`amt-btn full${![2000, 5000, 10000, BONUS_TOTAL].includes(amt) ? ' selected' : ''}`}
          >
            <div className="amt-btn-main" style={{ textAlign: 'center' }}>Egendefinert beløp</div>
          </button>
        </div>

        <div className="conv-box">
          <div className="conv-lbl">Du mottar</div>
          <div className="conv-val">{fmtPoeng(amt * 10)} poeng</div>
          <div className="conv-note">Kurs 1 kr = 10 poeng · Levert via SAS EuroBonus innen 48 timer</div>
        </div>

        <div style={{ margin: '0 16px 20px', padding: '12px 14px', background: 'rgba(255,255,255,0.03)', borderRadius: 'var(--radius-small)', font: '400 12px/1.5 var(--font-sans)', color: 'var(--fg-tertiary)' }}>
          SAS-profilen din kobles til Bulder-konto automatisk. Du trenger ikke logge inn på sas.no.
        </div>
      </div>

      <div className="flow-foot">
        <button className="btn-primary" onClick={handleConvert}>
          Konverter {fmtKr(amt)} kr
        </button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 11. EuroBonus suksess
// ════════════════════════════════════════════
function EuroBonusSuccess({ goto, euroAmt }) {
  const points = euroAmt * 10;
  const newBalance = BONUS_TOTAL - euroAmt;

  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="success-wrap">
          <div className="success-mark" style={{ color: 'var(--color-positive)' }}>
            {Icon.checkCircle(72)}
          </div>
          <div className="success-h">Konvertert</div>
          <div className="success-sub">
            {fmtPoeng(points)} EuroBonus-poeng er på vei til SAS-profilen din. Du ser dem innen 48 timer.
          </div>

          <div className="success-receipt">
            <div className="receipt-row">
              <span>Konvertert</span>
              <strong>{fmtKr(euroAmt)} kr</strong>
            </div>
            <div className="receipt-row highlight">
              <span>Du mottar</span>
              <strong>{fmtPoeng(points)} poeng</strong>
            </div>
            <div className="receipt-row">
              <span>Kurs</span>
              <strong>1 kr = 10 poeng</strong>
            </div>
            <div className="receipt-row">
              <span>Levert til</span>
              <strong>SAS EuroBonus EB-3847219</strong>
            </div>
            <div className="receipt-row">
              <span>Ny bonus-saldo</span>
              <strong>{fmtKr(newBalance)} kr</strong>
            </div>
          </div>
        </div>
      </div>

      <div className="flow-foot">
        <button className="btn-primary" onClick={() => goto('bonus-hjem')}>Tilbake</button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 12. Kontant flow — Single-step transfer to brukskonto
// ════════════════════════════════════════════
function KontantFlow({ goto }) {
  const [amt, setAmt] = useStateP(10000);
  const [done, setDone] = useStateP(false);

  if (done) {
    const newBalance = BONUS_TOTAL - amt;
    return (
      <div className="screen" style={{ background: 'var(--bg-background)' }}>
        <div className="screen-scroll">
          <div className="success-wrap">
            <div className="success-mark" style={{ color: 'var(--color-positive)' }}>
              {Icon.checkCircle(72)}
            </div>
            <div className="success-h">Overført</div>
            <div className="success-sub">
              {fmtKr(amt)} kr er overført til brukskontoen din. Tilgjengelig umiddelbart.
            </div>
            <div className="success-receipt">
              <div className="receipt-row highlight">
                <span>Overført</span>
                <strong>{fmtKr(amt)} kr</strong>
              </div>
              <div className="receipt-row">
                <span>Til konto</span>
                <strong>Brukskonto ····2847</strong>
              </div>
              <div className="receipt-row">
                <span>Ny bonus-saldo</span>
                <strong>{fmtKr(newBalance)} kr</strong>
              </div>
            </div>
          </div>
        </div>
        <div className="flow-foot">
          <button className="btn-primary" onClick={() => goto('bonus-hjem')}>Tilbake</button>
        </div>
      </div>
    );
  }

  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="inner-header">
          <button className="back-btn" onClick={() => goto('bruk-meny')}>{Icon.arrowLeft()}</button>
          <div className="inner-title">Kontant</div>
        </div>

        <div className="flow-balance-strip">
          <span className="flow-balance-lbl">Tilgjengelig saldo</span>
          <span className="flow-balance-val">{fmtKr(BONUS_TOTAL)} kr</span>
        </div>

        <div style={{ margin: '0 16px 16px', padding: '12px 14px', background: 'var(--bg-surface)', borderRadius: 'var(--radius-standard)', display: 'flex', alignItems: 'center', gap: 12, border: '1px solid rgba(255,255,255,0.04)' }}>
          <div className="row-mark" style={{ width: 32, height: 32, color: 'var(--color-bulder)' }}>
            {Icon.bulderMark(16)}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ font: '700 12px var(--font-sans)', color: 'var(--fg-tertiary)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 2 }}>
              Til konto
            </div>
            <div style={{ font: '500 14px var(--font-sans)', color: 'var(--fg-primary)' }}>
              Brukskonto ····2847
            </div>
          </div>
        </div>

        <div style={{ padding: '0 20px 12px', font: '700 12px var(--font-sans)', color: 'var(--fg-tertiary)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          Velg beløp
        </div>

        <div className="amt-grid">
          {[2000, 5000, 10000].map(v => (
            <button key={v} className={`amt-btn${amt === v ? ' selected' : ''}`} onClick={() => setAmt(v)}>
              <div className="amt-btn-main">{fmtKr(v)} kr</div>
            </button>
          ))}
          <button className={`amt-btn${amt === BONUS_TOTAL ? ' selected' : ''}`} onClick={() => setAmt(BONUS_TOTAL)}>
            <div className="amt-btn-main">Alt — {fmtKr(BONUS_TOTAL)} kr</div>
          </button>
        </div>

        <div style={{ margin: '0 16px 20px', padding: '14px 16px', background: 'rgba(9,38,214,0.1)', border: '1px solid rgba(9,38,214,0.3)', borderRadius: 'var(--radius-standard)', font: '400 13px/1.5 var(--font-sans)', color: 'var(--fg-secondary)' }}>
          <strong style={{ color: 'var(--fg-primary)', fontWeight: 500 }}>Tips:</strong> Konverter heller til EuroBonus — du får 10× verdien som SAS-poeng. {fmtKr(amt)} kr = {fmtPoeng(amt * 10)} poeng.
        </div>
      </div>

      <div className="flow-foot">
        <button className="btn-primary" onClick={() => setDone(true)}>
          Overfør {fmtKr(amt)} kr
        </button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 13. Månedlig push-summary — Notification + month view
// ════════════════════════════════════════════
function MaanedligPush({ goto }) {
  const monthDelta = 2215;
  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="push-notif">
          <div className="push-mark">{Icon.bulderMark(16)}</div>
          <div className="push-body">
            <div className="push-meta">
              <span className="push-app">BULDER</span>
              <span className="push-time">nå</span>
            </div>
            <div className="push-title">+{fmtKr(monthDelta)} kr i bonus i november</div>
            <div className="push-text">Saldoen din er nå {fmtKr(BONUS_TOTAL)} kr. Trykk for å se detaljer.</div>
          </div>
        </div>

        <div className="month-card">
          <div className="month-card-eyebrow">November 2026</div>
          <div className="month-card-h">Du tjente</div>
          <div className="month-card-num">+{fmtKr(monthDelta)} <span>kr</span></div>
          <div className="month-card-sub">↑ {fmtKr(monthDelta * 12)} kr i året om du fortsetter slik</div>

          <div className="month-card-bars">
            <div className="bar-row">
              <span className="bar-lbl">Renteomdir.</span>
              <div className="bar-track"><div className="bar-fill optin" style={{ width: '73%' }} /></div>
              <span className="bar-val">1 617 kr</span>
            </div>
            <div className="bar-row">
              <span className="bar-lbl">Kundeutbytte</span>
              <div className="bar-track"><div className="bar-fill passiv" style={{ width: '25%' }} /></div>
              <span className="bar-val">548 kr</span>
            </div>
            <div className="bar-row">
              <span className="bar-lbl">1. kortbruk</span>
              <div className="bar-track"><div className="bar-fill aktiv" style={{ width: '2%' }} /></div>
              <span className="bar-val">50 kr</span>
            </div>
          </div>
        </div>

        <div style={{ padding: '0 20px 8px', font: '700 12px var(--font-sans)', color: 'var(--fg-tertiary)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          Sammenlignet med oktober
        </div>

        <div className="group" style={{ marginBottom: 16 }}>
          <div className="row">
            <div className="row-body">
              <div className="row-name">Oktober</div>
              <div className="row-sub">Kundeutbytte + renteomdirigering</div>
            </div>
            <div className="row-val">+ 2 165 kr</div>
          </div>
          <div className="row">
            <div className="row-body">
              <div className="row-name" style={{ color: 'var(--color-positive)' }}>November</div>
              <div className="row-sub">+ 1. gang Bulder-kortet brukt</div>
            </div>
            <div className="row-val positive">+ 2 215 kr</div>
          </div>
        </div>

        <div style={{ padding: '0 16px 16px' }}>
          <button className="btn-secondary" onClick={() => goto('bonus-hjem')}>Til bonus-saldo →</button>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════
// 14. SAMMENLIGN — Kontant vs EuroBonus
// ════════════════════════════════════════════
function Sammenlign({ goto }) {
  const [amt, setAmt] = useStateP(10000);
  const poeng = amt * 10;

  // Travel examples by points threshold
  let example;
  if (poeng < 50000) example = { ico: '🚆', txt: <>«Nok til ~<strong>{Math.floor(poeng/10000)} togtur</strong> Oslo–Bergen»</> };
  else if (poeng < 100000) example = { ico: '✈️', txt: <>«Nok til en <strong>tur/retur København</strong> i high season»</> };
  else if (poeng < 250000) example = { ico: '✈️', txt: <>«Nok til en <strong>tur/retur Roma</strong> for to»</> };
  else if (poeng < 450000) example = { ico: '✈️', txt: <>«Nok til en <strong>tur/retur Bangkok</strong> i Economy»</> };
  else example = { ico: '🌍', txt: <>«Nok til en <strong>tur/retur Tokyo i Business</strong>»</> };

  return (
    <div className="screen" style={{ background: 'var(--bg-background)' }}>
      <div className="screen-scroll">
        <div className="inner-header">
          <button className="back-btn" onClick={() => goto('bruk-meny')}>{Icon.arrowLeft()}</button>
          <div className="inner-title">Hva får du?</div>
        </div>

        <div className="compare-amt-display">
          <div className="compare-amt-lbl">Du bruker</div>
          <div className="compare-amt-num">{fmtKr(amt)} <span>kr bonus</span></div>
        </div>

        <div className="compare-amt-slider">
          <input
            type="range" className="slider"
            min="1000" max={BONUS_TOTAL} step="500"
            value={amt}
            onChange={e => setAmt(parseInt(e.target.value))}
          />
          <div style={{ display: 'flex', justifyContent: 'space-between', font: '400 11px var(--font-sans)', color: 'var(--fg-tertiary)', marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>
            <span>1 000 kr</span>
            <span>{fmtKr(BONUS_TOTAL)} kr</span>
          </div>
        </div>

        <div className="compare-pair">
          <div className="compare-card">
            <div className="compare-card-eyebrow">Kontant</div>
            <div className="compare-card-num">{fmtKr(amt)} <span>kr</span></div>
            <div className="compare-card-meta">
              Rett til brukskonto. Du kan bruke det på hva som helst.
            </div>
            <div className="compare-card-example">
              <span className="compare-card-example-ico">💳</span>
              <span className="compare-card-example-text">
                «Helt vanlig kroner. <strong>Dekker ca. 1 ukes mat</strong> til en familie på fire.»
              </span>
            </div>
          </div>

          <div className="compare-card featured">
            <div className="compare-card-eyebrow">
              EuroBonus
              <span className="compare-card-badge">Anbefalt</span>
            </div>
            <div className="compare-card-num">{fmtPoeng(poeng)} <span>poeng</span></div>
            <div className="compare-card-meta">
              Veksles 1 kr = 10 poeng. Brukes på SAS-flyreiser, hotell, leiebil og opplevelser.
            </div>
            <div className="compare-card-example">
              <span className="compare-card-example-ico">{example.ico}</span>
              <span className="compare-card-example-text">{example.txt}</span>
            </div>
          </div>
        </div>

        <div className="compare-note">
          Du kan splitte beløpet mellom flere alternativer. <strong>Ingenting er låst</strong> — du kan endre når som helst.
        </div>
      </div>

      <div className="flow-foot" style={{ display: 'flex', gap: 8 }}>
        <button className="btn-secondary" style={{ flex: 1 }} onClick={() => goto('kontant')}>Kontant</button>
        <button className="btn-primary" style={{ flex: 1 }} onClick={() => goto('eurobonus')}>EuroBonus</button>
      </div>
    </div>
  );
}

Object.assign(window, {
  Hjem, BonusHjem, OpptjeningDetalj, BrukMeny,
  EuroBonusFlow, EuroBonusSuccess, KontantFlow,
  MaanedligPush, Sammenlign,
  BONUS_TOTAL, BONUS_EXPECTED, KUNDEUTBYTTE, RENTE, ATFERD,
});