// screens-onboarding.jsx — Onboarding flow: pace / distance / level / neighborhood

const ONBOARD_STEPS = [
  { id: 'welcome', title: 'Small local runs,\nmatched by pace.', sub: 'Create or join 2\u20138 person runs near you. Verified hosts and meeting points you can trust.' },
  { id: 'phone',   title: 'Verify your phone',     sub: 'Used to confirm you\u2019re real. Never shown to other runners.' },
  { id: 'profile', title: 'About you',             sub: 'Just the basics. You can keep your last name private.' },
  { id: 'pace',    title: 'Your usual pace',       sub: 'We\u2019ll match you to runs in your range so nobody gets dropped.' },
  { id: 'area',    title: 'Where do you like to run?',     sub: 'We\u2019ll show runs starting nearby first.' },
];

function ProgressDots({ idx, total }) {
  return (
    <div style={{ display: 'flex', gap: 6 }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          height: 3, width: i === idx ? 22 : 14,
          background: i <= idx ? PACER.lime : 'rgba(255,255,255,0.12)',
          borderRadius: 99, transition: 'all .25s',
        }}/>
      ))}
    </div>
  );
}

function PaceStep({ pace, setPace }) {
  // pace stored as tick index 0..14 (8:00 → 4:30, 15s steps)
  const TICKS = [
    '8:00','7:45','7:30','7:15','7:00',
    '6:45','6:30','6:15','6:00','5:45',
    '5:30','5:15','5:00','4:45','4:30',
  ];
  const MAJOR = [0, 2, 4, 6, 8, 10, 12, 14];
  const LABEL = [0, 4, 8, 12, 14];
  const idx = typeof pace === 'number' ? pace : 8;
  const setIdx = (v) => setPace(v);
  const value = TICKS[idx];
  const pct = (idx / (TICKS.length - 1)) * 100;
  return (
    <div>
      {/* Big pace readout */}
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <div style={{
          fontFamily: PACER.mono, fontSize: 84, fontWeight: 500,
          color: PACER.lime, letterSpacing: -3, lineHeight: 1,
        }}>{value}</div>
        <div style={{
          fontFamily: PACER.mono, fontSize: 13, color: PACER.textMute, marginTop: 10, letterSpacing: 1.4,
        }}>MIN / KM</div>
        <div style={{
          fontFamily: PACER.font, fontSize: 12.5, color: PACER.textDim, marginTop: 10,
        }}>
          5K in ~{Math.round((parseInt(value.split(':')[0]) * 60 + parseInt(value.split(':')[1])) * 5 / 60)} min
        </div>
      </div>

      {/* Slider card */}
      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`,
        borderRadius: 18, padding: '24px 22px 20px',
      }}>
        <div style={{ position: 'relative', height: 36 }}>
          <div style={{
            position: 'absolute', top: 14, left: 0, right: 0, height: 12,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            {TICKS.map((_, i) => (
              <div key={i} style={{
                width: 1, height: MAJOR.includes(i) ? 10 : 6,
                background: i <= idx ? PACER.lime : PACER.borderStrong,
                opacity: i <= idx ? 1 : 0.6,
              }}/>
            ))}
          </div>
          <div style={{
            position: 'absolute', top: 17, left: 0, right: 0, height: 2,
            background: 'rgba(255,255,255,0.06)', borderRadius: 99,
          }}/>
          <div style={{
            position: 'absolute', top: 17, left: 0, width: `${pct}%`,
            height: 2, background: PACER.lime, borderRadius: 99,
          }}/>
          <div style={{
            position: 'absolute', top: 8, left: `${pct}%`, transform: 'translateX(-50%)',
            width: 22, height: 22, borderRadius: '50%',
            background: PACER.lime, border: `3px solid ${PACER.bg}`,
            boxShadow: `0 0 0 1px ${PACER.lime}, 0 4px 14px rgba(212,255,58,0.35)`,
            cursor: 'pointer',
          }}/>
          <input type="range" min="0" max={TICKS.length - 1} value={idx}
            onChange={e => setIdx(parseInt(e.target.value))}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: 36,
              opacity: 0, cursor: 'pointer', appearance: 'none',
            }}/>
        </div>
        <div style={{ position: 'relative', height: 14, marginTop: 8 }}>
          {LABEL.map(i => (
            <span key={i} style={{
              position: 'absolute', left: `${(i / (TICKS.length - 1)) * 100}%`,
              transform: i === 0 ? 'translateX(0)' : i === 14 ? 'translateX(-100%)' : 'translateX(-50%)',
              fontFamily: PACER.mono, fontSize: 10, color: PACER.textSubtle,
            }}>{TICKS[i]}</span>
          ))}
        </div>
      </div>

      {/* Skip link */}
      <button style={{
        marginTop: 16, width: '100%',
        background: 'transparent', border: 'none',
        padding: '12px 14px',
        color: PACER.textDim, cursor: 'pointer',
        fontFamily: PACER.font, fontSize: 13.5, fontWeight: 500,
        textAlign: 'center', textDecoration: 'underline',
        textDecorationColor: PACER.borderStrong, textUnderlineOffset: 4,
      }}>
        I don’t know my pace
      </button>
    </div>
  );
}

function PhoneStep({ onWrongNumber }) {
  return (
    <div>
      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`,
        borderRadius: 14, padding: ‘14px 16px’, display: ‘flex’, alignItems: ‘center’, gap: 12,
        marginBottom: 16,
      }}>
        <span style={{ fontFamily: PACER.mono, fontSize: 16, color: PACER.text, fontWeight: 500 }}>+44</span>
        <div style={{ width: 1, height: 22, background: PACER.border }}/>
        <span style={{ fontFamily: PACER.mono, fontSize: 16, color: PACER.text, fontWeight: 500, letterSpacing: 1 }}>
          7700 900 184
        </span>
      </div>
      <div style={{
        display: ‘flex’, gap: 8, padding: ‘0 4px’, justifyContent: ‘space-between’,
      }}>
        {[‘7’,’3’,’9’,’2’,’—‘,’—‘].map((d, i) => (
          <div key={i} style={{
            flex: 1, height: 60, maxWidth: 50,
            borderRadius: 12, background: d === ‘—‘ ? PACER.inset : PACER.card,
            border: `1px solid ${d === ‘—‘ ? PACER.border : PACER.limeBorder}`,
            display: ‘flex’, alignItems: ‘center’, justifyContent: ‘center’,
            fontFamily: PACER.mono, fontSize: 24, fontWeight: 500,
            color: d === ‘—‘ ? PACER.textSubtle : PACER.text,
          }}>{d}</div>
        ))}
      </div>
      <div style={{ fontSize: 11.5, color: PACER.textMute, textAlign: ‘center’, marginTop: 16 }}>
        Code sent to your phone. Didn’t arrive? <span style={{ color: PACER.lime, fontWeight: 500 }}>Resend in 24s</span>
      </div>
      <button onClick={onWrongNumber} style={{
        marginTop: 14, width: ‘100%’, background: ‘transparent’, border: ‘none’,
        padding: ‘10px’, color: PACER.textDim, cursor: ‘pointer’,
        fontFamily: PACER.font, fontSize: 13, fontWeight: 500,
      }}>
        Wrong number?
      </button>
    </div>
  );
}

