// screens.jsx — v2 peptide-first funnel screens. Each screen is registered as
// window.SCREEN_<id> and consumed by buildFlow() in app.jsx. Reusable factories
// (pickScreen / multiScreen / inputScreen / eduScreen) keep the ~40 screens DRY.
const { useState: useS, useEffect: useE, useMemo: useM } = React;

function TitleBlock({ eyebrow, title, sub }) {
  return (
    <div className="sp-title-block">
      {eyebrow && <span className="sp-eyebrow">{eyebrow}</span>}
      <h1 className="sp-h1">{title}</h1>
      {sub && <p className="sp-sub">{sub}</p>}
    </div>
  );
}

// ── Factories ───────────────────────────────────────────────────
// Single-select; tapping a card records the answer and advances.
function pickScreen({ key, eyebrow, title, sub, opts, icons = true }) {
  return function ({ state, set, next }) {
    return (
      <div className="sp-screen-inner sp-enter">
        <TitleBlock eyebrow={eyebrow} title={title} sub={sub} />
        <div className="sp-stack">
          {opts.map(o => (
            <OptionCard key={o.id} icon={o.icon} title={o.t} sub={o.sub}
              accentIcon={icons && !!o.icon}
              selected={state[key] === o.id}
              onClick={() => { set(key, o.id); next(); }} />
          ))}
        </div>
      </div>
    );
  };
}

// Multi-select with optional "None" + Continue.
function multiScreen({ key, eyebrow, title, sub, opts, none = false, minOne = true, icon }) {
  return function ({ state, set, next }) {
    const sel = state[key] || [];
    const isNone = none && state[key + '_none'];
    const toggle = (id) => {
      if (isNone) set(key + '_none', false);
      set(key, sel.includes(id) ? sel.filter(x => x !== id) : [...sel, id]);
    };
    const chooseNone = () => { set(key + '_none', !isNone); set(key, []); };
    const disabled = minOne && sel.length === 0 && !isNone;
    return (
      <>
        <div className="sp-screen-inner sp-enter">
          <TitleBlock eyebrow={eyebrow} title={title} sub={sub} />
          <div className="sp-stack">
            {opts.map(o => (
              <OptionCard key={o.id} icon={o.icon || icon} title={o.t} sub={o.sub} multi
                accentIcon={!!(o.icon || icon)} selected={!isNone && sel.includes(o.id)}
                onClick={() => toggle(o.id)} />
            ))}
            {none && (<><hr className="sp-divider" />
              <OptionCard icon="x" title="None of the above" selected={!!isNone} onClick={chooseNone} /></>)}
          </div>
        </div>
        <SPFooter><button className="sp-cta" disabled={disabled} onClick={next}>Continue</button></SPFooter>
      </>
    );
  };
}

// Free-text / number input.
function inputScreen({ key, eyebrow, title, sub, placeholder, type = 'text', inputMode, banner, lock, optional }) {
  return function ({ state, set, next }) {
    const [v, setV] = useS(state[key] || '');
    useE(() => { set(key, v); }, [v]);
    return (
      <>
        <div className="sp-screen-inner sp-enter">
          {banner && <SuccessBanner>{banner}</SuccessBanner>}
          <TitleBlock eyebrow={eyebrow} title={title} sub={sub} />
          <input className="sp-input" placeholder={placeholder} type={type} inputMode={inputMode}
            value={v} onChange={e => setV(e.target.value)} autoFocus />
          {lock && <div className="sp-tiny" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            <Icon name="lock" size={12} /> {lock}</div>}
        </div>
        <SPFooter><button className="sp-cta" disabled={!optional && !v} onClick={next}>{optional && !v ? 'Skip for now' : 'Continue'}</button></SPFooter>
      </>
    );
  };
}

// Education / social-proof interstitial.
function eduScreen({ eyebrow, title, sub, bullets, cta = 'Continue' }) {
  return function ({ next }) {
    return (
      <>
        <div className="sp-screen-inner sp-enter">
          <TitleBlock eyebrow={eyebrow} title={title} sub={sub} />
          {bullets && (
            <div className="sp-stack">
              {bullets.map((b, i) => (
                <div key={i} className="sp-doc" style={{ padding: '14px 16px' }}>
                  <div className="sp-card-icon dot" style={{ width: 34, height: 34 }}>
                    <Icon name={b.icon || 'check'} size={17} stroke={2.2} />
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{b.t || b}</div>
                </div>
              ))}
            </div>
          )}
        </div>
        <SPFooter><button className="sp-cta" onClick={next}>{cta}</button></SPFooter>
      </>
    );
  };
}

// Silhouette grid (only used inside fat-loss / muscle lanes).
function silhouetteGrid({ key, title, sub, opts, height = 300 }) {
  return function ({ state, set, next }) {
    const g = state.sex === 'female' ? 'f' : 'm';
    return (
      <div className="sp-screen-inner sp-enter">
        <TitleBlock title={title} sub={sub} />
        <div className="sp-grid-2">
          {opts.map(o => (
            <PortraitCard key={o.id} label={o.t} gender={g} fat={o.fat} muscle={o.muscle} height={height}
              selected={state[key] === o.id}
              onClick={() => { set(key, o.id); next(); }} />
          ))}
        </div>
      </div>
    );
  };
}

// ════════════════════════════════════════════════════════════════
// SECTION 1 — Hook & trust
// ════════════════════════════════════════════════════════════════
window.SCREEN_landing = function ({ next }) {
  return (
    <div className="sp-screen-inner sp-enter" style={{ alignItems: 'center', textAlign: 'center', paddingTop: 12 }}>
      <TitleBlock
        eyebrow="Personalized peptide protocol"
        title="Find your perfect peptide protocol."
        sub="Answer a few questions and we'll match you to a physician-reviewed, research-backed peptide stack — built around your goal and your biology."
      />
      <div className="sp-trust-row">
        <span className="sp-pill"><Icon name="shield" size={13} /> MD-led</span>
        <span className="sp-pill"><Icon name="check" size={13} /> COA-verified</span>
        <span className="sp-pill"><Icon name="star" size={13} /> 6,200+ protocols</span>
      </div>
      <SPFooter>
        <button className="sp-cta" onClick={next}>Build my protocol</button>
        <div className="sp-tiny" style={{ textAlign: 'center' }}>Takes ~3 minutes · no card required</div>
      </SPFooter>
    </div>
  );
};

