/* Professor's Transport main app */
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy-amber",
  "accent": "#dba24a",
  "heroVariant": "split",
  "heroHeadline": "Heavy freight, moved with *intent.*",
  "showLaneTicker": true,
  "statStyle": "inverse",
  "showHeroBadge": false,
  "density": "comfortable",
  "fontPairing": "geist-serif",
  "showQuoteForm": true
} /*EDITMODE-END*/;

// ---------------- Palette + density tweaking ----------------
const PALETTES = {
  "navy-amber": {
    "--ink": "oklch(0.18 0.045 260)",
    "--ink-2": "oklch(0.32 0.04 260)",
    "--navy": "oklch(0.22 0.06 260)",
    "--navy-deep": "oklch(0.14 0.05 260)",
    "--surface": "#ffffff",
    "--surface-2": "#ffffff",
    "--surface-3": "oklch(0.94 0.005 260)",
    "--border": "oklch(0.90 0.008 260)",
    "--border-strong": "oklch(0.80 0.012 260)"
  },
  "graphite": {
    "--ink": "oklch(0.20 0.012 260)",
    "--ink-2": "oklch(0.36 0.012 260)",
    "--navy": "oklch(0.24 0.012 260)",
    "--navy-deep": "oklch(0.14 0.008 260)",
    "--surface": "#ffffff",
    "--surface-2": "#ffffff",
    "--surface-3": "oklch(0.93 0.005 260)",
    "--border": "oklch(0.90 0.004 260)",
    "--border-strong": "oklch(0.80 0.006 260)"
  },
  "forest": {
    "--ink": "oklch(0.22 0.04 165)",
    "--ink-2": "oklch(0.36 0.035 165)",
    "--navy": "oklch(0.26 0.04 165)",
    "--navy-deep": "oklch(0.16 0.035 165)",
    "--surface": "#ffffff",
    "--surface-2": "#ffffff",
    "--surface-3": "oklch(0.93 0.008 165)",
    "--border": "oklch(0.90 0.008 165)",
    "--border-strong": "oklch(0.80 0.014 165)"
  },
  "ink-paper": {
    "--ink": "oklch(0.16 0.01 80)",
    "--ink-2": "oklch(0.34 0.012 80)",
    "--navy": "oklch(0.22 0.012 80)",
    "--navy-deep": "oklch(0.12 0.008 80)",
    "--surface": "#ffffff",
    "--surface-2": "#ffffff",
    "--surface-3": "oklch(0.93 0.01 80)",
    "--border": "oklch(0.90 0.006 80)",
    "--border-strong": "oklch(0.80 0.01 80)"
  }
};

const ACCENTS = {
  "#dba24a": { "--accent": "oklch(0.74 0.158 62)", "--accent-ink": "oklch(0.28 0.09 60)" }, // amber
  "#c25a3a": { "--accent": "oklch(0.62 0.18 35)", "--accent-ink": "oklch(0.98 0.005 80)" }, // rust
  "#3a7be0": { "--accent": "oklch(0.68 0.18 240)", "--accent-ink": "oklch(0.98 0.005 80)" }, // electric
  "#b8d845": { "--accent": "oklch(0.84 0.18 130)", "--accent-ink": "oklch(0.22 0.06 160)" } // lime
};

const DENSITY = {
  "compact": "0.75",
  "comfortable": "1",
  "spacious": "1.25"
};

const FONT_PAIRINGS = {
  "geist-serif": {
    "--font-sans": '"Geist", ui-sans-serif, system-ui, sans-serif',
    "--font-mono": '"Geist Mono", ui-monospace, monospace',
    "--font-serif": '"Geist", ui-sans-serif, system-ui, sans-serif'
  },
  "manrope-mono": {
    "--font-sans": '"Manrope", ui-sans-serif, system-ui, sans-serif',
    "--font-mono": '"IBM Plex Mono", ui-monospace, monospace',
    "--font-serif": '"Manrope", ui-sans-serif, system-ui, sans-serif'
  },
  "saans-only": {
    "--font-sans": '"Space Grotesk", ui-sans-serif, system-ui, sans-serif',
    "--font-mono": '"JetBrains Mono", ui-monospace, monospace',
    "--font-serif": '"Space Grotesk", ui-sans-serif, system-ui, sans-serif'
  }
};

