/* Professor's Transport coverage, why, quote form, industries, drive, footer */
const { useState: useStateB, useEffect: useEffectB, useMemo: useMemoB } = React;

function CoverageMap() {
  // Two head offices marked as primary terminals; we serve all 10 provinces + US lower 48.
  const hubs = [
  { idx: "01", name: "Vancouver", prov: "BC", x: 110, y: 290 },
  { idx: "02", name: "Edmonton", prov: "AB", x: 215, y: 240 },
  { idx: "03", name: "Calgary", prov: "AB", x: 215, y: 285 },
  { idx: "04", name: "Saskatoon", prov: "SK", x: 295, y: 265 },
  { idx: "05", name: "Regina", prov: "SK", x: 305, y: 305 },
  { idx: "06", name: "Winnipeg", prov: "MB", x: 395, y: 320 },
  { idx: "07", name: "Thunder Bay", prov: "ON", x: 510, y: 335 },
  { idx: "HQ", name: "Vaughan", prov: "ON", x: 640, y: 380, primary: true, hq: true, label: "Head Office" },
  { idx: "09", name: "Montréal", prov: "QC", x: 730, y: 350 },
  { idx: "BR", name: "Moncton", prov: "NB", x: 820, y: 360, primary: true, hq: true, label: "Branch Office" }];


  // Lanes between hubs (indices)
  const lanes = [
  [0, 2], [2, 1], [2, 3], [3, 4], [4, 5], [5, 6], [6, 7], [7, 8], [8, 9],
  [1, 3], [2, 5], [5, 7], [7, 9]];


  // Simplified Canada outline path (illustrative, not geographically accurate)
  const canadaPath = "M 60,260 L 100,250 L 130,255 L 170,235 L 200,225 L 240,220 L 290,225 L 340,235 L 400,250 L 460,260 L 520,275 L 590,290 L 650,310 L 700,320 L 740,335 L 780,345 L 820,355 L 855,370 L 870,395 L 850,415 L 800,420 L 740,415 L 680,410 L 620,415 L 555,420 L 480,425 L 410,430 L 340,425 L 270,420 L 200,410 L 145,395 L 100,375 L 75,340 L 65,300 Z";

  return (
    <section className="section coverage" id="coverage">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num">03 / Coverage</div>
 <h2 className="h-section">Two Canadian offices, <em>one</em> continent of lanes.</h2>
 </div>
 <p className="sec-head__lead">
 Head office in Vaughan, Ontario. Branch office in Moncton, New Brunswick.
 Our fleet covers every Canadian province and runs C-TPAT / FAST bonded service
 into all 48 contiguous US states.
 </p>
 </div>

 <div className="map-wrap">
 <div className="map-canvas">
 <svg viewBox="0 0 920 500" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Canada coverage map">
 {/* Outline */}
 <path d={canadaPath} fill="var(--surface-2)" stroke="var(--border-strong)" strokeWidth="1.2" />
 {/* US bar bottom */}
 <path d="M 60,460 L 870,460" stroke="var(--border)" strokeWidth="1" strokeDasharray="4 4" />
 <text x="465" y="478" textAnchor="middle"
              style={{ fontFamily: "var(--font-mono)", fontSize: "10px", letterSpacing: "0.14em", fill: "var(--muted)", textTransform: "uppercase" }}>
 US lower 48 bonded service —
 </text>

 {/* Lanes */}
 {lanes.map(([a, b], i) => {
                const A = hubs[a],B = hubs[b];
                return (
                  <line key={i} x1={A.x} y1={A.y} x2={B.x} y2={B.y}
                  stroke="var(--border-strong)" strokeWidth="1"
                  strokeDasharray={i % 2 === 0 ? "0" : "4 4"} opacity="0.55" />);

              })}

 {/* Hubs */}
 {hubs.map((h, i) =>
              <g key={h.idx} className="hub" style={{ cursor: "pointer" }}>
 <circle cx={h.x} cy={h.y} r={h.primary ? 8 : 5}
                fill={h.primary ? "var(--accent)" : "var(--surface)"}
                stroke="var(--ink)" strokeWidth={h.primary ? 0 : 1.5} />
 {h.primary &&
                <circle cx={h.x} cy={h.y} r="14"
                fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.4" />
                }
 <text x={h.x + 12} y={h.y - 8}
                style={{ fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 500, fill: "var(--ink)", letterSpacing: "-0.01em" }}>
 {h.name}
 </text>
 <text x={h.x + 12} y={h.y + 6}
                style={{ fontFamily: "var(--font-mono)", fontSize: "9px", letterSpacing: "0.12em", fill: "var(--muted)" }}>
 {h.prov}
 </text>
 </g>
              )}

 {/* Compass / scale */}
 <g transform="translate(60, 60)">
 <text style={{ fontFamily: "var(--font-mono)", fontSize: "9px", letterSpacing: "0.16em", fill: "var(--muted)" }}>N ↑</text>
 <text y="14" style={{ fontFamily: "var(--font-mono)", fontSize: "9px", letterSpacing: "0.16em", fill: "var(--muted)" }}>SCALE 500 km</text>
 <line x1="0" y1="22" x2="60" y2="22" stroke="var(--ink-2)" strokeWidth="1.2" />
 <line x1="0" y1="19" x2="0" y2="25" stroke="var(--ink-2)" strokeWidth="1.2" />
 <line x1="60" y1="19" x2="60" y2="25" stroke="var(--ink-2)" strokeWidth="1.2" />
 </g>
 </svg>
 </div>

 <div className="map-side">
 <h4>Offices · 2</h4>
 <div className="map-side__hubs">
 <div className="hub-row" style={{ paddingTop: 0 }}>
 <span className="idx" style={{ color: "var(--accent-ink)", background: "var(--accent)", borderRadius: "3px", padding: "2px 4px", fontSize: "9px" }}>HQ</span>
 <span className="name">Vaughan, Ontario<br /><span style={{ fontWeight: 400, fontSize: 12, color: "var(--muted)" }}>7300 Keele Street, Suite 200</span></span>
 <span className="prov">ON</span>
 </div>
 <div className="hub-row">
 <span className="idx" style={{ color: "var(--accent-ink)", background: "var(--accent)", borderRadius: "3px", padding: "2px 4px", fontSize: "9px" }}>BR</span>
 <span className="name">Moncton, New Brunswick<br /><span style={{ fontWeight: 400, fontSize: 12, color: "var(--muted)" }}>825 Frenette Avenue</span></span>
 <span className="prov">NB</span>
 </div>
 </div>
 <h4>Cross-border</h4>
 <p style={{ fontSize: "13px", color: "var(--ink-2)", margin: 0, lineHeight: 1.5 }}>
 C-TPAT, PIP, FAST, ACE and ACI certified. Bonded service into all 48
 contiguous US states with regular runs through Windsor-Detroit,
 Sarnia-Port Huron, Fort Erie-Buffalo and Emerson-Pembina.
 </p>
 </div>
 </div>
 </div>
 </section>);

}

