// CampusOccasionStrip.jsx — Section B
const CAMPUS_OCCASIONS = [
  { label:'Welcome week & move-in',            Icon: IconUsers  },
  { label:'Faculty & staff appreciation',      Icon: IconHand   },
  { label:'Alumni weekend & homecoming',       Icon: IconStar   },
  { label:'Commencement & graduation',         Icon: IconCap    },
  { label:'Club fairs, recruitment & athletics', Icon: IconTrophy },
  { label:'School fundraisers & nonprofit events', Icon: IconGift },
];

const CampusOccasionStrip = () => (
  <section style={{ padding:'clamp(40px, 5vw, 64px) 24px', background: T.bgAlt, borderTop:`1px solid ${T.border}` }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:14 }} className="occasion-grid">
        {CAMPUS_OCCASIONS.map((o, i) => {
          const Ico = o.Icon;
          return (
            <div key={i} style={{
              background: T.white, border:`1px solid ${T.border}`, borderRadius:12,
              padding:'18px 16px', display:'flex', flexDirection:'column', gap:10,
              alignItems:'flex-start', minHeight:96,
            }}>
              <span style={{
                width:36, height:36, borderRadius:8, background: T.skyTint, color: T.teal,
                display:'inline-flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto',
              }}><Ico size={18} /></span>
              <span style={{ fontSize:13.5, lineHeight:1.35, color: T.ink, fontWeight:500, textWrap:'balance' }}>{o.label}</span>
            </div>
          );
        })}
      </div>
    </div>
    <style>{`
      @media (max-width: 960px) { .occasion-grid { grid-template-columns: repeat(3, 1fr) !important; } }
      @media (max-width: 560px) { .occasion-grid { grid-template-columns: repeat(2, 1fr) !important; } }
    `}</style>
  </section>
);

Object.assign(window, { CampusOccasionStrip });