/* First-run onboarding — shown once after the first sign-in, before Home. */
function OnboardingScreen({ onDone }) {
  const [step, setStep] = React.useState(0);
  const [picked, setPicked] = React.useState(() => (window.JL_CHILDREN || []).map(c => c.id));
  const [notif, setNotif] = React.useState({ alerts:true, messages:true, pickup:true, grades:false });
  const [pickup, setPickup] = React.useState('car');
  const kids = window.JL_CHILDREN || [];

  const STEPS = [
    {
      key:'welcome', icon:'party-popper', tint:'var(--gold-100)', ic:'var(--gold-600)',
      title:'Welcome to JewelLink', body:'The calm, all-in-one way to stay connected with your child\u2019s school. Let\u2019s set things up \u2014 it takes about a minute.',
    },
    {
      key:'children', icon:'users-round', tint:'var(--success-100)', ic:'var(--success-500)',
      title:'Confirm your children', body:'These students are linked to your account. Tap to include each one.',
    },
    {
      key:'notifs', icon:'bell', tint:'var(--info-100)', ic:'var(--info-500)',
      title:'Choose your alerts', body:'Pick what you\u2019d like to hear about. You can change these anytime in Profile.',
    },
    {
      key:'pickup', icon:'car-front', tint:'var(--gold-100)', ic:'var(--gold-600)',
      title:'Set a default pickup', body:'How does your child usually get home? This sets the default \u2014 you can change it per day later.',
    },
    {
      key:'done', icon:'circle-check-big', tint:'var(--success-100)', ic:'var(--success-500)',
      title:'You\u2019re all set', body:'Everything\u2019s ready. Jump in and explore your family\u2019s dashboard.',
    },
  ];
  const s = STEPS[step];
  const last = step === STEPS.length - 1;
  const next = () => last ? onDone() : setStep(step + 1);
  const back = () => setStep(Math.max(0, step - 1));

  const NOTIF_ROWS = [
    { id:'alerts',   icon:'siren',           label:'Emergency alerts',   sub:'Urgent, always on',        locked:true },
    { id:'messages', icon:'message-circle',  label:'Teacher messages',   sub:'Replies & new threads' },
    { id:'pickup',   icon:'car-front',       label:'Pickup & bus',       sub:'Arrivals and check-ins' },
    { id:'grades',   icon:'graduation-cap',  label:'Grades & feedback',  sub:'New grades and notes' },
  ];
  const PICKUP_OPTS = [
    { id:'car',    icon:'car-front', label:'Car Rider' },
    { id:'bus',    icon:'bus',       label:'Bus' },
    { id:'walk',   icon:'footprints',label:'Walker' },
    { id:'after',  icon:'clock',     label:'Aftercare' },
  ];

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'#fff' }}>
      {/* top: progress + skip */}
      <div style={{ paddingTop:54, padding:'54px 20px 0', display:'flex', alignItems:'center', gap:12 }}>
        <div style={{ flex:1, display:'flex', gap:5 }}>
          {STEPS.map((_,i) => (
            <div key={i} style={{ flex:1, height:5, borderRadius:'999px', background: i<=step ? 'var(--gold-400)' : 'var(--gray-200)', transition:'.25s' }} />
          ))}
        </div>
        {!last && <button onClick={onDone} style={{ border:0, background:'transparent', color:'var(--gray-500)', fontWeight:700, fontSize:13.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Skip</button>}
      </div>

      {/* body */}
      <div style={{ flex:1, overflowY:'auto', padding:'28px 24px 10px' }}>
        <span style={{ width:64, height:64, borderRadius:18, background:s.tint, display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20 }}>
          <Icon name={s.icon} size={32} color={s.ic} />
        </span>
        <div style={{ fontSize:26, fontWeight:800, letterSpacing:'-.02em', color:'var(--ink)', lineHeight:1.15 }}>{s.title}</div>
        <div style={{ fontSize:15, color:'var(--gray-500)', lineHeight:1.55, marginTop:10 }}>{s.body}</div>

        {/* step-specific content */}
        {s.key==='children' && (
          <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:22 }}>
            {kids.map(c => {
              const on = picked.includes(c.id);
              return (
                <button key={c.id} onClick={()=>setPicked(p => on ? p.filter(x=>x!==c.id) : [...p, c.id])} style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px', borderRadius:13, cursor:'pointer', fontFamily:'var(--font-sans)', textAlign:'left', border: on?'1.5px solid var(--success-500)':'1px solid var(--gray-200)', background: on?'var(--success-100)':'#fff' }}>
                  <Avatar initials={c.initials} color={c.color} size={42} />
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>{c.name}</div>
                    <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{c.gradeLabel} · {c.school}</div>
                  </div>
                  <span style={{ width:26, height:26, borderRadius:'999px', display:'flex', alignItems:'center', justifyContent:'center', background: on?'var(--success-500)':'transparent', border: on?'0':'1.5px solid var(--gray-300)' }}>{on && <Icon name="check" size={16} color="#fff" />}</span>
                </button>
              );
            })}
            <button onClick={()=>jlToast('Contact your school to link another child', { icon:'user-plus' })} style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:8, padding:'12px', borderRadius:12, border:'1.5px dashed var(--gray-300)', background:'transparent', color:'var(--gray-500)', fontWeight:700, fontSize:13.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="plus" size={16} color="var(--gray-500)" />Add another child</button>
          </div>
        )}

        {s.key==='notifs' && (
          <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:22 }}>
            {NOTIF_ROWS.map(r => {
              const on = notif[r.id];
              return (
                <div key={r.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px', borderRadius:13, border:'1px solid var(--gray-200)', background:'#fff' }}>
                  <span style={{ width:38, height:38, borderRadius:10, background:'var(--gray-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={r.icon} size={18} color="var(--gray-600)" /></span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{r.label}</div>
                    <div style={{ fontSize:12, color:'var(--gray-500)' }}>{r.sub}</div>
                  </div>
                  <button onClick={()=>!r.locked && setNotif(n=>({ ...n, [r.id]:!n[r.id] }))} style={{ width:48, height:28, borderRadius:'999px', border:0, cursor: r.locked?'default':'pointer', padding:2, background: on?'var(--success-500)':'var(--gray-300)', opacity: r.locked?.6:1, flex:'0 0 auto', display:'flex', justifyContent: on?'flex-end':'flex-start' }}>
                    <span style={{ width:24, height:24, borderRadius:'999px', background:'#fff', display:'block', boxShadow:'0 1px 3px rgba(0,0,0,.2)' }} />
                  </button>
                </div>
              );
            })}
          </div>
        )}

        {s.key==='pickup' && (
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:11, marginTop:22 }}>
            {PICKUP_OPTS.map(o => {
              const on = pickup===o.id;
              return (
                <button key={o.id} onClick={()=>setPickup(o.id)} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:10, padding:'20px 12px', borderRadius:14, cursor:'pointer', fontFamily:'var(--font-sans)', border: on?'1.5px solid var(--gold-500)':'1px solid var(--gray-200)', background: on?'var(--gold-100)':'#fff' }}>
                  <Icon name={o.icon} size={26} color={on?'var(--gold-600)':'var(--gray-500)'} />
                  <span style={{ fontSize:14, fontWeight:700, color: on?'var(--gold-600)':'var(--ink)' }}>{o.label}</span>
                </button>
              );
            })}
          </div>
        )}

        {s.key==='done' && (
          <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:22 }}>
            {[
              { icon:'users-round', t:picked.length + (picked.length===1?' child linked':' children linked') },
              { icon:'bell', t:Object.values(notif).filter(Boolean).length + ' alert types on' },
              { icon:'car-front', t:'Default pickup: ' + (PICKUP_OPTS.find(o=>o.id===pickup)||{}).label },
            ].map((r,i)=>(
              <div key={i} style={{ display:'flex', alignItems:'center', gap:11, padding:'13px 14px', borderRadius:12, background:'var(--gray-50)' }}>
                <Icon name={r.icon} size={18} color="var(--success-500)" />
                <span style={{ fontSize:14, fontWeight:600, color:'var(--ink)' }}>{r.t}</span>
                <Icon name="check" size={17} color="var(--success-500)" style={{ marginLeft:'auto' }} />
              </div>
            ))}
          </div>
        )}
      </div>

      {/* footer */}
      <div style={{ padding:'12px 20px 34px', background:'#fff', borderTop:'1px solid var(--gray-100)', display:'flex', alignItems:'center', gap:12 }}>
        {step>0 && !last && <button onClick={back} style={{ width:52, height:52, borderRadius:14, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flex:'0 0 auto' }}><Icon name="arrow-left" size={20} color="var(--gray-600)" /></button>}
        <button onClick={next} disabled={s.key==='children' && picked.length===0} style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:9, border:0, borderRadius:14, padding:'16px', fontWeight:800, fontSize:16, cursor:(s.key==='children'&&picked.length===0)?'not-allowed':'pointer', fontFamily:'var(--font-sans)', background:(s.key==='children'&&picked.length===0)?'var(--gray-200)':'var(--gold-400)', color:(s.key==='children'&&picked.length===0)?'var(--gray-500)':'var(--on-gold)', boxShadow:(s.key==='children'&&picked.length===0)?'none':'var(--shadow-gold)' }}>
          {last ? 'Go to Home' : 'Continue'}<Icon name="arrow-right" size={18} color={(s.key==='children'&&picked.length===0)?'var(--gray-500)':'var(--on-gold)'} />
        </button>
      </div>
    </div>
  );
}
Object.assign(window, { OnboardingScreen });