// PartyWhatWeHandle.jsx — Section D
const PARTY_HANDLED = [
  'Curated trucks matched to your guest count, menu vision, and budget',
  'COI + municipal permits + health-department coordination for a private event',
  'Coordination at private homes — driveways, backyards, and lawns welcome',
  'Multi-truck setups — savory + dessert for bigger gatherings',
  'On-site coordinator the day of your party',
  '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 PartyWhatWeHandle = () => (
  <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">
        {PARTY_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 }}>
          A party at your home is one-off event catering — fully in scope. (This isn't a recurring
          program; it's your day, run start to finish by one coordinator with a professional back office behind it.)
        </p>
      </div>
    </div>
    <style>{`
      @media (max-width: 720px) { .handle-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

Object.assign(window, { PartyWhatWeHandle });