function ProfileStep({ name, setName, gender, setGender, age, setAge, area, setArea }) {
  const ageBuckets = ['18–24', '25–34', '35–44', '45–54', '55+'];
  const genders = ['Woman', 'Man', 'Non-binary', 'Prefer not to say'];
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 22 }}>
        <Avatar name={name || 'Sam'} size={64} photo/>
        <button style={{
          padding: '10px 14px', borderRadius: 12,
          background: PACER.card, border: `1px solid ${PACER.border}`,
          color: PACER.text, fontSize: 13, fontWeight: 500, cursor: 'pointer',
        }}>Add photo</button>
      </div>

      {/* Name */}
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: PACER.textMute, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8 }}>First name</div>
        <input value={name} onChange={e => setName(e.target.value)} maxLength={10} style={{
          width: '100%', boxSizing: 'border-box', height: 48,
          background: PACER.inset, border: `1px solid ${PACER.border}`,
          borderRadius: 14, padding: '0 16px',
          color: PACER.text, fontFamily: PACER.font, fontSize: 16, outline: 'none',
        }}/>
      </div>

      {/* Gender */}
      <div style={{ marginBottom: 18 }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8,
        }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: PACER.textMute, letterSpacing: 1.4, textTransform: 'uppercase' }}>Gender</div>
          <span style={{ fontSize: 10.5, color: PACER.textSubtle }}>Used for women-only runs</span>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {genders.map(g => {
            const sel = gender === g;
            return (
              <button key={g} onClick={() => setGender(g)} style={{
                padding: '9px 13px', borderRadius: 99,
                background: sel ? PACER.lime : 'transparent',
                border: `1px solid ${sel ? PACER.lime : PACER.borderStrong}`,
                color: sel ? PACER.limeInk : PACER.text,
                fontSize: 13, fontWeight: sel ? 600 : 500, cursor: 'pointer',
              }}>{g}</button>
            );
          })}
        </div>
      </div>

      {/* Age */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: PACER.textMute, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8 }}>Age</div>
        <div style={{
          display: 'flex', background: PACER.inset, border: `1px solid ${PACER.border}`,
          borderRadius: 12, padding: 4, gap: 4,
        }}>
          {ageBuckets.map(a => {
            const sel = age === a;
            return (
              <button key={a} onClick={() => setAge(a)} style={{
                flex: 1, height: 36, borderRadius: 9, border: 'none',
                background: sel ? PACER.card : 'transparent',
                color: sel ? PACER.text : PACER.textMute,
                fontFamily: PACER.mono, fontSize: 12.5,
                fontWeight: sel ? 600 : 500, cursor: 'pointer',
              }}>{a}</button>
            );
          })}
        </div>
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
        background: 'rgba(255,255,255,0.02)', border: `1px solid ${PACER.border}`,
        borderRadius: 10, fontSize: 12, color: PACER.textMute,
      }}>
        <Icon name="eye" size={14} color={PACER.textMute}/>
        Only your first name and an age range show on runs.
      </div>
    </div>
  );
}

