/* Admin → Transportation: routes + fleet */
function TransportationScreen() {
  const routes = [
    { bus:'Bus #12', driver:'Mark Thompson', route:'Route 1 · East', students:24, status:'On Route', c:'blue', stBg:'var(--blue-100)', stFg:'var(--blue-600)' },
    { bus:'Bus #7',  driver:'Carla Reyes',   route:'Route 3 · West Loop', students:19, status:'Delayed 8m', c:'red', stBg:'var(--danger-100)', stFg:'var(--danger-600)' },
    { bus:'Bus #3',  driver:'Devon Pierce',  route:'Route 2 · North', students:22, status:'On Route', c:'navy', stBg:'var(--blue-100)', stFg:'var(--blue-600)' },
    { bus:'Bus #15', driver:'Maya Okafor',   route:'Route 4 · South', students:17, status:'Completed', c:'green', stBg:'var(--success-100)', stFg:'var(--success-600)' },
    { bus:'Bus #9',  driver:'Sam Whitfield', route:'Route 5 · Central', students:21, status:'Idle', c:'gold', stBg:'var(--gray-200)', stFg:'var(--gray-600)' },
  ];
  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:18 }}>
        <StatTile icon="bus" tint="var(--blue-100)" ic="var(--blue-500)" value="25" label="Total Buses · 20 active" delta="20 live" spark={[22,24,21,25,23,24,25]} />
        <StatTile icon="route" tint="var(--gold-100)" ic="var(--gold-600)" value="12" label="Routes · all assigned" delta="100%" trend="up" spark={[10,11,11,12,12,12,12]} />
        <StatTile icon="users" tint="var(--success-100)" ic="var(--success-600)" value="468" label="Riders Today · 94% boarded" delta="+6%" trend="up" spark={[410,432,448,455,460,464,468]} />
        <StatTile icon="alert-triangle" tint="var(--danger-100)" ic="var(--danger-500)" value="1" label="Delays · Bus #7" delta="1 active" trend="down" spark={[3,2,2,3,1,2,1]} />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:16, marginBottom:16 }}>
        <Panel title="Live Fleet Map" action={<span style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:12.5, fontWeight:700, color:'var(--success-600)' }}><span style={{ width:8, height:8, borderRadius:'999px', background:'var(--success-500)' }} />Live</span>} pad={false}>
          <AdminMap />
        </Panel>
        <Panel title="Route Health">
          {[['Route 1','98%','var(--success-500)'],['Route 2','95%','var(--success-500)'],['Route 3','72%','var(--danger-500)'],['Route 4','100%','var(--success-500)'],['Route 5','88%','var(--warning-500)']].map(([r,p,col],i)=>(
            <div key={i} style={{ padding:'9px 0', borderBottom: i<4?'1px solid var(--gray-100)':'0' }}>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, marginBottom:6 }}><span style={{ fontWeight:700, color:'var(--ink)' }}>{r}</span><span style={{ color:col, fontWeight:700 }}>{p}</span></div>
              <div style={{ height:7, background:'var(--gray-200)', borderRadius:'999px', overflow:'hidden' }}><div style={{ width:p, height:'100%', background:col, borderRadius:'999px' }} /></div>
            </div>
          ))}
        </Panel>
      </div>

      <Panel title="Fleet & Routes" action={<span onClick={()=>jlToast('Route manager opened', { icon:'route' })} style={{ fontSize:12.5, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}>Manage Routes</span>} pad={false}>
        <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1.6fr 1.6fr 1fr 1fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
          <span>Bus</span><span>Driver</span><span>Route</span><span>Riders</span><span style={{ textAlign:'right' }}>Status</span>
        </div>
        {routes.map((r,i)=>(
          <div key={i} onClick={()=>jlToast(r.bus + ' · ' + r.driver, { icon:'bus-front' })} className="jl-alert-row" style={{ display:'grid', gridTemplateColumns:'1.2fr 1.6fr 1.6fr 1fr 1fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5, cursor:'pointer' }}>
            <span style={{ display:'flex', alignItems:'center', gap:9, fontWeight:700, color:'var(--ink)' }}><span style={{ width:28, height:28, borderRadius:8, background:'var(--gold-100)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="bus-front" size={15} color="var(--gold-600)" /></span>{r.bus}</span>
            <span style={{ display:'flex', alignItems:'center', gap:9 }}><Avatar initials={r.driver.split(' ').map(w=>w[0]).join('')} color={r.c} size={28} /><span style={{ color:'var(--gray-700)' }}>{r.driver}</span></span>
            <span style={{ color:'var(--gray-600)' }}>{r.route}</span>
            <span style={{ color:'var(--gray-600)' }}>{r.students}</span>
            <span style={{ justifySelf:'end' }}><Pill bg={r.stBg} fg={r.stFg}>{r.status}</Pill></span>
          </div>
        ))}
      </Panel>
    </div>
  );
}
Object.assign(window, { TransportationScreen });