// 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',
    caption: 'Photo · students at FDU welcome week',
  },
  {
    eyebrow: 'Corporate',
    title:   '[Corporate client] employee appreciation day',
    body:    '[Number] employees, [number] trucks, branded service for [event purpose]. Tony to confirm the named client.',
    tone:    'navy',
    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',
    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>
        <a className="btn-link" href="#" style={{ fontSize:15 }}>All case studies <span className="arrow">→</span></a>
      </div>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {CASES.map((c, i) => (
          <a key={i} href="#" className="card-hoverable" style={{
            display:'block', background: T.white, borderRadius:12, overflow:'hidden',
            border:`1px solid ${T.border}`, textDecoration:'none', color:'inherit',
          }}>
            <PhotoPlaceholder 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>
              <span className="btn-link" style={{ fontSize:14, fontWeight:600 }}>Read case study <span className="arrow">→</span></span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { CaseStudies });