// Page sections (header, hero, services, how-it-works, lanes, coverage, social, sustainability, faq, cta, footer)

// ── Shipment tracking (in-page modal) ───────────────────────────────────
// Demo dataset; the modal queries the live /api/track function first and
// falls back to this when the API isn't reachable (e.g. static preview).
const TRACK_DEMO = [
  { keys:["ld-12345","ord-67890","pro-11223"], loadNumber:"LD-12345", status:"In Transit", origin:"Vernon, CA", destination:"Las Vegas, NV", currentLocation:"Baker, CA · I-15", pickupDate:"Jun 1, 2026, 9:42 AM", eta:"Jun 2, 2026, 8:00 AM", deliveryDate:null, driver:"Rosa M.", weight:"1,820 lb", pieces:"2 pallets", service:"LTL · Next-day", pod:null },
  { keys:["ld-20481","ord-55012","pro-30874"], loadNumber:"LD-20481", status:"Out For Delivery", origin:"Vernon, CA", destination:"San Diego, CA", currentLocation:"Kearny Mesa, CA", pickupDate:"Jun 2, 2026, 7:10 AM", eta:"Jun 2, 2026, 1:30 PM", deliveryDate:null, driver:"Andre T.", weight:"640 lb", pieces:"1 pallet", service:"LTL · Same-day", pod:null },
  { keys:["ld-19002","ord-48820","pro-29110"], loadNumber:"LD-19002", status:"Delivered", origin:"Vernon, CA", destination:"Santa Fe Springs, CA", currentLocation:"Santa Fe Springs, CA", pickupDate:"May 30, 2026, 8:05 AM", eta:"May 30, 2026, 11:30 AM", deliveryDate:"May 30, 2026, 11:18 AM", driver:"Priya N.", weight:"9 parcels", pieces:"9 parcels", service:"E-commerce · Same-day", pod:"Signed — front desk, M. Okafor" },
];
function trackLookup({ loadNumber, orderNumber, proNumber }) {
  const needles = [loadNumber, orderNumber, proNumber].filter(Boolean).map(s => s.trim().toLowerCase());
  if (!needles.length) return null;
  return TRACK_DEMO.find(s => s.keys.some(k => needles.includes(k))) || null;
}
const TRACK_TONE = {
  "Delivered":{tone:"lime",dot:"#2F8055"}, "Out For Delivery":{tone:"amber",dot:"#E08C3B"},
  "In Transit":{tone:"ink",dot:"#5BAE7C"}, "Dispatched":{tone:"forest",dot:"#226548"}, "Pending":{tone:"white",dot:"#8A9C97"},
};
function trackTimeline(s) {
  const stops = Array.isArray(s.stops) ? s.stops : [];
  const pickup = stops.find(st => /pickup/i.test(st.type || "")) || stops[0] || {};
  const delivery = [...stops].reverse().find(st => /deliver/i.test(st.type || "")) || stops[stops.length - 1] || {};

  const re = (v, rx) => rx.test((v || "").toString());
  const pickedUp  = !!s.pickupDate || re(pickup.status, /pick|depart|complet|load/i);
  const arrived   = re(delivery.status, /arriv|unload/i);
  const delivered = s.status === "Delivered" || !!s.deliveryDate || re(delivery.status, /deliver|complet|depart/i);
  const dispatched = pickedUp || s.status === "Dispatched";

  // Current stage index across the 5 freight stages
  const stage = delivered ? 4 : arrived ? 3 : pickedUp ? 2 : dispatched ? 1 : 0;

  const stages = [
    { title: "Order received",     sub: s.customer ? `Tendered by ${s.customer}` : "Booked into the network" },
    { title: "Picked up",          sub: [pickup.city || s.origin, s.pickupDate].filter(Boolean).join(" · ") || "Origin" },
    { title: "In transit",         sub: s.distance ? `${s.distance} lane` : "On the lane" },
    { title: "Arrived at delivery", sub: [delivery.city || s.destination, delivery.at].filter(Boolean).join(" · ") || s.destination },
    { title: "Delivered",          sub: s.deliveryDate || delivery.city || s.destination },
  ];

  return stages.map((st, i) => ({
    ...st,
    state: delivered ? "done" : i < stage ? "done" : i === stage ? "active" : "todo",
  }));
}