function applyTokens(t) {
  const root = document.documentElement;
  const apply = (m) => Object.entries(m).forEach(([k, v]) => root.style.setProperty(k, v));
  apply(PALETTES[t.palette] || PALETTES["navy-amber"]);
  apply(ACCENTS[t.accent] || ACCENTS["#dba24a"]);
  apply(FONT_PAIRINGS[t.fontPairing] || FONT_PAIRINGS["geist-serif"]);
  root.style.setProperty("--density", DENSITY[t.density] || "1");
}

// ---------------- Icons ----------------
const Icon = {
  arrow: (p) =>
  <svg viewBox="0 0 16 16" fill="none" width={p.size || 14} height={p.size || 14} stroke="currentColor" strokeWidth="1.6" {...p}>
 <path d="M3 8h10M9 4l4 4-4 4" />
 </svg>,

  arrowDiag: (p) =>
  <svg viewBox="0 0 16 16" fill="none" width={p.size || 14} height={p.size || 14} stroke="currentColor" strokeWidth="1.6" {...p}>
 <path d="M5 11L11 5M6 5h5v5" />
 </svg>,

  truck: (p) =>
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 28} height={p.size || 28}>
 <rect x="2" y="8" width="16" height="13" />
 <path d="M18 12h6l4 4v5h-10z" />
 <circle cx="9" cy="23" r="2.4" />
 <circle cx="23" cy="23" r="2.4" />
 </svg>,

  reefer: (p) =>
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 28} height={p.size || 28}>
 <rect x="3" y="7" width="22" height="14" />
 <path d="M14 7v14M8 11l4 3-4 3M20 11l-4 3 4 3" />
 <circle cx="9" cy="23.5" r="2" />
 <circle cx="22" cy="23.5" r="2" />
 </svg>,

  flatbed: (p) =>
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 28} height={p.size || 28}>
 <path d="M2 18h28" />
 <path d="M2 18v3h28v-3" />
 <path d="M8 18v-7h10v7" />
 <circle cx="9" cy="23" r="2" />
 <circle cx="23" cy="23" r="2" />
 </svg>,

  heavy: (p) =>
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 28} height={p.size || 28}>
 <rect x="3" y="10" width="14" height="11" />
 <path d="M17 14h6l5 4v3h-11z" />
 <circle cx="8" cy="23" r="2" />
 <circle cx="14" cy="23" r="2" />
 <circle cx="22" cy="23" r="2" />
 <path d="M6 13l3 3M9 13l-3 3" />
 </svg>,

  border: (p) =>
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 28} height={p.size || 28}>
 <path d="M3 22h26M3 22v-8h26v8" />
 <path d="M16 6v8" />
 <path d="M12 9l4-3 4 3" />
 <path d="M9 18v4M23 18v4M16 16v6" strokeDasharray="2 2" />
 </svg>,

  dedicated: (p) =>
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 28} height={p.size || 28}>
 <circle cx="16" cy="16" r="11" />
 <path d="M5 16h22M16 5c3 3 4 7 4 11s-1 8-4 11M16 5c-3 3-4 7-4 11s1 8 4 11" />
 </svg>,

  // industry icons
  steel: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 24} height={p.size || 24}><path d="M3 19l9-14 9 14H3z" /><path d="M8 15h8M10 12h4" /></svg>,
  oil: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 24} height={p.size || 24}><path d="M12 3c4 5 6 8 6 11a6 6 0 11-12 0c0-3 2-6 6-11z" /></svg>,
  agri: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 24} height={p.size || 24}><path d="M12 21V8M8 11c2 0 4-2 4-3-2 0-4 2-4 3zM16 11c-2 0-4-2-4-3 2 0 4 2 4 3zM7 16c2 0 5-2 5-3-2 0-5 2-5 3zM17 16c-2 0-5-2-5-3 2 0 5 2 5 3z" /></svg>,
  retail: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 24} height={p.size || 24}><path d="M4 8h16l-1 12H5L4 8z" /><path d="M9 8V5a3 3 0 016 0v3" /></svg>,
  build: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 24} height={p.size || 24}><path d="M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6" /></svg>,
  energy: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" width={p.size || 24} height={p.size || 24}><path d="M13 3L4 14h6l-1 7 9-11h-6l1-7z" /></svg>
};