function Why() {
  const items = [
  { n: "01", h: "Asset-based & Canadian.", p: "Two locations in Canada (Ontario & New Brunswick) and a large owned fleet every load on a Professor's bill of lading rides on a Professor's truck, with a Professor's driver." },
  { n: "02", h: "Dry, cool, heated, flatbed.", p: "Whether your load requires heating, cooling or specialized open-deck handling, we've got the trailer and we work with you to deliver to the desired destination on time." },
  { n: "03", h: "Fully certified.", p: "Certified with CBSA / ASFC, C-TPAT, PIP, CSA, FAST, ACE, ACI, HAZMAT and SmartWay your goods are delivered without delays, hidden fees, or unnecessary inspections." },
  { n: "04", h: "Trucks.", p: "A modern fleet, continuously upgraded in line with industry standards, with the telematics technology that ensures a solid transport service every time." },
  { n: "05", h: "Trailers.", p: "Dry vans, reefers, heated trailers and flatbeds. Capacity for both large and small loads, perishable and non-perishable goods." },
  { n: "06", h: "98% on-time delivery.", p: "We're proud of an industry-leading 98% on-time delivery record measured across every customer lane, every quarter." }];

  return (
    <section className="section why" id="why">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num"></div>
 <h2 className="h-section">Six reasons shippers <em>stay</em> with us.</h2>
 </div>
 <p className="sec-head__lead">
 Your transportation challenge is our opportunity to showcase our expertise.
 Here's what asset-based, Canadian-owned freight looks like when you count on a
 carrier that never says no.
 </p>
 </div>
 </div>
 <div className="container">
 <div className="why__grid">
 {items.map((i) =>
          <div className="why__item" key={i.n}>
 <div className="num">{i.n}</div>
 <div>
 <h3>{i.h}</h3>
 <p>{i.p}</p>
 </div>
 </div>
          )}
 </div>
 </div>
 </section>);

}

// Quote requests are sent via Web3Forms (same service as the careers application form).
const QUOTE_WEB3FORMS_KEY = "65c13ba8-f9c9-4f4c-bd38-55955fc17679";

