// AudienceTiles.jsx — Section B
const AUDIENCES = [
  {
    label: 'Corporate & office events',
    pitch: 'Employee appreciation days, holiday parties, product launches, summer cookouts.',
    cta:   'See corporate options',
    href:  'corporate.html',
    tone:  'navy',
    caption: 'Photo · branded truck at corporate campus quad',
  },
  {
    label: 'Campus & schools',
    pitch: 'Welcome week, alumni weekend, faculty appreciation, K-12 staff days, fundraisers.',
    cta:   'See campus options',
    href:  'campus.html',
    tone:  'teal',
    caption: 'Photo · FDU welcome week, students in line',
  },
  {
    label: 'Weddings & private events',
    pitch: 'Wedding receptions, cocktail hours, late-night snacks, graduations, backyard parties.',
    cta:   'See wedding options',
    href:  'weddings.html',
    tone:  'sky',
    caption: 'Photo · late-night taco truck at a wedding venue',
  },
];

const AudienceTiles = () => (
  <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.white }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', flexWrap:'wrap', gap:16, marginBottom:36 }}>
        <h2 style={{ margin:0 }}>Who we cater for</h2>
        <p style={{ margin:0, color: T.inkSoft, fontSize:16 }}>Three audiences. One coordinator handles all of them.</p>
      </div>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {AUDIENCES.map((a, i) => (
          <a key={i} href={a.href} className="card card-hoverable" style={{ textDecoration:'none', color:'inherit', border:`1px solid ${T.border}`, display:'block' }}>
            <PhotoPlaceholder caption={a.caption} tone={a.tone} ratio="4/3" style={{ marginBottom:18 }} />
            <h3 style={{ fontSize:20, margin:'0 0 8px', fontWeight:600, color: T.navy }}>{a.label}</h3>
            <p style={{ fontSize:15, color: T.inkSoft, lineHeight:1.55, margin:'0 0 16px' }}>{a.pitch}</p>
            <span className="btn-link" style={{ fontSize:14, color: T.ink, fontWeight:600 }}>
              {a.cta} <span className="arrow">→</span>
            </span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { AudienceTiles });