// CampusFleet.jsx — Section F (campus-relevant fleet)
// Data-driven from window.FTOTM_TRUCKS, filtered to campus "Best For", featured first.
const CampusFleet = () => {
  const ref = React.useRef(null);
  const scroll = (d) => { if (ref.current) ref.current.scrollBy({ left: d * (ref.current.clientWidth * 0.75), behavior: 'smooth' }); };
  const items = (window.ftotmPickTrucks ? window.ftotmPickTrucks({ bestFor: ['Campus', 'School'], limit: 8 }) : []);
  if (!items.length) return null;
  const cbtn = { width:40, height:40, borderRadius:999, border:`1px solid ${T.border}`, background:T.white, color:T.ink, cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center' };
  return (
    <section id="fleet" style={{ padding:'clamp(64px, 8vw, 96px) 0', background: T.bgAlt }}>
      <div style={{ maxWidth:1200, margin:'0 auto', padding:'0 24px' }}>
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:32, gap:16, flexWrap:'wrap' }}>
          <h2 style={{ margin:0 }}>Trucks students (and staff) line up for</h2>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <a href="/trucks/" className="btn-link" style={{ fontSize:14, fontWeight:600, marginRight:4 }}>View all trucks <span className="arrow">→</span></a>
            <button onClick={() => scroll(-1)} aria-label="Previous" style={cbtn}><IconChevL size={18} /></button>
            <button onClick={() => scroll(1)} aria-label="Next" style={cbtn}><IconChevR size={18} /></button>
          </div>
        </div>
      </div>
      <div ref={ref} className="hide-scrollbar" style={{ display:'flex', gap:24, overflowX:'auto', scrollSnapType:'x mandatory', padding:'4px clamp(24px, 4vw, calc((100vw - 1200px) / 2 + 24px)) 24px' }}>
        {items.map((t) => (
          <div key={t.slug} style={{ scrollSnapAlign:'start' }}>
            <a href={`/trucks/${t.slug}/`} className="truck-card" style={{ flex:'0 0 calc((100% - 48px) / 3)', minWidth:280, display:'block', textDecoration:'none', color:'inherit', border:`1px solid ${T.border}`, borderRadius:12, overflow:'hidden', background:T.white }}>
              <div style={{ height:150, background:T.skyTint, display:'flex', alignItems:'center', justifyContent:'center', borderBottom:`1px solid ${T.border}` }}>
                <img src={t.logo} alt={`${t.name} logo`} loading="lazy" style={{ maxHeight:96, maxWidth:'72%', width:'auto', objectFit:'contain' }} />
              </div>
              <div style={{ padding:18 }}>
                <div style={{ fontWeight:700, fontSize:17, color: T.ink, marginBottom:2 }}>{t.name}</div>
                <div style={{ fontSize:13, color: T.inkSoft, marginBottom:12 }}>{t.cuisine}</div>
                <div style={{ display:'flex', gap:6, marginBottom:14, flexWrap:'wrap' }}>
                  {(t.cuisines.length ? t.cuisines : [t.cuisine]).filter(Boolean).slice(0,2).map(tag => <span key={tag} className="chip">{tag}</span>)}
                </div>
                <span className="btn-link" style={{ fontSize:14, color: T.ink, fontWeight:600 }}>View truck <span className="arrow">→</span></span>
              </div>
            </a>
          </div>
        ))}
      </div>
    </section>
  );
};
Object.assign(window, { CampusFleet });