// WeddingWhatWeHandle.jsx — Section D
const WEDDING_HANDLED = [
  'Curated trucks matched to your guest count, menu vision, and budget',
  'COI naming your venue + municipal permits + health-department coordination',
  'Coordination with your planner and venue timeline (cocktail hour, dinner, late-night)',
  'Multi-truck setups — savory + dessert + a mobile bar moment',
  'On-site coordinator the day of your wedding',
  'Allergen and dietary accommodations (vegan, gluten-free, halal, kosher)',
  'Card or ACH deposits with a clear contract — e-signed online',
  'Final invoice and receipt the day after',
];

const WeddingWhatWeHandle = () => (
  <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth:1000, margin:'0 auto' }}>
      <h2 style={{ margin:'0 0 40px' }}>What we handle, so you don't</h2>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'18px 48px' }} className="handle-grid">
        {WEDDING_HANDLED.map((item, i) => (
          <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:12 }}>
            <span style={{
              width:24, height:24, borderRadius:999, background: T.teal, color: T.white,
              display:'inline-flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto', marginTop:1,
            }}><IconCheck size={14} stroke={2.5} /></span>
            <span style={{ fontSize:16, lineHeight:1.5, color: T.ink }}>{item}</span>
          </div>
        ))}
      </div>
      <div style={{
        marginTop:40, padding:'22px 26px', background: T.white,
        border:`1px solid ${T.border}`, borderRadius:12, borderLeft:`3px solid ${T.teal}`,
      }}>
        <p style={{ margin:0, fontSize:16, lineHeight:1.6, color: T.ink }}>
          Behind it all: a real booking platform — online quotes, e-signed contracts, secure payments.
          Boutique attention, professional back office.
        </p>
      </div>
    </div>
    <style>{`
      @media (max-width: 720px) { .handle-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

Object.assign(window, { WeddingWhatWeHandle });