window.SCREEN_edu_peptides = eduScreen({
  eyebrow: 'Peptides 101',
  title: 'What even is a peptide?',
  sub: "New to this? Here's the 20-second version before we start.",
  bullets: [
    { icon: 'atom', t: 'Signals your body already makes — short chains of amino acids that tell cells what to do.' },
    { icon: 'spark', t: 'Targeted, not blunt — each one nudges a specific system: fat, healing, sleep, focus, libido.' },
    { icon: 'shield', t: 'Prescription + lab-tested — written by a licensed MD, compounded by a 503A/B pharmacy, HPLC-verified.' },
  ],
  cta: "Got it — let's go",
});

window.SCREEN_source = pickScreen({
  key: 'source',
  title: 'What got you curious about peptides?',
  sub: 'No wrong answer — it just helps us tailor how much we explain.',
  opts: [
    { id: 'friend', icon: 'user', t: 'A friend or family member' },
    { id: 'media', icon: 'play', t: 'A podcast or video' },
    { id: 'social', icon: 'heart', t: 'Social media' },
    { id: 'doctor', icon: 'stethoscope', t: 'My doctor suggested it' },
    { id: 'research', icon: 'brain', t: 'My own research' },
  ],
});

// ════════════════════════════════════════════════════════════════
// SECTION 2 — Goal & ambition
// ════════════════════════════════════════════════════════════════
window.SCREEN_goal = pickScreen({
  key: 'goal',
  eyebrow: 'Your #1 goal',
  title: 'What do you most want to fix or improve?',
  sub: 'Pick the one that matters most right now — you can add others next.',
  opts: [
    { id: 'fat_loss',   icon: 'flame',  t: 'Lose fat & reset metabolism', sub: 'GLP-1s, Tesamorelin, MOTS-C' },
    { id: 'muscle',     icon: 'muscle', t: 'Build muscle & boost GH',     sub: 'Sermorelin, Ipamorelin, CJC' },
    { id: 'recover',    icon: 'spark',  t: 'Heal, recover & kill pain',   sub: 'BPC-157, TB-500, GHK-Cu' },
    { id: 'aesthetics', icon: 'star',   t: 'Look younger — skin & hair',  sub: 'GHK-Cu, Glutathione, longevity' },
    { id: 'mind',       icon: 'brain',  t: 'Sharpen focus, mood & sleep', sub: 'Semax, Selank, DSIP' },
    { id: 'vitality',   icon: 'heart',  t: 'Energy, libido & vitality',   sub: 'NAD+, PT-141, MOTS-C' },
    { id: 'unsure',     icon: 'info',   t: 'Not sure — help me figure it out', sub: "We'll guide you" },
  ],
});

window.SCREEN_subgoals = multiScreen({
  key: 'subgoals',
  title: 'What else matters to you?',
  sub: 'Pick everything that applies — most people stack 2–4. We tune the protocol accordingly.',
  minOne: false,
  opts: [
    { id: 'stubborn_fat', icon: 'flame',  t: 'Lose stubborn fat' },
    { id: 'lean_muscle',  icon: 'muscle', t: 'Build lean muscle' },
    { id: 'recovery',     icon: 'spark',  t: 'Recover faster' },
    { id: 'joint_pain',   icon: 'shield', t: 'Heal joint or tendon pain' },
    { id: 'sleep',        icon: 'moon',   t: 'Sleep deeper' },
    { id: 'focus',        icon: 'brain',  t: 'Sharper focus' },
    { id: 'mood',         icon: 'heart',  t: 'Calmer mood / less anxiety' },
    { id: 'skin',         icon: 'star',   t: 'Younger skin' },
    { id: 'hair',         icon: 'user',   t: 'Thicker hair' },
    { id: 'libido',       icon: 'heart',  t: 'Better libido' },
    { id: 'immune',       icon: 'shield', t: 'Stronger immunity' },
    { id: 'gut',          icon: 'drop',   t: 'Heal my gut' },
    { id: 'energy',       icon: 'lightning', t: 'More energy' },
    { id: 'longevity',    icon: 'atom',   t: 'Slow aging / longevity' },
  ],
});

window.SCREEN_readiness = pickScreen({
  key: 'readiness',
  title: 'How ready are you to start?',
  sub: 'Honest answer — it tells your physician how to pace things.',
  opts: [
    { id: 'exploring', icon: 'info',    t: 'Just exploring for now' },
    { id: 'comparing', icon: 'scale',   t: 'Comparing my options' },
    { id: 'soon',      icon: 'calendar',t: 'Ready within a month' },
    { id: 'now',       icon: 'flame',   t: "Ready now — let's go" },
  ],
});

// ════════════════════════════════════════════════════════════════
// SECTION 3 — About you
// ════════════════════════════════════════════════════════════════
window.SCREEN_sex = pickScreen({
  key: 'sex',
  title: 'What sex were you assigned at birth?',
  sub: 'We calibrate dosing and hormone interactions on biology.',
  opts: [
    { id: 'male',   icon: 'user', t: 'Male' },
    { id: 'female', icon: 'user', t: 'Female' },
  ],
});

window.SCREEN_age = pickScreen({
  key: 'age',
  title: 'Your age range',
  sub: 'Peptide response shifts every decade — especially GH and longevity stacks.',
  opts: [
    { id: '18-29', icon: 'user', t: '18–29' },
    { id: '30-39', icon: 'user', t: '30–39' },
    { id: '40-49', icon: 'user', t: '40–49' },
    { id: '50-59', icon: 'user', t: '50–59' },
    { id: '60+',   icon: 'user', t: '60+' },
  ],
});

function unitScreen({ key, unitKey, units, title, sub, ph }) {
  return function ({ state, set, next }) {
    const [unit, setUnit] = useS(state[unitKey] || units[0]);
    const [v, setV] = useS(state[key] || '');
    useE(() => { set(unitKey, unit); }, [unit]);
    useE(() => { set(key, v); }, [v]);
    return (
      <>
        <div className="sp-screen-inner sp-enter">
          <TitleBlock title={title} sub={sub} />
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="sp-toggle">
              {units.map(u => <button key={u} className={unit === u ? 'on' : ''} onClick={() => setUnit(u)}>{u}</button>)}
            </div>
          </div>
          <input className="sp-input" placeholder={ph(unit)} inputMode="decimal" value={v} onChange={e => setV(e.target.value)} autoFocus />
        </div>
        <SPFooter><button className="sp-cta" disabled={!v} onClick={next}>Continue</button></SPFooter>
      </>
    );
  };
}
window.SCREEN_height = unitScreen({ key: 'height', unitKey: 'height_unit', units: ['ft', 'cm'],
  title: "What's your height?", sub: 'Used for BMI and dosing weight-class.', ph: u => u === 'ft' ? 'Height, ft' : 'Height, cm' });
