/* global React */
const { useState: useStateHero, useEffect: useEffectHero, useMemo: useMemoHero } = React;

const HERO_CONCEPTS = [
  {
    n: "01",
    label: "GTA → US lanes, live",
    headline: ["Dispatch the", "corridor.", "From the chat your", <em key="e">drivers</em>, " already use."],
    sub: "Dispatch, documents and driver comms — live across Canada–US corridors, in the same chat your drivers already use.",
    metaA: { label: "Built for", text: "GTA carriers running 10–200 power units across the ON/NY/MI/OH lanes." },
    metaB: { label: "Cross-border", text: "ACE / ACI / PARS / PAPS filed in-app. No second system. No third login." },
  },
  {
    n: "02",
    label: "Dispatch → Pickup → Delivery",
    headline: ["One load.", "Three stages.", "Zero phone calls between them."],
    sub: "Dispatch, pickup, delivery — tracked automatically. Dispatchers stop chasing drivers. Drivers stop chasing paperwork.",
    metaA: { label: "The loop", text: "Average load closes in 6.2 hours of dispatcher time vs. 11.8 on legacy TMS." },
    metaB: { label: "Operators love it", text: "50-truck fleets run the whole board with two dispatchers, not four." },
  },
  {
    n: "03",
    label: "Built in Canada",
    headline: ["Built in", "Canada.", "Not ported here from somewhere else."],
    sub: "The first TMS designed for the way Canadian carriers actually run — cross-border lanes, QuickBooks in CAD, and IFTA in quarters that don't surprise you.",
    metaA: { label: "Canadian presence", text: "Headquartered in Ontario. Onboarding done by people who've dispatched freight in Canada." },
    metaB: { label: "Driver-first", text: "A driver app built for the road, with dispatch-in-WhatsApp as a first-class channel." },
  },
  {
    n: "04",
    label: "The Canada–US lane",
    headline: ["From ", <em key="e">Canada</em>, " to the US", "in one continuous lane."],
    sub: "One platform for the whole shipment. ACE eManifest before the border. Proof of delivery before you're back at the yard. Invoice out before the driver clocks off.",
    metaA: { label: "Coverage", text: "ON, QC, BC, AB and beyond. Your TMS shouldn't need 3 tools to cover a single cross-border load." },
    metaB: { label: "Speed to ROI", text: "Most fleets recover subscription cost in month two — detention billing alone." },
  },
  {
    n: "05",
    label: "Dispatcher & driver, in sync",
    headline: ["One load.", "Two views.", "Always the same truth."],
    sub: "The dispatcher sees the board. The driver sees the job. Same load, same status, updated the second anything changes — no phone tag in between.",
    metaA: { label: "Dispatcher", text: "Full board, exceptions first, billing and compliance one click away." },
    metaB: { label: "Driver", text: "Just the next job — pickup, drop, docs — in the chat they already use." },
  },
];

function HeroViz({ concept, idx }) {
  if (idx === 0) return <MapViz />;
  if (idx === 1) return <CounterViz />;
  if (idx === 2) return <YardViz />;
  if (idx === 3) return <LaneViz />;
  return <SplitViz />;
}

function MapViz() {
  return (
    <div className="viz-map">
      <LeafMap
        center={[43.35, -79.45]}
        zoom={8}
        route={[CITY.brampton, CITY.hamilton, CITY.fortErie, CITY.buffalo]}
        points={[
          { at: CITY.brampton, label: "Brampton · HQ", color: "#3B82F6", hq: true },
          { at: CITY.toronto, label: "Toronto", color: "#94a3b8" },
          { at: CITY.buffalo, label: "Buffalo, NY", color: "#FBBF24" },
        ]}
      />
    </div>
  );
}

function CounterViz() {
  const [active, setActive] = useStateHero(0);
  useEffectHero(() => {
    const id = setInterval(() => setActive(a => (a + 1) % 3), 2200);
    return () => clearInterval(id);
  }, []);
  const rows = [
    { n: "01", label: "Dispatch", meta: "04:38 · WhatsApp" },
    { n: "02", label: "Pickup", meta: "06:12 · BOL signed" },
    { n: "03", label: "Delivery", meta: "13:44 · POD auto-filed" },
  ];
  return (
    <div className="viz-counter">
      {rows.map((r, i) => (
        <div key={i} className={`viz-counter-row ${i === active ? "active" : ""}`}>
          <div className="n">{r.n}</div>
          <div>
            <div className="label">{r.label}</div>
            <div className="meta">{r.meta}</div>
          </div>
          <div className="meta">{i === active ? "● LIVE" : "◦"}</div>
        </div>
      ))}
    </div>
  );
}