function DistanceStep({ dist, setDist }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 600, color: PACER.textMute, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10 }}>
        Preferred distance
      </div>
      <SegmentedControl
        options={['3K', '5K', '10K', '10K+']}
        value={dist} onChange={setDist} mono
      />
      <div style={{ height: 22 }}/>
      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`,
        borderRadius: 14, padding: 14, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'rgba(255,255,255,0.04)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="bolt" size={18} color={PACER.lime}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>Connect Strava</div>
          <div style={{ fontSize: 11.5, color: PACER.textMute, marginTop: 1 }}>
            Optional — auto-verify pace
          </div>
        </div>
        <button style={{
          padding: '7px 12px', borderRadius: 10,
          background: 'transparent', border: `1px solid ${PACER.lime}`,
          color: PACER.lime, fontSize: 12, fontWeight: 600, cursor: 'pointer',
        }}>Connect</button>
      </div>
    </div>
  );
}

function AreaStep({ area, setArea }) {
  const areas = ['Clifton', 'Harbourside', 'Bedminster', 'Southville', 'Bishopston', 'Easton', 'St Pauls', 'Totterdown'];
  return (
    <div>
      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`,
        borderRadius: 14, padding: '14px 16px',
        display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16,
      }}>
        <Icon name="search" size={16} color={PACER.textMute}/>
        <span style={{ flex: 1, fontSize: 14, color: PACER.textDim }}>Search neighborhoods…</span>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {areas.map(a => {
          const sel = a === area;
          return (
            <button key={a} onClick={() => setArea(a)} style={{
              padding: '10px 14px', borderRadius: 99,
              background: sel ? PACER.lime : 'transparent',
              border: `1px solid ${sel ? PACER.lime : PACER.borderStrong}`,
              color: sel ? PACER.limeInk : PACER.text,
              fontFamily: PACER.font, fontSize: 13.5, fontWeight: sel ? 600 : 500,
              cursor: 'pointer', transition: 'all .15s',
            }}>{a}</button>
          );
        })}
      </div>
      <div style={{
        marginTop: 20, padding: '12px 14px',
        background: PACER.limeSoft, border: `1px solid ${PACER.limeBorder}`,
        borderRadius: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
          <Icon name="bolt" size={13} color={PACER.lime}/>
          <span style={{ fontSize: 11, fontWeight: 600, color: PACER.lime, letterSpacing: 1.2, textTransform: 'uppercase' }}>
            12 runs near {area || 'you'} this week
          </span>
        </div>
        <div style={{ fontSize: 12.5, color: PACER.textDim }}>
          You’ll see them on the home feed in a sec.
        </div>
      </div>
    </div>
  );
}

