function OnboardingScreen({onDone}){
  const [step,setStep] = React.useState(0);
  const [goal,setGoal] = React.useState('cut');
  const [diet,setDiet] = React.useState(['gf']);
  const [meals,setMeals] = React.useState(3);
  const toggle = (k)=> setDiet(d => d.includes(k) ? d.filter(x=>x!==k) : [...d,k]);
  const steps = [
    {eyebrow:'Step 1 of 3', title:'What are we working towards?', body:(
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        <Radio name="goal" label="Lose fat, keep muscle" description="Gentle deficit, protein-led." checked={goal==='cut'} onChange={()=>setGoal('cut')} />
        <Radio name="goal" label="Steady my blood sugar" description="Low-GI, evenly spaced meals." checked={goal==='gi'} onChange={()=>setGoal('gi')} />
        <Radio name="goal" label="Eat better, no numbers" description="No calorie counting shown." checked={goal==='easy'} onChange={()=>setGoal('easy')} />
      </div>)},
    {eyebrow:'Step 2 of 3', title:'Anything off the table?', body:(
      <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
        {[['gf','Gluten-free','wheat-off'],['df','Dairy-free','milk-off'],['veg','Vegetarian','carrot'],['nut','Nut allergy','nut-off'],['fish','No seafood','fish-off'],['halal','Halal','moon-star']].map(([k,l,ic])=>
          <Tag key={k} icon={ic} selected={diet.includes(k)} onClick={()=>toggle(k)}>{l}</Tag>)}
      </div>)},
    {eyebrow:'Step 3 of 3', title:'How does your day run?', body:(
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        <StepperField label="Meals per day" value={meals} min={2} max={6} onChange={setMeals} />
        <Input label="Usual breakfast time" icon="clock" defaultValue="07:30" />
        <Select label="Cooking time on a weekday" options={['Under 15 min','15–30 min','30–45 min','I meal-prep']} defaultValue="15–30 min" />
      </div>)},
  ];
  const s = steps[step];
  return (<div style={{position:'relative',flex:1,display:'flex',flexDirection:'column',overflow:'hidden'}}>
    <Mesh opacity={.85} />
    <div style={{position:'relative',flex:1,display:'flex',flexDirection:'column',padding:'0 20px 20px',overflowY:'auto'}}>
      <div style={{display:'flex',alignItems:'center',gap:12,padding:'10px 0 18px'}}>
        <AgentOrb size={34} state="listening" />
        <div style={{flex:1,display:'flex',gap:5}}>
          {[0,1,2].map(i=> <span key={i} style={{flex:1,height:5,borderRadius:999,background:i<=step?'var(--gradient-bloom)':'var(--sand-200)'}} />)}
        </div>
      </div>
      <span style={{fontSize:11,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--jade-700)'}}>{s.eyebrow}</span>
      <h1 style={{fontFamily:'var(--font-display)',fontSize:34,lineHeight:1.1,letterSpacing:'-.028em',fontWeight:800,color:'var(--text-strong)',margin:'8px 0 6px'}}>{s.title}</h1>
      <p style={{fontSize:15,color:'var(--text-muted)',margin:'0 0 22px'}}>Suko uses this on every plan it writes. You can change it any time.</p>
      {s.body}
      <div style={{flex:1,minHeight:20}} />
      <div style={{display:'flex',gap:10,paddingTop:20}}>
        {step>0 ? <Button variant="secondary" icon="arrow-left" onClick={()=>setStep(step-1)}>Back</Button> : null}
        <Button variant="primary" block iconAfter={step===2?'sparkles':'arrow-right'} onClick={()=> step===2 ? onDone() : setStep(step+1)}>
          {step===2 ? 'Build my plan' : 'Continue'}
        </Button>
      </div>
    </div>
  </div>);
}
Object.assign(window,{OnboardingScreen});