function Signup({ s, set, onBack, onNext, onLogin }) {
  const { PhoneShell, BackButton, TextField, Button, TextLink, StepBadge } = window.GG;
  const ok = s.firstName.trim() && /.+@.+\..+/.test(s.email);
  return (
    <PhoneShell>
      <Screen footer={<>
        <Button disabled={!ok} onClick={onNext}>Send Code</Button>
        <p style={{ margin: '8px 0 0', fontSize: 12, fontWeight: 500, color: '#a3a3a3' }}>Already have an account? <TextLink href="#login" onClick={e => { e.preventDefault(); onLogin(); }}>Log In</TextLink></p>
      </>}>
        <TopBar left={<BackButton onClick={onBack} />} right={<StepBadge current={1} total={4} />} />
        <Title eyebrow="Create your account" sub="Enter your name and email to save your plan.">Let's get <Hi>started</Hi></Title>
        <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <TextField id="fn" label="First name" value={s.firstName} onChange={v => set({ firstName: v })} placeholder="Enter your first name" autoComplete="given-name" />
          <TextField id="em" label="Email address" type="email" value={s.email} onChange={v => set({ email: v })} placeholder="you@example.com" autoComplete="email" />
        </div>
      </Screen>
    </PhoneShell>
  );
}

function VerifyCode({ email, onBack, onNext }) {
  const { PhoneShell, BackButton, CodeInput, Button, Icon, StepBadge } = window.GG;
  const { tone, haptic } = window.GGData;
  const [code, setCode] = React.useState('');
  const [resent, setResent] = React.useState(false);
  // Simulates the code arriving by email and filling itself in, then continuing.
  React.useEffect(() => { const a = setTimeout(() => { setCode('482910'); tone(680, 'sine', 0.15); haptic('correct'); }, 1600); const b = setTimeout(() => { tone(880, 'sine', 0.2); onNext(); }, 2800); return () => { clearTimeout(a); clearTimeout(b); }; }, []);
  return (
    <PhoneShell>
      <Screen footer={<Button disabled={code.length < 6} onClick={() => { tone(880, 'sine', 0.2); onNext(); }}>Verify Email</Button>}>
        <TopBar left={<BackButton onClick={onBack} />} right={<StepBadge current={1} total={4} />} />
        {code.length === 6 && <div style={{ marginTop: 8, width: '100%', padding: 14, borderRadius: 'var(--radius-panel)', background: 'rgba(30,32,44,0.9)', backdropFilter: 'blur(20px)', border: '1px solid var(--gg-line-strong)', display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left', cursor: 'pointer', fontFamily: 'var(--font-ui)', color: '#fff', boxShadow: 'var(--shadow-panel)', animation: 'gg-fadein .3s ease' }}>
          <span style={{ width: 40, height: 40, borderRadius: 10, flex: 'none', background: 'var(--grad-cta)', color: '#050608', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="mail" size={22} /></span>
          <span style={{ flex: 1, minWidth: 0 }}>
            <span style={{ display: 'block', fontSize: 11, fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--gg-cyan)' }}>From Mail</span>
            <span style={{ display: 'block', fontSize: 14, fontWeight: 600, marginTop: 2 }}>Code filled in from your email</span>
          </span>
          <Icon name="check_circle" size={22} fill />
        </div>}
        <Title eyebrow="Verification" sub={<>We sent a 6-digit code to <b style={{ color: '#fff' }}>{email || 'your email address'}</b>.</>}>Check your <Hi>email</Hi></Title>
        <div style={{ marginTop: 28 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <Meta>Enter 6-digit code</Meta>
            <QuietLink color="var(--gg-cyan)" onClick={() => { tone(660); setResent(true); setTimeout(() => setResent(false), 3000); }}>{resent ? 'Code resent' : 'Resend code'}</QuietLink>
          </div>
          <CodeInput value={code} onChange={setCode} />
          <p style={{ margin: '14px 0 0', fontSize: 13, color: 'var(--text-muted)', textAlign: 'center' }}>{code.length === 6 ? 'Verifying…' : 'Waiting for your email…'}</p>
        </div>
      </Screen>
    </PhoneShell>
  );
}

function Basics({ s, set, onBack, onNext, onSkip, fromProfile, onToggleMood }) {
  const { PhoneShell, BackButton, StepBadge, OptionChip, Button } = window.GG;
  const { AGE_BANDS, GENDERS, DURATIONS, MOODS, tone } = window.GGData;
  const cal = s.calibration;
  const pick = (k, v) => { tone(520); set({ calibration: { ...cal, [k]: v } }); };
  const Group = ({ label, k, opts, cols }) => (
    <Section label={label}>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, minmax(0,1fr))`, gap: 10 }}>
        {opts.map(o => <OptionChip key={o} selected={cal[k] === o} onClick={() => pick(k, o)}>{o}</OptionChip>)}
      </div>
    </Section>
  );
  return (
    <PhoneShell>
      <Screen footer={<>
        <Button onClick={onNext}>{fromProfile ? 'Save Settings' : 'Next: Check-in'}</Button>
        {!fromProfile && <QuietLink onClick={onSkip}>Skip for now</QuietLink>}
      </>}>
        <TopBar left={<BackButton onClick={onBack} />} right={fromProfile ? <Meta>Edit</Meta> : <StepBadge current={3} total={4} />} />
        <Title eyebrow="About you" sub="Helps us pace your ride.">Quick <Hi>basics</Hi></Title>
        <Group label="Age range" k="ageBand" opts={AGE_BANDS} cols={3} />
        <Group label="Gender" k="gender" opts={GENDERS} cols={3} />
        <Group label="Typical bike ride" k="duration" opts={DURATIONS} cols={2} />
      </Screen>
    </PhoneShell>
  );
}

function MoodCheck({ moods, onToggle, onBack, onNext, onSkip }) {
  const { PhoneShell, BackButton, StepBadge, Button } = window.GG;
  const { MOODS } = window.GGData;
  return (
    <PhoneShell>
      <Screen footer={<>
        <Button disabled={!moods.length} onClick={onNext}>Build My Ride</Button>
        <QuietLink onClick={onSkip}>Skip for now</QuietLink>
      </>}>
        <TopBar left={<BackButton onClick={onBack} />} right={<StepBadge current={4} total={4} />} />
        <Title eyebrow="Mood check-in" sub="Pick up to 2. We'll tune today's pace and cue rhythm to match.">How are you <Hi>feeling</Hi>?</Title>
        <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {MOODS.map(m => { const on = moods.includes(m.id); return (
            <button key={m.id} type="button" onClick={() => onToggle(m.id)} style={{ minHeight: 132, padding: 16, borderRadius: 'var(--radius-card)', textAlign: 'left', cursor: 'pointer', fontFamily: 'var(--font-ui)', color: '#fff', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', boxSizing: 'border-box',
              background: on ? `linear-gradient(180deg, color-mix(in srgb, ${m.color} 22%, #0c0e14), #0c0e14)` : 'var(--surface-card)', border: on ? `2px solid ${m.color}` : '1px solid var(--gg-line)', boxShadow: on ? `0 0 22px color-mix(in srgb, ${m.color} 35%, transparent)` : 'none', transition: 'all var(--dur) var(--ease)' }}>
              <span style={{ width: 44, height: 44, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', color: m.color, background: `color-mix(in srgb, ${m.color} 15%, transparent)`, border: `1px solid color-mix(in srgb, ${m.color} 30%, transparent)` }}><span className="material-symbols-outlined" style={{ fontSize: 26 }}>{m.icon}</span></span>
              <span><span style={{ display: 'block', fontSize: 16, fontWeight: 800 }}>{m.label}</span><span style={{ display: 'block', marginTop: 4, fontSize: 12, lineHeight: 1.375, color: on ? 'var(--text-secondary)' : 'var(--text-subtle)' }}>{m.desc}</span></span>
            </button>); })}
        </div>
      </Screen>
    </PhoneShell>
  );
}
Object.assign(window, { Signup, VerifyCode, Basics, MoodCheck });