function QuoteForm() {
  const [equipment, setEquipment] = useStateB(["Dry van"]);
  const [status, setStatus] = useStateB("idle"); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = useStateB("");
  const eqOptions = ["Dry van", "Reefer", "Heated", "Flatbed", "Haz-mat", "TL", "LTL"];

  function toggleEq(e) {
    setEquipment((prev) => prev.includes(e) ? prev.filter((x) => x !== e) : [...prev, e]);
  }

  async function submit(ev) {
    ev.preventDefault();
    if (status === "sending") return;
    const formEl = ev.target;
    const fd = new FormData(formEl);

    const origin = String(fd.get("Origin") || "").trim();
    const destination = String(fd.get("Destination") || "").trim();
    const email = String(fd.get("email") || "").trim();
    const readyDate = String(fd.get("Ready date") || "").trim();
    const notes = String(fd.get("Notes") || "").trim();
    const website = String(fd.get("website") || "").trim();

    if (website) {
      setStatus("error");
      setErrorMsg("Submission blocked. Please refresh and try again.");
      return;
    }
    if (origin.length < 2 || destination.length < 2) {
      setStatus("error");
      setErrorMsg("Please enter a valid origin and destination.");
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setStatus("error");
      setErrorMsg("Please enter a valid work email address.");
      return;
    }
    if (!equipment.length) {
      setStatus("error");
      setErrorMsg("Please choose at least one equipment type.");
      return;
    }
    if (readyDate && !/^(0[1-9]|1[0-2])\s*\/\s*(0[1-9]|[12]\d|3[01])$/.test(readyDate)) {
      setStatus("error");
      setErrorMsg("Ready date format must be MM / DD.");
      return;
    }
    if (notes.length > 1000) {
      setStatus("error");
      setErrorMsg("Notes are too long. Please keep notes under 1000 characters.");
      return;
    }

    setErrorMsg("");
    fd.set("access_key", QUOTE_WEB3FORMS_KEY);
    fd.set("Equipment", equipment.join(", "));
    fd.set("subject", "New quote request — professorstransport.com");
    fd.set("from_name", "Professor's Transport website");

    setStatus("sending");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        body: fd
      });
      const data = await res.json();
      if (!data.success) throw new Error(data.message || "Submission failed");
      setStatus("success");
      formEl.reset();
      setEquipment(["Dry van"]);
      setErrorMsg("");
    } catch (err) {
      setStatus("error");
      setErrorMsg("Couldn't send your request. Please try again or call dispatch.");
    }
  }

  return (
    <section className="section quote" id="quote">
 <div className="container quote__inner">
 <div className="quote__copy">
 <div className="eyebrow" style={{ color: "oklch(0.78 0.02 260)" }}>
 <span className="dot"></span>Request a quote
 </div>
 <h2 className="h-section" style={{ color: "var(--surface)", marginTop: 18 }}>
 A real planner answers <em>within 2 hours.</em>
 </h2>
 <p>Tell us about the lane and we'll come back with capacity, transit, and a fixed rate not a brokered placeholder.


 </p>

 <div className="details">
 <div>
 <h5>Dispatch desk</h5>
 <p>+14375351330<br /><span style={{ opacity: 0.7, fontSize: 13 }}></span></p>
 </div>
 <div>
 <h5>Email</h5>
 <p>dispatch@professorstransport.com<br /><span style={{ opacity: 0.7, fontSize: 13 }}></span></p>
 </div>
 </div>
 </div>

          {status === "success" ?
 <div className="form__success">
 <div className="form__success-mark">✓</div>
 <h3>Quote request sent.</h3>
 <p>A planner will reply to your email within 2 hours during dispatch hours. For anything urgent, call +14375351330.</p>
 <button type="button" className="btn btn--ghost" onClick={() => setStatus("idle")}>Send another</button>
 </div> :

 <form className="form" onSubmit={submit}>
 <input
 type="text"
 name="website"
 tabIndex="-1"
 autoComplete="off"
 style={{ position: "absolute", left: "-9999px", opacity: 0 }}
 aria-hidden="true"
 />
 <div className="form__row two">
 <div className="field">
 <label>Origin</label>
 <input type="text" name="Origin" placeholder="City, province / state" required minLength={2} maxLength={80} />
 </div>
 <div className="field">
 <label>Destination</label>
 <input type="text" name="Destination" placeholder="City, province / state" required minLength={2} maxLength={80} />
 </div>
 </div>

 <div className="field">
 <label>Equipment</label>
 <div className="eq-row">
 {eqOptions.map((e) =>
              <div key={e}
              className={`eq-chip ${equipment.includes(e) ? "on" : ""}`}
              onClick={() => toggleEq(e)}>
 {e}
 </div>
              )}
 </div>
 </div>

 <div className="form__row three">
 <div className="field">
 <label>Commodity</label>
 <input type="text" name="Commodity" placeholder="e.g. steel coils" maxLength={80} />
 </div>
 <div className="field">
 <label>Weight</label>
 <input type="text" name="Weight" placeholder="lbs / kg" maxLength={30} pattern="^[0-9.,\-\sA-Za-z]{1,30}$" title="Use numbers and units only, for example 42000 lbs" />
 </div>
 <div className="field">
 <label>Ready date</label>
 <input type="text" name="Ready date" placeholder="MM / DD" pattern="^(0[1-9]|1[0-2])\s*\/\s*(0[1-9]|[12]\d|3[01])$" title="Use MM / DD format" />
 </div>
 </div>

 <div className="form__row two">
 <div className="field">
 <label>Company</label>
 <input type="text" name="Company" placeholder="Acme Logistics Inc." maxLength={120} />
 </div>
 <div className="field">
 <label>Work email</label>
 <input type="email" name="email" placeholder="you@company.com" required maxLength={120} />
 </div>
 </div>

 <div className="field">
 <label>Notes for dispatch</label>
 <textarea rows={2} name="Notes" placeholder="Appointment requirements, special handling, lane frequency…" maxLength={1000}></textarea>
 </div>

 <div className="form__submit">
 <span className="meta">
 {status === "error" ?
                  <span style={{ color: "oklch(0.6 0.2 25)" }}>{errorMsg || "Couldn't send — call +14375351330 or email us directly."}</span> :
                  <>By submitting you agree to our terms · No data shared with brokers</>}
 </span>
 <button type="submit" className="btn btn--primary" disabled={status === "sending"}>
 {status === "sending" ? "Sending…" : <>Send to dispatch <Icon.arrow /></>}
 </button>
 </div>
 </form>
          }
 </div>
 </section>);

}

