// CampusValueProps.jsx — Section C
const CAMPUS_PROPS = [
  {
    Icon: IconUser,
    title:'One coordinator for the whole event',
    body:'Welcome week, a multi-day reunion, a 4-truck rotation across two campuses — one point of contact runs all of it. This is exactly how we run FDU.',
  },
  {
    Icon: IconShield,
    title:'Vendor paperwork & compliance handled',
    body:'W-9s, COIs naming the institution, vendor-onboarding portals, and coordination with your dining-service operator (Aramark, Sodexo). We\u2019ve cleared these processes before.',
  },
  {
    Icon: IconBolt,
    title:'Self-powered, quad-ready',
    body:'Our trucks bring their own power and water — they set up on a quad, lot, or lawn with no hookups and leave it clean. Critical when facilities won\u2019t run power to the green.',
  },
];

const CampusValueProps = () => (
  <section id="why" style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.white }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <h2 style={{ margin:'0 0 40px', maxWidth:720 }}>Built for high-volume campus days</h2>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {CAMPUS_PROPS.map((p, i) => {
          const Ico = p.Icon;
          return (
            <div key={i} className="card" style={{ border:`1px solid ${T.border}`, display:'flex', flexDirection:'column', gap:14 }}>
              <span style={{
                width:48, height:48, borderRadius:10, background: T.skyTint, color: T.teal,
                display:'inline-flex', alignItems:'center', justifyContent:'center',
              }}><Ico size={24} /></span>
              <h3 style={{ fontSize:20, fontWeight:600, color: T.navy, margin:'4px 0 0' }}>{p.title}</h3>
              <p style={{ fontSize:15, lineHeight:1.6, color: T.inkSoft, margin:0 }}>{p.body}</p>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

Object.assign(window, { CampusValueProps });