window.SCREEN_weight = unitScreen({ key: 'weight', unitKey: 'weight_unit', units: ['lb', 'kg'],
  title: 'Your current weight', sub: 'Private and encrypted — used only by your reviewing physician.', ph: u => u === 'lb' ? 'Current weight, lb' : 'Current weight, kg' });

// ════════════════════════════════════════════════════════════════
// SECTION 4 — Goal deep-dives (branched)
// ── Fat loss ──
window.SCREEN_fl_bodytype = silhouetteGrid({ key: 'fl_bodytype', title: 'Choose your body type',
  sub: "Honest answers calibrate the protocol — we don't judge.",
  opts: [
    { id: 'slim', t: 'Slim', fat: 0.10, muscle: 0.3 }, { id: 'average', t: 'Average', fat: 0.28, muscle: 0.4 },
    { id: 'big', t: 'Big', fat: 0.55, muscle: 0.5 }, { id: 'heavy', t: 'Heavy', fat: 0.78, muscle: 0.35 },
  ] });
window.SCREEN_fl_bodyfat = function ({ state, set, next }) {
  const [val, setVal] = useS(state.fl_bodyfat ?? 3);
  const ranges = ['5–9%', '10–14%', '15–19%', '20–24%', '25–29%', '30–34%', '35–39%', '>40%'];
  const fatVals = [0.06, 0.14, 0.22, 0.32, 0.42, 0.55, 0.7, 0.85];
  const g = state.sex === 'female' ? 'f' : 'm';
  const pct = (val / (ranges.length - 1)) * 100;
  useE(() => set('fl_bodyfat', val), [val]);
  return (
    <>
      <div className="sp-screen-inner sp-enter">
        <TitleBlock title="Roughly your body-fat level?" sub="No measurement? Use the silhouette as a guide. Most fall in 20–29%." />
        <div style={{ display: 'grid', placeItems: 'center' }}><BodySilhouette gender={g} fat={fatVals[val]} muscle={0.4} size={260} /></div>
        <div className="sp-slider-card">
          <div style={{ display: 'flex', justifyContent: 'center' }}><span className="sp-pill accent" style={{ fontSize: 14, height: 32, fontWeight: 700 }}>{ranges[val]}</span></div>
          <input className="sp-slider" type="range" min="0" max={ranges.length - 1} step="1" value={val} onChange={e => setVal(parseInt(e.target.value))} style={{ '--p': pct + '%' }} />
        </div>
      </div>
      <SPFooter><button className="sp-cta" onClick={next}>Continue</button></SPFooter>
    </>
  );
};
window.SCREEN_fl_storage = multiScreen({ key: 'fl_storage', title: 'Where do you hold fat most?',
  sub: 'Tap all that apply.', minOne: false, none: true, icon: 'flame',
  opts: [{ id: 'belly', t: 'Belly / midsection' }, { id: 'love_handles', t: 'Love handles / lower back' },
    { id: 'hips', t: 'Hips & thighs' }, { id: 'chest', t: 'Chest' }, { id: 'arms', t: 'Arms' }, { id: 'face', t: 'Face / neck' }] });
window.SCREEN_fl_appetite = pickScreen({ key: 'fl_appetite', title: 'How are your cravings & appetite?',
  sub: 'This decides whether a GLP-1 (appetite) or a metabolic peptide fits better.',
  opts: [{ id: 'constant', icon: 'flame', t: 'Constant — I think about food a lot' },
    { id: 'evenings', icon: 'moon', t: 'Fine by day, hungry at night' },
    { id: 'stress', icon: 'heart', t: 'Stress / boredom eating' },
    { id: 'controlled', icon: 'check', t: 'Appetite is controlled — fat just won’t move' }] });
window.SCREEN_fl_glp1 = pickScreen({ key: 'fl_glp1', title: 'Have you tried a GLP-1 (Ozempic, Wegovy, Mounjaro)?',
  sub: 'So we don’t double up — and can escalate or switch you appropriately.',
  opts: [{ id: 'never', icon: 'x', t: 'Never' }, { id: 'past', icon: 'clock', t: 'In the past, not now' },
    { id: 'current', icon: 'syringe', t: 'Currently on one' }, { id: 'plateau', icon: 'trend', t: 'On one, but plateaued' }] });
window.SCREEN_fl_target = unitScreen({ key: 'fl_target', unitKey: 'weight_unit', units: ['lb', 'kg'],
  title: "What's your target weight?", sub: 'Realistic targets get approved faster.', ph: u => u === 'lb' ? 'Target weight, lb' : 'Target weight, kg' });

// ── Muscle ──
window.SCREEN_mu_training = pickScreen({ key: 'mu_training', title: 'How long have you trained seriously?',
  opts: [{ id: 'new', icon: 'home', t: 'Just starting' }, { id: 'lt2', icon: 'gym', t: 'Under 2 years' },
    { id: '2to5', icon: 'gym', t: '2–5 years' }, { id: '5plus', icon: 'muscle', t: '5+ years' }] });
window.SCREEN_mu_bodytype = silhouetteGrid({ key: 'mu_bodytype', title: 'Your current build', sub: 'Pick the closest match.',
  opts: [{ id: 'slim', t: 'Slim', fat: 0.12, muscle: 0.35 }, { id: 'average', t: 'Average', fat: 0.25, muscle: 0.5 },
    { id: 'athletic', t: 'Athletic', fat: 0.16, muscle: 0.7 }, { id: 'big', t: 'Bigger', fat: 0.45, muscle: 0.6 }] });
window.SCREEN_mu_target = silhouetteGrid({ key: 'mu_target', title: 'The build you want', sub: 'Sets the growth ceiling for your stack.', height: 280,
  opts: [{ id: 'athlete', t: 'Athlete', fat: 0.12, muscle: 0.6 }, { id: 'hero', t: 'Hero', fat: 0.10, muscle: 0.8 },
    { id: 'builder', t: 'Bodybuilder', fat: 0.07, muscle: 0.95 }, { id: 'lean', t: 'Lean & toned', fat: 0.15, muscle: 0.5 }] });
