// Onboarding — 3 value-prop screens (visual-heavy) + Add child
const { Icon, Phone, HomeIndicator } = window;

// Shared shell
function OnboardingShell({ step = 0, total = 4, children, primary = 'Continue', secondary, dark = true }) {
  const T = dark ? UN.d : UN.l;
  return (
    <Phone mode={dark ? 'd' : 'l'} time="9:41">
      <div style={{
        display: 'flex', flexDirection: 'column', height: '100%',
      }}>
        {/* Top — logo */}
        <div style={{ padding: '4px 26px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <UnpanicMark size={18} color={T.sage}/>
            <span style={{ fontSize: 12, fontWeight: 700, color: T.text, letterSpacing: 1.6 }}>UNPANIC</span>
          </div>
          <button style={{
            fontSize: 13, color: T.textMute, fontWeight: 500,
            background: 'transparent', border: 'none',
          }}>Skip</button>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          {children}
        </div>

        {/* Footer: progress + CTA */}
        <div style={{ padding: '0 26px 4px' }}>
          <div style={{ display: 'flex', gap: 5, marginBottom: 18 }}>
            {Array.from({ length: total }).map((_, i) => (
              <div key={i} style={{
                flex: 1, height: 3, borderRadius: 4,
                background: i <= step ? T.sage : T.surface2,
              }}/>
            ))}
          </div>
          <button style={window.btnPrimaryStyle('d', { height: 56, radius: 18 })}>
            {primary}
            <Icon name="chev" size={18} color={dark ? '#0E1A14' : '#fff'} strokeWidth={2.4}/>
          </button>
          {secondary && (
            <button style={{
              height: 40, width: '100%', background: 'transparent', border: 'none',
              color: T.textDim, fontFamily: UN.font.body, fontSize: 13.5, fontWeight: 500,
              marginTop: 4,
            }}>{secondary}</button>
          )}
        </div>
        <HomeIndicator mode={dark ? 'd' : 'l'}/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// 1. Caregiver sync
// ═══════════════════════════════════════════════════════════
function OnboardSync() {
  const T = UN.d;
  return (
    <OnboardingShell step={0} total={11} primary="Continue" secondary="I have a family code">
      <div style={{
        flex: 1, padding: '24px 0 16px',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      }}>
        {/* Visual: three phones overlap with shared timeline */}
        <div style={{
          height: 340, position: 'relative',
          marginBottom: 18,
        }}>
          {/* back phone */}
          <MiniPhone style={{ position: 'absolute', left: 24, top: 28, transform: 'rotate(-7deg)', opacity: 0.55 }} who="Sarah" line1="2.5mL Tylenol" line2="logged 4 min ago" tone="#a5b8c9"/>
          {/* mid phone */}
          <MiniPhone style={{ position: 'absolute', right: 22, top: 14, transform: 'rotate(6deg)', opacity: 0.7 }} who="Grandma" line1="38.4°C · ear" line2="logged just now" tone="#d3a89a"/>
          {/* front phone */}
          <div style={{
            position: 'absolute', left: '50%', top: 60, transform: 'translateX(-50%)',
            width: 200, padding: 14, borderRadius: 20,
            background: T.surface, border: `1px solid ${T.line2}`,
            boxShadow: '0 16px 40px rgba(0,0,0,0.4)',
          }}>
            <div style={{ fontSize: 10, color: T.textMute, letterSpacing: 0.8, fontWeight: 600, textTransform: 'uppercase' }}>
              Live · 3 watching
            </div>
            <div style={{ marginTop: 8, fontSize: 14, fontWeight: 600, color: T.text, letterSpacing: -0.2 }}>
              Maeve · Day 3
            </div>
            <div style={{
              marginTop: 10, padding: '10px 12px',
              background: T.trustSoft, border: `1px solid rgba(112,144,201,0.28)`,
              borderRadius: 11, display: 'flex', gap: 8, alignItems: 'center',
            }}>
              <div style={{
                width: 24, height: 24, borderRadius: 24, background: '#d3a89a',
                color: '#fff', fontWeight: 700, fontSize: 11,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>G</div>
              <div style={{ flex: 1, fontSize: 11.5, lineHeight: 1.3, color: T.text }}>
                <strong style={{ fontWeight: 600 }}>Grandma</strong> logged<br/>
                <span style={{ color: T.trust, fontWeight: 600 }}>2.5mL Tylenol</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 4, marginTop: 10 }}>
              {[1,1,1,1,0,0,0,0].map((on,i) => (
                <div key={i} style={{
                  flex: 1, height: 18, borderRadius: 3,
                  background: on ? T.sev.warm : T.surface2, opacity: on ? 0.6 + i*0.06 : 1,
                }}/>
              ))}
            </div>
          </div>
        </div>

        <div style={{ padding: '0 26px' }}>
          <div style={{
            display: 'inline-block', padding: '4px 10px', borderRadius: 99,
            background: T.sageSoft, color: T.sage,
            fontSize: 10.5, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase',
            marginBottom: 12,
          }}>One</div>
          <h1 style={{
            margin: 0, fontFamily: UN.font.body,
            fontSize: 30, fontWeight: 700, lineHeight: 1.08,
            letterSpacing: -0.8, color: T.text, textWrap: 'pretty',
          }}>
            Every caregiver sees the same room.
          </h1>
          <p style={{
            margin: '10px 0 0', fontSize: 14.5, color: T.textDim, lineHeight: 1.5,
          }}>
            No double-doses. No "did Grandma already give the Tylenol?" at 3am.
          </p>
        </div>
      </div>
    </OnboardingShell>
  );
}

function MiniPhone({ who, line1, line2, tone, style }) {
  const T = UN.d;
  return (
    <div style={{
      width: 160, padding: '10px 12px', borderRadius: 16,
      background: T.surface, border: `1px solid ${T.line}`,
      boxShadow: '0 8px 22px rgba(0,0,0,0.3)', ...style,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <div style={{
          width: 20, height: 20, borderRadius: 20, background: tone,
          color: '#fff', fontWeight: 700, fontSize: 10,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{who[0]}</div>
        <span style={{ fontSize: 11, fontWeight: 600, color: T.text }}>{who}</span>
      </div>
      <div style={{ fontSize: 12, color: T.text, fontWeight: 500, letterSpacing: -0.1 }}>{line1}</div>
      <div style={{ fontSize: 10.5, color: T.textMute, marginTop: 2 }}>{line2}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// 2. Voice log
// ═══════════════════════════════════════════════════════════
function OnboardVoice() {
  const T = UN.d;
  return (
    <OnboardingShell step={1} total={11}>
      <div style={{
        flex: 1, padding: '24px 0 16px',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      }}>
        <div style={{
          height: 340, position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {/* Pulsing rings */}
          {[160, 120, 88].map((r, i) => (
            <div key={i} style={{
              position: 'absolute', width: r*2, height: r*2, borderRadius: r*2,
              border: `1px solid ${T.sageEdge}`,
              opacity: 0.4 - i*0.1,
            }}/>
          ))}
          {/* Mic */}
          <div style={{
            width: 120, height: 120, borderRadius: 120,
            background: `radial-gradient(circle at 30% 30%, ${T.sage}, ${T.sageDeep})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 16px 50px rgba(143,181,162,0.4)',
          }}>
            <Icon name="mic" size={48} color="#0E1A14" strokeWidth={2}/>
          </div>
          {/* Transcript bubble */}
          <div style={{
            position: 'absolute', top: 30, right: 16,
            background: T.surface, border: `1px solid ${T.line2}`,
            borderRadius: 14, padding: '10px 14px',
            boxShadow: '0 12px 30px rgba(0,0,0,0.3)',
            maxWidth: 220,
          }}>
            <div style={{ fontSize: 10, color: T.textMute, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 4 }}>
              You said
            </div>
            <div style={{ fontSize: 12.5, fontStyle: 'italic', color: T.text, lineHeight: 1.4 }}>
              "She just threw up again and won't drink the Pedialyte."
            </div>
          </div>
          {/* Parsed chips */}
          <div style={{
            position: 'absolute', bottom: 20, left: 18,
            display: 'flex', gap: 6, flexWrap: 'wrap', maxWidth: 220,
          }}>
            {[
              { i: 'vomit', t: 'Vomit · small', c: T.sev.warm },
              { i: 'drop',  t: 'Refused fluids', c: T.trust },
            ].map((c, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 6,
                padding: '6px 10px', borderRadius: 99,
                background: T.surface, border: `1px solid ${T.line2}`,
                fontSize: 11, color: T.text, fontWeight: 500,
              }}>
                <Icon name={c.i} size={11} color={c.c} strokeWidth={2}/>
                {c.t}
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: '0 26px' }}>
          <div style={{
            display: 'inline-block', padding: '4px 10px', borderRadius: 99,
            background: T.sageSoft, color: T.sage,
            fontSize: 10.5, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase',
            marginBottom: 12,
          }}>Two</div>
          <h1 style={{
            margin: 0, fontFamily: UN.font.body,
            fontSize: 30, fontWeight: 700, lineHeight: 1.08,
            letterSpacing: -0.8, color: T.text, textWrap: 'pretty',
          }}>
            One-handed at 3am.<br/>Hold to talk.
          </h1>
          <p style={{
            margin: '10px 0 0', fontSize: 14.5, color: T.textDim, lineHeight: 1.5,
          }}>
            Speak however you'd describe it to your partner. We'll structure it.
          </p>
        </div>
      </div>
    </OnboardingShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 3. Doctor handoff
// ═══════════════════════════════════════════════════════════
function OnboardDoctor() {
  const T = UN.d;
  return (
    <OnboardingShell step={2} total={11}>
      <div style={{
        flex: 1, padding: '24px 0 16px',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      }}>
        <div style={{
          height: 340, position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '0 28px',
        }}>
          {/* Pediatrician PDF mock */}
          <div style={{
            width: '100%', maxWidth: 280, background: UN.l.surface, color: UN.l.text,
            borderRadius: 12, padding: '16px 14px 18px',
            boxShadow: '0 18px 50px rgba(0,0,0,0.45)',
            border: `1px solid rgba(0,0,0,0.08)`,
            transform: 'rotate(-2deg)',
          }}>
            <div style={{ fontSize: 8.5, color: UN.l.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
              Unpanic handoff
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4, color: UN.l.text, letterSpacing: -0.2 }}>
              Maeve, 4 yrs · 15.4kg
            </div>
            <div style={{ fontSize: 10, color: UN.l.textDim, marginTop: 1 }}>
              Stomach flu · day 3
            </div>
            {/* mini timeline */}
            <div style={{ marginTop: 10, height: 60, background: UN.l.surface2, borderRadius: 8, padding: 6, position: 'relative' }}>
              <svg width="100%" height="48" viewBox="0 0 240 48">
                <path d="M0,30 C30,32 50,18 80,16 C110,14 130,28 160,26 C190,24 210,32 240,30"
                      fill="none" stroke={UN.l.sev.hot} strokeWidth="1.5"/>
                {[0.18, 0.42, 0.7, 0.92].map((p,i) => (
                  <line key={i} x1={p*240} x2={p*240} y1="6" y2="44" stroke={UN.l.trust} strokeWidth="1" strokeDasharray="2 2" opacity="0.6"/>
                ))}
              </svg>
            </div>
            <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6 }}>
              {[
                ['Peak', '39.3°'],
                ['Doses', '4'],
                ['Vomits', '3'],
              ].map(([l, v], i) => (
                <div key={i} style={{ padding: 6, background: UN.l.surface2, borderRadius: 6 }}>
                  <div style={{ fontSize: 7.5, color: UN.l.textMute, letterSpacing: 0.4, fontWeight: 600, textTransform: 'uppercase' }}>{l}</div>
                  <div style={{ fontSize: 12, fontWeight: 600, marginTop: 1, color: UN.l.text }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          {/* doctor avatar bubble */}
          <div style={{
            position: 'absolute', right: 10, top: 18,
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 12px', borderRadius: 99,
            background: T.surface, border: `1px solid ${T.line2}`,
            boxShadow: '0 8px 20px rgba(0,0,0,0.3)',
          }}>
            <div style={{
              width: 24, height: 24, borderRadius: 24,
              background: T.trust, color: '#fff',
              fontSize: 11, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>Rx</div>
            <span style={{ fontSize: 11.5, color: T.text, fontWeight: 500 }}>Dr. Patel · viewing</span>
          </div>
        </div>

        <div style={{ padding: '0 26px' }}>
          <div style={{
            display: 'inline-block', padding: '4px 10px', borderRadius: 99,
            background: T.sageSoft, color: T.sage,
            fontSize: 10.5, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase',
            marginBottom: 12,
          }}>Three</div>
          <h1 style={{
            margin: 0, fontFamily: UN.font.body,
            fontSize: 30, fontWeight: 700, lineHeight: 1.08,
            letterSpacing: -0.8, color: T.text, textWrap: 'pretty',
          }}>
            Share the whole story<br/>with one tap.
          </h1>
          <p style={{
            margin: '10px 0 0', fontSize: 14.5, color: T.textDim, lineHeight: 1.5,
          }}>
            A link your pediatrician can open. No PDFs to assemble.
          </p>
        </div>
      </div>
    </OnboardingShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 8. Doctor confirmation — has this been confirmed?
// ═══════════════════════════════════════════════════════════
function OnboardDoctorConfirm() {
  const T = UN.d;
  return (
    <OnboardingShell step={7} total={11} primary="Confirmed · load tonsillitis">
      <div style={{ flex: 1, padding: '20px 26px 12px', display: 'flex', flexDirection: 'column' }}>
        <h1 style={{
          margin: 0, fontSize: 28, fontWeight: 700, color: T.text,
          letterSpacing: -0.6, lineHeight: 1.1,
        }}>Did a doctor<br/>confirm this?</h1>
        <p style={{ margin: '8px 0 24px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
          We pull a different plan if it's confirmed (full course tracking) vs. suspected (loose tracking).
        </p>

        {/* Three options as cards */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <OptionCard
            sel={true} tone={T.sage}
            icon="check"
            title="Yes, confirmed"
            sub="Load the full tonsillitis course"
          />
          <OptionCard
            tone={UN.d.sev.warm}
            icon="alert"
            title="Not yet · just suspected"
            sub="Track loosely — no antibiotic schedule"
          />
          <OptionCard
            tone={T.textDim}
            icon="thermo"
            title="Just unwell · I don't know"
            sub="Generic template — temp, fluids, observations"
          />
        </div>
      </div>
    </OnboardingShell>
  );
}

function OptionCard({ sel, tone, icon, title, sub }) {
  const T = UN.d;
  return (
    <div style={{
      padding: '14px 16px', borderRadius: 16,
      background: sel ? T.sageSoft : T.surface,
      border: `1.5px solid ${sel ? T.sage : T.line2}`,
      display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: sel ? '0 6px 14px rgba(143,181,162,0.18)' : 'none',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: sel ? T.sage : `${tone}22`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name={icon} size={18} color={sel ? '#0E1A14' : tone} strokeWidth={2}/>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14.5, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>{title}</div>
        <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 2, lineHeight: 1.35 }}>{sub}</div>
      </div>
      <div style={{
        width: 18, height: 18, borderRadius: 18,
        border: `1.5px solid ${sel ? T.sage : T.line2}`,
        background: sel ? T.sage : 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        {sel && <div style={{ width: 7, height: 7, borderRadius: 7, background: T.bg }}/>}
      </div>
    </div>
  );
}

function OnboardAddChild() {
  const T = UN.d;
  return (
    <OnboardingShell step={8} total={11} primary="Add Maeve">
      <div style={{ flex: 1, padding: '20px 26px' }}>
        <h1 style={{
          margin: '8px 0 0', fontSize: 28, fontWeight: 700,
          color: T.text, letterSpacing: -0.7, lineHeight: 1.1,
        }}>
          Who are we<br/>tracking?
        </h1>
        <p style={{ margin: '8px 0 22px', fontSize: 14, color: T.textDim, lineHeight: 1.5 }}>
          We need a name, an age, and a weight (for dose suggestions). That's all.
        </p>

        {/* Avatar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
          <div style={{
            width: 64, height: 64, borderRadius: 64,
            background: 'linear-gradient(135deg, #d3a89a, #8b6c5c)',
            color: '#fff', fontWeight: 700, fontSize: 24,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `2px solid ${T.line2}`,
          }}>M</div>
          <div>
            <div style={{ fontSize: 13.5, color: T.text, fontWeight: 600 }}>Photo · optional</div>
            <button style={{
              marginTop: 4, fontSize: 12, color: T.sage, fontWeight: 600,
              background: 'transparent', border: 'none', padding: 0,
            }}>Choose from library →</button>
          </div>
        </div>

        {/* Inputs */}
        {[
          { l: 'Name',           v: 'Maeve',   k: 'name' },
          { l: 'Date of birth',  v: 'Mar 8, 2022 · 4 yrs', k: 'dob' },
          { l: 'Weight (for doses)', v: '15.4 kg', k: 'weight' },
        ].map((f,i) => (
          <div key={i} style={{
            marginBottom: 10,
            background: T.surface, border: `1px solid ${T.line2}`,
            borderRadius: 14, padding: '12px 16px',
          }}>
            <div style={{ fontSize: 11, color: T.textMute, letterSpacing: 0.4, fontWeight: 600, textTransform: 'uppercase' }}>{f.l}</div>
            <div style={{ fontSize: 16, color: T.text, fontWeight: 500, marginTop: 3, letterSpacing: -0.2 }}>{f.v}</div>
          </div>
        ))}

        <div style={{
          marginTop: 20, padding: '12px 14px',
          background: T.surface2, border: `1px solid ${T.line}`,
          borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <Icon name="people" size={16} color={T.sage} strokeWidth={2}/>
          <div style={{ fontSize: 12.5, color: T.textDim, lineHeight: 1.45 }}>
            You can add more kids, partners and grandparents next. Or later.
          </div>
        </div>
      </div>
    </OnboardingShell>
  );
}

function UnpanicMark({ size = 24, color = '#8FB5A2' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.6"/>
      <circle cx="12" cy="12" r="4" fill={color}/>
    </svg>
  );
}

// ═══════════════════════════════════════════════════════════
// 4. Country / locale
// ═══════════════════════════════════════════════════════════
function OnboardCountry() {
  const T = UN.d;
  const countries = [
    { flag: '🇬🇧', t: 'United Kingdom', sub: 'NHS · Celsius · kg', sel: true },
    { flag: '🇺🇸', t: 'United States',  sub: 'AAP · Fahrenheit · lb' },
    { flag: '🇨🇦', t: 'Canada',         sub: 'CPS · Celsius · kg' },
    { flag: '🇦🇺', t: 'Australia',      sub: 'RACGP · Celsius · kg' },
    { flag: '🇩🇪', t: 'Germany',        sub: 'DGKJ · Celsius · kg' },
    { flag: '🇪🇸', t: 'Spain',          sub: 'AEP · Celsius · kg' },
  ];
  return (
    <OnboardingShell step={3} total={11} primary="Continue">
      <div style={{ padding: '24px 26px 16px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{
          margin: 0, fontSize: 28, fontWeight: 700, color: T.text,
          letterSpacing: -0.6, lineHeight: 1.1,
        }}>Where are you?</h1>
        <p style={{ margin: '8px 0 18px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
          We'll match guidelines to your country (NHS / AAP / etc) and set defaults — Celsius vs Fahrenheit, kg vs lb. Change anytime in Settings.
        </p>

        {/* Detected */}
        <div style={{
          padding: '10px 12px', borderRadius: 12, marginBottom: 14,
          background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ fontSize: 20 }}>🇬🇧</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, color: T.text, fontWeight: 600 }}>Detected: United Kingdom</div>
            <div style={{ fontSize: 10.5, color: T.textMute, marginTop: 1 }}>via SIM and locale</div>
          </div>
          <Icon name="check" size={16} color={T.sage} strokeWidth={2.4}/>
        </div>

        {/* Searchable list */}
        <div style={{
          padding: '8px 12px', borderRadius: 10, marginBottom: 10,
          background: T.surface, border: `1px solid ${T.line2}`,
          fontSize: 13, color: T.textMute,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={T.textMute} strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
          Search countries…
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {countries.map((c, i) => (
            <div key={i} style={{
              padding: '12px 14px',
              borderBottom: i < countries.length - 1 ? `1px solid ${T.line}` : 'none',
              display: 'flex', alignItems: 'center', gap: 12,
              background: c.sel ? 'rgba(143,181,162,0.04)' : 'transparent',
            }}>
              <div style={{ fontSize: 22 }}>{c.flag}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, color: T.text, fontWeight: c.sel ? 700 : 500, letterSpacing: -0.1 }}>{c.t}</div>
                <div style={{ fontSize: 11.5, color: T.textMute, marginTop: 1 }}>{c.sub}</div>
              </div>
              <div style={{
                width: 18, height: 18, borderRadius: 18,
                border: `1.5px solid ${c.sel ? T.sage : T.line2}`,
                background: c.sel ? T.sage : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {c.sel && <Icon name="check" size={10} color="#0E1A14" strokeWidth={3}/>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </OnboardingShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 5. Who you are
// ═══════════════════════════════════════════════════════════
function OnboardWhoAreYou() {
  const T = UN.d;
  const roles = [
    { id: 'mum',   t: 'Mum',         sel: true },
    { id: 'dad',   t: 'Dad' },
    { id: 'gp',    t: 'Grandparent' },
    { id: 'sit',   t: 'Sitter' },
    { id: 'nan',   t: 'Nanny' },
    { id: 'oth',   t: 'Other' },
  ];
  return (
    <OnboardingShell step={4} total={11} primary="Continue">
      <div style={{ flex: 1, padding: '24px 26px 16px', display: 'flex', flexDirection: 'column' }}>
        <h1 style={{
          margin: 0, fontSize: 30, fontWeight: 700, color: T.text,
          letterSpacing: -0.7, lineHeight: 1.08,
        }}>First, you.</h1>
        <p style={{ margin: '8px 0 24px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
          The kid is in the middle of the room — but we need to know who you are so caregivers know who's logging.
        </p>

        {/* Big avatar preview */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22,
        }}>
          <div style={{
            width: 72, height: 72, borderRadius: 72,
            background: 'linear-gradient(135deg, #c2b39a, #6B8E7D)',
            color: '#fff', fontWeight: 700, fontSize: 28,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `2px solid ${T.line2}`,
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 20px rgba(0,0,0,0.3)',
          }}>K</div>
          <div>
            <div style={{ fontSize: 11, color: T.textMute, letterSpacing: 0.5, fontWeight: 700, textTransform: 'uppercase' }}>
              Preview
            </div>
            <div style={{ fontSize: 16, color: T.text, fontWeight: 700, marginTop: 4, letterSpacing: -0.2 }}>
              Kat · Mum
            </div>
            <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 2 }}>
              How you'll show up to Sarah and Grandma
            </div>
          </div>
        </div>

        {/* Name */}
        <div style={{ marginBottom: 18 }}>
          <div style={{ fontSize: 11, color: T.textDim, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8 }}>
            Your name
          </div>
          <div style={{
            padding: '14px 16px', borderRadius: 14,
            background: T.surface, border: `1.5px solid ${T.sage}`,
            fontSize: 16, color: T.text, fontWeight: 500, letterSpacing: -0.2,
          }}>Kat</div>
        </div>

        {/* Role chips */}
        <div>
          <div style={{ fontSize: 11, color: T.textDim, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8 }}>
            Role
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {roles.map(r => (
              <div key={r.id} style={{
                padding: '10px 14px', borderRadius: 99,
                background: r.sel ? T.sageSoft : T.surface,
                border: `1.5px solid ${r.sel ? T.sage : T.line2}`,
                fontSize: 13, color: r.sel ? T.text : T.textDim,
                fontWeight: r.sel ? 700 : 500, letterSpacing: -0.1,
              }}>{r.t}</div>
            ))}
          </div>
        </div>
      </div>
    </OnboardingShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 6. Is your child sick right now?
// ═══════════════════════════════════════════════════════════
function OnboardIsChildSick() {
  const T = UN.d;
  return (
    <OnboardingShell step={5} total={11} primary="Continue · they're sick">
      <div style={{ flex: 1, padding: '20px 26px 12px', display: 'flex', flexDirection: 'column' }}>
        <h1 style={{
          margin: 0, fontSize: 28, fontWeight: 700, color: T.text,
          letterSpacing: -0.6, lineHeight: 1.1,
        }}>Right now —<br/>are they sick?</h1>
        <p style={{ margin: '8px 0 0', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
          If yes, we'll start tracking from the first tap. If no, Unpanic sleeps until you need it.
        </p>

        <div style={{ flex: 1 }}/>

        {/* Two big visual options */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
          {/* YES */}
          <div style={{
            flex: 1, padding: '24px 16px 18px',
            background: T.sageSoft, border: `2px solid ${T.sage}`,
            borderRadius: 20, position: 'relative',
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 24px rgba(143,181,162,0.18)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 44,
                background: 'rgba(232,176,92,0.22)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="thermo" size={22} color={UN.d.sev.warm} strokeWidth={2}/>
              </div>
              <div style={{
                width: 22, height: 22, borderRadius: 22,
                background: T.sage,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="check" size={12} color="#0E1A14" strokeWidth={3}/>
              </div>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, color: T.text, letterSpacing: -0.3 }}>Yes</div>
            <div style={{ fontSize: 12, color: T.textDim, marginTop: 4, lineHeight: 1.4 }}>
              Start tracking now.
            </div>
          </div>
          {/* NO */}
          <div style={{
            flex: 1, padding: '24px 16px 18px',
            background: T.surface, border: `2px solid ${T.line2}`,
            borderRadius: 20, opacity: 0.7,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 44,
              background: T.surface2,
              display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16,
            }}>
              <Icon name="check" size={22} color={T.textDim} strokeWidth={2}/>
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, color: T.text, letterSpacing: -0.3 }}>No</div>
            <div style={{ fontSize: 12, color: T.textMute, marginTop: 4, lineHeight: 1.4 }}>
              We'll sleep.
            </div>
          </div>
        </div>
      </div>
    </OnboardingShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 7. What with?
// ═══════════════════════════════════════════════════════════
function OnboardWhatWith() {
  const T = UN.d;
  const ailments = [
    { id: 'fever', t: 'Fever',         icon: 'thermo' },
    { id: 'stom',  t: 'Stomach flu',   icon: 'vomit', sel: true },
    { id: 'cold',  t: 'Cold',          icon: 'drop' },
    { id: 'ear',   t: 'Ear infection', icon: 'alert' },
    { id: 'tons',  t: 'Tonsillitis',   icon: 'pill' },
    { id: 'rash',  t: 'Rash',          icon: 'camera' },
    { id: 'cof',   t: 'Cough',         icon: 'mic' },
    { id: 'cus',   t: 'Other / unsure', icon: 'plus' },
  ];
  return (
    <OnboardingShell step={6} total={11} primary="Continue with stomach flu" secondary="I'm not sure yet — skip">
      <div style={{ padding: '20px 26px 16px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h1 style={{
          margin: 0, fontSize: 28, fontWeight: 700, color: T.text,
          letterSpacing: -0.6, lineHeight: 1.1,
        }}>What's<br/>going on?</h1>
        <p style={{ margin: '8px 0 22px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
          We'll pull the right template — temperatures, doses, photos, red-flags. You can change later.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {ailments.map(a => (
            <div key={a.id} style={{
              padding: '14px 14px',
              background: a.sel ? T.sageSoft : T.surface,
              border: `1.5px solid ${a.sel ? T.sage : T.line2}`,
              borderRadius: 14,
              display: 'flex', alignItems: 'center', gap: 12,
              boxShadow: a.sel ? 'inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 14px rgba(143,181,162,0.15)' : 'none',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: a.sel ? T.sage : T.surface2,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={a.icon} size={16}
                      color={a.sel ? '#0E1A14' : T.textDim} strokeWidth={1.9}/>
              </div>
              <div style={{ fontSize: 13.5, color: T.text, fontWeight: a.sel ? 700 : 500, letterSpacing: -0.1 }}>
                {a.t}
              </div>
            </div>
          ))}
        </div>
      </div>
    </OnboardingShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 8. PERSONALISING — loading screen
// ═══════════════════════════════════════════════════════════
function OnboardPersonalising() {
  const T = UN.d;
  return (
    <Phone mode="d" time="9:41">
      <div style={{
        height: '100%',
        background: `radial-gradient(circle at 50% 30%, rgba(143,181,162,0.18), transparent 65%), ${T.bg}`,
        display: 'flex', flexDirection: 'column',
        padding: '0 26px',
      }}>
        {/* Top — logo */}
        <div style={{ paddingTop: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
          <UnpanicMark size={18} color={T.sage}/>
          <span style={{ fontSize: 12, fontWeight: 700, color: T.text, letterSpacing: 1.6 }}>UNPANIC</span>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          {/* Big ring spinner */}
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
            <div style={{ position: 'relative', width: 132, height: 132 }}>
              <svg width="132" height="132" viewBox="0 0 132 132">
                <defs>
                  <linearGradient id="rg" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stopColor={T.sage}/>
                    <stop offset="100%" stopColor={T.sageDeep}/>
                  </linearGradient>
                </defs>
                <circle cx="66" cy="66" r="56" fill="none" stroke={T.surface2} strokeWidth="6"/>
                <circle cx="66" cy="66" r="56" fill="none" stroke="url(#rg)" strokeWidth="6"
                        strokeDasharray="220 352" strokeLinecap="round"
                        transform="rotate(-90 66 66)"/>
              </svg>
              <div style={{
                position: 'absolute', inset: 0,
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              }}>
                <div style={{
                  fontFamily: UN.font.num, fontSize: 38, fontWeight: 600, letterSpacing: -1.3,
                  color: T.text, fontVariantNumeric: 'tabular-nums', lineHeight: 1,
                }}>62%</div>
                <div style={{
                  fontSize: 10, color: T.textMute, marginTop: 4, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
                }}>Building plan</div>
              </div>
            </div>
          </div>

          {/* Title */}
          <h1 style={{
            margin: 0, fontFamily: UN.font.body, fontSize: 26, fontWeight: 700,
            color: T.text, letterSpacing: -0.6, lineHeight: 1.15, textAlign: 'center',
          }}>
            Personalising your<br/>stomach-flu journey.
          </h1>
          <p style={{
            margin: '10px 0 28px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5, textAlign: 'center',
          }}>
            One second. We're adjusting for Maeve's age and weight.
          </p>

          {/* Pulled-in checklist */}
          <div style={{
            background: T.surface, border: `1px solid ${T.line2}`, borderRadius: 16,
            padding: '8px 14px',
          }}>
            {[
              { t: 'AAP fever thresholds (4-yr scale)',          done: true },
              { t: 'Tylenol & Motrin dosing for 15.4 kg',        done: true },
              { t: 'Hydration cues · vomit / fluid intake',      done: true },
              { t: 'Red-flag rules · wet-diaper, lethargy',      done: false, active: true },
              { t: 'Caregiver template · Sarah, Grandma slots',  done: false },
            ].map((row, i, arr) => (
              <div key={i} style={{
                padding: '9px 0', display: 'flex', alignItems: 'center', gap: 10,
                borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
              }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 18,
                  background: row.done ? T.sageSoft : T.surface2,
                  border: `1px solid ${row.done ? T.sageEdge : T.line2}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  {row.done ? (
                    <Icon name="check" size={10} color={T.sage} strokeWidth={2.8}/>
                  ) : row.active ? (
                    <div style={{
                      width: 6, height: 6, borderRadius: 6, background: T.sage,
                      boxShadow: `0 0 0 3px ${T.sageSoft}`,
                    }}/>
                  ) : null}
                </div>
                <div style={{
                  flex: 1, fontSize: 12.5, color: T.text,
                  fontWeight: row.done || row.active ? 500 : 400,
                  opacity: row.done ? 1 : row.active ? 0.85 : 0.45,
                  letterSpacing: -0.1,
                }}>{row.t}</div>
              </div>
            ))}
          </div>
        </div>

        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// 9. SIGN UP — post-paywall
// ═══════════════════════════════════════════════════════════
function OnboardSignUp() {
  const T = UN.d;
  return (
    <Phone mode="d" time="9:41">
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '0 26px' }}>
        {/* Top — logo */}
        <div style={{ paddingTop: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
          <UnpanicMark size={18} color={T.sage}/>
          <span style={{ fontSize: 12, fontWeight: 700, color: T.text, letterSpacing: 1.6 }}>UNPANIC</span>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          {/* Subscription active badge */}
          <div style={{
            marginTop: 20, marginBottom: 18,
            padding: '12px 14px', borderRadius: 14,
            background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
            display: 'flex', alignItems: 'center', gap: 11,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 10,
              background: T.sage,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 10px rgba(143,181,162,0.4)',
            }}>
              <Icon name="check" size={16} color="#0E1A14" strokeWidth={3}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>
                Your trial is active
              </div>
              <div style={{ fontSize: 11, color: T.textDim, marginTop: 1 }}>
                3 days · then £4.99/mo
              </div>
            </div>
          </div>

          <h1 style={{
            margin: 0, fontSize: 30, fontWeight: 700, color: T.text,
            letterSpacing: -0.7, lineHeight: 1.1,
          }}>Last step.</h1>
          <p style={{ margin: '8px 0 0', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
            Create your account to keep your subscription across devices — and so Sarah and Grandma can join you.
          </p>

          <div style={{ flex: 1, minHeight: 12 }}/>

          {/* Auth buttons — consistent treatment */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
            <button style={{
              height: 54, borderRadius: 16,
              background: '#fff', color: '#000', border: 'none',
              fontFamily: UN.font.body, fontSize: 15, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 12px rgba(0,0,0,0.3)',
              cursor: 'pointer',
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24"><path d="M17.6 13.8c0-2.4 2-3.6 2.1-3.6-1.2-1.7-3-1.9-3.7-1.9-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.3.9 1.3 1.9 2.7 3.2 2.6 1.3 0 1.8-.8 3.3-.8 1.5 0 2 .8 3.3.8 1.4 0 2.3-1.3 3.1-2.5.7-1 1.2-2.2 1.5-3.3-3-1.1-3-4.1 0-4.1zm-3.2-6.4c.7-.8 1.2-2 1.1-3.1-1 0-2.2.7-2.9 1.5-.7.7-1.3 1.9-1.1 3 1.1.1 2.2-.6 2.9-1.4z" fill="#000"/></svg>
              Continue with Apple
            </button>
            <button style={{
              height: 54, borderRadius: 16,
              background: T.surface, color: T.text, border: `1.5px solid ${T.line2}`,
              fontFamily: UN.font.body, fontSize: 15, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              cursor: 'pointer',
            }}>
              <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#4285F4" d="M24 9.5c3.5 0 6.6 1.2 9 3.5l6.8-6.8C35.3 2.4 30 0 24 0 14.6 0 6.5 5.4 2.5 13.3l7.9 6.2C12.3 13.7 17.7 9.5 24 9.5z"/><path fill="#34A853" d="M46.5 24.5c0-1.5-.1-3-.4-4.5H24v9h12.7c-.5 2.9-2.2 5.4-4.6 7.1l7.3 5.7c4.2-3.9 7.1-9.7 7.1-17.3z"/><path fill="#FBBC05" d="M10.4 28.5c-.5-1.4-.8-2.9-.8-4.5s.3-3.1.8-4.5l-7.9-6.2C.9 17 0 20.4 0 24s.9 7 2.5 10.7l7.9-6.2z"/><path fill="#EA4335" d="M24 48c6 0 11.3-2 15.1-5.5l-7.3-5.7c-2 1.4-4.6 2.2-7.8 2.2-6.3 0-11.7-4.2-13.6-10l-7.9 6.2C6.5 42.6 14.6 48 24 48z"/></svg>
              Continue with Google
            </button>
            <button style={{
              height: 54, borderRadius: 16,
              background: 'transparent', color: T.text, border: `1.5px dashed ${T.line2}`,
              fontFamily: UN.font.body, fontSize: 14, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              cursor: 'pointer',
            }}>
              Email me a magic link →
            </button>
          </div>

          <div style={{
            marginBottom: 8, padding: '0 4px',
            fontSize: 10.5, color: T.textMute, textAlign: 'center', lineHeight: 1.5,
          }}>
            By continuing you agree to our terms & privacy. We never sell your data.
          </div>
        </div>

        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

function OnboardAddChild_DEAD_REMOVED_BELOW() {}

Object.assign(window, {
  OnboardSync, OnboardVoice, OnboardDoctor, OnboardCountry,
  OnboardWhoAreYou, OnboardIsChildSick, OnboardWhatWith, OnboardDoctorConfirm, OnboardAddChild,
  OnboardPersonalising, OnboardSignUp,
  OnboardJoinFamily, OnboardInviteFamily,
  UnpanicMark,
});

// ═══════════════════════════════════════════════════════════
// JOIN FAMILY — entered from "I have a family code" on screen 1
// ═══════════════════════════════════════════════════════════
function OnboardJoinFamily() {
  const T = UN.d;
  const digits = ['M','A','E','V','E','7'];
  return (
    <Phone mode="d" time="9:41">
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '0 26px' }}>
        <div style={{ paddingTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <UnpanicMark size={18} color={T.sage}/>
            <span style={{ fontSize: 12, fontWeight: 700, color: T.text, letterSpacing: 1.6 }}>UNPANIC</span>
          </div>
          <button style={{ fontSize: 13, color: T.textMute, fontWeight: 500, background: 'transparent', border: 'none' }}>
            Back
          </button>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          {/* Family visual */}
          <div style={{ position: 'relative', height: 120, marginBottom: 28 }}>
            <svg width="100%" height="120" viewBox="0 0 320 120">
              <circle cx="160" cy="60" r="36" fill={T.sage} opacity={0.18}/>
              <circle cx="160" cy="60" r="36" fill="none" stroke={T.sage} strokeWidth="2"/>
              <text x="160" y="65" fontFamily={UN.font.body} fontSize="14" fontWeight="700"
                    fill={T.text} textAnchor="middle">M</text>
              {[
                { cx:  84, cy: 38, c: '#c2b39a', l: 'K' },
                { cx: 236, cy: 38, c: '#a5b8c9', l: 'S' },
                { cx:  84, cy: 88, c: '#d3a89a', l: 'G' },
                { cx: 236, cy: 88, c: '#b8a89a', l: '+' },
              ].map((p, i) => (
                <g key={i}>
                  <line x1="160" y1="60" x2={p.cx} y2={p.cy} stroke={T.sageEdge} strokeWidth="1" strokeDasharray="2 3"/>
                  <circle cx={p.cx} cy={p.cy} r="22" fill={p.c}/>
                  <text x={p.cx} y={p.cy + 5} fontFamily={UN.font.body} fontSize="13" fontWeight="700"
                        fill="#fff" textAnchor="middle">{p.l}</text>
                </g>
              ))}
            </svg>
          </div>

          <h1 style={{
            margin: 0, fontSize: 28, fontWeight: 700, color: T.text,
            letterSpacing: -0.6, lineHeight: 1.1, textAlign: 'center',
          }}>Join the family</h1>
          <p style={{ margin: '8px 0 22px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5, textAlign: 'center' }}>
            Enter the 6-character code from Kat
          </p>

          {/* Code input — 6 cells */}
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 18 }}>
            {digits.map((d, i) => (
              <div key={i} style={{
                width: 44, height: 56, borderRadius: 12,
                background: i === 5 ? T.surface : T.sageSoft,
                border: `1.5px solid ${i === 5 ? T.sage : T.sageEdge}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: UN.font.num, fontSize: 22, fontWeight: 700, color: T.text,
                letterSpacing: -0.3,
                boxShadow: i === 5 ? `0 0 0 4px ${T.sageSoft}` : 'none',
              }}>{d}</div>
            ))}
          </div>

          <div style={{
            padding: '12px 14px', borderRadius: 14,
            background: T.surface, border: `1px solid ${T.line2}`,
            display: 'flex', alignItems: 'center', gap: 11,
          }}>
            <div style={{
              width: 34, height: 34, borderRadius: 34, background: '#c2b39a',
              color: '#fff', fontWeight: 700, fontSize: 13,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>K</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>
                Kat's family · 3 people watching Maeve
              </div>
              <div style={{ fontSize: 11, color: T.textDim, marginTop: 1 }}>
                You'll be added as Grandparent
              </div>
            </div>
            <Icon name="check" size={16} color={T.sage} strokeWidth={2.6}/>
          </div>
        </div>

        <button style={window.btnPrimaryStyle('d', { height: 56, radius: 18 })}>
          Join Kat's family
          <Icon name="chev" size={18} color="#0E1A14" strokeWidth={2.4}/>
        </button>
        <div style={{ height: 16 }}/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// INVITE FAMILY — at end of onboarding (after add child)
// ═══════════════════════════════════════════════════════════
function OnboardInviteFamily() {
  const T = UN.d;
  return (
    <OnboardingShell step={9} total={11} primary="Send invites · 2 selected" secondary="Skip for now">
      <div style={{ flex: 1, padding: '20px 26px 16px' }}>
        <h1 style={{
          margin: 0, fontSize: 28, fontWeight: 700, color: T.text,
          letterSpacing: -0.6, lineHeight: 1.1,
        }}>Who else is<br/>in the room?</h1>
        <p style={{ margin: '8px 0 18px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
          Invite anyone watching Maeve. They open a link — no install, no account.
        </p>

        {/* Family code chip */}
        <div style={{
          padding: '12px 14px', borderRadius: 14, marginBottom: 18,
          background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
          display: 'flex', alignItems: 'center', gap: 11,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10, background: T.sage,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="people" size={15} color="#0E1A14" strokeWidth={2.4}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: T.textMute, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>
              Your family code
            </div>
            <div style={{ fontFamily: UN.font.num, fontSize: 18, color: T.text, fontWeight: 700, letterSpacing: 1.2, marginTop: 1 }}>
              MAEVE7
            </div>
          </div>
          <button style={{
            padding: '6px 12px', borderRadius: 99,
            background: T.surface, border: `1px solid ${T.line2}`,
            fontSize: 12, color: T.text, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            <Icon name="share" size={11} color={T.text} strokeWidth={2}/>
            Share
          </button>
        </div>

        {/* Pre-selected invites */}
        {[
          { name: 'Sarah',   role: 'Parent',      tone: '#a5b8c9', sel: true, contact: '+44 7700…91' },
          { name: 'Grandma', role: 'Grandparent', tone: '#d3a89a', sel: true, contact: 'mum@…' },
          { name: 'Maria',   role: 'Sitter',     tone: '#b8a89a', sel: false, contact: '+44 7700…42' },
        ].map((p, i) => (
          <div key={i} style={{
            padding: '12px 14px', marginBottom: 6, borderRadius: 14,
            background: p.sel ? T.sageSoft : T.surface,
            border: `1.5px solid ${p.sel ? T.sage : T.line2}`,
            display: 'flex', alignItems: 'center', gap: 11,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 36,
              background: `linear-gradient(135deg, ${p.tone}, ${T.sageDeep})`,
              color: '#fff', fontWeight: 700, fontSize: 14,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{p.name[0]}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>{p.name}</div>
              <div style={{ fontSize: 11, color: T.textDim, marginTop: 1 }}>{p.role} · {p.contact}</div>
            </div>
            <div style={{
              width: 22, height: 22, borderRadius: 22,
              background: p.sel ? T.sage : 'transparent',
              border: `1.5px solid ${p.sel ? T.sage : T.line2}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {p.sel && <Icon name="check" size={12} color="#0E1A14" strokeWidth={2.8}/>}
            </div>
          </div>
        ))}
        <button style={{
          marginTop: 6, width: '100%', padding: '12px', borderRadius: 14,
          background: 'transparent', border: `1.5px dashed ${T.line2}`,
          color: T.textDim, fontFamily: UN.font.body, fontSize: 13, fontWeight: 500,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Icon name="plus" size={14} color={T.textMute} strokeWidth={2}/>
          Add someone else
        </button>
      </div>
    </OnboardingShell>
  );
}