/* global React */
function Corridor() {
  return (
    <section className="section corridor section--alt">
      <div className="section__top">
        <div className="section__num">04</div>
        <div className="section__label">
          <span className="eyebrow">Built for the Canadian corridor</span>
          <h2 className="display h2"><em style={{ fontStyle: "normal", background: "linear-gradient(90deg, var(--blue-2), var(--sky))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Canada</em> runs this lane. So do we.</h2>
        </div>
      </div>
      <div className="corridor__grid">
        <div>
          <Reveal>
            <p className="lead">The Canada–US freight corridor moves most of the cross-border reefer in this country — and the dispatch desks running it look nothing like a US carrier's. We built in Canada, we hire in Canada, and the product reflects how the work actually happens here.</p>
          </Reveal>
          <div className="corridor__stats">
            <Reveal as="div" className="stat-item"><div className="num">6,400+</div><div className="label">Canadian power units</div></Reveal>
            <Reveal as="div" className="stat-item" delay={80}><div className="num">187 km</div><div className="label">GTA → Fort Erie</div></Reveal>
            <Reveal as="div" className="stat-item" delay={160}><div className="num">2 h 14 m</div><div className="label">Avg. corridor drive time</div></Reveal>
            <Reveal as="div" className="stat-item" delay={240}><div className="num">$47k CAD</div><div className="label">Avg. detention recovered, yr 1</div></Reveal>
          </div>
          <div className="hero__cta" style={{ marginTop: "2rem" }}>
            <a href="/contact" className="btn" onClick={(e) => { e.preventDefault(); window.__navigate && window.__navigate("contact"); }}>Talk to our Canadian team <Arrow /></a>
          </div>
        </div>
        <div className="corridor__map">
          <LeafMap
            center={[43.35, -79.45]}
            zoom={8}
            route={[CITY.brampton, CITY.hamilton, CITY.fortErie, CITY.buffalo]}
            points={[
              { at: CITY.brampton, label: "Brampton · GTA hub", color: "#3B82F6", hq: true },
              { at: CITY.mississauga, label: "Mississauga", color: "#94a3b8" },
              { at: CITY.buffalo, label: "Buffalo, NY · CBSA", color: "#FBBF24" },
            ]}
          />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Corridor });