// Onboarding — Variation A (Warm Coach)
// 10 screens, walking the user from welcome → commit.

// shared layout — progress bar + body + CTA
function OBShell({ step, total = 10, onBack = true, children, cta, ctaDisabled, theme = 'light', accent }) {
  const dark = theme === 'dark';
  const bg = dark ? '#14110D' : A.bg;
  const ink = dark ? '#fff' : A.ink;
  const ink2 = dark ? 'rgba(255,255,255,0.7)' : A.ink2;
  const ink3 = dark ? 'rgba(255,255,255,0.35)' : A.ink3;
  const rule = dark ? 'rgba(255,255,255,0.12)' : A.rule;
  return (
    <div className="scr" style={{
      '--bg': bg, '--ink': ink, '--ink-2': ink2, '--ink-3': ink3,
      '--font-body': A.body, '--font-display': A.display,
    }}>
      {/* top: back + progress */}
      <div style={{
        padding: '64px 22px 18px',
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        {onBack ? (
          <div style={{
            width: 36, height: 36, borderRadius: 12,
            background: 'transparent', border: `1px solid ${rule}`,
            color: ink2,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Iq width={14} height={14}><path d="M15 6l-6 6 6 6"/></Iq>
          </div>
        ) : <div style={{ width: 36 }} />}
        {/* dot progress */}
        <div style={{ flex: 1, display: 'flex', gap: 4, alignItems: 'center' }}>
          {Array.from({ length: total }).map((_, i) => (
            <div key={i} style={{
              flex: i < step ? '1 1 0' : '0 0 6px',
              height: i < step ? 4 : 6,
              borderRadius: 3,
              background: i < step ? (accent || A.ink) : (i === step ? ink : rule),
              transition: 'all .3s',
            }} />
          ))}
        </div>
        <div style={{
          width: 36, textAlign: 'right',
          fontFamily: A.mono, fontSize: 11, fontWeight: 600, color: ink3,
        }}>{step}/{total}</div>
      </div>

      {/* body */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 22px 0' }}>
        {children}
      </div>

      {/* cta */}
      <div style={{
        padding: '14px 22px 38px',
        background: bg,
      }}>
        {cta && (
          <button style={{
            width: '100%', padding: '17px 0', border: 'none', borderRadius: 16,
            background: ctaDisabled ? (dark ? 'rgba(255,255,255,0.08)' : A.rest) : (dark ? A.hype : ink),
            color: ctaDisabled ? ink3 : (dark ? A.ink : (accent === A.hype ? A.ink : '#fff')),
            fontFamily: A.display, fontWeight: 800, fontSize: 14, letterSpacing: '0.16em',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            boxShadow: ctaDisabled ? 'none' : (dark ? '0 8px 24px rgba(184,242,58,0.25)' : '0 8px 24px rgba(20,17,13,0.18)'),
          }}>
            {cta} <Iq width={16} height={16}><path d="M5 12h14M12 5l7 7-7 7"/></Iq>
          </button>
        )}
      </div>
    </div>
  );
}

function OBTitle({ eyebrow, title, sub }) {
  return (
    <div style={{ marginBottom: 28 }}>
      {eyebrow && <div className="eyebrow" style={{ color: A.ink3, marginBottom: 10 }}>{eyebrow}</div>}
      <div style={{
        fontFamily: A.display, fontWeight: 800, fontSize: 36,
        letterSpacing: '-0.02em', lineHeight: 1.05, color: 'inherit',
        textTransform: 'uppercase',
      }}>{title}</div>
      {sub && (
        <div style={{ fontSize: 15, color: A.ink2, marginTop: 12, lineHeight: 1.45, maxWidth: 320 }}>
          {sub}
        </div>
      )}
    </div>
  );
}

// 1) Welcome
function OB1_Welcome() {
  return (
    <div className="scr" style={{
      '--bg': '#14110D', background: '#14110D', color: '#fff',
      '--font-body': A.body, '--font-display': A.display,
    }}>
      <div style={{
        padding: '110px 26px 0', position: 'relative', flex: 1,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* abstract motif */}
        <div style={{
          position: 'absolute', top: 88, right: 26,
          width: 90, height: 90, borderRadius: 999,
          border: `1.5px solid ${A.hype}`,
        }} />
        <div style={{
          position: 'absolute', top: 130, right: 60,
          width: 50, height: 50, borderRadius: 999,
          background: A.hype,
        }} />
        <div style={{ flex: 1 }} />
        <div className="eyebrow" style={{ color: A.hype, marginBottom: 12, fontSize: 12 }}>WELCOME TO GRITTT</div>
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 52,
          letterSpacing: '-0.03em', lineHeight: 0.95, textTransform: 'uppercase',
        }}>
          The day<br/>belongs<br/>to you.
        </div>
        <div style={{ fontSize: 16, color: 'rgba(255,255,255,0.65)', marginTop: 20, lineHeight: 1.5, maxWidth: 300 }}>
          One score. Every day. Built from your habits, your fuel, your sweat. Let's set you up in 60 seconds.
        </div>
        <div style={{ flex: 1 }} />
      </div>
      <div style={{ padding: '14px 22px 38px' }}>
        <button style={{
          width: '100%', padding: '17px 0', border: 'none', borderRadius: 16,
          background: A.hype, color: A.ink,
          fontFamily: A.display, fontWeight: 800, fontSize: 14, letterSpacing: '0.18em',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          LET'S GO <Iq width={16} height={16}><path d="M5 12h14M12 5l7 7-7 7"/></Iq>
        </button>
        <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,0.5)' }}>
          Already signed up? <span style={{ color: A.hype, fontWeight: 600 }}>Sign in</span>
        </div>
      </div>
    </div>
  );
}

// 2) Name
function OB2_Name() {
  return (
    <OBShell step={1} cta="CONTINUE">
      <OBTitle eyebrow="ABOUT YOU · 1 OF 4" title="What should we call you?" sub="Used for your daily coaching nudges." />
      <div style={{
        padding: '18px 18px', border: `1.5px solid ${A.ink}`,
        borderRadius: 14, background: A.card,
        fontFamily: A.display, fontWeight: 700, fontSize: 20, color: A.ink,
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <span>Alex</span>
        <span style={{
          width: 2, height: 22, background: A.ink, animation: 'blink 1s steps(1) infinite',
        }} />
      </div>
      <div style={{ fontSize: 12, color: A.ink3, marginTop: 10, fontWeight: 500 }}>
        Your real name or a callsign — your choice.
      </div>
    </OBShell>
  );
}

// 3) Age height weight
function OB3_Body() {
  const stepper = (label, value, unit, big) => (
    <div style={{
      padding: 18, borderRadius: 16, border: `1px solid ${A.rule}`, background: A.card,
      flex: 1,
    }}>
      <div className="eyebrow" style={{ color: A.ink3 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 10 }}>
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: big ? 44 : 36,
          color: A.ink, letterSpacing: '-0.03em', lineHeight: 1,
        }}>{value}</div>
        <div style={{ fontSize: 12, color: A.ink3, fontWeight: 600 }}>{unit}</div>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
        {['−','+'].map(s => (
          <div key={s} style={{
            flex: 1, padding: '8px 0', textAlign: 'center', borderRadius: 8,
            background: A.rest, color: A.ink, fontWeight: 700, fontFamily: A.display,
            fontSize: 16,
          }}>{s}</div>
        ))}
      </div>
    </div>
  );
  return (
    <OBShell step={2} cta="CONTINUE">
      <OBTitle eyebrow="ABOUT YOU · 2 OF 4" title="The basics." sub="So your fuel and strength scores actually mean something." />
      <div style={{ display: 'flex', gap: 8 }}>
        {stepper('AGE', 28, 'years', true)}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
          {stepper('HEIGHT', "5'10\"", 'in')}
          {stepper('WEIGHT', 178, 'lbs')}
        </div>
      </div>
      <div style={{
        marginTop: 16, padding: 14, borderRadius: 12, background: A.rest,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ color: A.ink2 }}>
          <Iq width={16} height={16}><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></Iq>
        </div>
        <div style={{ fontSize: 12.5, color: A.ink2, lineHeight: 1.4 }}>
          We never share this. Switch to metric in settings later.
        </div>
      </div>
    </OBShell>
  );
}

// 4) Why are you here
function OB4_Why() {
  const opts = [
    { id: 'build',  label: 'Build new habits',     emoji: '🌱', on: true },
    { id: 'break',  label: 'Break bad habits',     emoji: '✂️' },
    { id: 'strong', label: 'Get physically stronger', emoji: '💪', on: true },
    { id: 'fuel',   label: 'Eat cleaner',          emoji: '🥗' },
    { id: 'lose',   label: 'Lose fat',             emoji: '⚖️' },
    { id: 'sharp',  label: 'Feel sharper mentally', emoji: '🧠', on: true },
    { id: 'sleep',  label: 'Sleep better',         emoji: '😴' },
    { id: 'else',   label: 'Just feel better',     emoji: '✨' },
  ];
  return (
    <OBShell step={3} cta="CONTINUE">
      <OBTitle eyebrow="ABOUT YOU · 3 OF 4" title="Why are you here?" sub="Pick all that apply. Shapes your coaching." />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {opts.map(o => (
          <div key={o.id} style={{
            padding: '14px 12px', borderRadius: 14,
            border: `1.5px solid ${o.on ? A.ink : A.rule}`,
            background: o.on ? A.ink : A.card,
            color: o.on ? '#fff' : A.ink,
            display: 'flex', alignItems: 'center', gap: 8,
            position: 'relative',
          }}>
            <div style={{ fontSize: 18 }}>{o.emoji}</div>
            <div style={{
              fontSize: 13, fontWeight: 600, fontFamily: A.body, lineHeight: 1.2,
            }}>{o.label}</div>
            {o.on && (
              <div style={{
                position: 'absolute', top: 8, right: 8,
                width: 16, height: 16, borderRadius: 8, background: A.hype,
                color: A.ink, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Iq width={9} height={9} strokeWidth="3"><path d="M4 12l6 6L20 6"/></Iq>
              </div>
            )}
          </div>
        ))}
      </div>
    </OBShell>
  );
}

// 5) Honest self-rating
function OB5_Baseline() {
  const value = 4;
  return (
    <OBShell step={4} cta="CONTINUE">
      <OBTitle eyebrow="ABOUT YOU · 4 OF 4" title="Be honest." sub="Where are you right now? 1 is rock bottom, 10 is dialed. No judgment." />

      <div style={{ textAlign: 'center', padding: '12px 0' }}>
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 120,
          letterSpacing: '-0.04em', lineHeight: 1, color: A.ink,
        }}>{value}<span style={{ fontSize: 32, color: A.ink3 }}>/10</span></div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 10,
          padding: '6px 12px', borderRadius: 999, background: '#FFF1DC',
          color: A.warn, fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
        }}>
          DRIFTING — TIME TO RESET
        </div>
      </div>

      {/* slider */}
      <div style={{ padding: '20px 4px 8px' }}>
        <div style={{
          position: 'relative', height: 8, borderRadius: 4, background: A.rest,
        }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0,
            width: `${(value / 10) * 100}%`,
            background: `linear-gradient(to right, ${A.bad}, ${A.warn}, ${A.good})`,
            borderRadius: 4,
          }} />
          <div style={{
            position: 'absolute', top: '50%', left: `${(value / 10) * 100}%`,
            transform: 'translate(-50%, -50%)',
            width: 26, height: 26, borderRadius: 13,
            background: A.ink, border: `3px solid #fff`,
            boxShadow: '0 4px 14px rgba(20,17,13,0.25)',
          }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', color: A.ink3 }}>
          <span>ROCK BOTTOM</span>
          <span>DIALED IN</span>
        </div>
      </div>
    </OBShell>
  );
}

// 6) Priority mode
function OB6_Priority() {
  const modes = [
    { id: 'disc',   name: 'DISCIPLINE',   sub: 'Build a bulletproof daily routine.', color: A.ink, on: true },
    { id: 'fuel',   name: 'FUEL',         sub: 'Lock in clean eating. Body comp follows.', color: '#F0A12E' },
    { id: 'phys',   name: 'STRENGTH',     sub: 'Move every day. Get visibly stronger.', color: '#22A664' },
  ];
  return (
    <OBShell step={5} cta="CONTINUE">
      <OBTitle eyebrow="YOUR FOCUS" title="What matters most right now?" sub="We'll surface this mode first on your dashboard. Change anytime." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {modes.map(m => (
          <div key={m.id} style={{
            padding: 18, borderRadius: 18,
            border: `1.5px solid ${m.on ? A.ink : A.rule}`,
            background: m.on ? A.ink : A.card,
            color: m.on ? '#fff' : A.ink,
            position: 'relative',
          }}>
            <div style={{
              fontFamily: A.display, fontWeight: 800, fontSize: 26,
              letterSpacing: '-0.01em', lineHeight: 1,
            }}>{m.name}</div>
            <div style={{
              fontSize: 13, marginTop: 6, lineHeight: 1.4,
              color: m.on ? 'rgba(255,255,255,0.7)' : A.ink2,
            }}>{m.sub}</div>
            <div style={{
              position: 'absolute', top: 18, right: 18,
              width: 22, height: 22, borderRadius: 11,
              border: `2px solid ${m.on ? A.hype : A.rule}`,
              background: m.on ? A.hype : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {m.on && <Iq width={10} height={10} strokeWidth="3" stroke={A.ink}><path d="M4 12l6 6L20 6"/></Iq>}
            </div>
          </div>
        ))}
      </div>
    </OBShell>
  );
}

// 7) First habits
function OB7_Habits() {
  const habits = [
    { name: 'Cold shower',      mins: '3 min',  on: true },
    { name: 'No sugar',         mins: 'all day', on: true },
    { name: 'Walk 8,000 steps', mins: '60 min' },
    { name: 'Read 30 min',      mins: '30 min', on: true },
    { name: 'No phone in bed',  mins: '—' },
    { name: 'Journal 1 page',   mins: '5 min' },
    { name: 'Meditate 10 min',  mins: '10 min' },
    { name: 'Strength workout', mins: '45 min' },
  ];
  return (
    <OBShell step={6} cta="START WITH THESE 3">
      <OBTitle eyebrow="DISCIPLINE · STARTERS" title="Pick 3 habits to build." sub="Small wins compound. You can add more once these stick." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {habits.map(h => (
          <div key={h.name} style={{
            padding: 14, borderRadius: 14,
            border: `1.5px solid ${h.on ? A.ink : A.rule}`,
            background: A.card,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 24, height: 24, borderRadius: 6,
              border: `1.5px solid ${h.on ? A.ink : A.rule}`,
              background: h.on ? A.hype : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {h.on && <Iq width={12} height={12} strokeWidth="3"><path d="M4 12l6 6L20 6"/></Iq>}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 15, color: A.ink, letterSpacing: '0.005em' }}>{h.name}</div>
              <div style={{ fontSize: 11.5, color: A.ink3, marginTop: 2, fontWeight: 600 }}>{h.mins}</div>
            </div>
            <div style={{
              fontFamily: A.mono, fontSize: 11, fontWeight: 700,
              color: h.on ? A.good : A.ink3,
            }}>+5 PT</div>
          </div>
        ))}
        <div style={{
          padding: 12, borderRadius: 14, border: `1.5px dashed ${A.ink3}`,
          textAlign: 'center', color: A.ink2, fontSize: 13, fontWeight: 600,
        }}>
          + Add your own
        </div>
      </div>
    </OBShell>
  );
}

// 8) Daily log time
function OB8_Time() {
  const times = ['Morning', 'Midday', 'Evening', 'Before bed'];
  return (
    <OBShell step={7} cta="CONTINUE">
      <OBTitle eyebrow="DAILY RHYTHM" title="When can you spare 60 seconds?" sub="That's when we'll nudge you to log. Be realistic." />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {times.map((t, i) => {
          const on = i === 2;
          const emoji = ['🌅','☀️','🌆','🌙'][i];
          const sub = ['6–10 am','11 am–2 pm','5–8 pm','9–11 pm'][i];
          return (
            <div key={t} style={{
              padding: 18, borderRadius: 16,
              border: `1.5px solid ${on ? A.ink : A.rule}`,
              background: on ? A.ink : A.card,
              color: on ? '#fff' : A.ink,
              minHeight: 110, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ fontSize: 28 }}>{emoji}</div>
              <div>
                <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 17 }}>{t}</div>
                <div style={{ fontSize: 11.5, color: on ? 'rgba(255,255,255,0.6)' : A.ink3, marginTop: 2, fontWeight: 600 }}>{sub}</div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{
        marginTop: 16, padding: 14, borderRadius: 12, background: A.rest,
        fontSize: 12.5, color: A.ink2, lineHeight: 1.4,
      }}>
        We'll remind you once. Miss it? No big deal — log when you can. The streak only cares that you logged.
      </div>
    </OBShell>
  );
}

// 9) Coaching tone
function OB9_Tone() {
  const tones = [
    { id: 'soft',  label: 'Encouraging',  sub: 'A gentle push. Cheer the wins.',     icon: '🤗' },
    { id: 'bal',   label: 'Balanced',     sub: 'Honest. Hype the wins, name the misses.', icon: '⚖️', on: true },
    { id: 'hard',  label: 'No mercy',     sub: 'Goggins energy. Call out every slip.', icon: '🔥' },
  ];
  return (
    <OBShell step={8} cta="CONTINUE">
      <OBTitle eyebrow="COACHING" title="How should we talk to you?" sub="Change anytime in settings." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {tones.map(t => (
          <div key={t.id} style={{
            padding: 16, borderRadius: 16,
            border: `1.5px solid ${t.on ? A.ink : A.rule}`,
            background: t.on ? '#FFFBEC' : A.card,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12, background: A.rest,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, flexShrink: 0,
            }}>{t.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 17, color: A.ink, letterSpacing: '0.005em' }}>{t.label}</div>
              <div style={{ fontSize: 12.5, color: A.ink2, marginTop: 2, lineHeight: 1.4 }}>{t.sub}</div>
            </div>
            <div style={{
              width: 22, height: 22, borderRadius: 11,
              border: `2px solid ${t.on ? A.ink : A.rule}`,
              background: t.on ? A.ink : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              {t.on && <div style={{ width: 8, height: 8, borderRadius: 4, background: A.hype }} />}
            </div>
          </div>
        ))}
      </div>

      {/* preview sample */}
      <div style={{
        marginTop: 16, padding: 16, borderRadius: 14, background: A.ink, color: '#fff',
      }}>
        <div className="eyebrow" style={{ color: A.hype, fontSize: 10 }}>SAMPLE NUDGE</div>
        <div style={{ fontFamily: A.display, fontSize: 16, fontWeight: 700, marginTop: 8, lineHeight: 1.3, textTransform: 'uppercase' }}>
          "Two days clean on cold showers. Don't break it now — same time tomorrow."
        </div>
      </div>
    </OBShell>
  );
}

// 10) Commit & notifications
function OB10_Commit() {
  return (
    <div className="scr" style={{
      '--bg': '#14110D', background: '#14110D', color: '#fff',
      '--font-body': A.body, '--font-display': A.display,
    }}>
      <div style={{ padding: '64px 22px 14px', display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 12,
          border: `1px solid rgba(255,255,255,0.15)`,
          color: 'rgba(255,255,255,0.7)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Iq width={14} height={14}><path d="M15 6l-6 6 6 6"/></Iq>
        </div>
        <div style={{ flex: 1, height: 4, background: A.hype, borderRadius: 2 }} />
        <div style={{ width: 36, textAlign: 'right', fontFamily: A.mono, fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.5)' }}>10/10</div>
      </div>

      <div style={{ flex: 1, padding: '20px 22px 0', overflow: 'auto' }}>
        <div className="eyebrow" style={{ color: A.hype, fontSize: 12, marginBottom: 12 }}>SIGN THE PACT</div>
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 42,
          letterSpacing: '-0.03em', lineHeight: 0.98, textTransform: 'uppercase',
        }}>
          Today.<br/>Tomorrow.<br/><span style={{ color: A.hype }}>Every day.</span>
        </div>
        <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.6)', marginTop: 14, lineHeight: 1.5 }}>
          You'll get one daily nudge. Log in under a minute. Watch your score build.
        </div>

        {/* pact */}
        <div style={{
          marginTop: 26, padding: 20, borderRadius: 16,
          border: `1px solid rgba(255,255,255,0.12)`,
          background: 'rgba(255,255,255,0.04)',
        }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', fontSize: 10 }}>I, ALEX, COMMIT TO:</div>
          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              'Logging every day for 30 days.',
              'Building 3 daily habits.',
              'Being honest about my food and effort.',
            ].map((t, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{
                  width: 20, height: 20, borderRadius: 5, background: A.hype, color: A.ink,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1,
                }}>
                  <Iq width={11} height={11} strokeWidth="3"><path d="M4 12l6 6L20 6"/></Iq>
                </div>
                <div style={{ fontSize: 14, lineHeight: 1.4 }}>{t}</div>
              </div>
            ))}
          </div>

          {/* signature line */}
          <div style={{ marginTop: 18, borderTop: `1px dashed rgba(255,255,255,0.2)`, paddingTop: 12 }}>
            <div style={{
              fontFamily: '"Caveat", "Bricolage Grotesque", cursive', fontSize: 28,
              color: A.hype, letterSpacing: '0.02em',
            }}>
              Alex
            </div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', fontWeight: 600, letterSpacing: '0.1em', marginTop: 4 }}>
              SIGNATURE · 15 MAY 2026
            </div>
          </div>
        </div>

        {/* notifications */}
        <div style={{
          marginTop: 14, padding: 14, borderRadius: 12,
          background: 'rgba(255,255,255,0.04)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ color: A.hype }}>
            <Iq width={18} height={18}><path d="M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 004 0"/></Iq>
          </div>
          <div style={{ flex: 1, fontSize: 12.5, color: 'rgba(255,255,255,0.8)' }}>Daily nudge at 6 PM.</div>
          <div style={{
            width: 38, height: 22, borderRadius: 11, background: A.hype, position: 'relative',
          }}>
            <div style={{
              position: 'absolute', right: 2, top: 2, width: 18, height: 18, borderRadius: 9, background: A.ink,
            }} />
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 22px 38px' }}>
        <button style={{
          width: '100%', padding: '18px 0', border: 'none', borderRadius: 16,
          background: A.hype, color: A.ink,
          fontFamily: A.display, fontWeight: 800, fontSize: 14, letterSpacing: '0.18em',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          boxShadow: '0 8px 28px rgba(184,242,58,0.35)',
        }}>
          I'M IN <Iq width={16} height={16}><path d="M5 12h14M12 5l7 7-7 7"/></Iq>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  OB1_Welcome, OB2_Name, OB3_Body, OB4_Why, OB5_Baseline,
  OB6_Priority, OB7_Habits, OB8_Time, OB9_Tone, OB10_Commit,
});