// Toll roads + passes — hand-curated reference page for trucks running
// the major US toll networks. Rates are 5-axle commercial truck rates
// (the most common Class-8 tractor-trailer config). Pass coverage maps
// transponder → states/agencies. Updated periodically; each authority
// publishes its rate sheet publicly.
//
// Data is in-code (no DB) because it's stable on the year scale and
// serves as a quick-reference card. Drivers care about: "what pass
// works on this route" + "roughly what's it gonna cost."

const { useState: useStateTR, useMemo: useMemoTR } = React;

// Toll passes — interoperability is the headline. E-ZPass is the largest
// network (19 states); SunPass dominates FL with limited NC/GA reciprocity;
// TX has its own system; OK/KS run their own; FasTrak is CA + WA.
const TOLL_PASSES = [
  {
    id: "ezpass",
    name: "E-ZPass",
    operator: "E-ZPass Interagency Group",
    notes: "The big one. Northeast + Midwest interop. Each state issues its own E-ZPass with state-specific discounts; all transponders work across the network.",
    states: ["ME","NH","MA","RI","CT","NY","NJ","PA","DE","MD","VA","WV","NC","OH","IN","IL","KY","MN","FL"],
    transponderCost: "$0–25 (varies by state)",
    monthlyFee: "$0–2",
    truckPlan: "Commercial accounts available; some states require minimum balance ($50+) for trucks.",
    color: "#1E3A8A",
  },
  {
    id: "sunpass",
    name: "SunPass",
    operator: "Florida Department of Transportation",
    notes: "Native to FL. Reciprocity with GA's Peach Pass, NC's NC Quick Pass, TX TollTag (one-way: SunPass works in TX). Dominant in FL Turnpike + most FL toll roads.",
    states: ["FL", "GA (Peach Pass interop)", "NC (Quick Pass interop)"],
    transponderCost: "$4.99 (mini sticker) – $19.99 (Pro)",
    monthlyFee: "$0",
    truckPlan: "SunPass PLUS for trucks; Pro version recommended.",
    color: "#E8A33D",
  },
  {
    id: "tolltag",
    name: "TollTag (NTTA)",
    operator: "North Texas Tollway Authority",
    notes: "DFW area. Interop with TxTag (statewide TX) + EZ TAG (Houston) — all three Texas systems read each other's transponders.",
    states: ["TX (NTTA roads + TxTag + EZ TAG interop)"],
    transponderCost: "$0 (waived); $40 prepaid balance required",
    monthlyFee: "$0",
    truckPlan: "Commercial fleet accounts; pay-by-mail without TollTag is ~50% premium.",
    color: "#0F4DA8",
  },
  {
    id: "txtag",
    name: "TxTag",
    operator: "Texas Department of Transportation",
    notes: "Statewide TX. Reads on NTTA, EZ TAG, and many out-of-state authorities. Ongoing TxDOT modernization — accept some delays on new account setup.",
    states: ["TX (statewide) + KS (K-TAG interop) + OK (PikePass interop)"],
    transponderCost: "$0",
    monthlyFee: "$0",
    truckPlan: "Commercial accounts with fleet billing.",
    color: "#0F4DA8",
  },
  {
    id: "eztag",
    name: "EZ TAG",
    operator: "Harris County Toll Road Authority",
    notes: "Houston area (Sam Houston, Hardy Toll Road, Westpark). Interop with TxTag + TollTag.",
    states: ["TX (Houston metro + interop)"],
    transponderCost: "$0",
    monthlyFee: "$0",
    truckPlan: "Commercial fleet plans available.",
    color: "#0F4DA8",
  },
  {
    id: "pikepass",
    name: "PikePass",
    operator: "Oklahoma Turnpike Authority",
    notes: "OK turnpike network (Turner, Will Rogers, Cimarron, etc). Now interops with TxTag + KS K-TAG. 5-axle truck rate is 4× passenger.",
    states: ["OK + TX (TxTag interop) + KS (K-TAG interop)"],
    transponderCost: "$0",
    monthlyFee: "$0",
    truckPlan: "Commercial accounts; mandatory for many turnpike loops.",
    color: "#1E40AF",
  },
  {
    id: "ktag",
    name: "K-TAG",
    operator: "Kansas Turnpike Authority",
    notes: "Kansas Turnpike (236 mi I-70/I-335/I-35). Interops with PikePass + TxTag.",
    states: ["KS + OK + TX"],
    transponderCost: "$0",
    monthlyFee: "$0",
    truckPlan: "Commercial accounts available.",
    color: "#1E40AF",
  },
  {
    id: "ipass",
    name: "I-PASS",
    operator: "Illinois Tollway",
    notes: "IL Tollway (286 mi network around Chicago). Functionally an E-ZPass — fully interoperable, just IL-issued.",
    states: ["IL + entire E-ZPass network"],
    transponderCost: "$0 ($10 minimum prepaid)",
    monthlyFee: "$0",
    truckPlan: "Commercial accounts; tolls are 4× passenger for Class 5 trucks.",
    color: "#1E3A8A",
  },
  {
    id: "fastrak",
    name: "FasTrak",
    operator: "California (multiple agencies) + WA SR-167/SR-520",
    notes: "CA Bay Area bridges + LA/OC HOT lanes + SoCal toll roads + Bay Area Express Lanes. WA SR-167 and SR-520 also accept FasTrak.",
    states: ["CA + WA (SR-167, SR-520)"],
    transponderCost: "$0–25 (varies by issuing agency)",
    monthlyFee: "$0–2",
    truckPlan: "Class-by-axle pricing on all CA bridges; commercial accounts via individual agencies.",
    color: "#16A34A",
  },
  {
    id: "expresstoll",
    name: "ExpressToll",
    operator: "E-470 Public Highway Authority (CO)",
    notes: "CO E-470 + Northwest Parkway + Express Lanes (US-36, I-25). Without the pass, license-plate billing adds 60–80% premium.",
    states: ["CO"],
    transponderCost: "$0 ($30 minimum prepaid)",
    monthlyFee: "$0",
    truckPlan: "Commercial accounts available.",
    color: "#7C3AED",
  },
  {
    id: "goodtogo",
    name: "Good to Go!",
    operator: "Washington State Department of Transportation",
    notes: "WA SR-520 bridge, SR-99 tunnel, SR-167 + I-405 HOT lanes, Tacoma Narrows Bridge. Some FasTrak interop on SR-520/SR-167.",
    states: ["WA"],
    transponderCost: "$0–12 (account); $5 monthly free",
    monthlyFee: "$0",
    truckPlan: "Commercial accounts; truck rates 2-3× passenger.",
    color: "#16A34A",
  },
  {
    id: "biltrans",
    name: "BancPass / Bestpass",
    operator: "Multi-state interop / Fleet management",
    notes: "Bestpass is the dominant fleet-management transponder for over-the-road trucking — covers ~98% of US toll roads on one bill, including E-ZPass, SunPass, all Texas systems, FasTrak, PikePass, and more. The default for most large carriers and OOs.",
    states: ["~98% of US toll roads"],
    transponderCost: "Varies by plan",
    monthlyFee: "$5–10 per truck",
    truckPlan: "Built for trucks; consolidated billing across all toll authorities; recommended for any OO running 5+ states.",
    color: "#dc2626",
  },
];

