// CampusAdjacentOccasions.jsx — Section I (cross-link to sibling hubs)
const CAMPUS_SIBLINGS = [
  { label:'Corporate & office events', pitch:'Office lunches, employee appreciation, holiday parties, launches.', href:'corporate.html',                       tone:'navy', photo:PHOTOS.cardCorporate, caption:'Photo · branded truck at a corporate office park' },
  { label:'Weddings & private events', pitch:'Receptions, cocktail hours, late-night snacks, backyard parties.', href:'weddings.html',       tone:'sky',  photo:PHOTOS.cardWedding, caption:'Photo · late-night truck at a wedding venue' },
  { label:'Large events',              pitch:'Festivals, grand openings, multi-truck activations at any scale.',  href:'large-events.html',  tone:'teal', photo:PHOTOS.cardLargeEvent, caption:'Photo · multi-truck activation at a large event' },
];

const CampusAdjacentOccasions = () => (
  <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.white }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <h2 style={{ margin:'0 0 36px' }}>Other events we cater</h2>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {CAMPUS_SIBLINGS.map((s, i) => (
          <a key={i} href={s.href} className="card card-hoverable" style={{ textDecoration:'none', color:'inherit', border:`1px solid ${T.border}`, display:'block' }}>
            <PhotoPlaceholder src={s.photo} caption={s.caption} tone={s.tone} ratio="4/3" style={{ marginBottom:18 }} />
            <h3 style={{ fontSize:20, margin:'0 0 8px', fontWeight:600, color: T.navy }}>{s.label}</h3>
            <p style={{ fontSize:15, color: T.inkSoft, lineHeight:1.55, margin:'0 0 16px' }}>{s.pitch}</p>
            <span className="btn-link" style={{ fontSize:14, color: T.ink, fontWeight:600 }}>
              Explore {s.label.split(' ')[0].toLowerCase()} <span className="arrow">→</span>
            </span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { CampusAdjacentOccasions });