// ValueProps.jsx — Section C
const PROPS = [
  {
    Icon: IconUser,
    title:'One coordinator, start to finish',
    body:'You get a single point of contact from quote to final invoice. No chasing five different trucks, no day-of surprises.',
  },
  {
    Icon: IconShield,
    title:'Insurance & permits handled',
    body:'COIs naming your company or venue, municipal permits, health-department paperwork — we manage all of it. Your facilities team gets what they need on time.',
  },
  {
    Icon: IconBolt,
    title:'Self-powered, low-footprint',
    body:'Our trucks bring their own power and water. No generators to rent, no hookups, no mess left in your lot or plaza.',
  },
];

const ValueProps = () => (
  <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 }}>Why companies hand us the whole event</h2>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {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, { ValueProps });