function YardViz() {
  const rows = [
    ["Office", "Scarborough, ON"],
    ["Founded", "2026 · in Canada"],
    ["Corridor", "Brampton → Buffalo"],
    ["Built by", "People who've run the lane"],
  ];
  return (
    <div className="viz-yard">
      <div className="viz-yard__eyebrow mono">Local presence · GTA</div>
      <div className="viz-yard__big">Built where the freight <em>actually moves</em> — not in a boardroom three time zones away.</div>
      <div className="viz-yard__rows">
        {rows.map(([k, v], i) => (
          <div className="viz-yard__row" key={i}><span className="mono">{k}</span><span>{v}</span></div>
        ))}
      </div>
    </div>
  );
}

function LaneViz() {
  return (
    <div className="viz-lane">
      <svg viewBox="0 0 400 220">
        <defs>
          <linearGradient id="laneg" x1="0%" x2="100%">
            <stop offset="0%" stopColor="#2563EB" />
            <stop offset="100%" stopColor="#FBBF24" />
          </linearGradient>
        </defs>
        {/* Road */}
        <path d="M 20 180 Q 120 120, 220 140 T 380 80" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="24" strokeLinecap="round" />
        <path d="M 20 180 Q 120 120, 220 140 T 380 80" fill="none" stroke="url(#laneg)" strokeWidth="2" strokeDasharray="12 8" strokeLinecap="round">
          <animate attributeName="stroke-dashoffset" from="0" to="-40" dur="1.5s" repeatCount="indefinite" />
        </path>
        {/* Labels */}
        <g fontFamily="JetBrains Mono" fontSize="8" fill="#F1F5F9">
          <circle cx="20" cy="180" r="4" fill="#2563EB" />
          <text x="26" y="184">BRAMPTON, ON</text>
          <circle cx="220" cy="140" r="3" fill="rgba(255,255,255,0.5)" />
          <text x="226" y="144">FORT ERIE · ACE FILED</text>
          <circle cx="380" cy="80" r="4" fill="#FBBF24" />
          <text x="310" y="70">BUFFALO, NY</text>
        </g>
        {/* Distance */}
        <text x="200" y="210" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="rgba(241,245,249,0.5)" letterSpacing="3">187 KM · 2H 14M</text>
      </svg>
    </div>
  );
}

function SplitViz() {
  return (
    <div className="viz-split">
      <div>
        <div className="mono">DISPATCHER VIEW</div>
        <h3>Load DDT-L0248<br />Brampton → Buffalo<br />Pickup 06:00</h3>
        <div className="mono" style={{ color: "var(--blue-2)" }}>● LIVE · on the board</div>
      </div>
      <div>
        <div className="mono">DRIVER VIEW</div>
        <h3 style={{ fontFamily: "var(--display)" }}>
          <span style={{ display: "block" }}>Next job</span>
          <span style={{ display: "block" }}>Pickup · Maple Lodge</span>
          <span style={{ display: "block" }}>06:00 · Door 14</span>
        </h3>
        <div className="mono" style={{ color: "var(--amber)" }}>● ON THE WAY</div>
      </div>
    </div>
  );
}

function Hero() {
  const [idx, setIdx] = useStateHero(0);
  const c = HERO_CONCEPTS[idx];
  return (
    <section className="hero" id="top">
      <div className="hero__num">{c.n}</div>

      <div className="hero__kicker">
        <span className="hero__kicker-dot" />
        <span className="mono">Lanexa · GTA Edition · <span className="maple" /> Canada</span>
      </div>

      <div className="hero__rail">
        {HERO_CONCEPTS.map((cc, i) => (
          <button key={i} className={i === idx ? "active" : ""} onClick={() => setIdx(i)}>
            {cc.n} — {cc.label}
          </button>
        ))}
        <div className="hero__rail-dots">[{idx + 1} / {HERO_CONCEPTS.length}]</div>
      </div>

      <div className="hero__main">
        <div>
          <h1 className="display h1 hero__title" key={idx}>
            {c.headline.map((part, i) => (
              <span className="line" key={i}><span className="line-inner">{part}</span></span>
            ))}
          </h1>

          <div className="hero__meta">
            <div className="hero__meta-item">
              <span className="mono">{c.metaA.label}</span>
              <p>{c.metaA.text}</p>
            </div>
            <div className="hero__meta-item">
              <span className="mono">{c.metaB.label}</span>
              <p>{c.metaB.text}</p>
            </div>
          </div>

          <div className="hero__cta">
            <a href="/contact" className="btn btn--solid" onClick={(e) => { e.preventDefault(); window.__navigate && window.__navigate("contact"); }}>Book a 20-min demo <Arrow /></a>
            <a href="#" className="btn" onClick={(e) => { e.preventDefault(); window.__scrollToId && window.__scrollToId("features"); }}>See the product</a>
          </div>
        </div>

        <div className="hero__viz">
          <div className="hero__viz-label">
            <span className="dot" /> {c.n} · {c.label}
          </div>
          <HeroViz idx={idx} concept={c} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });