// TruckCarousel.jsx — Section F
// Real fleet names pulled from the /trucks/ archive (per May 27 review).
// PLACEHOLDER until Airtable-driven: cuisine + tag mapping should be verified per truck.
const TRUCKS = [
  { name:'Pizza Vita',          cuisine:'Wood-fired pizza',       tags:['Office lunch','Wedding'],   tone:'red'  },
  { name:'Avellino\u2019s',     cuisine:'Italian street food',    tags:['Office lunch','Campus'],    tone:'warm' },
  { name:'Glazed & Confused',   cuisine:'Donuts & coffee',        tags:['Morning','Private'],        tone:'mix'  },
  { name:'Carlitos',            cuisine:'Latin American',         tags:['Corporate','Campus'],       tone:'dark' },
  { name:'Empanada Guy',        cuisine:'Empanadas',              tags:['Office lunch','Campus'],    tone:'mix'  },
  { name:'Cold Stone Creamery', cuisine:'Ice cream',              tags:['Wedding','Private'],        tone:'warm' },
  { name:'Brownie Bar',         cuisine:'Brownies & desserts',    tags:['Office lunch','Wedding'],   tone:'red'  },
  { name:'Curry Hill',          cuisine:'Indian',                 tags:['Corporate','Campus'],       tone:'dark' },
];

const TruckCard = ({ t }) => (
  <a href="#" 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',
  }} className="truck-card">
    <PhotoPlaceholder caption={`Hero food photo · ${t.cuisine}`} tone={t.tone} ratio="4/3" style={{ borderRadius:0 }} />
    <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.tags.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>
);

const TruckCarousel = () => {
  const ref = React.useRef(null);
  const scroll = (dir) => {
    if (!ref.current) return;
    const w = ref.current.clientWidth;
    ref.current.scrollBy({ left: dir * (w * 0.75), behavior: 'smooth' });
  };
  return (
    <section id="trucks" 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' }}>
          <h2 style={{ margin:0 }}>Meet the fleet</h2>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <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',
      }}>
        {TRUCKS.map((t, i) => (
          <div key={i} style={{ scrollSnapAlign:'start' }}>
            <TruckCard t={t} />
          </div>
        ))}
      </div>
      <div style={{ maxWidth:1200, margin:'0 auto', padding:'0 24px', marginTop:8 }}>
        <a className="btn-link" href="#" style={{ fontSize:15 }}>See all 35+ trucks <span className="arrow">→</span></a>
      </div>
      <style>{`
        .hide-scrollbar::-webkit-scrollbar { display:none; }
        .hide-scrollbar { scrollbar-width: none; }
        .truck-card:hover { transform: translateY(-4px); box-shadow: ${T.shadowRaised}; }
      `}</style>
    </section>
  );
};

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',
};

Object.assign(window, { TruckCarousel });