function WelcomeStep() {
  return (
    <div>
      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`,
        borderRadius: 18, padding: 18, marginBottom: 14,
      }}>
        <div style={{
          fontFamily: PACER.font, fontSize: 11, fontWeight: 600,
          color: PACER.lime, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8,
        }}>How Run Crew works</div>
        <div style={{ display: 'grid', gap: 14 }}>
          {[
            ['Find a run near you at your pace', 'pace'],
            ['Request to join. Host approves.', 'check'],
            ['Meeting point unlocks. Group chat opens.', 'unlock'],
            ['Show up, run, mark attended.', 'run'],
          ].map(([t, icon], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 9,
                background: 'rgba(212,255,58,0.08)', border: `1px solid ${PACER.limeBorder}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: PACER.mono, fontSize: 12, color: PACER.lime, fontWeight: 600,
              }}>{i + 1}</div>
              <div style={{ fontSize: 14, color: PACER.text, fontWeight: 500 }}>{t}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{
        background: 'rgba(255,255,255,0.02)', border: `1px solid ${PACER.border}`,
        borderRadius: 14, padding: 14,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <Icon name="shield" size={14} color={PACER.textDim}/>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: PACER.text, letterSpacing: 1, textTransform: 'uppercase' }}>
            Safety first
          </span>
        </div>
        <div style={{ fontSize: 12.5, color: PACER.textMute, lineHeight: 1.55 }}>
          Phone verified · public meeting points · group chat per run · women-only runs supported.
        </div>
      </div>
    </div>
  );
}