function TrackResultCard({ s }) {
  const timeline = trackTimeline(s);
  // Display status reflects the active freight stage, not just the load-level status.
  const active = timeline.find(t => t.state === "active");
  const allDone = timeline.every(t => t.state === "done");
  const displayStatus = allDone ? "Delivered" : (active ? active.title : s.status);
  const toneFor = (label) => {
    const l = (label || "").toLowerCase();
    if (l.includes("deliver") && allDone) return { tone: "lime", dot: "#2F8055" };
    if (l.includes("arrived")) return { tone: "amber", dot: "#E08C3B" };
    if (l.includes("transit")) return { tone: "ink", dot: "#5BAE7C" };
    if (l.includes("picked")) return { tone: "forest", dot: "#226548" };
    return { tone: "white", dot: "#8A9C97" };
  };
  const meta = toneFor(displayStatus);
  return (
    <div className="grid lg:grid-cols-[1.1fr_1fr] gap-4">
      <Card className="p-6">
        <div className="flex items-start justify-between">
          <div>
            <Eyebrow>Load</Eyebrow>
            <div className="font-display text-[30px] leading-none tracking-tight mt-2">{s.loadNumber}</div>
            <div className="num text-[12.5px] text-ink-400 mt-2">{s.service}</div>
          </div>
          <Pill tone={meta.tone}><span className="w-1.5 h-1.5 rounded-full" style={{background:meta.dot}}/>{displayStatus}</Pill>
        </div>
        <div className="mt-6 flex items-center gap-3">
          <div className="flex-1"><div className="label-eyebrow text-ink-400">Origin</div><div className="text-[14px] mt-1">{s.origin || "—"}</div></div>
          <div className="flex items-center gap-1 text-gpx-700"><span className="w-1.5 h-1.5 rounded-full bg-current"/><span className="w-8 h-px hairline"/><IArrowR size={15}/></div>
          <div className="flex-1 text-right"><div className="label-eyebrow text-ink-400">Destination</div><div className="text-[14px] mt-1">{s.destination || "—"}</div></div>
        </div>
        <div className="mt-6 grid grid-cols-3 gap-2.5">
          {[["Current",s.currentLocation],["Picked up",s.pickupDate],[s.deliveryDate?"Delivered":"Est. delivery",s.deliveryDate||s.eta],["Distance",s.distance],["Equipment",s.equipment],["Order #",s.orderNumber],["Driver",s.driver],["Weight",s.weight],["Customer",s.customer]].filter(([,v])=>v).map(([k,v])=>(
            <div key={k} className="bg-paper-tint border border-ink-900/8 rounded-lg p-2.5">
              <div className="label-eyebrow text-ink-400">{k}</div><div className="text-[13px] mt-1 leading-snug">{v}</div>
            </div>
          ))}
        </div>
        {s.pod && (
          <div className="mt-4 flex items-start gap-3 px-3.5 py-3 bg-gpx-50 border border-gpx-200 rounded-lg">
            <ICheck size={16} className="text-gpx-700 mt-0.5" stroke={2.5}/>
            <div><div className="label-eyebrow text-gpx-800">Proof of delivery</div><div className="text-[13.5px] mt-0.5 text-ink-800">{s.pod}</div></div>
          </div>
        )}
      </Card>
      <div className="bg-ink-900 text-paper rounded-2xl p-6 relative overflow-hidden">
        <div className="absolute -top-16 -right-16 w-56 h-56 rounded-full" style={{background:"radial-gradient(circle,#C6F37A22 0%,transparent 70%)"}}/>
        <Eyebrow color="text-gpx-300">Status timeline</Eyebrow>
        <div className="mt-5 relative">
          <div className="absolute left-3 top-2 bottom-2 w-px border-l border-dashed border-paper/25"/>
          <div className="space-y-5 relative">
            {timeline.map((t,i)=>(
              <div key={i} className="flex items-start gap-3">
                <div className={`mt-0.5 w-6 h-6 rounded-full grid place-items-center border-2 ${t.state==="done"?"bg-gpx-lime border-gpx-lime text-ink-900":t.state==="active"?"bg-paper border-paper text-ink-900 animate-pulse":"bg-ink-900 border-paper/30 text-paper/40"}`}>
                  {t.state==="done"?<ICheck size={12} stroke={3}/>:t.state==="active"?<span className="w-1.5 h-1.5 rounded-full bg-ink-900"/>:null}
                </div>
                <div className="flex-1 min-w-0">
                  <div className={`text-[13.5px] ${t.state==="todo"?"text-paper/40":"text-paper"}`}>{t.title}</div>
                  <div className="text-[11.5px] text-paper/50 mt-0.5 truncate">{t.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function TrackModal({ open, onClose }) {
  const [load, setLoad] = useState("");
  const [order, setOrder] = useState("");
  const [pro, setPro] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);
  const [searched, setSearched] = useState(false);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    if (open) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    if (!load && !order && !pro) { setError("Enter at least one tracking number."); return; }
    setError(null); setResult(null); setLoading(true); setSearched(true);
    const params = new URLSearchParams();
    if (load)  params.set("loadNumber", load.trim());
    if (order) params.set("orderNumber", order.trim());
    if (pro)   params.set("proNumber", pro.trim());
    fetch(`/api/track?${params.toString()}`, { headers: { Accept: "application/json" } })
      .then(async (res) => {
        const ct = res.headers.get("content-type") || "";
        if (!ct.includes("application/json")) throw new Error("not-json");
        if (res.status === 404) { setResult(null); setError("No shipment found for that number. Double-check and try again."); return; }
        if (!res.ok) { const b = await res.json().catch(()=>({})); throw new Error(b.message || `Server error ${res.status}`); }
        setResult(await res.json());
      })
      .catch(() => {
        const found = trackLookup({ loadNumber: load, orderNumber: order, proNumber: pro });
        if (!found) setError("No shipment found for that number. Double-check and try again.");
        setResult(found);
      })
      .finally(() => setLoading(false));
  };
  const quickFill = (v) => { setLoad(v); setOrder(""); setPro(""); setError(null); };
  const inputCls = "w-full bg-paper-tint border border-ink-900/10 rounded-lg px-3.5 py-2.5 text-[15px] num focus-ring focus:border-ink-900/30 placeholder:text-ink-300";

  return (
    <div className="fixed inset-0 z-[100] flex items-start justify-center p-4 md:p-8 overflow-y-auto" role="dialog" aria-modal="true">
      <div className="absolute inset-0 bg-ink-900/55 backdrop-blur-sm" onClick={onClose}/>
      <div className="relative w-full max-w-[940px] bg-paper rounded-3xl border border-ink-900/10 shadow-[0_40px_120px_-30px_rgba(11,20,16,0.5)] my-auto">
        <div className="flex items-center justify-between px-6 md:px-8 py-5 border-b border-ink-900/10">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-ink-900 text-gpx-lime grid place-items-center"><IPackage size={18}/></div>
            <div>
              <div className="font-display text-[20px] leading-none tracking-tight">Track a shipment</div>
              <div className="label-eyebrow text-ink-400 mt-1">Load · Order · PRO number</div>
            </div>
          </div>
          <button onClick={onClose} className="w-9 h-9 rounded-full border border-ink-900/15 grid place-items-center hover:bg-ink-900/5 focus-ring"><IClose size={16}/></button>
        </div>

        <div className="p-6 md:p-8">
          <form onSubmit={submit} className="grid sm:grid-cols-[1fr_1fr_1fr_auto] gap-3 items-end">
            <div>
              <div className="label-eyebrow text-ink-700 mb-1.5">Load no.</div>
              <input value={load} onChange={e=>setLoad(e.target.value)} placeholder="LD-12345" className={inputCls}/>
            </div>
            <div>
              <div className="label-eyebrow text-ink-700 mb-1.5">Order no.</div>
              <input value={order} onChange={e=>setOrder(e.target.value)} placeholder="ORD-67890" className={inputCls}/>
            </div>
            <div>
              <div className="label-eyebrow text-ink-700 mb-1.5">PRO no.</div>
              <input value={pro} onChange={e=>setPro(e.target.value)} placeholder="PRO-11223" className={inputCls}/>
            </div>
            <Btn as="button" type="submit" variant="primary" size="lg" className="h-[46px]">
              {loading ? "Searching…" : <>Track<IArrowR size={16}/></>}
            </Btn>
          </form>

          {error && (
            <div className="mt-5 flex items-start gap-3 px-4 py-3 bg-signal-rust/8 border border-signal-rust/25 rounded-lg">
              <IInfo size={16} className="text-signal-rust mt-0.5 shrink-0"/><p className="text-[13.5px] text-signal-rust">{error}</p>
            </div>
          )}

          <div className="mt-6">
            {loading && (
              <div className="grid place-items-center h-[260px] bg-paper-soft rounded-2xl border border-ink-900/8">
                <div className="text-center">
                  <div className="w-9 h-9 rounded-full border-2 border-ink-200 border-t-gpx-700 animate-spin mx-auto"/>
                  <div className="num text-[12px] text-ink-400 mt-3">Querying dispatch board…</div>
                </div>
              </div>
            )}
            {!loading && result && <TrackResultCard s={result}/>}
            {!loading && !result && searched && (
              <div className="grid place-items-center h-[200px] bg-paper-soft rounded-2xl border border-dashed border-ink-900/15 text-center px-6">
                <div>
                  <div className="font-display text-[20px] tracking-tight">Nothing to show yet</div>
                  <div className="text-[13px] text-ink-400 mt-1.5">Enter a load, order, or PRO number above to see live status.</div>
                </div>
              </div>
            )}
          </div>

          <p className="mt-5 text-[11.5px] text-ink-400 flex items-center gap-2 num">
            <IInfo size={13}/> Live status pulled from our dispatch board.
          </p>
        </div>
      </div>
    </div>
  );
}

function Header() {
  const [open, setOpen] = useState(false);
  const [track, setTrack] = useState(false);
  return (
    <header id="top" className="sticky top-0 z-40 bg-paper/85 backdrop-blur-md border-b border-ink-900/10">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 h-[68px] flex items-center justify-between">
        <Logo />
        <nav className="hidden lg:flex items-center gap-7 text-[14px] text-ink-700">
          <a href="#services" className="hover:text-ink-900 transition">Services</a>
          <a href="#how" className="hover:text-ink-900 transition">How it works</a>
          <a href="#coverage" className="hover:text-ink-900 transition">Coverage</a>
          <a href="#lanes" className="hover:text-ink-900 transition">Lanes</a>
          <a href="#faq" className="hover:text-ink-900 transition">FAQ</a>
        </nav>
        <div className="flex items-center gap-2">
          <button onClick={() => setTrack(true)} className="hidden md:inline-flex items-center gap-2 text-[13px] text-ink-700 hover:text-ink-900 px-3 py-2 focus-ring rounded-full">
            <ISearch size={16}/>Track shipment
          </button>
          <Btn as="a" href="#quote" variant="primary" size="sm">Get a quote<IArrowUR size={14}/></Btn>
          <button className="lg:hidden p-2" onClick={() => setOpen(!open)}><IMenu size={20}/></button>
        </div>
      </div>
      {open && (
        <div className="lg:hidden border-t border-ink-900/10 bg-paper px-5 py-4 flex flex-col gap-3 text-[15px]">
          {["Services","How it works","Coverage","Lanes","FAQ"].map(l => (
            <a key={l} href={`#${l.toLowerCase().replace(/ /g,"")}`} onClick={() => setOpen(false)}>{l}</a>
          ))}
          <button onClick={() => { setOpen(false); setTrack(true); }} className="flex items-center gap-2 text-left text-ink-700">
            <ISearch size={16}/>Track shipment
          </button>
        </div>
      )}
      {ReactDOM.createPortal(
        <TrackModal open={track} onClose={() => setTrack(false)} />,
        document.body
      )}
    </header>
  );
}

function Ticker() {
  const items = LANES.map((l, idx) => (
    <span key={idx} className="inline-flex items-center gap-2 px-5 py-3 num text-[12.5px]">
      <span className="text-ink-400">{l.fromZ}</span>
      <span className="text-ink-900">{l.from}</span>
      <IArrowR size={12} className="text-gpx-700"/>
      <span className="text-ink-900">{l.to}</span>
      <span className="text-ink-400">{l.toZ}</span>
      <span className="mx-2 text-ink-200">·</span>
      <span className="text-gpx-700">{l.miles} mi</span>
      <span className="text-ink-200">·</span>
      <span className="text-ink-700">LTL ${l.ltl}</span>
      <span className="text-ink-200">·</span>
      <span className="text-ink-700">parcel ${l.parcel.toFixed(2)}</span>
      <span className="text-ink-200">·</span>
      <span className="text-ink-400">{l.eta}</span>
      <span className="mx-3 text-ink-200">/</span>
    </span>
  ));

  return (
    <div className="bg-paper-tint border-y border-ink-900/10 overflow-hidden">
      <div className="flex items-center">
        <div className="bg-ink-900 text-gpx-lime label-eyebrow px-5 py-3 whitespace-nowrap flex items-center gap-2">
          <span className="w-1.5 h-1.5 bg-gpx-lime rounded-full animate-pulse"/>
          Live lanes
        </div>
        <div className="flex-1 overflow-hidden">
          <div className="ticker flex whitespace-nowrap">
            {items}{items}
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="relative bg-paper">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 pt-10 md:pt-14 pb-8">
        <div className="grid lg:grid-cols-12 gap-8 items-start">
          {/* Headline */}
          <div className="lg:col-span-7">
            <Eyebrow>Southern California · last-mile · since 2021</Eyebrow>
            <h1 className="font-display mt-5 text-[56px] leading-[0.98] md:text-[88px] md:leading-[0.96] tracking-[-0.025em] text-ink-900">
              Freight that moves
              <span className="block italic text-gpx-700">like it's yours.</span>
            </h1>
            <p className="mt-7 text-[18px] md:text-[20px] text-ink-500 leading-relaxed max-w-[58ch]">
              Green Parcel Express runs the last mile for retailers, manufacturers, and e-commerce brands across Southern California. LTL by the pallet, e-com by the parcel, on a single dispatch you can actually call.
            </p>

            <div className="mt-8 flex flex-wrap items-center gap-3">
              <Btn as="a" href="#quote" variant="primary" size="lg">Quote a shipment<IArrowR size={16}/></Btn>
              <Btn as="a" href="#how" variant="ghost" size="lg">How dispatch works</Btn>
              <a href="mailto:info@greenparcelexpress.com" className="inline-flex items-center gap-2 px-4 py-3 text-[14px] text-ink-700 hover:text-ink-900">
                <IBox size={16}/>info@greenparcelexpress.com
              </a>
            </div>

            <div className="mt-10 grid grid-cols-3 md:grid-cols-4 gap-y-5 gap-x-6 max-w-2xl">
              {[
                ["98.6%", "On-time, last 90 days"],
                ["< 60s", "Quote to lock"],
                ["2021", "Running CA freight"],
                ["All-in", "Quoted to the dollar"],
              ].map(([k,v]) => (
                <div key={k}>
                  <div className="font-display text-[28px] tracking-tight text-ink-900">{k}</div>
                  <div className="text-[12.5px] text-ink-500 mt-0.5">{v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: route card collage */}
          <div className="lg:col-span-5 relative">
            <RouteCard />
          </div>
        </div>
      </div>
    </section>
  );
}

function RouteCard() {
  return (
    <div className="relative">
      <div className="absolute -inset-4 grid-bg rounded-2xl opacity-60"></div>
      <div className="relative bg-ink-900 text-paper rounded-2xl p-6 overflow-hidden">
        {/* radial */}
        <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full" style={{background:"radial-gradient(circle,#C6F37A22 0%, transparent 70%)"}}/>

        <div className="flex items-center justify-between relative">
          <Pill tone="lime">PRO-1184-22A</Pill>
          <div className="num text-[11px] text-paper/60">PICKED · 09:42 PT</div>
        </div>

        {/* route */}
        <div className="mt-7 relative">
          <div className="absolute left-3 top-2 bottom-2 w-px border-l border-dashed border-paper/30"></div>
          <div className="space-y-5 relative">
            {[
              { tag: "PICKUP", place: "Vernon, CA · 90058", time: "Mon 09:42", state: "done" },
              { tag: "CROSSDOCK", place: "Vernon DC · Door 14", time: "Mon 11:08", state: "done" },
              { tag: "ON ROUTE", place: "I-15 → Las Vegas", time: "Mon 14:30", state: "active" },
              { tag: "DELIVER", place: "Las Vegas, NV · 89101", time: "Tue 08:00–10:00", state: "todo" },
            ].map((s, i) => (
              <div key={i} className="flex items-start gap-3">
                <div className={`mt-1 w-6 h-6 rounded-full grid place-items-center border-2 ${
                  s.state==="done" ? "bg-gpx-lime border-gpx-lime text-ink-900"
                  : s.state==="active" ? "bg-paper border-paper text-ink-900 animate-pulse"
                  : "bg-ink-900 border-paper/30 text-paper/40"
                }`}>
                  {s.state==="done" ? <ICheck size={12} stroke={3}/> :
                   s.state==="active" ? <span className="w-1.5 h-1.5 rounded-full bg-ink-900"/> : null}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="label-eyebrow text-paper/50">{s.tag}</div>
                  <div className="text-[14px] mt-0.5 truncate">{s.place}</div>
                </div>
                <div className="num text-[11px] text-paper/50 shrink-0 mt-1">{s.time}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-6 pt-5 border-t border-paper/10 grid grid-cols-3 gap-3">
          <div>
            <div className="label-eyebrow text-paper/50">Weight</div>
            <div className="num text-[14px] mt-0.5">1,820 lb</div>
          </div>
          <div>
            <div className="label-eyebrow text-paper/50">Pallets</div>
            <div className="num text-[14px] mt-0.5">2 of 2</div>
          </div>
          <div>
            <div className="label-eyebrow text-paper/50">Driver</div>
            <div className="text-[14px] mt-0.5">Rosa M.</div>
          </div>
        </div>
      </div>

      {/* floating badge: rate lock */}
      <div className="absolute -right-3 -top-4 bg-gpx-lime text-ink-900 rounded-xl p-3 shadow-md w-[190px] hidden md:block rotate-2">
        <div className="label-eyebrow opacity-80">RATE LOCK</div>
        <div className="font-display text-[22px] leading-tight mt-1">14 days</div>
        <div className="text-[11px] mt-1 opacity-80">No re-rate at the dock</div>
      </div>
    </div>
  );
}

function Services() {
  const items = [
    {
      tag: "01 · LTL FREIGHT",
      title: "Less-than-truckload",
      desc: "1 to 12 pallets, dynamically priced by lane density and timing. No hidden fuel-card surcharges, no broker mark-up.",
      bullets: ["Per-pallet pricing, all-in", "Liftgate, residential, appointment", "Direct + crossdock options", "Density-based adjustment, transparent"],
      icon: IPallet, ink: true,
    },
    {
      tag: "02 · E-COMMERCE",
      title: "Last-mile parcel",
      desc: "Per-parcel pricing for DTC brands and 3PLs.",
      bullets: ["Volume tier discounts at 500 / 1000 ", "Next Day Delivery, Photo proof of delivery", "Re-attempt + return reverse-logistics", "Webhook event stream"],
      icon: IPackage, ink: false,
    },
    {
      tag: "03 · WAREHOUSING",
      title: "Crossdock & fulfillment",
      desc: "Crossdock and fulfillment at our Vernon Warehouse. Pallet-in, parcel-out — receive freight on Monday, ship to consumers same week.",
      bullets: [],
      icon: IWarehouse, ink: false,
    },
    {
      tag: "04 · WHITE-GLOVE",
      title: "Two-person delivery",
      desc: "Furniture, fitness, appliances. Lift gate, unpack, position, light assembly, and debris removal — one crew, one bill.",
      bullets: ["Threshold, room-of-choice, full install", "Blanket-wrap protection included", "Photo + signature capture"],
      icon: IGlove, ink: true,
    },
  ];

  return (
    <section id="services" className="bg-paper relative py-20 md:py-28">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-[1fr_auto] items-end gap-6 mb-12">
          <SectionHead
            eyebrow="What we move"
            title={<>One dispatch.<br/><span className="italic text-gpx-700">Four ways to deliver.</span></>}
            lede="From a 2-pallet LTL to a 400-parcel e-commerce run, every shipment is on the same routing engine, the same driver app, and the same dispatch line."
          />
          <Btn as="a" href="#quote" variant="outline" size="md">Quote any service<IArrowR size={14}/></Btn>
        </div>

        <div className="grid md:grid-cols-2 gap-4">
          {items.map((it, i) => {
            const Icon = it.icon;
            const ink = it.ink;
            return (
              <article key={i} className={`relative rounded-2xl p-7 border ${ink ? "bg-ink-900 text-paper border-ink-800" : "bg-white border-ink-900/10"}`}>
                <div className="flex items-start justify-between mb-7">
                  <div className={`label-eyebrow ${ink ? "text-gpx-300" : "text-gpx-700"}`}>{it.tag}</div>
                  <div className={`w-11 h-11 rounded-xl grid place-items-center ${ink ? "bg-gpx-lime text-ink-900" : "bg-ink-900 text-gpx-lime"}`}>
                    <Icon size={22}/>
                  </div>
                </div>
                <h3 className={`font-display text-[32px] leading-[1.05] tracking-tight ${ink ? "text-paper" : "text-ink-900"}`}>{it.title}</h3>
                <p className={`mt-3 text-[15px] leading-relaxed max-w-md ${ink ? "text-ink-300" : "text-ink-500"}`}>{it.desc}</p>
                <ul className="mt-6 space-y-2.5">
                  {it.bullets.map(b => (
                    <li key={b} className={`flex items-start gap-2.5 text-[13.5px] ${ink ? "text-paper/85" : "text-ink-700"}`}>
                      <ICheck size={14} className={`mt-1 shrink-0 ${ink ? "text-gpx-lime" : "text-gpx-700"}`} stroke={2.5}/>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-7 flex items-center gap-4">
                  <a href="#quote" className={`inline-flex items-center gap-1.5 text-[13px] font-medium ${ink ? "text-gpx-lime" : "text-ink-900"}`}>
                    Get a {it.title.toLowerCase()} quote<IArrowR size={14}/>
                  </a>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n:"1", t:"Quote in seconds", d:"Drop in pickup + delivery zips and your load type. The engine returns an all-in rate — fuel, accessorials, density adjustment, the works." },
    { n:"2", t:"Lock the rate", d:"Approve the quote and a dispatcher will contact you. Rate is locked for 14 days; no surprise re-rates at the dock." },
    { n:"3", t:"Pickup + crossdock", d:"Our driver arrives in the window. Freight either goes direct or stages at Vernon / Ontario for the morning sortation run." },
    { n:"4", t:"Track + deliver", d:"Live GPS, geo-fenced status pushes, and photo proof of delivery to your inbox or webhook. POD signed and returned in under 30 minutes." },
  ];
  return (
    <section id="how" className="bg-ink-900 text-paper py-20 md:py-28 relative">
      <div className="absolute inset-0 opacity-[0.04]" style={{backgroundImage:"linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px)", backgroundSize:"80px 80px"}}/>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 relative">
        <div className="grid md:grid-cols-[1fr_auto] items-end gap-6 mb-12">
          <SectionHead
            eyebrow="How dispatch works"
            color="text-gpx-300"
            title={<><span className="text-paper">Quote, lock,</span><br/><span className="italic text-gpx-lime">we drive.</span></>}
            lede={<span className="text-paper/70">The whole process from zip to POD usually closes inside 28 hours on a next-day lane. No portals, no chasing.</span>}
          />
        </div>

        <div className="grid md:grid-cols-4 gap-0 border-t border-paper/10">
          {steps.map((s, i) => (
            <div key={s.n} className={`p-7 ${i < steps.length-1 ? "md:border-r" : ""} border-paper/10`}>
              <div className="flex items-center gap-3 mb-5">
                <div className="num text-[12px] text-gpx-lime">{String(i+1).padStart(2,"0")}</div>
                <div className="flex-1 h-px bg-paper/15"></div>
              </div>
              <h3 className="font-display text-[24px] leading-tight tracking-tight">{s.t}</h3>
              <p className="mt-3 text-[13.5px] text-paper/65 leading-relaxed">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Coverage() {
  const [active, setActive] = useState("VRN");
  const hub = COVERAGE_HUBS.find(h => h.code === active) || COVERAGE_HUBS[0];
  return (
    <section id="coverage" className="bg-paper py-20 md:py-28">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="grid lg:grid-cols-[1fr_1.4fr] gap-10 items-start">
          <div>
            <SectionHead
              eyebrow="Coverage"
              title={<>The Southwest,<br/><span className="italic text-gpx-700">on a single milk-run.</span></>}
              lede="Our anchor distribution center in Vernon, with direct lanes serving Southern California, San Diego, and Las Vegas."
            />
            <div className="mt-7 space-y-2">
              {COVERAGE_HUBS.map(h => (
                <button key={h.code} onMouseEnter={() => setActive(h.code)} onClick={() => setActive(h.code)}
                  className={`w-full text-left px-4 py-3 rounded-lg border flex items-center gap-3 transition
                    ${active===h.code ? "bg-ink-900 text-paper border-ink-900" : "bg-white border-ink-900/10 hover:border-ink-900/30"}`}>
                  <div className={`num text-[11px] px-1.5 py-0.5 rounded ${active===h.code ? "bg-gpx-lime text-ink-900" : "bg-paper-soft text-ink-700"}`}>{h.code}</div>
                  <div className="flex-1">
                    <div className="text-[14px] flex items-center gap-2">
                      {h.name}
                      {h.primary && <Pill tone={active===h.code?"lime":"forest"}>Anchor DC</Pill>}
                    </div>
                  </div>
                  <IArrowR size={14} className={active===h.code ? "text-gpx-lime" : "text-ink-300"}/>
                </button>
              ))}
            </div>
          </div>

          <div className="relative bg-gpx-50 border border-gpx-200 rounded-2xl aspect-[4/3] overflow-hidden">
            {/* faux topographic background */}
            <svg viewBox="0 0 400 300" className="absolute inset-0 w-full h-full text-gpx-700/15">
              <defs>
                <pattern id="dots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
                  <circle cx="2" cy="2" r="0.8" fill="currentColor"/>
                </pattern>
              </defs>
              <rect width="400" height="300" fill="url(#dots)"/>
              {/* abstract coastline + state lines */}
              <path d="M0 180 Q40 160 70 175 T140 170 T210 195 T280 210 T400 220" stroke="#226548" strokeWidth="1.5" fill="none" opacity="0.6"/>
              <path d="M0 220 Q60 210 120 225 T280 240 T400 250" stroke="#226548" strokeWidth="0.8" fill="none" opacity="0.4"/>
              <path d="M200 0 L200 300" stroke="#226548" strokeDasharray="2 4" opacity="0.3"/>
              <path d="M0 100 L400 100" stroke="#226548" strokeDasharray="2 4" opacity="0.3"/>
            </svg>

            {/* connecting lines from Vernon to all */}
            <svg viewBox="0 0 400 300" className="absolute inset-0 w-full h-full">
              {COVERAGE_HUBS.filter(h=>!h.primary).map(h => {
                const vrn = COVERAGE_HUBS.find(x=>x.code==="VRN");
                return <line key={h.code} x1={vrn.x*4} y1={vrn.y*3} x2={h.x*4} y2={h.y*3}
                  stroke={active===h.code ? "#0E2A1F" : "#226548"}
                  strokeWidth={active===h.code ? 2 : 1}
                  strokeDasharray={active===h.code ? "" : "3 4"}
                  opacity={active===h.code ? 1 : 0.35}/>;
              })}
            </svg>

            {COVERAGE_HUBS.map(h => (
              <button key={h.code} onMouseEnter={() => setActive(h.code)} onClick={() => setActive(h.code)}
                className="absolute -translate-x-1/2 -translate-y-1/2 group"
                style={{ left: h.x+"%", top: h.y+"%" }}>
                <div className={`relative ${active===h.code ? "scale-125" : ""} transition-transform`}>
                  {h.primary ? (
                    <div className="relative">
                      <div className="absolute inset-0 bg-ink-900/30 rounded-full animate-ping"></div>
                      <div className="relative w-5 h-5 rounded-full bg-ink-900 border-[3px] border-gpx-lime"></div>
                    </div>
                  ) : (
                    <div className={`w-3 h-3 rounded-full ${active===h.code ? "bg-ink-900" : "bg-gpx-700"} border-2 border-paper`}></div>
                  )}
                </div>
                <div className={`absolute left-1/2 -translate-x-1/2 mt-2 px-2 py-1 rounded text-[10px] num whitespace-nowrap
                  ${active===h.code ? "bg-ink-900 text-gpx-lime" : "bg-paper/80 text-ink-700"}`}>{h.code}</div>
              </button>
            ))}

            <div className="absolute left-5 bottom-5 right-5 bg-paper/95 backdrop-blur rounded-xl border border-ink-900/10 p-4">
              <div className="flex items-baseline justify-between gap-3">
                <div>
                  <Eyebrow>{hub.primary ? "Anchor DC" : "Service Hub"}</Eyebrow>
                  <div className="font-display text-[22px] leading-tight mt-1 text-ink-900">{hub.name}</div>
                </div>
                <Pill tone="ink">{hub.code}</Pill>
              </div>
              <div className="text-[13px] text-ink-500 mt-2">{hub.desc}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Lanes() {
  return (
    <section id="lanes" className="bg-paper-soft py-20 md:py-24">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="mb-10">
          <SectionHead
            eyebrow="Published rates"
            title={<>Today's <span className="italic text-gpx-700">freight floor.</span></>}
            lede="Spot rates on the lanes we run today. Book against any lane below — the rate you see is the rate you pay."
          />
        </div>

        <div className="bg-white rounded-2xl border border-ink-900/10 overflow-hidden">
          <div className="grid grid-cols-12 px-5 py-3 label-eyebrow text-ink-400 bg-paper-tint border-b border-ink-900/10">
            <div className="col-span-3">Origin</div>
            <div className="col-span-3">Destination</div>
            <div className="col-span-1 text-right">Miles</div>
            <div className="col-span-2 text-right">LTL / pallet</div>
            <div className="col-span-1 text-right">Parcel</div>
            <div className="col-span-2 text-right">ETA</div>
          </div>
          {LANES.map((l, i) => (
            <div key={i} className={`grid grid-cols-12 px-5 py-3.5 text-[13.5px] items-center ${i % 2 === 0 ? "bg-white" : "bg-paper-tint/50"} hover:bg-gpx-50 transition group`}>
              <div className="col-span-3 flex items-center gap-2">
                <span className="num text-[11px] text-ink-400">{l.fromZ}</span>
                <span>{l.from}</span>
              </div>
              <div className="col-span-3 flex items-center gap-2">
                <IArrowR size={12} className="text-gpx-700"/>
                <span className="num text-[11px] text-ink-400">{l.toZ}</span>
                <span>{l.to}</span>
              </div>
              <div className="col-span-1 text-right num text-ink-500">{l.miles}</div>
              <div className="col-span-2 text-right num">${l.ltl}</div>
              <div className="col-span-1 text-right num">${l.parcel.toFixed(2)}</div>
              <div className="col-span-2 text-right text-ink-500 text-[12.5px] flex items-center justify-end gap-2">
                <span>{l.eta}</span>
                <IArrowR size={12} className="text-ink-300 group-hover:text-gpx-700 transition"/>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-4 text-[12px] text-ink-400 flex items-center gap-2">
          <IInfo size={14}/> All rates exclude minimum quantiies, accessorials. Density-based adjustments calculated at quote.
        </div>
      </div>
    </section>
  );
}

function Social() {
  const [i, setI] = useState(0);
  const t = TESTIMONIALS[i];
  return (
    <section className="bg-paper py-20 md:py-28">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="grid lg:grid-cols-[1.1fr_1fr] gap-12 items-center">
          <div>
            <Eyebrow>From the dock</Eyebrow>
            <blockquote className="mt-5 font-display text-[32px] md:text-[44px] leading-[1.1] tracking-tight text-ink-900">
              <span className="text-gpx-700">“</span>{t.quote}<span className="text-gpx-700">”</span>
            </blockquote>
            <div className="mt-7 flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-gpx-100 text-gpx-800 grid place-items-center font-medium num text-[13px]">{t.logo}</div>
              <div>
                <div className="text-[15px] text-ink-900">{t.who}</div>
                <div className="text-[12.5px] text-ink-400">{t.role}</div>
              </div>
              <div className="ml-auto flex items-center gap-2">
                <button onClick={() => setI((i-1+TESTIMONIALS.length)%TESTIMONIALS.length)} className="w-9 h-9 rounded-full border border-ink-900/15 grid place-items-center hover:bg-ink-900/5"><IArrowL size={14}/></button>
                <button onClick={() => setI((i+1)%TESTIMONIALS.length)} className="w-9 h-9 rounded-full border border-ink-900/15 grid place-items-center hover:bg-ink-900/5"><IArrowR size={14}/></button>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            {[
              { k:"98.6%", v:"On-time delivery rate (TTM)" },
              { k:"4.9 / 5", v:"Driver POD photo score" },
              { k:"< 4 min", v:"Median dispatch response" },
              { k:"$0.00", v:"Re-rate / re-class surprises" },
            ].map(card => (
              <div key={card.k} className="bg-paper-tint border border-ink-900/10 rounded-2xl p-5">
                <div className="font-display text-[36px] leading-none tracking-tight text-ink-900">{card.k}</div>
                <div className="text-[12.5px] text-ink-500 mt-2 max-w-[20ch]">{card.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-16 pt-10 border-t border-ink-900/10 flex flex-wrap items-center gap-x-10 gap-y-3">
          <div className="label-eyebrow text-ink-400">Trusted by</div>
          {TRUST_LOGOS.map(l => (
            <div key={l} className="font-display text-[20px] tracking-tight text-ink-300">{l}.</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Sustainability() {
  return (
    <section id="impact" className="bg-ink-900 text-paper py-20 md:py-28 relative overflow-hidden">
      <div className="absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full" style={{background:"radial-gradient(circle,#C6F37A22 0%,transparent 70%)"}}/>
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 relative">
        <div className="grid lg:grid-cols-[1.1fr_1fr] gap-12">
          <div>
            <Eyebrow color="text-gpx-300">The "green" isn't decorative</Eyebrow>
            <h2 className="font-display mt-5 text-[48px] md:text-[72px] leading-[1.0] tracking-[-0.02em]">
              Renewable diesel,<br/>
              <span className="italic text-gpx-lime">routed for density.</span>
            </h2>
            <p className="mt-6 text-[17px] text-paper/70 leading-relaxed max-w-[55ch]">
              Every consolidated route is built to maximize trailer cube before it leaves the dock. Our fleet runs on B20 renewable diesel — and the BEV vans on the South Bay loop charge from on-site solar.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Btn variant="lime" size="md">Download our 2025 impact report<IArrowUR size={14}/></Btn>
              <Btn variant="ghost" size="md" className="text-paper border-paper/20 hover:bg-paper/5">Methodology</Btn>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            {[
              { k:"68%", v:"CO₂ vs. legacy parcel", icon: ILeaf },
              { k:"31", v:"BEV vans in service", icon: IBolt },
              { k:"B20", v:"Renewable diesel blend", icon: ITruck },
              { k:"100%", v:"Solar-powered DCs", icon: ISparkles },
            ].map(({k,v,icon:Icon}) => (
              <div key={v} className="bg-paper/5 border border-paper/10 rounded-2xl p-5">
                <Icon size={22} className="text-gpx-lime"/>
                <div className="font-display text-[44px] leading-none tracking-tight mt-5">{k}</div>
                <div className="text-[12.5px] text-paper/60 mt-2">{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ_section() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="bg-paper py-20 md:py-28">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="grid lg:grid-cols-[1fr_1.6fr] gap-12 items-start">
          <SectionHead
            eyebrow="Common questions"
            title={<>Questions, <br/><span className="italic text-gpx-700">answered plainly.</span></>}
            lede="If you don't see what you need, dispatch is on the other end of the phone — not a portal."
          />
          <div className="divide-y divide-ink-900/10 border-y border-ink-900/10">
            {FAQ.map((f, i) => (
              <div key={i}>
                <button onClick={() => setOpen(open===i?-1:i)} className="w-full py-5 flex items-start justify-between gap-4 text-left">
                  <div className="font-display text-[20px] md:text-[22px] tracking-tight text-ink-900 pr-4">{f.q}</div>
                  <div className={`mt-1 w-8 h-8 shrink-0 rounded-full border border-ink-900/15 grid place-items-center transition ${open===i?"bg-ink-900 text-gpx-lime border-ink-900":"bg-paper"}`}>
                    {open===i ? <IMinus size={14}/> : <IPlus size={14}/>}
                  </div>
                </button>
                {open===i && (
                  <div className="pb-6 -mt-1 text-[15px] leading-relaxed text-ink-500 max-w-[65ch]">{f.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="bg-paper pb-20">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="relative rounded-3xl bg-gpx-lime overflow-hidden p-8 md:p-14">
          <div className="absolute inset-0 grid-bg opacity-30 pointer-events-none"></div>
          <div className="relative grid md:grid-cols-[1.4fr_1fr] gap-10 items-end">
            <div>
              <Eyebrow color="text-gpx-900">Move a load with us</Eyebrow>
              <h2 className="font-display mt-5 text-[44px] md:text-[64px] leading-[1.0] tracking-[-0.02em] text-ink-900">
                There's a truck<br/>leaving in <span className="italic">42 minutes.</span>
              </h2>
              <p className="mt-5 text-[17px] text-ink-800/80 max-w-[50ch]">
                Drop your zips, lock the rate, and a dispatcher will call to confirm. No portal, no broker layer, no surprises at the dock.
              </p>
            </div>
            <div className="flex flex-col gap-3 md:items-end">
              <Btn as="a" href="#quote" variant="primary" size="lg" className="text-base">Quote a shipment<IArrowR size={16}/></Btn>
              <Btn as="a" href="mailto:info@greenparcelexpress.com" variant="outline" size="lg" className="text-base">
                <IBox size={14}/>info@greenparcelexpress.com
              </Btn>
              <div className="text-[12.5px] text-ink-700 num mt-1">Dispatch · weekday hours · fast e-mail reply</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="bg-ink-900 text-paper/80 pt-16 pb-10">
      <div className="max-w-[1280px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-10">
          <div className="md:col-span-4">
            <div className="text-paper">
              <Logo />
            </div>
            <p className="mt-5 text-[14px] text-paper/60 max-w-[40ch]">Freight company running last-mile across Southern California since 2021. MC 1253629 · USDOT 3591301.</p>
            <div className="mt-6 flex items-center gap-3">
              <Pill tone="lime">CARB compliant</Pill>
              <Pill tone="white">LTL · E-com</Pill>
            </div>
          </div>

          <div className="md:col-span-2">
            <div className="label-eyebrow text-paper/50 mb-4">Services</div>
            <ul className="space-y-2.5 text-[14px]">
              <li><a href="#services" className="hover:text-paper">LTL freight</a></li>
              <li><a href="#services" className="hover:text-paper">E-commerce</a></li>
              <li><a href="#services" className="hover:text-paper">Warehousing</a></li>
              <li><a href="#services" className="hover:text-paper">White-glove</a></li>
            </ul>
          </div>
          <div className="md:col-span-2">
            <div className="label-eyebrow text-paper/50 mb-4">Company</div>
            <ul className="space-y-2.5 text-[14px]">
              <li><a href="#" className="hover:text-paper">About</a></li>
              <li><a href="drive-with-us.html" className="hover:text-paper">Drive with us</a></li>
            </ul>
          </div>
          <div className="md:col-span-2">
            <div className="label-eyebrow text-paper/50 mb-4">Contact</div>
            <ul className="space-y-2.5 text-[14px] text-paper/70">
              <li className="flex items-center gap-2"><IBox size={14}/>info@greenparcelexpress.com</li>
              <li className="flex items-start gap-2"><IPin size={14} className="mt-1"/>8605 Santa Monica Blvd<br/>PMB 848090<br/>West Hollywood, CA 90069</li>
            </ul>
          </div>
        </div>

        <div className="mt-14 pt-6 border-t border-paper/10 flex flex-wrap items-center justify-between gap-3">
          <div className="text-[12.5px] text-paper/50 num">© 2026 Green Parcel Express, LLC · MC 1253629 · USDOT 3591301</div>
          <div className="flex items-center gap-5 text-[12.5px] text-paper/50">
            <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Accessibility</a>
          </div>
        </div>

        {/* Big wordmark */}
        <div className="mt-12 -mb-2 overflow-hidden">
          <div className="font-display text-paper/[0.06] text-[clamp(80px,18vw,260px)] leading-none tracking-[-0.04em] whitespace-nowrap">
            Green Parcel Express
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Ticker, Hero, Services, HowItWorks, Coverage, Lanes, Social, Sustainability, FAQ_section, CTA, Footer });