window.SCREEN_mu_recovery = pickScreen({ key: 'mu_recovery', title: 'How well do you recover between sessions?',
  opts: [{ id: 'fast', icon: 'lightning', t: 'Fast — ready next day' }, { id: 'ok', icon: 'clock', t: 'Okay, a little sore' },
    { id: 'slow', icon: 'moon', t: 'Slow — sore for days' }, { id: 'plateau', icon: 'trend', t: 'Plateaued / overtrained' }] });
window.SCREEN_mu_priority = pickScreen({ key: 'mu_priority', title: 'What matters more right now?',
  opts: [{ id: 'size', icon: 'muscle', t: 'Maximum size' }, { id: 'lean', icon: 'spark', t: 'Lean, defined mass' },
    { id: 'recomp', icon: 'scale', t: 'Recomp — build + lose fat' }, { id: 'strength', icon: 'gym', t: 'Raw strength' }] });

// ── Recover ──
window.SCREEN_re_painmap = function ({ state, set, next }) {
  const sel = state.re_pain || [];
  const toggle = (k) => set('re_pain', sel.includes(k) ? sel.filter(x => x !== k) : [...sel, k]);
  const opts = [{ id: 'shoulders', t: 'Shoulders' }, { id: 'chest', t: 'Chest' }, { id: 'arms', t: 'Arms / elbows' },
    { id: 'abs', t: 'Core / gut' }, { id: 'legs', t: 'Legs / knees' }, { id: 'back', t: 'Back / spine' }];
  return (
    <>
      <div className="sp-screen-inner sp-enter">
        <TitleBlock title="Where does it hurt?" sub="Tap the areas you want to repair. BPC-157 & TB-500 are matched to these." />
        <div style={{ background: 'var(--card)', border: '1px solid var(--line)', borderRadius: 18, padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'center' }}>
          <BodyMap value={sel} onToggle={toggle} />
          <div className="sp-stack" style={{ gap: 8 }}>
            {opts.map(o => (
              <button key={o.id} className={"sp-card" + (sel.includes(o.id) ? " selected" : "")} onClick={() => toggle(o.id)} style={{ padding: '12px 14px' }}>
                <div className="sp-card-grow" style={{ fontSize: 14, fontWeight: 600 }}>{o.t}</div>
                <div className="sp-check" style={{ width: 18, height: 18 }}>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10" /></svg>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
      <SPFooter><button className="sp-cta" onClick={next}>{sel.length ? 'Continue' : 'None — Continue'}</button></SPFooter>
    </>
  );
};
window.SCREEN_re_duration = pickScreen({ key: 're_duration', title: 'How long have you had this?',
  opts: [{ id: 'acute', icon: 'lightning', t: 'Recent — under a month' }, { id: 'months', icon: 'clock', t: '1–6 months' },
    { id: 'chronic', icon: 'calendar', t: '6+ months' }, { id: 'recurring', icon: 'trend', t: 'It keeps coming back' }] });
window.SCREEN_re_cause = pickScreen({ key: 're_cause', title: 'What caused it?',
  opts: [{ id: 'training', icon: 'gym', t: 'Training / sport' }, { id: 'injury', icon: 'warning', t: 'An injury or accident' },
    { id: 'surgery', icon: 'plus', t: 'Surgery' }, { id: 'age', icon: 'clock', t: 'Age / wear and tear' }, { id: 'unknown', icon: 'info', t: 'Not sure' }] });
window.SCREEN_re_priortx = multiScreen({ key: 're_priortx', title: 'Tried anything for it yet?', sub: 'Tap all that apply.', none: true, minOne: false,
  opts: [{ id: 'rest', icon: 'moon', t: 'Rest / time' }, { id: 'pt', icon: 'spark', t: 'Physical therapy' },
    { id: 'cortisone', icon: 'syringe', t: 'Cortisone shots' }, { id: 'surgery', icon: 'plus', t: 'Surgery' }, { id: 'nsaids', icon: 'drop', t: 'Anti-inflammatories' }] });
window.SCREEN_re_limiting = pickScreen({ key: 're_limiting', title: 'Is it limiting your training or daily life?',
  opts: [{ id: 'severe', icon: 'warning', t: "Yes — I've had to stop" }, { id: 'some', icon: 'trend', t: 'Somewhat — I work around it' },
    { id: 'mild', icon: 'check', t: 'Mild — just annoying' }] });

// ── Aesthetics ──
window.SCREEN_ae_skin = multiScreen({ key: 'ae_skin', title: 'Your top skin concerns?', sub: 'Tap all that apply.', none: true, minOne: false, icon: 'star',
  opts: [{ id: 'lines', t: 'Fine lines & wrinkles' }, { id: 'laxity', t: 'Sagging / loss of firmness' },
    { id: 'dull', t: 'Dullness / uneven tone' }, { id: 'pigment', t: 'Dark spots / pigmentation' }, { id: 'scars', t: 'Scars / stretch marks' }, { id: 'acne', t: 'Acne / breakouts' }] });
window.SCREEN_ae_hair = pickScreen({ key: 'ae_hair', title: 'How about your hair?',
  opts: [{ id: 'thinning', icon: 'user', t: 'Thinning / losing density' }, { id: 'shedding', icon: 'warning', t: 'Shedding more than usual' },
    { id: 'receding', icon: 'trend', t: 'Receding hairline' }, { id: 'none', icon: 'check', t: 'Hair is fine' }] });
window.SCREEN_ae_sun = pickScreen({ key: 'ae_sun', title: 'How much sun does your skin get?',
  opts: [{ id: 'lots', icon: 'flame', t: 'A lot — outdoors often' }, { id: 'some', icon: 'spark', t: 'Some / seasonal' }, { id: 'little', icon: 'moon', t: 'Very little' }] });
window.SCREEN_ae_routine = pickScreen({ key: 'ae_routine', title: 'Your current skincare effort?',
  opts: [{ id: 'none', icon: 'x', t: 'Basically nothing' }, { id: 'basic', icon: 'drop', t: 'Cleanser + moisturizer' },
    { id: 'active', icon: 'spark', t: 'Actives (retinol, vit C…)' }, { id: 'pro', icon: 'star', t: 'Dermatologist / treatments' }] });
window.SCREEN_ae_bioage = pickScreen({ key: 'ae_bioage', title: 'How much does aging itself worry you?',
  sub: 'Drives whether we add longevity peptides (Epithalon, NAD+).',
  opts: [{ id: 'lots', icon: 'atom', t: "A lot — I want to slow it" }, { id: 'some', icon: 'clock', t: 'Somewhat' }, { id: 'little', icon: 'check', t: 'Just the visible stuff' }] });

// ── Mind ──
window.SCREEN_mi_focus = pickScreen({ key: 'mi_focus', title: 'How is your focus & concentration?',
  opts: [{ id: 'sharp', icon: 'check', t: 'Sharp most days' }, { id: 'dips', icon: 'clock', t: 'Dips in the afternoon' },
    { id: 'scattered', icon: 'warning', t: 'Scattered / easily distracted' }, { id: 'struggle', icon: 'brain', t: 'A real daily struggle' }] });
window.SCREEN_mi_fog = pickScreen({ key: 'mi_fog', title: 'Brain fog?',
  opts: [{ id: 'never', icon: 'check', t: 'Rarely' }, { id: 'sometimes', icon: 'info', t: 'Sometimes' }, { id: 'often', icon: 'warning', t: 'Often' }, { id: 'constant', icon: 'moon', t: 'Almost constant' }] });
window.SCREEN_mi_mood = pickScreen({ key: 'mi_mood', title: 'How would you describe your mood lately?',
  opts: [{ id: 'good', icon: 'heart', t: 'Pretty stable' }, { id: 'anxious', icon: 'warning', t: 'Anxious / wired' },
    { id: 'low', icon: 'moon', t: 'Low / flat' }, { id: 'irritable', icon: 'flame', t: 'Irritable / short fuse' }] });
window.SCREEN_mi_memory = pickScreen({ key: 'mi_memory', title: 'Memory & recall?',
  opts: [{ id: 'sharp', icon: 'check', t: 'Sharp' }, { id: 'slipping', icon: 'clock', t: 'Slipping a bit' }, { id: 'forgetful', icon: 'warning', t: 'Noticeably forgetful' }] });
window.SCREEN_mi_sleeponset = pickScreen({ key: 'mi_sleeponset', title: 'How fast do you fall asleep?',
  opts: [{ id: 'fast', icon: 'check', t: 'Out in minutes' }, { id: 'ok', icon: 'clock', t: '15–30 min' },
    { id: 'slow', icon: 'moon', t: 'Over 30 min — mind races' }, { id: 'wake', icon: 'warning', t: 'I wake through the night' }] });

// ── Vitality ──
window.SCREEN_vi_crash = pickScreen({ key: 'vi_crash', title: 'When does your energy crash?',
  opts: [{ id: 'morning', icon: 'moon', t: 'I wake up tired' }, { id: 'afternoon', icon: 'clock', t: 'Afternoon slump' },
    { id: 'evening', icon: 'lightning', t: 'Run out by evening' }, { id: 'allday', icon: 'warning', t: 'Drained all day' }] });
window.SCREEN_vi_libido = pickScreen({ key: 'vi_libido', title: 'How is your libido / sex drive?',
  opts: [{ id: 'fine', icon: 'check', t: "It's good" }, { id: 'lower', icon: 'trend', t: 'Lower than it was' },
    { id: 'low', icon: 'warning', t: 'Noticeably low' }, { id: 'performance', icon: 'heart', t: 'Performance, not desire' }] });
window.SCREEN_vi_morning = pickScreen({ key: 'vi_morning', title: 'How do you feel in the morning?',
  opts: [{ id: 'great', icon: 'spark', t: 'Energized & sharp' }, { id: 'slow', icon: 'clock', t: 'Slow to get going' }, { id: 'exhausted', icon: 'moon', t: 'Exhausted before the day starts' }] });

// ════════════════════════════════════════════════════════════════
// SECTION 5 — Lifestyle modifiers
window.SCREEN_sleep = pickScreen({ key: 'sleep', title: "How's your sleep?",
  sub: 'Poor sleep blunts growth hormone — we may add DSIP, Epithalon, or Sermorelin.',
  opts: [{ id: 'great', icon: 'moon', t: '7–9 hrs, rested' }, { id: 'okay', icon: 'moon', t: '6–7 hrs, could be deeper' },
    { id: 'broken', icon: 'moon', t: 'Frequently broken' }, { id: 'bad', icon: 'moon', t: 'Under 6 hrs, chronic' }] });
window.SCREEN_energy = pickScreen({ key: 'energy', title: 'Daily energy level',
  opts: [{ id: 'high', icon: 'lightning', t: 'High — rarely crash' }, { id: 'mid', icon: 'lightning', t: 'Steady with a dip' },
    { id: 'low', icon: 'lightning', t: 'Tired by midday' }, { id: 'flat', icon: 'lightning', t: 'Constantly drained' }] });
window.SCREEN_stress = pickScreen({ key: 'stress', title: 'Stress, last 30 days',
  opts: [{ id: 'low', icon: 'heart', t: 'Mostly calm' }, { id: 'mid', icon: 'heart', t: 'Manageable' },
    { id: 'high', icon: 'heart', t: 'High' }, { id: 'burn', icon: 'flame', t: 'Burnt out' }] });
window.SCREEN_activity = pickScreen({ key: 'activity', title: 'Activity level',
  opts: [{ id: 'sedentary', icon: 'home', t: 'Sedentary', sub: 'Desk work' }, { id: 'light', icon: 'home', t: 'Light', sub: 'Walks, occasional' },
    { id: 'active', icon: 'gym', t: 'Active', sub: '3–4×/week' }, { id: 'intense', icon: 'gym', t: 'Intense', sub: '5+×/week' }] });
window.SCREEN_diet = pickScreen({ key: 'diet', title: 'How do you eat most days?',
  opts: [{ id: 'omnivore', icon: 'fork', t: 'Omnivore' }, { id: 'highprot', icon: 'fork', t: 'High-protein' },
    { id: 'keto', icon: 'drop', t: 'Keto / low-carb' }, { id: 'med', icon: 'leaf', t: 'Mediterranean' }, { id: 'plant', icon: 'leaf', t: 'Plant-based' }, { id: 'no', icon: 'x', t: 'No real pattern' }] });
window.SCREEN_alcohol = pickScreen({ key: 'alcohol', title: 'Alcohol?',
  opts: [{ id: 'none', icon: 'x', t: 'None' }, { id: 'light', icon: 'drop', t: 'A few drinks a week' }, { id: 'mod', icon: 'drop', t: 'Most days' }, { id: 'heavy', icon: 'warning', t: 'Heavily' }] });
window.SCREEN_caffeine = pickScreen({ key: 'caffeine', title: 'Caffeine?',
  opts: [{ id: 'none', icon: 'x', t: 'None' }, { id: 'one', icon: 'drop', t: '1 cup a day' }, { id: 'few', icon: 'lightning', t: '2–3 a day' }, { id: 'lots', icon: 'warning', t: 'I run on it' }] });
window.SCREEN_nicotine = pickScreen({ key: 'nicotine', title: 'Nicotine or vaping?',
  opts: [{ id: 'none', icon: 'check', t: 'Never' }, { id: 'quit', icon: 'clock', t: 'Quit' }, { id: 'sometimes', icon: 'drop', t: 'Occasionally' }, { id: 'daily', icon: 'warning', t: 'Daily' }] });

// ════════════════════════════════════════════════════════════════
// SECTION 6 — Medical & readiness
window.SCREEN_doctor_intro = eduScreen({
  eyebrow: 'Medical oversight',
  title: 'Every protocol is physician-reviewed.',
  sub: 'Peptides are prescription-only in the US. A board-certified MD reviews your answers and signs off — or asks follow-ups.',
  bullets: [
    { icon: 'shield', t: 'Licensed physicians in all 50 states' },
    { icon: 'check', t: '503A & 503B FDA-registered pharmacies' },
    { icon: 'drop', t: 'Third-party HPLC tested for purity' },
  ],
  cta: 'I understand',
});
window.SCREEN_peptide_history = pickScreen({ key: 'peptide_history', title: 'Have you used peptides before?',
  opts: [{ id: 'never', icon: 'spark', t: "Never — I'm new", sub: 'Onboarding call included' },
    { id: 'glp1', icon: 'syringe', t: 'Only a GLP-1 pen' }, { id: 'other', icon: 'atom', t: 'Yes, other peptides' }] });
window.SCREEN_injection_comfort = pickScreen({ key: 'injection_comfort', title: 'How do you feel about injections?',
  sub: 'Most peptides are a tiny sub-Q pin — but we have needle-free options too.',
  opts: [{ id: 'fine', icon: 'check', t: 'Totally fine with needles' }, { id: 'nervous', icon: 'warning', t: 'Nervous but willing' }, { id: 'avoid', icon: 'x', t: "I'd rather avoid needles" }] });
window.SCREEN_delivery_pref = pickScreen({ key: 'delivery_pref', title: 'Preferred way to take it?',
  sub: 'We carry both — this filters your matches.',
  opts: [{ id: 'needle_free', icon: 'drop', t: 'Needle-free (nasal / oral)' },
    { id: 'injectable', icon: 'syringe', t: 'Injectable (most potent)' }, { id: 'either', icon: 'check', t: 'Whatever works best' }] });
window.SCREEN_meds = multiScreen({ key: 'meds', title: 'Currently on any of these?', sub: 'Some interact with peptide therapy — your MD needs this.', none: true,
  opts: [{ id: 'glp1', t: 'GLP-1 (Ozempic, Wegovy…)' }, { id: 'trt', t: 'Testosterone (TRT)' }, { id: 'thyroid', t: 'Thyroid medication' },
    { id: 'bp', t: 'Blood pressure meds' }, { id: 'antidep', t: 'Antidepressants / SSRIs' }, { id: 'blood_thin', t: 'Blood thinners' },
    { id: 'birth_control', t: 'Hormonal birth control' }, { id: 'other', t: 'Other prescription' }] });
window.SCREEN_conditions = multiScreen({ key: 'conditions', title: 'Any pre-existing conditions?', sub: 'Some are exclusions, others just shift the protocol.', none: true, icon: 'warning',
  opts: [{ id: 'cancer', t: 'Cancer (personal/family history)' }, { id: 'thyroid_d', t: 'Thyroid disorder' }, { id: 'diabetes', t: 'Diabetes (Type 1 or 2)' },
    { id: 'heart', t: 'Heart disease / arrhythmia' }, { id: 'kidney', t: 'Kidney or liver disease' }, { id: 'pancreatitis', t: 'Pancreatitis' }] });
window.SCREEN_pregnancy = pickScreen({ key: 'pregnancy', title: 'Are you pregnant or breastfeeding?',
  sub: 'Required — most peptides are not used during pregnancy.',
  opts: [{ id: 'no', icon: 'check', t: 'No' }, { id: 'yes', icon: 'warning', t: 'Yes' }, { id: 'trying', icon: 'heart', t: 'Trying to conceive' }] });
window.SCREEN_supplements = multiScreen({ key: 'supplements', title: 'Supplements you already take?', sub: 'Helps us avoid doubling up.', none: true, minOne: false, icon: 'leaf',
  opts: [{ id: 'protein', t: 'Protein / creatine' }, { id: 'vitd', t: 'Vitamin D / omega-3' }, { id: 'magnesium', t: 'Magnesium / sleep aids' },
    { id: 'preworkout', t: 'Pre-workout / caffeine' }, { id: 'nad', t: 'NAD / longevity supps' }, { id: 'other', t: 'Other' }] });

// ════════════════════════════════════════════════════════════════
// SECTION 7 — Commitment & projection
window.SCREEN_halfway = eduScreen({
  eyebrow: 'Almost there',
  title: "You're more thorough than 83% of clients.",
  sub: 'Last stretch — timeline and budget, then we build your stack. Across 6,200+ protocols: 91% report better sleep, 78% hit their goal, 4.8★ average rating.',
  cta: 'Keep going',
});
window.SCREEN_timeline = pickScreen({ key: 'timeline', title: 'When do you want results?',
  opts: [{ id: '4w', icon: 'clock', t: '4 weeks', sub: 'Aggressive' }, { id: '12w', icon: 'clock', t: '12 weeks', sub: 'Recommended' },
    { id: '6m', icon: 'clock', t: '6 months', sub: 'Sustainable' }, { id: 'flex', icon: 'clock', t: 'No deadline' }] });
window.SCREEN_budget = pickScreen({ key: 'budget', title: 'Monthly budget',
  sub: "We'll match quality to your range — single peptides start around $40/mo.",
  opts: [{ id: 'starter', icon: 'dollar', t: '$40 – $120', sub: '1–2 peptides' }, { id: 'core', icon: 'dollar', t: '$120 – $250', sub: 'Most popular — a full stack' },
    { id: 'elite', icon: 'dollar', t: '$250 – $500', sub: 'Advanced stacks' }, { id: 'sky', icon: 'dollar', t: '$500+', sub: 'Concierge' }] });

window.SCREEN_projection = function ({ state, next }) {
  const hasWeight = parseFloat(state.weight) > 0 && parseFloat(state.fl_target) > 0;
  if (hasWeight) {
    const cur = parseFloat(state.weight), tgt = parseFloat(state.fl_target), unit = state.weight_unit || 'lb';
    const goalDate = useM(() => { const wks = state.timeline === '4w' ? 4 : state.timeline === '12w' ? 12 : state.timeline === '6m' ? 26 : 16; const d = new Date(); d.setDate(d.getDate() + wks * 7); return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); }, [state.timeline]);
    const pts = useM(() => Array.from({ length: 14 }, (_, i) => { const t = i / 13; return cur + (tgt - cur) * (1 - Math.pow(1 - t, 1.6)); }), [cur, tgt]);
    const w = 480, h = 200, pad = 28, minY = Math.min(...pts) - 4, maxY = Math.max(...pts) + 4;
    const path = pts.map((y, i) => { const x = pad + (i / 13) * (w - pad * 2); const yy = h - pad - ((y - minY) / (maxY - minY)) * (h - pad * 2); return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${yy.toFixed(1)}`; }).join(' ');
    return (
      <>
        <div className="sp-screen-inner sp-enter">
          <TitleBlock eyebrow="Your projection" title="Here's where this could take you." />
          <div style={{ background: 'var(--card)', border: '1px solid var(--line)', borderRadius: 18, padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <div><div className="sp-tiny">Start</div><div style={{ fontSize: 30, fontFamily: 'var(--display)', fontWeight: 800 }}>{cur} <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>{unit}</span></div></div>
              <div style={{ textAlign: 'right' }}><div className="sp-tiny">By {goalDate}</div><div style={{ fontSize: 30, fontFamily: 'var(--display)', fontWeight: 800, color: 'var(--accent-deep)' }}>{tgt} <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>{unit}</span></div></div>
            </div>
            <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
              <defs><linearGradient id="projFill" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="var(--accent)" stopOpacity="0.45" /><stop offset="100%" stopColor="var(--accent)" stopOpacity="0" /></linearGradient></defs>
              <path d={path + ` L ${w - pad} ${h - pad} L ${pad} ${h - pad} Z`} fill="url(#projFill)" />
              <path d={path} fill="none" stroke="var(--accent-deep)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 4 }}>Based on 6,200+ similar clients. Individual results vary.</div>
          </div>
        </div>
        <SPFooter><button className="sp-cta" onClick={next}>Got it</button></SPFooter>
      </>
    );
  }
  // Non-weight goals: a milestone timeline instead of a weight curve.
  const steps = [
    { w: 'Week 1–2', t: 'Onboarding + first doses. Early signal (sleep, energy) for fast-acting peptides.' },
    { w: 'Week 3–4', t: 'Consistent effects settle in — the "this is working" window.' },
    { w: 'Week 6–8', t: 'Visible / measurable change in your target area.' },
    { w: 'Week 12', t: 'Full cycle benefit. MD reviews and adjusts your next phase.' },
  ];
  return (
    <>
      <div className="sp-screen-inner sp-enter">
        <TitleBlock eyebrow="Your projection" title="What your first 12 weeks look like." />
        <div className="sp-stack">
          {steps.map((s, i) => (
            <div key={i} className="sp-doc" style={{ alignItems: 'flex-start' }}>
              <div className="sp-pill accent" style={{ minWidth: 86, justifyContent: 'center' }}>{s.w}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45 }}>{s.t}</div>
            </div>
          ))}
        </div>
      </div>
      <SPFooter><button className="sp-cta" onClick={next}>Got it</button></SPFooter>
    </>
  );
};

// ════════════════════════════════════════════════════════════════
// SECTION 8 — Lead capture
window.SCREEN_name = inputScreen({ key: 'name', banner: 'Your protocol is ready', title: "What's your name?", sub: 'So your physician can address you directly.', placeholder: 'First name' });
window.SCREEN_dob = inputScreen({ key: 'dob', banner: 'Your protocol is ready', title: 'Date of birth', sub: 'Required for prescription verification. Must be 18+.', placeholder: 'MM / DD / YYYY' });
window.SCREEN_email = inputScreen({ key: 'email', banner: 'Your protocol is ready', title: 'Where should we send it?', sub: "You'll get your protocol summary, a plain-English peptide guide, and your consult invite.", placeholder: 'name@example.com', type: 'email', inputMode: 'email', lock: 'Encrypted & HIPAA-compliant. Never sold.' });
window.SCREEN_phone = inputScreen({ key: 'phone', title: 'Want a text when your review is back?', sub: 'Optional — we only text about your protocol. No spam.', placeholder: 'Mobile number', type: 'tel', inputMode: 'tel', optional: true });

// ════════════════════════════════════════════════════════════════
// SECTION 9 — Reveal, educate, convert
window.SCREEN_loading = function ({ state, next }) {
  const [step, setStep] = useS(0);
  const steps = ['Analyzing your answers…', 'Matching to 28 peptide compounds…', 'Cross-checking medications & conditions…', 'Filtering by your delivery preference…', 'Sequencing your 12-week cycle…', 'Routing to physician review…'];
  // Best-effort lead capture (no-op until /api/lead exists).
  useE(() => {
    try {
      fetch('/api/lead', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ source: 'protocol-quiz', submitted_at: new Date().toISOString(), answers: state }) }).catch(() => {});
    } catch (e) {}
  }, []);
  useE(() => { if (step >= steps.length) { const t = setTimeout(next, 350); return () => clearTimeout(t); } const t = setTimeout(() => setStep(step + 1), 650); return () => clearTimeout(t); }, [step]);
  const pct = Math.round((step / steps.length) * 100);
  return (
    <div className="sp-screen-inner sp-enter" style={{ alignItems: 'center', textAlign: 'center', paddingTop: 60 }}>
      <div style={{ position: 'relative', width: 160, height: 160 }}>
        <svg width="160" height="160" viewBox="0 0 160 160">
          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--line-strong)" strokeWidth="8" />
          <circle cx="80" cy="80" r="70" fill="none" stroke="var(--accent-deep)" strokeWidth="8" strokeLinecap="round" strokeDasharray={2 * Math.PI * 70} strokeDashoffset={(2 * Math.PI * 70) * (1 - pct / 100)} style={{ transform: 'rotate(-90deg)', transformOrigin: '80px 80px', transition: 'stroke-dashoffset 0.6s var(--ease)', filter: 'drop-shadow(0 0 10px var(--accent-glow))' }} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontFamily: 'var(--display)', fontWeight: 800, fontSize: 42 }}>{pct}%</div>
      </div>
      <h2 className="sp-h2">Building your protocol</h2>
      <p className="sp-sub" style={{ maxWidth: 360 }}>{steps[Math.min(step, steps.length - 1)]}</p>
      <div className="sp-dots"><span /><span /><span /></div>
    </div>
  );
};

function formatLabel(f) { return f === 'nasal' ? 'Nasal spray' : 'Injectable'; }

window.SCREEN_result = function ({ state, next }) {
  const rec = useM(() => window.recommendStack(state), [state]);
  const items = rec.items;
  const name = state.name || 'You';
  const fmtCount = items.reduce((a, p) => { a[p.format] = (a[p.format] || 0) + 1; return a; }, {});
  const fmtSummary = Object.entries(fmtCount).map(([f, n]) => `${n} ${f === 'nasal' ? 'nasal' : 'injectable'}`).join(' · ');
  return (
    <div className="sp-screen-inner sp-enter">
      <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <span className="sp-eyebrow">Protocol 0427-A · pending MD review</span>
        <h1 className="sp-h1">{name}'s protocol.</h1>
        <p className="sp-sub" style={{ margin: '0 auto' }}>Matched to your answers from our catalog. A licensed physician reviews and counter-signs within 24 hours.</p>
      </div>

      <div style={{ background: 'var(--card)', border: '1px solid var(--line)', borderRadius: 18, overflow: 'hidden' }}>
        <div style={{ background: 'linear-gradient(135deg, rgba(232,181,168,0.30), transparent 70%), var(--bg-2)', padding: '18px 22px', display: 'flex', alignItems: 'center', gap: 14, borderBottom: '1px solid var(--line)' }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--accent)', display: 'grid', placeItems: 'center', color: 'var(--ink)' }}><Icon name="atom" size={22} stroke={2} /></div>
          <div style={{ flex: 1 }}>
            <div className="sp-eyebrow" style={{ color: 'var(--ink-3)' }}>Your stack</div>
            <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, lineHeight: 1.1 }}>{items.length} {items.length === 1 ? 'peptide' : 'peptides'} · {fmtSummary}</div>
          </div>
        </div>
        <div>
          {items.map((p, i) => (
            <div key={p.id} style={{ padding: '16px 22px', borderTop: i > 0 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{p.name}</div>
                <div className="sp-pill" style={{ height: 22, fontSize: 11 }}>{formatLabel(p.format)}</div>
              </div>
              <div className="sp-mono" style={{ fontSize: 12, color: 'var(--accent-deep)', fontWeight: 600, marginTop: 4 }}>{p.schedule}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.45, marginTop: 4 }}>{p.summary}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="sp-doc">
        <div className="sp-doc-avatar" />
        <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 700 }}>Dr. Mara Eklund, MD will review your case</div><div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Typical turnaround: 6–18 hours</div></div>
      </div>

      <div style={{ background: 'var(--card)', border: '1px solid var(--line)', borderRadius: 18, padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div className="sp-tiny">Estimated monthly</div>
          <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 34 }}>{rec.monthly ? <>${rec.monthly}<span style={{ fontSize: 16, color: 'var(--ink-3)' }}>/mo</span></> : <span style={{ fontSize: 22 }}>At consult</span>}</div>
          {rec.hasPending && rec.monthly && <div className="sp-tiny" style={{ marginTop: 2 }}>+ GLP-1 priced at consult</div>}
        </div>
        <div className="sp-pill accent">In your budget</div>
      </div>

      <SPFooter><button className="sp-cta" onClick={next}>How it works →</button></SPFooter>
    </div>
  );
};

window.SCREEN_education = function ({ state, next }) {
  const rec = useM(() => window.recommendStack(state), [state]);
  return (
    <div className="sp-screen-inner sp-enter">
      <TitleBlock eyebrow="Learn your stack" title="How each one works." sub="Plain English — so you actually understand what you're taking." />
      <div className="sp-stack" style={{ gap: 14 }}>
        {rec.items.map(p => (
          <div key={p.id} style={{ background: 'var(--card)', border: '1px solid var(--line)', borderRadius: 18, padding: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
              <div style={{ fontWeight: 700, fontSize: 17 }}>{p.name}</div>
              <div className="sp-pill" style={{ height: 22, fontSize: 11 }}>{formatLabel(p.format)}</div>
            </div>
            <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, marginTop: 8 }}>{p.desc}</div>
            <div className="sp-chip-row" style={{ marginTop: 12 }}>
              {(p.uses || []).map((u, i) => <span key={i} className="sp-pill" style={{ fontSize: 11 }}>{u}</span>)}
            </div>
            <div className="sp-mono" style={{ fontSize: 12, color: 'var(--accent-deep)', fontWeight: 600, marginTop: 12 }}>Dose: {p.schedule}</div>
          </div>
        ))}
      </div>
      <div className="sp-doc">
        <div className="sp-card-icon dot" style={{ width: 36, height: 36 }}><Icon name="info" size={18} /></div>
        <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.45 }}>Final doses are set by your physician after reviewing your full intake. Nothing ships before MD sign-off.</div>
      </div>
      <SPFooter><button className="sp-cta" onClick={next}>Start my protocol →</button></SPFooter>
    </div>
  );
};

window.SCREEN_cta = function ({ state }) {
  return (
    <div className="sp-screen-inner sp-enter">
      <SuccessBanner>Your protocol is saved to {state.email || 'your inbox'}</SuccessBanner>
      <TitleBlock title="One step left: meet your physician." sub="A licensed MD confirms your stack and writes the prescription. Free, ~15 minutes, virtual." />
      <div className="sp-stack" style={{ gap: 10 }}>
        {['Physician review & prescription', 'Compounded & shipped to your door', 'Unlimited dose adjustments', 'Cancel anytime — no penalty'].map((l, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--ink-2)' }}>
            <div style={{ width: 20, height: 20, borderRadius: 999, background: 'var(--accent)', color: 'var(--ink)', display: 'grid', placeItems: 'center' }}><Icon name="check" size={12} stroke={3} /></div>
            <span>{l}</span>
          </div>
        ))}
      </div>
      <SPFooter>
        <a className="sp-cta" href="/consult.html"><Icon name="calendar" size={16} stroke={2.2} /> Book my free consult</a>
        <a className="sp-cta ghost" href="/shop.html">Browse the full catalog</a>
        <div className="sp-tiny" style={{ textAlign: 'center' }}>90-day satisfaction guarantee · refunded if the MD can't clear your protocol.</div>
      </SPFooter>
    </div>
  );
};