/* global React */
const { useState: useStatePages } = React;

/* ========== WHO WE SERVE ========== */
const SEGMENTS = [
  {
    key: "carriers",
    name: "Carriers",
    tag: "10–200 power units",
    pitch: "The operating system for the truck. Dispatch, settle, invoice and comply — all from one board, with WhatsApp wired into every load.",
    points: [
      ["Dispatch", "Drag loads from the board directly into WhatsApp threads. Drivers never log into a portal they hate."],
      ["Settlement", "Pay drivers the day the load closes. Deductions, advances and bonuses roll into one statement."],
      ["Cross-border", "ACE and ACI eManifest from inside the load record. No second tool, no broker follow-up email."],
      ["Reporting", "Lane profitability per driver, per customer, per truck — in Canadian units and CAD."],
    ],
    stat: [["140+", "active carrier fleets"], ["$18/truck", "detention recovered per week"], ["6 mo", "avg. payback"]],
  },
  {
    key: "brokers",
    name: "Brokers",
    tag: "Freight-first, ops-light",
    pitch: "A broker board that doesn't pretend to be a carrier TMS. Price, post, cover, track, invoice — in the order a broker actually works.",
    points: [
      ["Load board sync", "DAT, Truckstop, Loadlink and 123Loadboard — one inbox, dedupe on post."],
      ["Carrier scorecard", "Auto-rank by on-time %, document-completeness, detention behaviour."],
      ["Rate con → invoice", "One record. One PDF. One source of truth. QuickBooks reconciles it for you."],
      ["Track-and-trace", "Share a branded link. No app install. No phone tag."],
    ],
    stat: [["3x", "posts per agent"], ["68%", "auto-covered loads"], ["$9", "cost per covered load"]],
  },
  {
    key: "3pls",
    name: "3PLs",
    tag: "Asset-light, customer-heavy",
    pitch: "For mixed fleets and agent networks. One platform for the loads you broker and the loads you move — with a shipper portal your customers actually use.",
    points: [
      ["Multi-entity", "Books, bank accounts and POD chains per legal entity. Consolidate without co-mingling."],
      ["Agent roles", "Commission tiers, per-agent P&L, approvals that don't block closing."],
      ["Shipper portal", "Branded. Booked in 90 seconds. SLA-aware. Monthly statements auto-emailed."],
      ["EDI for carriers", "204/214/210/997 — without the word 'EDI' ever reaching your ops team."],
    ],
    stat: [["2.4x", "faster cash conversion"], ["14", "portals retired per avg. customer"], ["0", "EDI consultants"]],
  },
  {
    key: "shippers",
    name: "Shippers",
    tag: "Self-service TMS for the buyer",
    pitch: "Move your freight with a roster of trusted carriers, on rates you've already agreed. Not a broker — a system of record you own.",
    points: [
      ["Carrier roster", "Pre-approved, compliance-checked, rate-carded. Routing guide that actually routes."],
      ["Tender & tracking", "Tender to carrier in one click. Track without asking. Detention billed transparently."],
      ["Spend visibility", "Per-lane, per-carrier, per-mode. Quarterly review packets auto-built."],
      ["Compliance", "COI, authority, insurance, safety score — monitored and auto-blocked when lapsed."],
    ],
    stat: [["−12%", "freight spend yr 1"], ["97%", "tender acceptance"], ["4×", "visibility coverage"]],
  },
];

