// screen-onboarding.jsx — 6-step onboarding (default) with 5-step variation.
// Each step is a distinct layout so progress feels tangible.

const ONB_FONT_BASE = { letterSpacing: -0.4 };

// 1. Welcome — branded card with mark + headline + single CTA
function OnbWelcome({ c, onNext }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '32px 28px 28px' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28 }}>
        <SHMark size={64} color={c.primary} />
        <div>
          <div style={{ fontSize: 36, fontWeight: 700, color: c.text, letterSpacing: -0.8, lineHeight: 1.05 }}>
            Lower bills.<br />Less waste.<br />
            <span style={{ color: c.primary }}>That simple.</span>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[
          { Icon: IcAC, label: 'Aircon' },
          { Icon: IcWater, label: 'Heater' },
          { Icon: IcFridge, label: 'Fridge' }].
          map((it, i) =>
          <div key={i} style={{ background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 14, padding: '14px 10px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: c.primarySoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <it.Icon size={18} color={c.primary} />
              </div>
              <div style={{ fontSize: 12, fontWeight: 600, color: c.textMuted }}>{it.label}</div>
            </div>
          )}
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '12px 14px', background: c.primarySoft, borderRadius: 12, color: c.primaryDk, fontSize: 13.5, fontWeight: 500 }}>
          <IcShield size={18} color={c.primary} />
          <span>Funded by HDB & EMA · Free</span>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn kind="primary" size="lg" full c={c} onClick={onNext} iconR={<IcArrowR size={18} color="#fff" />}>Get started</Btn>
        <button style={{ height: 44, border: 'none', background: 'transparent', color: c.textMuted, fontFamily: 'inherit', fontWeight: 500, fontSize: 14, cursor: 'pointer' }}>I already have an account</button>
      </div>
    </div>);

}

// 2. Household setup — split inputs with "why" helper
function OnbHousehold({ c, onNext, onBack, block, setBlock, unit, setUnit }) {
  const valid = block.length >= 2 && unit.length >= 4;
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '28px 24px' }}>
      <div style={{ flex: 1, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: c.textLight, fontSize: 12, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase' }}>
            <IcPin size={14} color={c.textLight} /> Where you live
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, color: c.text, letterSpacing: -0.5, marginTop: 8 }}>Block & unit?</div>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <Field label="Block" value={block} onChange={(e) => setBlock(e.target.value)} placeholder="e.g. 472" c={c} style={{ flex: 1 }} />
          <Field label="Unit" value={unit} onChange={(e) => setUnit(e.target.value)} placeholder="08-21" c={c} style={{ flex: 1.2 }} />
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '10px 12px', borderRadius: 10, background: c.surfaceAlt, color: c.textMuted, fontSize: 12.5 }}>
          <IcLock size={14} color={c.textMuted} /> Private — only block shown publicly
        </div>
      </div>
      <OnbFooter c={c} onBack={onBack} onNext={onNext} disabled={!valid} />
    </div>);

}

// 3. Last month usage — number input with "I don't know" path
function OnbUsage({ c, onNext, onBack, kwh, setKwh, useAvg, setUseAvg }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '28px 24px' }}>
      <div style={{ flex: 1, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: c.textLight, fontSize: 12, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase' }}>
            <IcBolt size={14} color={c.textLight} /> Last month
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, color: c.text, letterSpacing: -0.5, marginTop: 8 }}>How much did you use?</div>
        </div>
        <Field label="From your SP bill" value={useAvg ? '' : kwh} onChange={(e) => {setKwh(e.target.value.replace(/\D/g, ''));setUseAvg(false);}} placeholder="348" suffix="kWh" type="text" c={c} helper={`≈ $${((useAvg ? 348 : Number(kwh || 0)) * 0.30).toFixed(2)} · $0.30 / kWh`} />
        <button onClick={() => setUseAvg(!useAvg)} style={{
          display: 'flex', alignItems: 'center', gap: 12, padding: 14,
          border: `1.5px solid ${useAvg ? c.primary : c.border}`,
          background: useAvg ? c.primarySoft : c.surface,
          borderRadius: 14, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left'
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: 11,
            border: `2px solid ${useAvg ? c.primary : c.border}`,
            background: useAvg ? c.primary : 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
          }}>{useAvg && <IcCheck size={14} color="#fff" />}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 600, color: c.text }}>I don't know</div>
            <div style={{ fontSize: 12.5, color: c.textMuted, marginTop: 2 }}>Use SG average — 348 kWh / month</div>
          </div>
        </button>
      </div>
      <OnbFooter c={c} onBack={onBack} onNext={onNext} disabled={!useAvg && !kwh} />
    </div>);

}