// Major US toll roads — the ones a Class-8 driver will encounter on
// nationwide runs. Per-mile rate is for the 5-axle (Class 5) commercial
// truck unless noted; full-route is the longest direct corridor at that
// rate where applicable.
const TOLL_ROADS = [
  { id: "fl-tpk", name: "Florida's Turnpike", state: "FL", miles: 309, operator: "FDOT",
    passes: ["sunpass","biltrans"], cashAccepted: false,
    perMile5axle: 0.30, fullRoute5axle: 92.70,
    notes: "All-electronic since 2017. Plate billing adds 25%. SunPass mini works for trucks." },
  { id: "fl-bee", name: "Beachline / Bee Line Expressway (SR-528)", state: "FL", miles: 38, operator: "CFX",
    passes: ["sunpass","biltrans"], cashAccepted: false, perMile5axle: 0.45,
    notes: "Orlando → Cape Canaveral. CFX network." },
  { id: "fl-tampa", name: "Tampa Selmon / Veterans Expressway", state: "FL", miles: 35, operator: "THEA",
    passes: ["sunpass","biltrans"], cashAccepted: false, perMile5axle: 0.40, notes: "All-electronic." },
  { id: "ga-400", name: "GA-400 (legacy toll, removed 2013)", state: "GA", miles: 0, operator: "GDOT",
    passes: [], cashAccepted: false, perMile5axle: 0,
    notes: "TOLLS REMOVED 2013. Listed for reference — GA still has Peach Pass for I-85 + I-75 HOT lanes." },
  { id: "pa-tpk", name: "Pennsylvania Turnpike", state: "PA", miles: 552, operator: "PTC",
    passes: ["ezpass","biltrans"], cashAccepted: false, perMile5axle: 0.45, fullRoute5axle: 248.40,
    notes: "All-electronic since 2020. Plate billing adds 60%. The granddaddy — opened 1940." },
  { id: "nj-tpk", name: "New Jersey Turnpike", state: "NJ", miles: 122, operator: "NJTA",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0.55, fullRoute5axle: 67.10,
    notes: "Toll plazas still cash-or-tag. NJTPK rates rose 36% in 2020." },
  { id: "nj-gsp", name: "Garden State Parkway", state: "NJ", miles: 173, operator: "NJTA",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0,
    notes: "TRUCKS PROHIBITED north of Toms River. Use NJ Turnpike instead." },
  { id: "ny-thwy", name: "New York Thruway (I-87/I-90)", state: "NY", miles: 569, operator: "NYSTA",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0.30, fullRoute5axle: 170.70,
    notes: "Cash still accepted at major plazas; cashless on Tappan Zee/Mario Cuomo bridge." },
  { id: "ohio-tpk", name: "Ohio Turnpike (I-80/I-90)", state: "OH", miles: 241, operator: "OTIC",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0.20, fullRoute5axle: 48.20,
    notes: "Cash + EZPass + plate billing. EZPass discount is significant for trucks." },
  { id: "in-toll", name: "Indiana Toll Road (I-90)", state: "IN", miles: 157, operator: "ITRCC",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0.30, fullRoute5axle: 47.00,
    notes: "I-PASS / E-ZPass interop. Plate billing premium ~40%." },
  { id: "il-tway", name: "Illinois Tollway (294/355/88/90)", state: "IL", miles: 286, operator: "ISTHA",
    passes: ["ipass","ezpass","biltrans"], cashAccepted: false, perMile5axle: 0.35,
    notes: "All-electronic. Class 5 truck rate is 4× passenger. Without I-PASS, plate billing adds substantial premium." },
  { id: "ks-tpk", name: "Kansas Turnpike (I-70/I-335/I-35)", state: "KS", miles: 236, operator: "KTA",
    passes: ["ktag","biltrans"], cashAccepted: true, perMile5axle: 0.20, fullRoute5axle: 47.20,
    notes: "K-TAG interop with PikePass + TxTag." },
  { id: "ok-pike", name: "Oklahoma Turnpike System", state: "OK", miles: 605, operator: "OTA",
    passes: ["pikepass","biltrans"], cashAccepted: true, perMile5axle: 0.20,
    notes: "Turner, Will Rogers, Cimarron, Indian Nation, etc. Multi-loop network." },
  { id: "tx-130", name: "SH-130 (Austin–San Antonio bypass)", state: "TX", miles: 91, operator: "TxDOT/SH 130",
    passes: ["txtag","tolltag","eztag","biltrans"], cashAccepted: false, perMile5axle: 0.74, fullRoute5axle: 67.34,
    notes: "85 mph speed limit on the southern half. Plate billing adds 33% premium." },
  { id: "tx-ntta", name: "NTTA Network (Dallas/Fort Worth)", state: "TX", miles: 100, operator: "NTTA",
    passes: ["tolltag","txtag","eztag","biltrans"], cashAccepted: false, perMile5axle: 0.50,
    notes: "PGBT, Dallas North Tollway, Sam Rayburn Tollway, Lewisville Lake Toll Bridge." },
  { id: "tx-hctra", name: "Houston Toll Roads (HCTRA)", state: "TX", miles: 130, operator: "HCTRA",
    passes: ["eztag","txtag","tolltag","biltrans"], cashAccepted: false, perMile5axle: 0.50,
    notes: "Sam Houston Tollway, Hardy Toll Road, Westpark Tollway." },
  { id: "co-e470", name: "E-470 (Denver beltway)", state: "CO", miles: 47, operator: "E-470 PHA",
    passes: ["expresstoll","biltrans"], cashAccepted: false, perMile5axle: 0.65, fullRoute5axle: 30.55,
    notes: "Plate billing premium 60–80%." },
  { id: "ca-bay-bridges", name: "SF Bay Bridges (Bay, Golden Gate, Carquinez, Antioch, Benicia, Dumbarton, San Mateo, Richmond)", state: "CA", miles: 0, operator: "BATA / GGB District",
    passes: ["fastrak","biltrans"], cashAccepted: false, perMile5axle: 0,
    notes: "Per-axle rate. 5-axle truck on Bay Bridge: $40 peak / $35 off-peak." },
  { id: "ca-91x", name: "91 Express Lanes (LA/OC)", state: "CA", miles: 18, operator: "OCTA / RCTC",
    passes: ["fastrak","biltrans"], cashAccepted: false, perMile5axle: 0,
    notes: "Trucks PROHIBITED on 91 Express Lanes (cars + light trucks only)." },
  { id: "wa-520", name: "SR-520 Floating Bridge", state: "WA", miles: 7, operator: "WSDOT",
    passes: ["goodtogo","fastrak","biltrans"], cashAccepted: false, perMile5axle: 0,
    notes: "Class 5 truck: ~$15–25 per crossing peak. FasTrak interops with Good to Go." },
  { id: "wa-tnb", name: "Tacoma Narrows Bridge", state: "WA", miles: 1, operator: "WSDOT",
    passes: ["goodtogo","biltrans"], cashAccepted: true, perMile5axle: 0,
    notes: "5-axle truck: $9.50 with pass / $11 by mail. Eastbound only." },
  { id: "me-tpk", name: "Maine Turnpike (I-95)", state: "ME", miles: 109, operator: "MTA",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0.20,
    notes: "ME E-ZPass." },
  { id: "nh-tpk", name: "New Hampshire Turnpike", state: "NH", miles: 89, operator: "NHDOT",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0.15,
    notes: "I-95 + Spaulding + Everett turnpikes." },
  { id: "ma-pike", name: "Massachusetts Pike (I-90)", state: "MA", miles: 138, operator: "MassDOT",
    passes: ["ezpass","biltrans"], cashAccepted: false, perMile5axle: 0.20, fullRoute5axle: 27.60,
    notes: "All-electronic since 2016. EZPass MA discount." },
  { id: "de-95", name: "Delaware I-95 + DE-1", state: "DE", miles: 11, operator: "DELDOT",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 1.20,
    notes: "Short but expensive. 5-axle: $13.20 northbound at Newark plaza." },
  { id: "md-bay", name: "Bay Bridge / Maryland Tolls", state: "MD", miles: 0, operator: "MDTA",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0,
    notes: "Bay Bridge 5-axle: $40 cash / $30 EZPass. Other MD facilities (JFK, Tydings, Fort McHenry, Hatem, Nice/Middleton bridges) similar tier." },
  { id: "va-dulles", name: "Dulles Toll Road / Greenway", state: "VA", miles: 14, operator: "MWAA / TRIP II",
    passes: ["ezpass","biltrans"], cashAccepted: false, perMile5axle: 0.40,
    notes: "TRUCKS over 26,000 lbs may be restricted on Greenway during peak; check local rules." },
  { id: "va-i495", name: "I-495 / I-95 Express Lanes (DC metro)", state: "VA", miles: 50, operator: "Transurban",
    passes: ["ezpass","biltrans"], cashAccepted: false, perMile5axle: 0,
    notes: "Dynamic pricing. Trucks 4-axle and up PROHIBITED on Express Lanes." },
  { id: "wv-tpk", name: "West Virginia Turnpike (I-77)", state: "WV", miles: 88, operator: "WVPA",
    passes: ["ezpass","biltrans"], cashAccepted: true, perMile5axle: 0.20,
    notes: "Three toll plazas. EZPass WV-issued tag gets best rate." },
];