// ---------------- Sections ----------------
function UtilityBar() {
  return (
    <div className="utility">
 <div className="container utility__inner">
 <div className="utility__left">
 <span><span className="pulse"></span>24/7 Live Dispatchers</span>
 <span className="hide-sm"></span>
 </div>
 <div className="utility__right">
 <a href="tel:+14375351330">+1 437 535 1330</a>
 </div>
 </div>
 </div>);

}

function Nav({ current }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const links = [
  { href: "services.html", label: "Services", id: "services" },
  { href: "industries.html", label: "Industries", id: "industries" },
  { href: "about.html", label: "About", id: "about" },
  { href: "careers.html", label: "Careers", id: "careers" },
  { href: "blog.html", label: "Blog", id: "blog" },
  { href: "contact.html", label: "Contact", id: "contact" }];

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => {document.body.style.overflow = "";};
  }, [mobileOpen]);

  return (
    <header className={`nav ${mobileOpen ? "nav--open" : ""}`}>
 <div className="container nav__inner">
 <a href="index.html" className="logo" aria-label="Professor's Transport">
 <img src="images/logo.png" alt="Professor's Transport Ltd" className="logo__img" />
 </a>
 <nav className="nav__links">
 {links.map((l) =>
          <a key={l.id} href={l.href} className={current === l.id ? "is-current" : ""}>
 {l.label}
 </a>
          )}
 </nav>
 <div className="nav__cta">
 <a href="contact.html" className="btn btn--primary nav__cta-quote">
 Get a quote <Icon.arrow />
 </a>
 <button
            type="button"
            className="nav__burger"
            aria-label={mobileOpen ? "Close menu" : "Open menu"}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((o) => !o)}>
 <span></span><span></span><span></span>
 </button>
 </div>
 </div>

 <div className="nav__drawer" aria-hidden={!mobileOpen}>
 <nav className="nav__drawer-links">
 {links.map((l) =>
          <a key={l.id} href={l.href}
          className={current === l.id ? "is-current" : ""}
          onClick={() => setMobileOpen(false)}>
 <span>{l.label}</span>
 <Icon.arrow />
 </a>
          )}
 </nav>
 <div className="nav__drawer-foot">
 <a href="contact.html" className="btn btn--accent" onClick={() => setMobileOpen(false)}>
 Get a quote <Icon.arrow />
 </a>
 <div className="nav__drawer-meta">
 <span>+14375351330</span>
 <span>24/7 live dispatchers</span>
 </div>
 </div>
 </div>
 </header>);

}

