// CaseStudies.jsx — Section G
const CASES = [
  {
    eyebrow: 'Campus',
    title:   'FDU welcome week',
    body:    'Two days, 1,200 students, 4 trucks rotated across campuses. Aramark-coordinated.',
    tone:    'teal',
    photo:   PHOTOS.cardCampus2,
    caption: 'Photo · students at FDU welcome week',
  },
  {
    eyebrow: 'Corporate',
    title:   'Novartis employee appreciation day',
    body:    '2,000 employees, 14 trucks across the campus, one coordinator running the day end to end.',
    tone:    'navy',
    photo:   PHOTOS.cardCorporate,
    caption: 'Photo · branded truck at corporate campus',
  },
  {
    eyebrow: 'Corporate',
    title:   'Corporate product launch',
    body:    'Tech client launch event, branded truck wrap, 600 guests in 3 hours.',
    tone:    'sky',
    photo:   PHOTOS.cardLargeEvent,
    caption: 'Photo · branded truck wrap at launch event',
  },
];

const CaseStudies = () => (
  <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:36, flexWrap:'wrap', gap:16 }}>
        <h2 style={{ margin:0 }}>Recent events</h2>
      </div>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {CASES.map((c, i) => (
          <div key={i} style={{
            display:'block', background: T.white, borderRadius:12, overflow:'hidden',
            border:`1px solid ${T.border}`, textDecoration:'none', color:'inherit',
          }}>
            <PhotoPlaceholder src={c.photo} caption={c.caption} tone={c.tone} ratio="16/9" style={{ borderRadius:0 }} />
            <div style={{ padding:'20px 22px 22px' }}>
              <div className="eyebrow" style={{ marginBottom:8 }}>{c.eyebrow}</div>
              <h3 style={{ fontSize:20, fontWeight:600, margin:'0 0 8px', color: T.navy }}>{c.title}</h3>
              <p style={{ fontSize:14, lineHeight:1.6, color: T.inkSoft, margin:'0 0 14px' }}>{c.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { CaseStudies });