// TruckCarousel.jsx — Section F · home "Meet the fleet"
// Data-driven from window.FTOTM_TRUCKS (generated from Airtable, public fields only).
// Featured trucks surface first; cards link to the real per-truck pages.
const ctrlBtn = {
  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',
};

const FleetCard = ({ t }) => (
  <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,
    transition:'transform .18s, box-shadow .18s',
  }}>
    <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}{t.featured ? ' ★' : ''}</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>
);

// Reusable fleet carousel (also used by the hub fleet sections).
const FleetCarousel = ({ id, title, subtitle, items }) => {
  const ref = React.useRef(null);
  const scroll = (dir) => { if (ref.current) ref.current.scrollBy({ left: dir * (ref.current.clientWidth * 0.75), behavior: 'smooth' }); };
  if (!items || !items.length) return null;
  return (
    <section id={id} style={{ padding:'clamp(64px, 8vw, 96px) 0', background: T.white }}>
      <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' }}>
          <div>
            <h2 style={{ margin:0 }}>{title}</h2>
            {subtitle && <p style={{ margin:'6px 0 0', color: T.inkSoft, fontSize:16 }}>{subtitle}</p>}
          </div>
          <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={ctrlBtn}><IconChevL size={18} /></button>
            <button onClick={() => scroll(1)}  aria-label="Next"     style={ctrlBtn}><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' }}><FleetCard t={t} /></div>
        ))}
      </div>
    </section>
  );
};

const TruckCarousel = () => {
  const items = (window.ftotmPickTrucks ? window.ftotmPickTrucks({ limit: 8 }) : []);
  return <FleetCarousel id="trucks" title="Meet the fleet" subtitle="35+ vetted NJ food trucks — one coordinator handles them all." items={items} />;
};

Object.assign(window, { TruckCarousel, FleetCarousel, FleetCard });