function Hero({ t }) {
  return (
    <section className="hero">
 <div className="container hero__inner">
 <div className="hero__copy">
 <div className="hero__eyebrow">
 <span className="rule"></span>
 <span className="eyebrow"><span className="dot"></span>Canadian asset-based carrier · Canada & US</span>
 </div>
 <h1 className="h-display">
 {renderHeadline(t.heroHeadline)}
 </h1>
 <p className="hero__sub">Professor's Transport is a Canadian asset-based carrier moving freight across Canada and US. Dry vans, reefers, heated trailers, flatbeds and haz-mat  backed by a 5+ truck fleet, 6+ trailers, and a 24/7 live dispatch desk that never says no.




 </p>
 <div className="hero__cta">
 <a href="contact.html" className="btn btn--accent">Get a quote <Icon.arrow /></a>
 <a href="services.html" className="btn btn--ghost">View services</a>
 <span className="since"></span>
 </div>
 </div>

 <div className="hero__visual">
 <img src="images/truck-3003.png" alt="Professor's Transport unit 3003 Freightliner 53′ dry van" className="hero__img" />
 <div className="hero__visual__corner"></div>
 {t.showHeroBadge &&
          <div className="hero__visual__pin">
 On-time<br />delivery<br /><b style={{ fontFamily: "var(--font-sans)", fontSize: "22px", fontWeight: 500, letterSpacing: "-0.015em" }}>98%</b>
 </div>
          }
 <div className="hero__visual__meta">
 <span>
 <b></b>
 
 </span>
 <span></span>
 </div>
 </div>
 </div>
 </section>);

}

function renderHeadline(text) {
  // *spans* render as accent-colored emphasis (no font change typography stays unified)
  const parts = String(text).split(/(\*[^*]+\*)/g);
  return parts.map((p, i) =>
  p.startsWith("*") && p.endsWith("*") ?
  <span key={i} className="hl-accent">{p.slice(1, -1)}</span> :
  <React.Fragment key={i}>{p}</React.Fragment>
  );
}

function LaneTicker() {
  const lanes = [
  { from: "Vaughan, ON", to: "Calgary, AB", km: "3,432 km", eq: "Dry van", status: "In transit", cls: "transit" },
  { from: "Moncton, NB", to: "Mississauga, ON", km: "1,432 km", eq: "Reefer", status: "Delivered", cls: "delivered" },
  { from: "Toronto, ON", to: "Montréal, QC", km: "541 km", eq: "Flatbed", status: "In transit", cls: "transit" },
  { from: "Concord, ON", to: "Chicago, IL", km: "843 km", eq: "Flatbed", status: "At border", cls: "transit" },
  { from: "Halifax, NS", to: "Vaughan, ON", km: "1,790 km", eq: "Haz-mat", status: "Loading", cls: "" },
  { from: "Windsor, ON", to: "Detroit, MI", km: "Cross-border", eq: "FAST/ACE", status: "Cleared", cls: "delivered" },
  { from: "Vaughan, ON", to: "Houston, TX", km: "2,860 km", eq: "Heated", status: "Dispatched", cls: "" },
  { from: "Moncton, NB", to: "Saint John, NB", km: "152 km", eq: "LTL", status: "Delivered", cls: "delivered" }];

  const allLanes = [...lanes, ...lanes]; // duplicate for seamless loop
  return (
    <div className="ticker" aria-label="Live lane activity">
 <div className="ticker__row">
 {allLanes.map((l, i) =>
        <span className="ticker__item" key={i}>
 <span className="muted">L{String(i % lanes.length + 40).padStart(3, "0")}</span>
 <span>{l.from}</span>
 <span className="arr">→</span>
 <span>{l.to}</span>
 <span className="muted">· {l.km}</span>
 <span className="muted">· {l.eq}</span>
 <span className={`status ${l.cls}`}>{l.status}</span>
 </span>
        )}
 </div>
 </div>);

}

function Trust() {
  const partners = [
  { name: "Northway Beverages", cls: "" },
  { name: "BOREAL CHEMICALS", cls: "mono" },
  { name: "Maple Foods Co.", cls: "sans" },
  { name: "Cascade Building Products", cls: "" },
  { name: "ROCKBASIN INDUSTRIES", cls: "mono" },
  { name: "Henderson Logistics", cls: "sans" }];

  return (
    <section className="trust">
 <div className="container trust__inner">
 <div className="trust__label">Trusted by shippers across<br />Canada & the US lower 48</div>
 <div className="trust__logos">
 {partners.map((p, i) =>
          <div className={`trust__logo ${p.cls}`} key={i}>{p.name}</div>
          )}
 </div>
 </div>
 </section>);

}

