// Services page
function ServicesPage({ setRoute }) {
  const services = [
    { n: '01', title: 'Expedited & Hot-Shot Freight',
      desc: 'Time-critical shipments dispatched within minutes. We keep units pre-positioned in major freight corridors to minimize deadhead.',
      specs: ['Pickup in 60–120 min typical', 'Dedicated truck — no re-brokering', 'Direct driver contact', 'Live GPS the entire route'] },
    { n: '02', title: 'Same-Day Delivery',
      desc: 'Regional same-day service across the Mid-Atlantic and Northeast. Pickups before noon deliver same business day within 400 mi.',
      specs: ['PA · NJ · NY · DE · MD · CT · VA', 'Cargo van & sprinter fleet', 'Signature-required POD', '24/7 dispatch response'] },
    { n: '03', title: 'Team Drivers — Nonstop OTR',
      desc: 'Two drivers, one truck, no stops. Ideal for coast-to-coast freight where hours-of-service on a solo driver would blow the deadline.',
      specs: ['Up to 1,100 mi per day', 'Cross-country in 48–72 hrs', 'Hazmat-endorsed teams available', 'Priority dispatch lane'] },
    { n: '04', title: 'Cargo Van',
      desc: 'The most cost-effective option for sub-pallet freight, parts runs, and documents. Up to ~3,000 lbs capacity.',
      specs: ['Up to 3,000 lbs / 4 pallets', 'Enclosed, climate-aware', 'E-track anchoring', 'Lowest rate per mile'] },
    { n: '05', title: 'Straight & Box Truck',
      desc: '14, 18, 20, and 26-foot straight trucks with liftgates. The workhorse for LTL-sized freight that needs dedicated handling.',
      specs: ['14ft – 26ft equipment', 'Tuck-away liftgates', 'Moving blankets + e-track', 'Up to 10,000 lbs'] },
    { n: '06', title: 'Hazmat & TWIC',
      desc: 'Hazmat-endorsed drivers and TWIC-credentialed units for port and secured-facility access. Class-specific training on file.',
      specs: ['Hazmat endorsement current', 'TWIC-carded drivers', 'Placarded equipment available', 'Chain-of-custody documentation'] },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <span className="section-kicker">SERVICES</span>
        <h1 className="page-title">Equipment matched<br/>to the deadline.</h1>
        <p className="page-lede">Every load rides on a dedicated Babiline unit. No re-brokering, no mystery trucks, no surprises on the invoice.</p>
      </div>

      <div className="services-long">
        {services.map((s, i) => (
          <div key={s.n} className="service-row">
            <div className="service-row-left">
              <span className="service-row-num">{s.n}</span>
              <h2>{s.title}</h2>
            </div>
            <div className="service-row-right">
              <p className="service-row-desc">{s.desc}</p>
              <ul className="spec-list">
                {s.specs.map((sp, j) => (
                  <li key={j}><span className="spec-bullet">—</span> {sp}</li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>

      <section className="book-load-cta">
        <div>
          <h2>Have a load that can't wait?</h2>
          <p>Call dispatch 24/7 or email us — we'll send equipment availability and a rate within the hour.</p>
        </div>
        <div className="book-cta-actions">
          <a href="tel:+14842355888" className="btn btn-primary btn-lg">Call Dispatch</a>
          <a href="mailto:contact@babilineinc.com" className="btn btn-ghost btn-lg">Email RFQ</a>
        </div>
      </section>
    </div>
  );
}

window.ServicesPage = ServicesPage;