// 4. Savings goal — neutral framing, $ AND kWh shown
function OnbGoal({ c, onNext, onBack, goal, setGoal, baseKwh = 348 }) {
  const goals = [
  { id: 'gentle', label: 'Gentle', sub: 'Easing in', pct: 5, bg: c.primarySoft },
  { id: 'steady', label: 'Steady', sub: 'A clear win', pct: 10, bg: c.sand },
  { id: 'strong', label: 'Strong', sub: 'Real change', pct: 18, bg: c.skySoft },
  { id: 'bold', label: 'Bold', sub: 'Stretch yourself', pct: 28, bg: c.accentSoft }];

  const active = goals.find((g) => g.id === goal) || goals[1];
  const dollars = (baseKwh * 0.30 * active.pct / 100).toFixed(2);
  const kwh = (baseKwh * active.pct / 100).toFixed(0);
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '28px 24px' }}>
      <div style={{ flex: 1, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: c.textLight, fontSize: 12, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase' }}>
            <IcLeaf size={14} color={c.textLight} /> Goal
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, color: c.text, letterSpacing: -0.5, marginTop: 8 }}>Pick a savings pace</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }} data-comment-anchor="7fb4de6762-div-125-9">
          {goals.map((g) => {
            const on = goal === g.id;
            return (
              <button key={g.id} onClick={() => setGoal(g.id)} style={{
                background: on ? c.surface : g.bg,
                border: `2px solid ${on ? c.primary : 'transparent'}`,
                borderRadius: 18, padding: 16, textAlign: 'left',
                fontFamily: 'inherit', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', gap: 6, minHeight: 116
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ fontSize: 16, fontWeight: 700, color: c.text }}>{g.label}</span>
                  <span style={{ fontSize: 18, fontWeight: 700, color: c.primary, fontVariantNumeric: 'tabular-nums' }}>−{g.pct}%</span>
                </div>
                <div style={{ fontSize: 12.5, color: c.textMuted }}>{g.sub}</div>
              </button>);

          })}
        </div>
        <Card kind="highlighted" c={c} style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: c.primaryDk, letterSpacing: 0.4, textTransform: 'uppercase' }}>Projected · {active.label}</div>
            <div style={{ marginTop: 6, display: 'flex', alignItems: 'baseline', gap: 14 }}>
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: c.text, letterSpacing: -0.5, fontVariantNumeric: 'tabular-nums' }}>${dollars}</div>
                <div style={{ fontSize: 11.5, color: c.textMuted, fontWeight: 500 }}>saved / month</div>
              </div>
              <div style={{ width: 1, height: 36, background: c.border }} />
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: c.text, letterSpacing: -0.5, fontVariantNumeric: 'tabular-nums' }}>{kwh}</div>
                <div style={{ fontSize: 11.5, color: c.textMuted, fontWeight: 500 }}>kWh / month</div>
              </div>
            </div>
          </div>
        </Card>
      </div>
      <OnbFooter c={c} onBack={onBack} onNext={onNext} />
    </div>);

}

// 5. Permissions — split, notifications now, location when relevant
function OnbPerms({ c, onNext, onBack, notif, setNotif }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '28px 24px' }}>
      <div style={{ flex: 1, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: c.textLight, fontSize: 12, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase' }}>
            <IcBell size={14} color={c.textLight} /> Stay in the loop
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, color: c.text, letterSpacing: -0.5, marginTop: 8 }}>One small permission</div>
        </div>
        <Card c={c} style={{ padding: 18, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: c.primarySoft, color: c.primaryDk, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <IcBell size={22} color={c.primary} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 600, color: c.text }}>Notifications</div>
            <div style={{ fontSize: 12.5, color: c.textMuted, marginTop: 4 }}>Live tips · quiet after 10pm</div>
            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
              <Btn kind={notif ? 'ghost' : 'primary'} size="sm" c={c} onClick={() => setNotif(true)} icon={notif && <IcCheck size={14} color={c.primaryDk} />}>{notif ? 'Allowed' : 'Allow'}</Btn>
              <Btn kind="tertiary" size="sm" c={c} onClick={() => setNotif(false)}>Maybe later</Btn>
            </div>
          </div>
        </Card>
        <Card kind="tinted" c={c} style={{ padding: 18, display: 'flex', gap: 14, alignItems: 'flex-start', opacity: 0.85 }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: c.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <IcPin size={22} color={c.textLight} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 600, color: c.text }}>Location</div>
            <div style={{ fontSize: 12.5, color: c.textMuted, marginTop: 4 }}>Asked later, only when needed</div>
            <Chip tone="neutral" c={c} style={{ marginTop: 10 }}>Not now</Chip>
          </div>
        </Card>
      </div>
      <OnbFooter c={c} onBack={onBack} onNext={onNext} />
    </div>);

}

// 6. Recap — what happens next
function OnbRecap({ c, onNext, onBack, goal = 'steady' }) {
  const items = [
  { Icon: IcBolt, title: 'Connect smart plugs', sub: '~3 min' },
  { Icon: IcSparkle, title: 'First live tip', sub: 'Tonight' },
  { Icon: IcMission, title: "Today's missions", sub: '3 ready' },
  { Icon: IcCoins, title: 'Earn → redeem', sub: 'Bills, vouchers, donations' }];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '28px 24px' }}>
      <div style={{ flex: 1, marginTop: 8, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: c.textLight, fontSize: 12, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase' }}>
            <IcSparkle size={14} color={c.textLight} /> Almost there
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, color: c.text, letterSpacing: -0.5, marginTop: 8 }}>What's next</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((it, i) =>
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', background: c.surface, border: `1px solid ${c.borderSoft}`, borderRadius: 16 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: c.primarySoft, color: c.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <it.Icon size={18} color={c.primary} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: c.text }}>{it.title}</div>
                <div style={{ fontSize: 12.5, color: c.textLight, marginTop: 1 }}>{it.sub}</div>
              </div>
              <div style={{ width: 24, height: 24, borderRadius: 12, background: c.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IcCheck size={14} color="#fff" />
              </div>
            </div>
          )}
        </div>
      </div>
      <OnbFooter c={c} onBack={onBack} onNext={onNext} nextLabel="Open SaveHor" />
    </div>);

}

function OnbFooter({ c, onBack, onNext, disabled, nextLabel }) {
  return (
    <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
      {onBack &&
      <Btn kind="secondary" size="lg" c={c} onClick={onBack} icon={<IcArrowL size={16} />}>Back</Btn>
      }
      <Btn kind="primary" size="lg" full c={c} onClick={onNext} disabled={disabled} iconR={<IcArrowR size={16} color="#fff" />}>
        {nextLabel || 'Continue'}
      </Btn>
    </div>);

}

Object.assign(window, { OnbWelcome, OnbHousehold, OnbUsage, OnbGoal, OnbPerms, OnbRecap });