function Stats({ t }) {
  // Stat layout is always inverse (dark) in this build
  return (
    <section className="stats">
 <div className="container stats__inner">
 <div className="stat">
 <div className="stat__num">100<em>+</em></div>
 <div className="stat__label">Trucks in fleet</div>
 <div className="stat__caption">Modern, continuously upgraded power units, owned and operated by us.</div>
 </div>
 <div className="stat">
 <div className="stat__num">200<em>+</em></div>
 <div className="stat__label">Trailers available</div>
 <div className="stat__caption">Dry van, reefer, heated and flatbed large & small loads.</div>
 </div>
 <div className="stat">
 <div className="stat__num">98<small>%</small></div>
 <div className="stat__label">On-time delivery</div>
 <div className="stat__caption">Industry-leading on-time record across all customer lanes.</div>
 </div>
 <div className="stat">
 <div className="stat__num">24<em>/7</em></div>
 <div className="stat__label">Live dispatch</div>
 <div className="stat__caption">Real planners answering calls every hour of every day, year-round.</div>
 </div>
 </div>
 </section>);

}

function Capabilities() {
  const caps = [
  { n: "01", icon: <Icon.truck />, title: "Dry vans", body: "53-foot dry vans ready for short-haul, long-haul, or regional delivery across Canada and the lower 48.", tags: ["53′", "TL", "LTL"] },
  { n: "02", icon: <Icon.reefer />, title: "Reefers & heated", body: "Refrigerated and heated trailers keep temperature-sensitive goods secure from origin to dock.", tags: ["Multi-temp", "Heated", "FSMA"] },
  { n: "03", icon: <Icon.heavy />, title: "Hazardous materials", body: "HAZMAT-certified to move chemicals, sensitive materials and dangerous goods across borders.", tags: ["HAZMAT", "TDG", "DOT"] },
  { n: "04", icon: <Icon.border />, title: "Cross-border & bonded", body: "C-TPAT, PIP, FAST, ACE and ACI certified customs-bonded service into all 48 contiguous US states.", tags: ["FAST", "C-TPAT", "Bonded"] },
  { n: "05", icon: <Icon.dedicated />, title: "3PL & freight forwarding", body: "End-to-end logistics partnership for shippers who need more than a truck dedicated capacity, mode mixing, planning.", tags: ["3PL", "Dedicated", "Mode-mix"] },
  { n: "06", icon: <Icon.truck />, title: "Expedited & TL/LTL", body: "Truckload, less-than-truckload, and expedited service when timing is the whole job.", tags: ["TL", "LTL", "Expedited"] }];

  return (
    <section className="section industries" id="capabilities">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num"></div>
 <h2 className="h-section">Six ways we move <em>your freight.</em></h2>
 </div>
 <p className="sec-head__lead">
 Whether your load requires heating, cooling, hazardous-material handling or a 53′
 dry van across the border, we have the equipment and the certification to move it.
 Custom-tailored, every time.
 </p>
 </div>
 <div className="caps__grid caps__grid--4">
 {caps.map((c) =>
          <article className="cap" key={c.n}>
 <div className="cap__num">{c.n}</div>
 <div className="cap__icon">{c.icon}</div>
 <h3>{c.title}</h3>
 <p>{c.body}</p>
 <div className="cap__tags">
 {c.tags.map((tag) => <span key={tag}>{tag}</span>)}
 </div>
 <span className="cap__arrow"><Icon.arrowDiag size={18} /></span>
 </article>
          )}
 </div>
 <div style={{ marginTop: 32, display: "flex", justifyContent: "flex-end" }}>
 <a href="services.html" className="btn btn--ghost">View all services in detail <Icon.arrow /></a>
 </div>
 </div>
 </section>);

}

// Components live in global scope so they're available across tag scopes
Object.assign(window, { UtilityBar, Nav, Hero, LaneTicker, Trust, Stats, Capabilities, Icon, applyTokens, TWEAK_DEFAULTS, PALETTES, ACCENTS, DENSITY, FONT_PAIRINGS });