function TollsPage({ onNav }) {
  const [tab, setTab] = useStateTR("roads");
  const [filterState, setFilterState] = useStateTR("");
  const [filterPass, setFilterPass]   = useStateTR("");
  const [filterQ, setFilterQ]         = useStateTR("");

  const stateOptions = useMemoTR(() => {
    const s = new Set();
    TOLL_ROADS.forEach(r => r.state && s.add(r.state));
    return Array.from(s).sort();
  }, []);

  const filteredRoads = useMemoTR(() => {
    return TOLL_ROADS.filter(r => {
      if (filterState && r.state !== filterState) return false;
      if (filterPass && !r.passes.includes(filterPass)) return false;
      if (filterQ.trim()) {
        const q = filterQ.toLowerCase();
        if (!r.name.toLowerCase().includes(q) && !(r.notes || "").toLowerCase().includes(q)) return false;
      }
      return true;
    });
  }, [filterState, filterPass, filterQ]);

  const passLookup = useMemoTR(() => {
    const m = {};
    TOLL_PASSES.forEach(p => { m[p.id] = p; });
    return m;
  }, []);

  function fmt$(n) {
    if (!n || n === 0) return "—";
    return `$${n.toFixed(2)}`;
  }
  function fmtPerMi(n) {
    if (!n || n === 0) return "—";
    return `$${n.toFixed(2)}/mi`;
  }

  return (
    <div className="tolls-page">
      <style>{`
        .tolls-page { background: var(--paper); padding-bottom: 96px; min-height: 100vh; }
        .tolls-hero { max-width: 1200px; margin: 0 auto; padding: 56px 24px 24px; }
        .tolls-back {
          display: inline-flex; gap: 6px; font-family: var(--font-mono); font-size: 11px;
          letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
          background: transparent; border: 0; cursor: pointer; padding: 0 0 16px;
        }
        .tolls-back:hover { color: var(--ink); }
        .tolls-mark {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px;
          display: inline-flex; align-items: center; gap: 10px;
        }
        .tolls-mark .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
          background: oklch(0.55 0.18 145); }
        .tolls-title { font-family: var(--font-serif); font-size: 56px; line-height: 1.04;
          letter-spacing: -0.028em; margin: 0 0 16px; }
        .tolls-title em { font-style: italic; color: var(--red, oklch(0.50 0.16 250)); }
        .tolls-dek { font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 760px; }
        @media (max-width: 700px) { .tolls-title { font-size: 38px; } }

        .tolls-tabs {
          max-width: 1200px; margin: 24px auto 0; padding: 0 24px;
          border-bottom: 1px solid var(--rule); display: flex; gap: 0;
        }
        .tolls-tab {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
          text-transform: uppercase; padding: 14px 20px;
          background: transparent; border: 0; cursor: pointer;
          color: var(--ink-soft); border-bottom: 2px solid transparent;
        }
        .tolls-tab:hover { color: var(--ink); }
        .tolls-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 700; }

        .tolls-body { max-width: 1200px; margin: 24px auto 0; padding: 0 24px; }

        .tolls-controls {
          display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-bottom: 16px;
        }
        @media (max-width: 800px) { .tolls-controls { grid-template-columns: 1fr; } }
        .tolls-search, .tolls-select {
          padding: 10px 14px; border: 1px solid var(--rule); border-radius: 6px;
          background: #fff; font-family: inherit; font-size: 14px; color: var(--ink);
          outline: none;
        }

        .tolls-list { display: flex; flex-direction: column; gap: 14px; }
        .tolls-row {
          background: #fff; border: 1px solid var(--rule); border-radius: 8px;
          padding: 18px 22px;
        }
        .tolls-row-head {
          display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
          margin-bottom: 8px;
        }
        .tolls-row-name {
          font-family: var(--font-serif); font-size: 19px; letter-spacing: -0.01em;
          line-height: 1.25; margin: 0;
        }
        .tolls-row-state {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
          padding: 3px 8px; border-radius: 3px; background: var(--paper-2);
          color: var(--ink-soft); white-space: nowrap;
        }
        .tolls-row-meta {
          display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-mono);
          font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em;
          margin-bottom: 10px;
        }
        .tolls-row-meta strong { color: var(--ink); font-weight: 700; font-family: var(--font-serif);
          font-size: 14px; letter-spacing: -0.005em; margin-left: 4px; }
        .tolls-row-passes {
          display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
        }
        .tolls-pass-chip {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
          padding: 3px 8px; border-radius: 3px; color: #fff; font-weight: 700;
          text-transform: uppercase;
        }
        .tolls-row-notes {
          font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0;
        }

        /* Pass cards */
        .tolls-pass-grid {
          display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
          gap: 14px;
        }
        .tolls-pass-card {
          background: #fff; border: 1px solid var(--rule); border-radius: 8px;
          padding: 20px 22px; position: relative; overflow: hidden;
        }
        .tolls-pass-card::before {
          content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
        }
        .tolls-pass-name {
          font-family: var(--font-serif); font-size: 22px; letter-spacing: -0.015em;
          margin: 0 0 4px; line-height: 1.2;
        }
        .tolls-pass-op {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px;
        }
        .tolls-pass-notes {
          font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0 0 14px;
        }
        .tolls-pass-stats {
          display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
        }
        .tolls-pass-stat {
          background: var(--paper-2); border: 1px solid var(--rule);
          border-radius: 4px; padding: 8px 10px;
        }
        .tolls-pass-stat-l {
          font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft);
        }
        .tolls-pass-stat-v {
          font-size: 13px; color: var(--ink); margin-top: 2px;
        }
        .tolls-pass-states {
          font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
          color: var(--ink-soft);
        }
        .tolls-pass-states strong { color: var(--ink); font-family: var(--font-mono); font-size: 11px; }

        .tolls-foot {
          max-width: 1200px; margin: 32px auto 0; padding: 0 24px;
          font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
          line-height: 1.7; font-style: italic; max-width: 800px;
        }
      `}</style>

      <section className="tolls-hero">
        <button className="tolls-back" onClick={() => onNav("drivers")}>← Back to The Yard</button>
        <div className="tolls-mark"><span className="dot" /> Toll roads + passes</div>
        <h1 className="tolls-title">Every <em>toll</em> in the lower 48.</h1>
        <p className="tolls-dek">
          Major US toll roads with 5-axle truck rates, accepted passes, and
          plate-billing premiums. Pass cards show which states each transponder
          works in. Bestpass remains the default for serious OO + small-fleet
          coverage across the whole network.
        </p>
      </section>

      <nav className="tolls-tabs">
        <button className={`tolls-tab ${tab === "roads" ? "is-active" : ""}`}
          onClick={() => setTab("roads")}>🛣 Roads ({TOLL_ROADS.length})</button>
        <button className={`tolls-tab ${tab === "passes" ? "is-active" : ""}`}
          onClick={() => setTab("passes")}>🎟 Passes ({TOLL_PASSES.length})</button>
      </nav>

      <div className="tolls-body">
        {tab === "roads" && (
          <>
            <div className="tolls-controls">
              <input className="tolls-search" type="search"
                placeholder="Search by road name or notes…"
                value={filterQ} onChange={e => setFilterQ(e.target.value)} />
              <select className="tolls-select"
                value={filterState} onChange={e => setFilterState(e.target.value)}>
                <option value="">All states</option>
                {stateOptions.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
              <select className="tolls-select"
                value={filterPass} onChange={e => setFilterPass(e.target.value)}>
                <option value="">Any pass</option>
                {TOLL_PASSES.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
              </select>
            </div>

            <div className="tolls-list">
              {filteredRoads.map(r => (
                <div key={r.id} className="tolls-row">
                  <div className="tolls-row-head">
                    <h3 className="tolls-row-name">{r.name}</h3>
                    <span className="tolls-row-state">{r.state}</span>
                  </div>
                  <div className="tolls-row-meta">
                    <span>Operator <strong>{r.operator}</strong></span>
                    {r.miles > 0 && <span>Length <strong>{r.miles} mi</strong></span>}
                    {r.perMile5axle > 0 && <span>5-axle rate <strong>{fmtPerMi(r.perMile5axle)}</strong></span>}
                    {r.fullRoute5axle && <span>Full route <strong>{fmt$(r.fullRoute5axle)}</strong></span>}
                    <span>Cash <strong>{r.cashAccepted ? "Yes" : "No"}</strong></span>
                  </div>
                  <div className="tolls-row-passes">
                    {r.passes.map(pid => {
                      const p = passLookup[pid];
                      if (!p) return null;
                      return (
                        <span key={pid} className="tolls-pass-chip" style={{ background: p.color }}>
                          {p.name}
                        </span>
                      );
                    })}
                  </div>
                  {r.notes && <p className="tolls-row-notes">{r.notes}</p>}
                </div>
              ))}
            </div>

            {filteredRoads.length === 0 && (
              <div style={{ padding: 64, textAlign: "center", color: "var(--ink-soft)", fontStyle: "italic" }}>
                No roads match those filters.
              </div>
            )}
          </>
        )}

        {tab === "passes" && (
          <div className="tolls-pass-grid">
            {TOLL_PASSES.map(p => (
              <div key={p.id} className="tolls-pass-card">
                <span style={{ background: p.color, position: "absolute", left: 0, top: 0, bottom: 0, width: 4 }} />
                <h3 className="tolls-pass-name">{p.name}</h3>
                <div className="tolls-pass-op">{p.operator}</div>
                <p className="tolls-pass-notes">{p.notes}</p>
                <div className="tolls-pass-stats">
                  <div className="tolls-pass-stat">
                    <div className="tolls-pass-stat-l">Transponder</div>
                    <div className="tolls-pass-stat-v">{p.transponderCost}</div>
                  </div>
                  <div className="tolls-pass-stat">
                    <div className="tolls-pass-stat-l">Monthly</div>
                    <div className="tolls-pass-stat-v">{p.monthlyFee}</div>
                  </div>
                </div>
                <div className="tolls-pass-states">
                  <strong>Coverage:</strong>{" "}
                  {Array.isArray(p.states) ? p.states.join(", ") : p.states}
                </div>
                <div className="tolls-pass-states" style={{ marginTop: 8 }}>
                  <strong>Truck plan:</strong> {p.truckPlan}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <p className="tolls-foot">
        Rates are approximate 5-axle Class-8 commercial truck rates per the toll
        authority's published schedule, last reviewed early 2026 — verify with
        the issuing agency for the current period before budgeting a route.
        Bestpass remains the default for fleets running multi-state. Where a
        road shows TRUCKS PROHIBITED, the next-best route is on the road's
        Wikipedia entry.
      </p>
    </div>
  );
}

window.TollsPage = TollsPage;