function Industries() {
  const inds = [
  { icon: <Icon.oil />, name: "Chemicals & Plastics", loads: "" },
  { icon: <Icon.heavy />, name: "Machinery", loads: "" },
  { icon: <Icon.retail />, name: "Food & Beverage", loads: "" },
  { icon: <Icon.steel />, name: "Raw Materials", loads: "" },
  { icon: <Icon.build />, name: "Building Materials", loads: "" },
  { icon: <Icon.agri />, name: "Agriculture", loads: "" },
  { icon: <Icon.retail />, name: "Manufactured Goods", loads: "" },
  { icon: <Icon.build />, name: "Furniture", loads: "" },
  { icon: <Icon.steel />, name: "Lumber", loads: "" },
  { icon: <Icon.build />, name: "Construction", loads: "" },
  { icon: <Icon.retail />, name: "Clothing & Textiles", loads: "" },
  { icon: <Icon.energy />, name: "Packaging Materials", loads: "" }];

  return (
    <section className="section industries" id="industries">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num"></div>
 <h2 className="h-section">Loads we move, <em>every week.</em></h2>
 </div>
 <p className="sec-head__lead">Twelve core verticals make up the majority of our annual freight. Specialized lanes, handling protocols, and named planners for each from Coca-Cola-grade temperature control to bonded haz-mat for chemical shippers.



 </p>
 </div>
 <div className="ind-grid">
 {inds.map((i, k) =>
          <div className="ind" key={k}>
 <div className="ind__icon">{i.icon}</div>
 <div className="ind__name">{i.name}</div>
 <div className="ind__loads">{i.loads}</div>
 </div>
          )}
 </div>
 </div>
 </section>);

}