function OnboardingScreen({ onDone, initialStep = 0 }) {
  const [step, setStep] = React.useState(initialStep);
  const [signingIn, setSigningIn] = React.useState(false);
  const [pace, setPace] = React.useState(8); // tick index 0..14 (8 = 6:00)
  const [name, setName] = React.useState('Sam');
  const [gender, setGender] = React.useState('Prefer not to say');
  const [age, setAge] = React.useState('25–34');
  const [dist, setDist] = React.useState('5K');
  const [level, setLevel] = React.useState('Beginner');
  const [area, setArea] = React.useState('Clifton');

  const s = ONBOARD_STEPS[step];
  const isLast = step === ONBOARD_STEPS.length; // 6 -> welcome screen
  const TOTAL = ONBOARD_STEPS.length + 1;

  // Sign-in overlay
  if (signingIn) {
    return <SignInScreen onClose={() => setSigningIn(false)} onSignedIn={onDone}/>;
  }

  // Step 0 (welcome/intro) has a different layout: full-bleed hero image
  if (step === 0) {
    return (
      <div style={{
        background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font,
        display: 'flex', flexDirection: 'column', position: 'relative',
      }}>
        {/* Hero image — image-slot for the user to drop their own runner photo */}
        <div style={{ position: 'relative', height: 460, overflow: 'hidden', flexShrink: 0 }}>
          <image-slot
            id="onboard-hero"
            placeholder="Drop a runner photo here (mobile lifestyle, dawn/dusk, action)"
            shape="rect"
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              background: `linear-gradient(135deg, #1a2218 0%, #0a0c0a 100%)`,
            }}
          />
          {/* SVG runner silhouette placeholder — visible until user drops a photo */}
          <svg width="100%" height="100%" viewBox="0 0 390 460"
               style={{ position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none' }}>
            <defs>
              <linearGradient id="hgrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#d4ff3a" stopOpacity="0.0"/>
                <stop offset="60%" stopColor="#d4ff3a" stopOpacity="0.15"/>
                <stop offset="100%" stopColor="#d4ff3a" stopOpacity="0"/>
              </linearGradient>
            </defs>
            {/* Soft horizon */}
            <rect x="0" y="320" width="390" height="140" fill="url(#hgrad)"/>
            {/* Trail */}
            <path d="M-20 360 Q 200 340, 410 380" stroke="rgba(212,255,58,0.4)" strokeWidth="2" fill="none" strokeDasharray="6 6"/>
            {/* Runner silhouettes */}
            <g fill="rgba(241,243,238,0.55)">
              <circle cx="120" cy="245" r="14"/>
              <path d="M120 260 L 110 305 L 95 340 L 88 360 L 100 360 L 115 335 L 125 320 L 130 360 L 142 360 L 138 320 L 145 290 L 135 270 Z"/>
              <path d="M105 280 L 85 295 L 78 290 Z"/>
              <circle cx="220" cy="265" r="11"/>
              <path d="M220 277 L 213 315 L 202 345 L 196 360 L 206 360 L 218 340 L 224 325 L 228 360 L 238 360 L 234 325 L 240 300 L 232 282 Z"/>
              <circle cx="295" cy="278" r="9"/>
              <path d="M295 288 L 290 322 L 282 350 L 278 360 L 286 360 L 295 344 L 300 332 L 304 360 L 312 360 L 308 332 L 314 308 L 307 292 Z"/>
            </g>
          </svg>
          {/* Bottom gradient to bleed into the dark UI below */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: 0, height: 200,
            background: `linear-gradient(180deg, rgba(10,12,10,0) 0%, rgba(10,12,10,0.6) 50%, ${PACER.bg} 100%)`,
            pointerEvents: 'none',
          }}/>
          {/* Status-bar safe top gradient */}
          <div style={{
            position: 'absolute', left: 0, right: 0, top: 0, height: 90,
            background: `linear-gradient(180deg, rgba(10,12,10,0.5) 0%, rgba(10,12,10,0) 100%)`,
            pointerEvents: 'none',
          }}/>
          {/* Pacer logo over hero */}
          <div style={{
            position: 'absolute', top: 64, left: 24,
            display: 'flex', alignItems: 'center', gap: 9, zIndex: 5,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 9, background: PACER.lime,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 14px rgba(212,255,58,0.35)',
            }}>
              <Icon name="run" size={18} color={PACER.limeInk}/>
            </div>
            <div style={{
              fontSize: 20, fontWeight: 700, letterSpacing: -0.5, color: PACER.text,
              textShadow: '0 2px 8px rgba(0,0,0,0.5)',
            }}>Run Crew</div>
          </div>
        </div>

        {/* Title + sub + stats — pulled up over the bottom of the hero */}
        <div style={{ flex: 1, padding: '0 28px 0', marginTop: -90, position: 'relative', zIndex: 2 }}>
          <div style={{
            fontSize: 34, fontWeight: 600, letterSpacing: -1.3, lineHeight: 1.05,
            whiteSpace: 'pre-line', marginBottom: 12,
          }}>{s.title}</div>
          <div style={{ fontSize: 14.5, color: PACER.textDim, lineHeight: 1.5, marginBottom: 22 }}>
            {s.sub}
          </div>
          {/* Stats card */}
          <div style={{
            background: PACER.card, border: `1px solid ${PACER.border}`,
            borderRadius: 16, padding: '16px 18px',
          }}>
            <div style={{
              fontFamily: PACER.font, fontSize: 10.5, color: PACER.textMute, fontWeight: 600,
              letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10,
            }}>This week · Bristol</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
              <span style={{ fontFamily: PACER.mono, fontSize: 32, fontWeight: 500, color: PACER.lime, letterSpacing: -1 }}>17</span>
              <span style={{ fontSize: 13.5, color: PACER.textDim }}>runs scheduled near you</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: -8, marginTop: 4 }}>
              {['anna', 'jay', 'priya', 'tomek', 'rose'].map((u, i) => (
                <div key={u} style={{ marginLeft: i === 0 ? 0 : -8, border: `2px solid ${PACER.card}`, borderRadius: '50%' }}>
                  <Avatar name={USERS[u].name} size={26}/>
                </div>
              ))}
              <span style={{ fontFamily: PACER.font, fontSize: 12, color: PACER.textMute, marginLeft: 10 }}>
                hosted by neighbors
              </span>
            </div>
          </div>
        </div>

        <div style={{ padding: '24px 28px 40px' }}>
          <Btn variant="primary" size="lg" style={{ width: '100%' }}
            onClick={() => setStep(step + 1)}
            trailing={<Icon name="arrow" size={18} color={PACER.limeInk}/>}>
            Get started
          </Btn>
          <div style={{ textAlign: 'center', fontSize: 12.5, color: PACER.textMute, marginTop: 14 }}>
            Have an account? <span onClick={() => setSigningIn(true)} style={{ color: PACER.lime, fontWeight: 600, cursor: 'pointer' }}>Sign in</span>
          </div>
        </div>
      </div>
    );
  }

  if (isLast) {
    // Final welcome step
    return (
      <div style={{
        background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font,
        display: 'flex', flexDirection: 'column', position: 'relative',
      }}>
        <div style={{ padding: '54px 28px 0', flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32 }}>
            <button onClick={() => setStep(step - 1)} style={{
              width: 40, height: 40, borderRadius: 12,
              background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
              color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="chevL" size={20} color={PACER.text}/>
            </button>
            <ProgressDots idx={TOTAL - 1} total={TOTAL}/>
            <div style={{ width: 40 }}/>
          </div>
          <div style={{
            fontSize: 30, fontWeight: 600, letterSpacing: -1.1, lineHeight: 1.1,
            marginBottom: 10,
          }}>You’re set, {name || 'Sam'}.</div>
          <div style={{ fontSize: 14.5, color: PACER.textDim, marginBottom: 28 }}>
            Here’s the rhythm.
          </div>
          <WelcomeStep/>
        </div>
        <div style={{ padding: '20px 28px 40px' }}>
          <Btn variant="primary" size="lg" style={{ width: '100%' }} onClick={onDone}
            trailing={<Icon name="arrow" size={18} color={PACER.limeInk}/>}>
            See runs near you
          </Btn>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font,
      display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <div style={{ padding: '54px 28px 0', flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
          {s.id === 'phone' ? (
            <div style={{ width: 40 }}/>
          ) : (
            <button onClick={() => setStep(Math.max(0, step - 1))} style={{
              width: 40, height: 40, borderRadius: 12,
              background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
              color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="chevL" size={20} color={PACER.text}/>
            </button>
          )}
          <ProgressDots idx={step} total={TOTAL}/>
          <div style={{ width: 40 }}/>
        </div>
        <div style={{
          fontSize: 28, fontWeight: 600, letterSpacing: -1, lineHeight: 1.1,
          marginBottom: 8, whiteSpace: 'pre-line',
        }}>{s.title}</div>
        <div style={{ fontSize: 14, color: PACER.textDim, lineHeight: 1.5, marginBottom: 28 }}>
          {s.sub}
        </div>
        {s.id === 'phone' && <PhoneStep onWrongNumber={() => setStep(0)}/>}
        {s.id === 'profile' && <ProfileStep name={name} setName={setName} gender={gender} setGender={setGender} age={age} setAge={setAge} area={area} setArea={setArea}/>}
        {s.id === 'pace' && <PaceStep pace={pace} setPace={setPace}/>}
        {s.id === 'distance' && <DistanceStep dist={dist} setDist={setDist}/>}
        {s.id === 'area' && <AreaStep area={area} setArea={setArea}/>}
      </div>
      <div style={{ padding: '20px 28px 40px' }}>
        <Btn variant="primary" size="lg" style={{ width: '100%' }} onClick={() => setStep(step + 1)}
          trailing={<Icon name="arrow" size={18} color={PACER.limeInk}/>}>
          {s.id === 'phone' ? 'Verify' : 'Continue'}
        </Btn>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingScreen });

// ─────────────────────────────────────────────────────────────
// Pace step · slider variant (3 buckets + 15s-step slider)
// Static screen used only on the canvas as a side-by-side option.
// ─────────────────────────────────────────────────────────────
function OnboardingPaceSliderScreen() {
  // Ticks 8:00 → 4:30 at 15s increments (15 stops). Slow on the left.
  const TICKS = [
    '8:00','7:45','7:30','7:15','7:00',
    '6:45','6:30','6:15','6:00','5:45',
    '5:30','5:15','5:00','4:45','4:30',
  ];
  const MAJOR = [0, 2, 4, 6, 8, 10, 12, 14];
  const LABEL = new Set([0, 4, 8, 12, 14]); // 8:00, 7:00, 6:00, 5:00, 4:30
  const [idx, setIdx] = React.useState(8); // 6:00 default

  const pace = TICKS[idx];
  const pct = (idx / (TICKS.length - 1)) * 100;

  return (
    <div style={{
      background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font,
      display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <div style={{ padding: '54px 28px 0', flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
          <button style={{
            width: 40, height: 40, borderRadius: 12,
            background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
            color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="chevL" size={20} color={PACER.text}/>
          </button>
          <ProgressDots idx={3} total={7}/>
          <div style={{ width: 40 }}/>
        </div>
        <div style={{
          fontSize: 28, fontWeight: 600, letterSpacing: -1, lineHeight: 1.1,
          marginBottom: 8, whiteSpace: 'pre-line',
        }}>Your usual pace</div>
        <div style={{ fontSize: 14, color: PACER.textDim, lineHeight: 1.5, marginBottom: 40 }}>
          We’ll match you to runs in your range so nobody gets dropped.
        </div>

        {/* Big pace readout */}
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{
            fontFamily: PACER.mono, fontSize: 84, fontWeight: 500,
            color: PACER.lime, letterSpacing: -3, lineHeight: 1,
          }}>{pace}</div>
          <div style={{
            fontFamily: PACER.mono, fontSize: 13, color: PACER.textMute, marginTop: 10, letterSpacing: 1.4,
          }}>MIN / KM</div>
          <div style={{
            fontFamily: PACER.font, fontSize: 12.5, color: PACER.textDim, marginTop: 10,
          }}>
            5K in ~{Math.round((parseInt(pace.split(':')[0]) * 60 + parseInt(pace.split(':')[1])) * 5 / 60)} min
          </div>
        </div>

        {/* Slider */}
        <div style={{
          background: PACER.card, border: `1px solid ${PACER.border}`,
          borderRadius: 18, padding: '24px 22px 20px',
        }}>
          <div style={{ position: 'relative', height: 36 }}>
            <div style={{
              position: 'absolute', top: 14, left: 0, right: 0, height: 12,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              {TICKS.map((_, i) => (
                <div key={i} style={{
                  width: 1, height: MAJOR.includes(i) ? 10 : 6,
                  background: i <= idx ? PACER.lime : PACER.borderStrong,
                  opacity: i <= idx ? 1 : 0.6,
                }}/>
              ))}
            </div>
            <div style={{
              position: 'absolute', top: 17, left: 0, right: 0, height: 2,
              background: 'rgba(255,255,255,0.06)', borderRadius: 99,
            }}/>
            <div style={{
              position: 'absolute', top: 17, left: 0, width: `${pct}%`,
              height: 2, background: PACER.lime, borderRadius: 99,
            }}/>
            <div style={{
              position: 'absolute', top: 8, left: `${pct}%`, transform: 'translateX(-50%)',
              width: 22, height: 22, borderRadius: '50%',
              background: PACER.lime, border: `3px solid ${PACER.bg}`,
              boxShadow: `0 0 0 1px ${PACER.lime}, 0 4px 14px rgba(212,255,58,0.35)`,
              cursor: 'pointer',
            }}/>
            <input type="range" min="0" max={TICKS.length - 1} value={idx}
              onChange={e => setIdx(parseInt(e.target.value))}
              style={{
                position: 'absolute', inset: 0, width: '100%', height: 36,
                opacity: 0, cursor: 'pointer', appearance: 'none',
              }}/>
          </div>
          <div style={{ position: 'relative', height: 14, marginTop: 8 }}>
            {[...LABEL].map(i => (
              <span key={i} style={{
                position: 'absolute', left: `${(i / (TICKS.length - 1)) * 100}%`,
                transform: i === 0 ? 'translateX(0)' : i === 14 ? 'translateX(-100%)' : 'translateX(-50%)',
                fontFamily: PACER.mono, fontSize: 10, color: PACER.textSubtle,
              }}>{TICKS[i]}</span>
            ))}
          </div>
        </div>

        {/* Skip link */}
        <button style={{
          marginTop: 16, width: '100%',
          background: 'transparent', border: 'none',
          padding: '12px 14px',
          color: PACER.textDim, cursor: 'pointer',
          fontFamily: PACER.font, fontSize: 13.5, fontWeight: 500,
          textAlign: 'center', textDecoration: 'underline',
          textDecorationColor: PACER.borderStrong, textUnderlineOffset: 4,
        }}>
          I don’t know my pace
        </button>
      </div>
      <div style={{ padding: '20px 28px 40px' }}>
        <Btn variant="primary" size="lg" style={{ width: '100%' }}
          trailing={<Icon name="arrow" size={18} color={PACER.limeInk}/>}>
          Continue
        </Btn>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingPaceSliderScreen });