// WeddingValueProps.jsx — Section C
const WEDDING_PROPS = [
  {
    Icon: IconUser,
    title:'One coordinator, zero day-of stress',
    body:'From your first inquiry to the last guest served, one person runs it. You\u2019re dancing, not managing vendors.',
  },
  {
    Icon: IconShield,
    title:'Venue & insurance handled',
    body:'COIs naming your venue, municipal permits, health-department paperwork — done. Most NJ venues require it; we have it ready.',
  },
  {
    Icon: IconBolt,
    title:'Self-powered, fits any venue',
    body:'Barn, vineyard, rooftop, backyard — our trucks bring their own power and water and leave the space clean. No hookups, no venue headaches.',
  },
];

const WeddingValueProps = () => (
  <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:760 }}>The wedding moment your guests won't stop talking about</h2>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {WEDDING_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, { WeddingValueProps });