function Drive() {
  const paths = [
  { tag: "Company Driver", h: "Etobicoke, ON & Brampton", p: "Steady miles, late-model trucks, weekly settlements. Pet & rider friendly." },
  { tag: "Lease Purchase", h: "Own your truck in 36 months", p: "Zero down. Flexible terms. Walk-away clause. We provide the freight, you build the equity." },
  { tag: "Owner Operator", h: "Plate with Professor's", p: "Industry-leading percentage and fuel program. Run your business, we'll keep the trailer full." }];

  return (
    <section className="section drive" id="drive">
 <div className="container drive__inner">
 <div className="drive__visual">
 <img src="images/truck-3006.png" alt="Professor's Transport unit 3006 Freightliner Cascadia in the rain" className="drive__img" />
 <div className="corner">3003</div>
 <div className="badge">Now hiring · Class 1/A</div>
 </div>

 <div>
 <h2 className="h-section" style={{ color: "var(--surface)", marginTop: 18 }}>
 Drive for Professor's, <em></em> three ways in.
 </h2>
 <p style={{ margin: "24px 0 0", color: "oklch(0.85 0.02 260)", fontSize: 17, lineHeight: 1.55, maxWidth: "46ch" }}>
 We're hiring company drivers, lease-purchase candidates and owner-operators
 out of our Concord, Ontario and Moncton, New Brunswick terminals.
 </p>

 <div className="drive__perks">
 {paths.map((p, i) =>
            <div className="perk" key={i}>
 <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 6 }}>
 {p.tag}
 </div>
 <h5>{p.h}</h5>
 <p>{p.p}</p>
 </div>
            )}
 <div className="perk">
 <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 6 }}>
 Corporate
 </div>
 <h5>Office & dispatch roles</h5>
 <p>Planners, safety, accounting, sales, customs & cross-border specialists.</p>
 </div>
 </div>

 <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
 <a href="#" className="btn btn--accent">Apply to drive <Icon.arrow /></a>
 <a href="#" className="btn btn--inverse">View all roles</a>
 </div>
 </div>
 </div>
 </section>);

}

function Footer() {
  return (
    <footer className="footer" id="contact">
 <div className="container">
 <div className="footer__top">
 <div className="footer__brand">
 <a href="index.html" className="footer__logo" aria-label="Professor's Transport">
 <img src="images/logo-knockout.png" alt="Professor's Transport Ltd" />
 </a>
 <h4>Custom-tailored transportation, delivered <em>safely</em> and on-time.</h4>
 <p>Canadian asset-based carrier with offices in Etobicoke,  Brampton Ontario. We never say no.


            </p>
 <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
 <a href="#quote" className="btn btn--accent">Get a quote <Icon.arrow /></a>
 </div>
 </div>

 <div className="footer__col">
 <h5>Transportation</h5>
 <ul>
 <li><a href="#">Dry vans</a></li>
 <li><a href="#">Reefers / heaters</a></li>
 <li><a href="#">Hazardous materials</a></li>
 <li><a href="#">Truck load (TL)</a></li>
 <li><a href="#">Less-than-truck load (LTL)</a></li>
 <li><a href="#">3PL / freight forwarding</a></li>
 <li><a href="#">Expedited shipping</a></li>
 </ul>
 </div>

 <div className="footer__col">
 <h5>Company</h5>
 <ul>
 <li><a href="about.html">About</a></li>
 <li><a href="#">Equipment</a></li>
 <li><a href="#">Certifications</a></li>
 <li><a href="#"></a></li>
 <li><a href="#"></a></li>
 <li><a href="careers.html"></a></li>
 <li><a href="#"></a></li>
 <li><a href="contact.html"></a></li>
 </ul>
 </div>

 <div className="footer__col">
 <h5>Get in touch</h5>
 <ul style={{ gap: 6 }}>
 <li style={{ display: "flex", alignItems: "center", gap: 10 }}>
 <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--accent)" strokeWidth="2" style={{ flex: "0 0 18px" }} aria-hidden="true">
 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.78 19.78 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.78 19.78 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.62a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6.09 6.09l1.46-1.28a2 2 0 0 1 2.11-.45c.84.29 1.72.5 2.62.62A2 2 0 0 1 22 16.92z" />
 </svg>
 <a href="tel:+14375351330">+14375351330</a>
 </li>
 <li style={{ display: "flex", alignItems: "center", gap: 10 }}>
 <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--accent)" strokeWidth="2" style={{ flex: "0 0 18px" }} aria-hidden="true">
 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
 <path d="M3 7l9 6 9-6" />
 </svg>
 <a href="mailto:dispatch@professorstransport.com">dispatch@professorstransport.com</a>
 </li>
 <li style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
 <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--accent)" strokeWidth="2" style={{ flex: "0 0 18px", marginTop: 2 }} aria-hidden="true">
 <path d="M12 21s-7-6.2-7-11a7 7 0 1 1 14 0c0 4.8-7 11-7 11z" />
 <circle cx="12" cy="10" r="2.6" />
 </svg>
 <span>Yard: 2705 Slough Street,<br />Mississauga, ON</span>
 </li>
 </ul>
 </div>
 </div>

 <div className="footer__bottom">
 <span>© 2026 Professor's Transport Ltd. All rights reserved.</span>
 <span></span>
 </div>
 </div>
 </footer>);

}

Object.assign(window, { CoverageMap, Why, QuoteForm, Industries, Drive, Footer });