function ServePage() {
  const [seg, setSeg] = useStatePages(0);
  const s = SEGMENTS[seg];
  return (
    <main>
      <section className="subhero">
        <div className="subhero__crumb">Home / Who We Serve</div>
        <h1 className="display h1" style={{ fontSize: "clamp(2.5rem, 7vw, 6rem)" }}>
          Four ways to run<br />
          <em style={{ fontStyle: "normal", background: "linear-gradient(90deg, var(--blue-2), var(--sky))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>the corridor.</em>
        </h1>
        <p className="lead">One platform, tuned for the way your business actually moves freight. Pick the one that sounds like you.</p>
        <div className="tabs" style={{ marginTop: "3rem" }}>
          {SEGMENTS.map((x, i) => (
            <button key={i} className={`tab ${i === seg ? "active" : ""}`} onClick={() => setSeg(i)}>
              {String(i + 1).padStart(2, "0")} — {x.name}
            </button>
          ))}
        </div>
      </section>
      <section className="section">
        <div className="serve-stage">
          <div className="serve-stage__viz">
            <OpsConsole segment={s.key} />
          </div>
          <div className="serve-stage__label">
            <div className="section__num">{String(seg + 1).padStart(2, "0")}</div>
            <span className="eyebrow">{s.tag}</span>
            <h2 className="display h2">{s.name}.</h2>
            <p className="lead">{s.pitch}</p>
          </div>
        </div>
        <div className="features" style={{ gridTemplateColumns: "repeat(2, 1fr)", marginTop: "clamp(3rem, 6vw, 5rem)" }}>
          {s.points.map(([k, v], i) => (
            <Reveal as="div" key={i} className="feature" delay={i * 60} style={{ borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none" }}>
              <div className="feature__num">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div className="feature__name">{k}</div>
                <div className="feature__desc">{v}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <div className="corridor__stats" style={{ marginTop: "4rem", gridTemplateColumns: "repeat(3, 1fr)" }}>
          {s.stat.map(([n, l], i) => (
            <div key={i} className="stat-item">
              <div className="num">{n}</div>
              <div className="label">{l}</div>
            </div>
          ))}
        </div>
      </section>
      <FinalCTA />
      <Footer />
    </main>
  );
}

/* ========== DISPATCH FEATURE PAGE ========== */
const DISPATCH_LOADS = [
  { id: "DDT-L0248", lane: "Brampton, ON → Buffalo, NY", status: "transit", driver: "Gurpreet S. · Unit 12", pickup: "06:00", delivery: "13:44", from: [43.7315, -79.7624], to: [42.8864, -78.8784] },
  { id: "DDT-L0249", lane: "Mississauga, ON → Detroit, MI", status: "assigned", driver: "Harinder P. · Unit 04", pickup: "08:15", delivery: "—", from: [43.589, -79.6441], to: [42.3314, -83.0458] },
  { id: "DDT-L0247", lane: "Brampton, ON → Chicago, IL", status: "delivered", driver: "Manpreet K. · Unit 07", pickup: "Yesterday", delivery: "Yesterday", from: [43.7315, -79.7624], to: [41.8781, -87.6298] },
  { id: "DDT-L0250", lane: "Toronto, ON → Montreal, QC", status: "assigned", driver: "David C. · Unit 18", pickup: "11:00", delivery: "—", from: [43.6532, -79.3832], to: [45.5019, -73.5674] },
  { id: "DDT-L0251", lane: "Oakville, ON → Cleveland, OH", status: "transit", driver: "Jasdeep B. · Unit 22", pickup: "05:30", delivery: "—", from: [43.4675, -79.6877], to: [41.4993, -81.6944] },
];

function DispatchPage() {
  const [sel, setSel] = useStatePages(0);
  const load = DISPATCH_LOADS[sel];
  return (
    <main>
      <section className="subhero">
        <div className="subhero__crumb">Home / Product / Dispatch</div>
        <h1 className="display h1" style={{ fontSize: "clamp(2.5rem, 7vw, 6rem)" }}>
          Dispatch built like a<br />
          <em style={{ fontStyle: "normal", background: "linear-gradient(90deg, var(--blue-2), var(--sky))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>logistics company</em> thinks.
        </h1>
        <p className="lead">A board, a driver, a WhatsApp thread. Everything else is a distraction.</p>
        <div className="hero__cta" style={{ marginTop: "2rem" }}>
          <a href="#" className="btn btn--solid" onClick={(e) => e.preventDefault()}>See a live demo <Arrow /></a>
          <a href="#" className="btn" onClick={(e) => e.preventDefault()}>Watch the 90-second walkthrough</a>
        </div>
      </section>

      <section className="section">
        <div className="serve-stage">
          <div className="serve-stage__viz"><DispatchStage /></div>
          <div className="serve-stage__label">
            <div className="section__num">01</div>
            <span className="eyebrow">The board · live preview</span>
            <h2 className="display h2">The single pane your dispatcher lives in.</h2>
            <p className="lead">Loads, drivers, documents, billing, tracking and compliance — six tools collapsed into one board your team never has to leave.</p>
          </div>
        </div>
        <div className="dispatch-demo" style={{ marginTop: "clamp(3rem, 6vw, 5rem)" }}>
          <div className="pane">
            <h4>Loads · Today</h4>
            {DISPATCH_LOADS.map((l, i) => (
              <div key={i} className={`dispatch-row ${i === sel ? "active" : ""}`} onClick={() => setSel(i)}>
                <div className="id">{l.id}</div>
                <div className="lane">{l.lane}</div>
                <div className={`dispatch-status dispatch-status--${l.status}`}>{l.status}</div>
              </div>
            ))}
          </div>
          <div className="pane" style={{ background: "var(--ink-3)" }}>
            <h4>Load · {load.id}</h4>
            <div style={{ fontFamily: "var(--display)", fontSize: "1.8rem", letterSpacing: "-0.01em", marginBottom: "1rem" }}>{load.lane}</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", marginBottom: "2rem" }}>
              <div><div className="mono">Pickup</div><div style={{ fontFamily: "var(--display)", marginTop: "4px" }}>{load.pickup}</div></div>
              <div><div className="mono">Delivery</div><div style={{ fontFamily: "var(--display)", marginTop: "4px" }}>{load.delivery}</div></div>
              <div><div className="mono">Driver</div><div style={{ fontFamily: "var(--display)", marginTop: "4px" }}>{load.driver}</div></div>
              <div><div className="mono">Status</div><div className={`dispatch-status dispatch-status--${load.status}`} style={{ marginTop: "4px" }}>{load.status}</div></div>
            </div>
            {/* live map */}
            <div style={{ position: "relative", width: "100%", height: "190px", borderRadius: "8px", overflow: "hidden", border: "1px solid rgba(255,255,255,0.06)" }}>
              <LeafMap
                key={load.id}
                route={[load.from, load.to]}
                points={[
                  { at: load.from, label: load.lane.split(" → ")[0].split(",")[0], color: "#3B82F6", hq: true },
                  { at: load.to, label: load.lane.split(" → ")[1].split(",")[0], color: "#FBBF24" },
                ]}
              />
            </div>
          </div>
          <div className="pane">
            <h4>Driver · WhatsApp</h4>
            <div style={{ background: "#1F2C34", borderRadius: "8px", padding: "10px", fontSize: "0.82rem", color: "#E9EDEF", marginBottom: "8px" }}>
              Morning boss — any loads for tomorrow?
              <div style={{ fontSize: "0.62rem", color: "#8696A0", textAlign: "right", marginTop: "4px" }}>04:38</div>
            </div>
            <div style={{ background: "#005C4B", borderRadius: "8px", padding: "10px", fontSize: "0.82rem", color: "#E9EDEF", marginBottom: "8px", marginLeft: "20px" }}>
              {load.lane}. {load.pickup} pickup.
              <div style={{ fontSize: "0.62rem", color: "rgba(255,255,255,0.5)", textAlign: "right", marginTop: "4px" }}>04:38 ✓✓</div>
            </div>
            <div style={{ background: "#1F2C34", borderRadius: "8px", padding: "10px", fontSize: "0.82rem", color: "#E9EDEF", marginBottom: "8px" }}>
              Copy. Heading out.
              <div style={{ fontSize: "0.62rem", color: "#8696A0", textAlign: "right", marginTop: "4px" }}>04:40</div>
            </div>
            <button className="btn btn--blue" style={{ width: "100%", justifyContent: "center", marginTop: "1rem" }}>Assign to driver <Arrow /></button>
          </div>
        </div>
      </section>

      <section className="section section--alt">
        <div className="section__top">
          <div className="section__num">02</div>
          <div className="section__label">
            <span className="eyebrow">Why dispatchers switch</span>
            <h2 className="display h2">A dispatcher runs 2× more loads. Without hiring another dispatcher.</h2>
          </div>
        </div>
        <div className="features" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
          {[
            ["01", "One-click assign", "Drag, drop, done. Driver gets it on WhatsApp. You get the ack."],
            ["02", "Exception-first", "The board doesn't show you loads going fine. It shows you loads going wrong."],
            ["03", "Auto-status", "ELD ping, WhatsApp photo, POD signature — status changes without a keystroke."],
            ["04", "Detention clock", "Starts when the truck hits the geofence. Bills without an argument."],
            ["05", "HOS-aware", "Lanexa refuses to assign a load a driver can't legally finish. You never have to check."],
            ["06", "Driver-friendly", "A driver app built for the road — simple, fast, and the same WhatsApp thread they already use."],
          ].map(([n, t, d], i) => (
            <Reveal key={i} className="feature" delay={i * 50} style={{ borderRight: (i + 1) % 3 === 0 ? "none" : "1px solid var(--line)" }}>
              <div className="feature__num">{n}</div>
              <div>
                <div className="feature__name">{t}</div>
                <div className="feature__desc">{d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
      <FinalCTA />
      <Footer />
    </main>
  );
}

/* ========== PRICING PAGE ========== */
function PricingPage() {
  const prices = [
    { tier: "Starter", soon: true, desc: "For growing carriers & dispatchers getting started.", feats: ["Dispatch board", "WhatsApp comms", "POD capture", "Invoicing → QuickBooks", "Driver app", "Email support"] },
    { tier: "Fleet", soon: true, feat: true, desc: "For established carriers, brokers & 3PLs.", feats: ["Everything in Starter", "ACE · ACI · PARS · PAPS", "Driver settlement", "Customer portal", "BI · lane profitability", "ELD integrations (7)", "Priority support · Canadian team"] },
    { tier: "Enterprise", base: null, desc: "Multi-entity operations & large networks.", feats: ["Everything in Fleet", "SSO · SCIM · audit logs", "Custom EDI · API", "On-site implementation", "Dedicated success manager", "Volume pricing", "99.9% uptime SLA"] },
  ];

  return (
    <main>
      <section className="subhero">
        <div className="subhero__crumb">Home / Pricing</div>
        <h1 className="display h1" style={{ fontSize: "clamp(2.5rem, 7vw, 6rem)" }}>
          Priced per <em style={{ fontStyle: "normal", background: "linear-gradient(90deg, var(--blue-2), var(--sky))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>user</em>.<br />
          Not per truck.
        </h1>
        <p className="lead">You shouldn't pay more just because you grew your fleet. Lanexa is priced per seat — dispatchers, ops and billing. Final plans are landing soon; get on the list and we'll price you fairly.</p>
        <div style={{ marginTop: "2rem", display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }}>
          <a href="#waitlist" className="btn btn--solid" onClick={(e) => { e.preventDefault(); window.__navigate && window.__navigate("home"); setTimeout(() => window.__scrollToId && window.__scrollToId("waitlist"), 180); }}>Get early access <Arrow /></a>
          <span className="mono">User-based · CAD · unlimited trucks &amp; loads</span>
        </div>
      </section>

      <section className="section">
        <div className="pricing-tease">
          {prices.map((p, i) => (
            <div key={i} className={`price-card ${p.feat ? "price-card--feature" : ""}`}>
              <div className="tier" style={p.feat ? { color: "var(--paper)" } : {}}>{p.tier}{p.feat ? " · most popular" : ""}</div>
              <div className="amount">
                {p.base === null ? "Custom" : "Coming soon"}
                <span className="unit">{p.base === null ? "Volume, billed annually" : "Per-user pricing · CAD"}</span>
              </div>
              <p style={p.feat ? { color: "var(--paper)", opacity: 0.8 } : { color: "var(--muted)" }}>{p.desc}</p>
              <ul>{p.feats.map((f, j) => <li key={j}>{f}</li>)}</ul>
              <a
                href={p.base === null ? "/contact" : "#waitlist"}
                className={`btn ${p.feat ? "btn--solid" : ""}`}
                onClick={(e) => {
                  e.preventDefault();
                  if (p.base === null) {
                    // Enterprise tier → contact page (Book a demo flow)
                    window.__navigate && window.__navigate("contact");
                  } else {
                    // Starter / Fleet tier → home + scroll to waitlist form
                    window.__navigate && window.__navigate("home");
                    setTimeout(() => window.__scrollToId && window.__scrollToId("waitlist"), 180);
                  }
                }}
                style={{ marginTop: "auto" }}>
                {p.base === null ? "Talk to us" : "Join the waitlist"} <Arrow />
              </a>
            </div>
          ))}
        </div>
      </section>

      <section className="section section--alt">
        <div className="section__top">
          <div className="section__num">02</div>
          <div className="section__label">
            <span className="eyebrow">vs. the GTA competitive set</span>
            <h2 className="display h2">How Lanexa compares.</h2>
          </div>
        </div>
        <div style={{ overflowX: "auto", border: "1px solid var(--line)", borderRadius: "var(--radius)" }}>
          <table className="compare-table">
            <thead>
              <tr>
                <th>Capability</th>
                <th style={{ color: "var(--blue-2)" }}>Lanexa</th>
                <th>Axon</th>
                <th>TransPlus</th>
                <th>Truckbase</th>
                <th>Avaal</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Pricing model", "Per user", "Per truck", "Per truck", "Per truck", "Per truck"],
                ["WhatsApp-native dispatch", "yes", "no", "no", "no", "no"],
                ["ACE / ACI / PARS in-app", "yes", "partial", "partial", "no", "partial"],
                ["Driver app included", "yes", "no", "no", "partial", "no"],
                ["QuickBooks sync (CAD)", "yes", "yes", "yes", "partial", "yes"],
                ["Unlimited trucks per plan", "yes", "no", "no", "no", "no"],
                ["Implementation time", "1 weekend", "3–6 months", "3–6 months", "2 weeks", "1 month"],
                ["Canadian team presence", "yes", "no", "no", "no", "yes"],
              ].map(([cap, ...cells], i) => (
                <tr key={i}>
                  <td>{cap}</td>
                  {cells.map((c, j) => (
                    <td key={j} className={c === "yes" ? "yes" : c === "no" ? "no" : ""}>
                      {c === "yes" ? "✓" : c === "no" ? "—" : c}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="mono" style={{ marginTop: "1.5rem", color: "var(--muted-2)" }}>
          Last verified: April 2026. Based on publicly-listed pricing + analyst reports. Will update with corrections.
        </p>
      </section>

      <section className="section">
        <div className="section__top">
          <div className="section__num">03</div>
          <div className="section__label">
            <span className="eyebrow">FAQ</span>
            <h2 className="display h2">The things you're actually wondering.</h2>
          </div>
        </div>
        <div className="faq-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
          {[
            ["How is Lanexa priced?", "Per user — dispatchers, ops and billing seats. Not per truck. Grow your fleet without growing your software bill."],
            ["When does pricing go live?", "Final per-user plans are landing soon. Join the waitlist and you'll get early-access pricing before public launch."],
            ["Do I pay more as I add trucks?", "No. Trucks, trailers, drivers and loads are unlimited on every plan. You only pay for the people using the software."],
            ["Is there a setup fee?", "No setup fee on Starter or Fleet. Enterprise includes on-site implementation; we scope and quote it."],
            ["Cancellation?", "Cancel any time. We'll export your data to CSV and Parquet. Your loads are your loads."],
            ["Do you charge for cross-border?", "No. ACE, ACI, PARS and PAPS are included in Fleet. There's no per-filing charge."],
          ].map(([q, a], i) => (
            <div key={i} style={{ padding: "1.5rem 0", borderTop: "1px solid var(--line)" }}>
              <div className="display" style={{ fontSize: "1.2rem", letterSpacing: "-0.01em" }}>{q}</div>
              <p style={{ marginTop: "0.5rem", color: "var(--muted)", fontSize: "0.92rem" }}>{a}</p>
            </div>
          ))}
        </div>
      </section>

      <FinalCTA />
      <Footer />
    </main>
  );
}

Object.assign(window, { ServePage, DispatchPage, PricingPage });