// DeliveryModel — the three-call / three-day spine of OfferIQ v3.
// Sits between the hero and the example showcase. "Read this before the pillars."
// One span label frames the whole window: 72 hours, onboarding to a live result.
// Constraints (3 human-hours, call lengths) live in each card's body, not as pills.

const DELIVERY_DAYS = [
  {
    day: 'Day 1',
    title: 'Tech Call',
    icon: 'fa-headset',
    body: 'Intake happens here. We collect the inputs on top of the standard tech intake.',
    kind: 'call',
  },
  {
    day: 'Day 1 to 3',
    title: 'Implementation',
    icon: 'fa-gears',
    body: 'Behind-the-scenes build. Max 3 human-hours of labor in the ~24h after the tech call.',
    kind: 'work',
  },
  {
    day: 'Day 2',
    title: 'Training call',
    icon: 'fa-chalkboard-user',
    body: '45 min (60 budgeted): a HighLevel lay of the land, plus a 15-minute custom training block for this offer.',
    kind: 'call',
  },
  {
    day: 'Day 3',
    title: 'Launch call',
    icon: 'fa-rocket',
    body: 'Extendly-run, 30 minutes budgeted: under 15 to show it working (test data ok) and get the yes, then the go-live plan. Frames the two-week check-in.',
    kind: 'call',
  },
];

function DeliveryModel() {
  return (
    <section className="delivery-section">
      <div className="container-narrow">
        <div className="numchip" style={{marginBottom:14}}>
          <span className="dot" style={{background:'var(--ext-grad-secondary)'}}><i className="fas fa-calendar-check" style={{fontSize:10}}></i></span>
          <span>Read this before the pillars</span>
        </div>
        <h2 className="page-h2" style={{marginBottom:10}}>The delivery model.</h2>
        <p className="page-lead" style={{marginBottom:24}}>
          Every offer ships across three calls on three days. We do the delivery; you do the selling. The clock starts at the tech onboarding call and the result is live by the launch call.
        </p>

        <div className="dm-span">
          <span className="dm-span-label"><strong>72 hours</strong> from onboarding to a result the customer sees</span>
        </div>

        <ol className="dm-track">
          {DELIVERY_DAYS.map((d, i) => (
            <li key={i} className={`dm-step ${d.kind}`}>
              <div className="dm-step-top">
                <span className="dm-icon"><i className={`fas ${d.icon}`}></i></span>
                <span className="dm-day">{d.day}</span>
              </div>
              <div className="dm-title">{d.title}</div>
              <div className="dm-body">{d.body}</div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

window.DeliveryModel = DeliveryModel;