// HowItWorks.jsx — Section D
// Numerals in primary navy. Connector line in sky blue.
const STEPS = [
  { n:'01', title:'Tell us about your event', body:'Date, location, guest count, vibe. Two minutes online or one phone call.' },
  { n:'02', title:'Pick your trucks',         body:'We send a curated quote with the right trucks for your crowd and budget — usually within 4 hours.' },
  { n:'03', title:'Sign and pay online',      body:'E-sign the contract, deposit via card or ACH. We pull permits and confirm trucks.' },
  { n:'04', title:'Eat',                      body:'Your coordinator is on call the day of. Final invoice and receipt land the next morning.' },
];

const HowItWorks = () => (
  <section id="about" style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.white }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <h2 style={{ margin:'0 0 48px', maxWidth:720 }}>From inquiry to dessert truck, we handle it.</h2>
      <div className="grid-4" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32, position:'relative' }}>
        <div style={{ position:'absolute', left:'8%', right:'8%', top:26, height:2, background: T.sky, zIndex:0 }}/>
        {STEPS.map((s, i) => (
          <div key={i} style={{ position:'relative', zIndex:1 }}>
            <div className="numeral" style={{
              display:'inline-block', background: T.white,
              fontSize:44, fontWeight:700, color: T.navy, letterSpacing:'-0.02em', lineHeight:1,
              paddingRight:14, marginBottom:18,
            }}>{s.n}</div>
            <h3 style={{ fontSize:17, fontWeight:600, color: T.ink, margin:'0 0 8px' }}>{s.title}</h3>
            <p style={{ fontSize:14, lineHeight:1.6, color: T.inkSoft, margin:0 }}>{s.body}</p>
          </div>
        ))}
      </div>
      <p style={{ marginTop:56, color: T.inkSoft, fontSize:14, maxWidth:760, lineHeight:1.6 }}>
        Behind the scenes: full client portal, real-time vendor coordination, integrated payments. The same tooling enterprise caterers run — built for food trucks.
      </p>
    </div>
  </section>
);

Object.assign(window, { HowItWorks });