/* Professor's Transport Services page */

function PageServices() {
 const services = [
 {
 n: "01",
 title: "Dry vans",
 icon: <Icon.truck />,
 summary: "Our largest equipment pool. 53-foot dry vans for general palletized freight, retail, manufactured goods and industrial supply.",
 features: [
 ["53′ trailers", "Air-ride, swing or roll-up doors"],
 ["E-track interior", "Load locks and straps available"],
 ["GPS / telematics", "Real-time visibility through portal"],
 ["FSMA-compliant", "Sanitized for food-grade loads"],
 ],
 tags: ["TL", "LTL", "Short-haul", "Long-haul", "Regional"],
 },
 {
 n: "02",
 title: "Reefers & heaters",
 icon: <Icon.reefer />,
 summary: "Refrigerated and heated trailers keep your temperature-sensitive goods secure from origin to dock. Continuous data logging.",
 features: [
 ["Reefer range", "-25°C to +25°C, single or multi-temp"],
 ["Heated trailers", "Stable winter transport up to +10°C"],
 ["Continuous logging", "Setpoints, door events, alarms"],
 ["FSMA & HACCP", "Sanitation-verified food-safety"],
 ],
 tags: ["Multi-temp", "Frozen", "Chilled", "Heated", "Food-grade"],
 },
 {
 n: "03",
 title: "Hazardous materials",
 icon: <Icon.heavy />,
 summary: "HAZMAT-certified to move chemicals, sensitive materials and dangerous goods across borders with full TDG documentation.",
 features: [
 ["TDG certified", "Transportation of dangerous goods"],
 ["DOT compliant", "Cross-border haz-mat regs"],
 ["Class 3, 8, 9", "Flammable, corrosive, miscellaneous"],
 ["Spill response", "Trained drivers + 24/7 protocol"],
 ],
 tags: ["HAZMAT", "TDG", "DOT", "Class-3", "Class-8", "Class-9"],
 },
 {
 n: "04",
 title: "Cross-border & bonded",
 icon: <Icon.border />,
 summary: "C-TPAT, PIP, FAST, ACE and ACI certified. Customs-bonded service into all 48 contiguous US states.",
 features: [
 ["C-TPAT / PIP", "Trusted-trader supply chain security"],
 ["FAST lanes", "Expedited customs clearance"],
 ["ACE / ACI", "Electronic manifest filing"],
 ["In-bond service", "PARS, PAPS, T&E moves"],
 ],
 tags: ["FAST", "C-TPAT", "PIP", "ACE", "ACI", "Bonded"],
 },
 {
 n: "05",
 title: "3PL & freight forwarding",
 icon: <Icon.dedicated />,
 summary: "End-to-end logistics partnership for shippers who need more than a truck dedicated capacity, mode mixing, and supply-chain planning.",
 features: [
 ["Dedicated lanes", "Named drivers, committed capacity"],
 ["Mode mixing", "TL, LTL, expedited"],
 ["Project freight", "One-off complex movements"],
 ["Brokerage", "Trusted partner network"],
 ],
 tags: ["3PL", "Dedicated", "Brokerage", "Project"],
 },
 {
 n: "06",
 title: "Expedited & TL/LTL",
 icon: <Icon.truck />,
 summary: "Truckload, less-than-truckload, and expedited service when timing is the whole job. Team drivers available.",
 features: [
 ["Truckload (TL)", "Full-trailer dedicated service"],
 ["Less-than-truckload", "Shared-trailer for smaller loads"],
 ["Expedited", "Team drivers, non-stop service"],
 ["Same-day", "Available for GTA and corridor lanes"],
 ],
 tags: ["TL", "LTL", "Expedited", "Same-day", "Team"],
 },
 ];

 return (
 <PageShell current="services">
 <PageHero
 crumb={<span>Services</span>}
 eyebrow="Transportation & logistics services"
 title="Six ways we move *your freight.*"
 lede="From a 53′ dry van across the border to multi-temperature reefer service and hazardous-materials haulage, our equipment list is the foundation. Custom-tailored, every load."
 meta={[
 ["Equipment", "6 trailer types"],
 ["Reach", "Canada + US 48"],
 ["Cross-border", "C-TPAT / FAST"],
 ["Dispatch", "24/7 live"],
 ]}
 />

 <section className="section">
 <div className="container">
 <SectionHead
 num="01 / Equipment overview"
 title="A trailer for *every* commodity."
 lede="Our owned fleet covers temperature-sensitive, oversize, open-deck, palletized and hazardous freight. The chart below lists each service and its operating envelope."
 />

 <div>
 {services.map(s => (
 <article className="svc-row" key={s.n}>
 <div className="svc-row__n">{s.n}</div>
 <div className="svc-row__head">
 <div className="cap__icon" style={{marginBottom: 20}}>{s.icon}</div>
 <h3>{s.title}</h3>
 <p>{s.summary}</p>
 </div>
 <div className="svc-row__detail">
 <div className="svc-row__features">
 {s.features.map((f, i) => (
 <div className="svc-row__feature" key={i}>
 <h5>{f[0]}</h5>
 <span>{f[1]}</span>
 </div>
 ))}
 </div>
 <div className="svc-row__tags">
 {s.tags.map(t => <span key={t}>{t}</span>)}
 </div>
 </div>
 </article>
 ))}
 </div>
 </div>
 </section>

 <CTABanner
 title="Not sure which equipment your load needs?"
 lede="Tell us what's moving and we'll come back with the right trailer, lane, and rate within two hours."
 primary={{ label: "Get a quote", href: "contact.html" }}
 secondary={{ label: "View industries", href: "industries.html" }}
 />
 </PageShell>
 );
}

Object.assign(window, { PageServices });