const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ============================================================
   DATA
============================================================ */
const LOCATIONS = [
{
  id: "ancaster-wilson",
  city: "Ancaster",
  coords: [43.2148, -79.9940],
  boards: 2,
  traffic: 26000,
  landmark: "Near Meadowlands Power Centre",
  address: "1089 Wilson St, Ancaster, ON",
  status: "available",
  statusLabel: "Live Now",
  live: true
},
{
  id: "vaughan",
  city: "Vaughan",
  coords: [43.7954, -79.5298],
  boards: 2,
  traffic: 44000,
  landmark: "Near Vaughan Mills Mall",
  address: "535 Millway Ave, Vaughan, ON",
  status: "construction",
  statusLabel: "Construction"
},
{
  id: "hamilton",
  city: "Hamilton",
  coords: [43.2121, -79.8194],
  boards: 2,
  traffic: 26000,
  landmark: "Near Mohawk College",
  address: "1140 Ryman Rd, Hamilton, ON",
  status: "construction",
  statusLabel: "Construction"
},
{
  id: "london",
  city: "London",
  coords: [42.9483, -81.2401],
  boards: 2,
  traffic: 36000,
  landmark: "Near Masonville Place",
  address: "9 Southdale Rd E, London, ON",
  status: "construction",
  statusLabel: "Construction"
},
{
  id: "kitchener",
  city: "Kitchener",
  coords: [43.4254, -80.4361],
  boards: 2,
  traffic: 25000,
  landmark: "Near Fairview Park Mall",
  address: "Fairway Rd S, Kitchener, ON",
  status: "construction",
  statusLabel: "Under Negotiation"
}];


const PACKAGES = [];

const CITY_TRAFFIC = {
  "ancaster-wilson": { label: "Ancaster, 1089 Wilson St", daily: 26000 },
  vaughan: { label: "Vaughan, Hwy 400 / Vaughan Mills", daily: 44000 },
  kitchener: { label: "Kitchener, Fairview Park Mall", daily: 25000 },
  hamilton: { label: "Hamilton, Mohawk College corridor", daily: 26000 },
  london: { label: "London, Masonville Place", daily: 36000 }
};

const SPEC_SHEETS = {
  "ancaster-wilson": { pdf: "uploads/Ancaster Spec Sheet-94fb94f5.pdf", title: "Ancaster" },
  "hamilton":        { pdf: "uploads/Hamilton Spec Sheet-9dcf2e56.pdf",           title: "Hamilton" },
  "london":          { pdf: "uploads/London Spec Sheet.pdf",             title: "London" },
  "vaughan":         { pdf: "uploads/Vaughn Spec Sheet-446db11c.pdf",             title: "Vaughan" },
};

const WHY_CARDS = [
{ icon: "🎯", title: "Hyper-Local Targeting", body: "Put your brand in front of the exact neighbourhoods you serve." },
{ icon: "📅", title: "Flexible Scheduling", body: "Run campaigns by the week, not the year. No long-term lock-ins." },
{ icon: "🔄", title: "Instant Updates", body: "Change your ad content digitally. No printing, no delays." },
{ icon: "📊", title: "Measurable Reach", body: "Real traffic data so you know exactly how many eyes hit your board." }];


const NAV_LINKS = [
{ href: "#locations", label: "Locations" },
{ href: "#packages", label: "Pricing" },
{ href: "#why", label: "Why Billboards" },
{ href: "#list-property", label: "Real Estate" },
{ href: "#about", label: "About Us" },
{ href: "#contact", label: "Contact" }];
const NAV_EXTRA = { href: "#list-property", label: "Real Estate" };


/* ============================================================
   HOOKS
============================================================ */
function useScrolled(threshold = 24) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);
  return scrolled;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("reveal--in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("reveal--in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useCountUp(target, { duration = 1400, start = false } = {}) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!start) return;
    let raf;
    const t0 = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - t0) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(eased * target));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, start, duration]);
  return val;
}

function useInView(ref, opts = { threshold: 0.3 }) {
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref]);
  return inView;
}

/* ============================================================
   ICONS
============================================================ */
const Icon = {
  Instagram: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
    </svg>,

  Facebook: () =>
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-8h3l1-4h-4V7c0-1.2.5-2 2-2h2V1.2C16.3 1 15 1 14 1c-3 0-5 2-5 5v3H6v4h3v8h4z" /></svg>,

  LinkedIn: () =>
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8 18H5V9h3v9zM6.5 7.7A1.7 1.7 0 1 1 6.5 4.3a1.7 1.7 0 0 1 0 3.4zM19 18h-3v-4.7c0-1.1-.4-1.9-1.4-1.9-.8 0-1.2.5-1.4 1-.1.2-.1.5-.1.7V18h-3V9h3v1.3c.4-.6 1.1-1.4 2.6-1.4 1.9 0 3.3 1.2 3.3 3.8V18z" /></svg>,

  Arrow: () =>
  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>

};

/* ============================================================
   NAV
============================================================ */
function Nav() {
  const scrolled = useScrolled(24);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const close = () => setOpen(false);
    window.addEventListener("hashchange", close);
    return () => window.removeEventListener("hashchange", close);
  }, []);
  return (
    <React.Fragment>
      <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
        <div className="wrap nav__inner">
          <a href="#top" className="nav__brand" aria-label="True North Billboards home">
            <img src="assets/logo.png" alt="True North Billboards" className="nav__logo" />
          </a>
          <nav className="nav__links" aria-label="Primary">
            {NAV_LINKS.map((l) =>
            <a key={l.href} href={l.href} className="nav__link">{l.label}</a>
            )}
            <a href="#contact" className="btn btn--red btn--sm nav__cta">Get a Quote</a>
          </nav>
          <button
            className={`nav__burger ${open ? "nav__burger--open" : ""}`}
            aria-label="Menu"
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}>
            
            <span /><span /><span />
          </button>
        </div>
      </header>
      <div className={`nav__mobile ${open ? "open" : ""}`}>
        {NAV_LINKS.map((l) =>
        <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        )}
        <a href="#contact" className="btn btn--red" onClick={() => setOpen(false)} style={{ marginTop: 12 }}>Get a Quote</a>
      </div>
    </React.Fragment>);

}

/* ============================================================
   HERO
============================================================ */
function BillboardGlyph() {
  return (
    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="2.5" y="3.5" width="19" height="11" rx="1.2" />
      <path d="M6 7.5h7M6 10.5h10" opacity="0.6" />
      <path d="M9 14.5v6M15 14.5v6M6.5 20.5h4M13.5 20.5h4" />
    </svg>);

}

function HeroStat({ icon, iconNode, target, suffix, label, start, format }) {
  const v = useCountUp(target, { start });
  return (
    <div>
      <div className="hero__stat-icon">{iconNode || icon}</div>
      <div className="hero__stat-num">{format ? format(v) : v}{suffix || ""}</div>
      <div className="hero__stat-label">{label}</div>
    </div>);

}

function Hero() {
  const ref = useRef(null);
  const inView = useInView(ref, { threshold: 0.2 });
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="hero__bg" aria-hidden="true" />
      <div className="hero__overlay" aria-hidden="true" />
      <div className="hero__billboard" aria-hidden="true">
        YOUR<br />BRAND<br />HERE
      </div>
      <div className="hero__billboard-pole" aria-hidden="true" />

      <div className="wrap hero__content" ref={ref}>
        <div className="hero__kicker">Family-owned · Proudly Ontario</div>
        <h1>
          <span className="line">Own a Local Business?</span>
          <span className="line accent">Get Seen Across Ontario.</span>
        </h1>
        <p className="hero__sub">
          Digital billboards that drive real customers to your door, without the agency markup, the long-term lock-ins, or the printed-vinyl wait.
        </p>
        <div className="hero__ctas">
          <a href="#locations" className="btn btn--red btn--lg">
            View Locations &amp; Pricing <Icon.Arrow />
          </a>
          <a href="#why" className="btn btn--outline-white btn--lg">
            How It Works
          </a>
        </div>
        <div className="hero__stats">
          <HeroStat icon="📍" target={4} label="Cities Across Ontario" start={inView} />
          <HeroStat icon="👁" target={26} suffix="K+" label="Impressions / Day Per Board" start={inView} />
          <HeroStat icon="🪧" target={10} label="Digital Boards & Growing" start={inView} iconNode={<BillboardGlyph />} />
        </div>
      </div>
    </section>);

}

/* ============================================================
   WHY
============================================================ */
function Why() {
  return (
    <section className="section why" id="why" data-screen-label="Why Billboards" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <div className="why__head reveal">
          <p className="eyebrow eyebrow--light">The Case for Outdoor</p>
          <h2 className="h-display h2">Outdoor Advertising That Actually Works</h2>
          <p className="lead">Digital out-of-home cuts through the noise of crowded feeds. You don't scroll past a billboard. You drive past it.</p>
        </div>
        <div className="why__grid">
          {WHY_CARDS.map((c, i) =>
          <div className="why__card reveal" style={{ "--reveal-delay": `${i * 90}ms` }} key={c.title}>
              <div className="why__icon">{c.icon}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   SPEC SHEET MODAL
============================================================ */
function SpecSheetModal({ pdfPath, title, onClose }) {
  const containerRef = useRef(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

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

  useEffect(() => {
    const pdfjsLib = window["pdfjs-dist/build/pdf"];
    if (!pdfjsLib) { setError(true); setLoading(false); return; }
    pdfjsLib.GlobalWorkerOptions.workerSrc =
      "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

    pdfjsLib.getDocument(pdfPath).promise
      .then(async (pdf) => {
        if (!containerRef.current) return;
        containerRef.current.innerHTML = "";
        for (let i = 1; i <= pdf.numPages; i++) {
          const page = await pdf.getPage(i);
          const viewport = page.getViewport({ scale: 1.8 });
          const canvas = document.createElement("canvas");
          canvas.width  = viewport.width;
          canvas.height = viewport.height;
          canvas.style.width = "100%";
          canvas.style.display = "block";
          canvas.style.boxShadow = "0 2px 12px rgba(0,0,0,0.12)";
          containerRef.current.appendChild(canvas);
          await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise;
        }
        setLoading(false);
      })
      .catch(() => { setError(true); setLoading(false); });
  }, [pdfPath]);

  return (
    <div className="spec-modal" onClick={onClose}>
      <div className="spec-modal__box" onClick={(e) => e.stopPropagation()}>
        <div className="spec-modal__header">
          <span className="spec-modal__title">{title} — Spec Sheet</span>
          <div className="spec-modal__header-actions">
            <a
              href={pdfPath}
              download
              className="btn btn--ghost-navy btn--sm"
              title="Download PDF">
              Download
            </a>
            <button className="spec-modal__close" onClick={onClose} aria-label="Close">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </button>
          </div>
        </div>
        <div className="spec-modal__scroll">
          {loading && !error && (
            <div className="spec-modal__loading">
              <div className="spec-modal__spinner"></div>
              <span>Loading spec sheet…</span>
            </div>
          )}
          {error && (
            <div className="spec-modal__loading">
              <span>Unable to load PDF. <a href={pdfPath} download>Download instead</a>.</span>
            </div>
          )}
          <div ref={containerRef} className="spec-modal__pages" />
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   LOCATION DETAIL PANEL
============================================================ */
function LocationDetail({ loc }) {
  const [showSpec, setShowSpec] = useState(false);
  if (!loc) return null;
  const idx = LOCATIONS.findIndex((l) => l.id === loc.id);
  const showPhoto = loc.id === "ancaster-wilson";
  return (
    <div className="loc-detail">
      <div className="loc-detail__media">
        {showPhoto
          ? <img src="assets/board-ancaster.png" alt="Ancaster billboard on Wilson St" />
          : <div className="loc-detail__media-placeholder">
              <span className="loc-detail__media-num">{idx + 1}</span>
              <span className="loc-detail__media-city">{loc.city}</span>
            </div>
        }
      </div>
      <div className="loc-detail__body">
        <div className="loc-detail__top">
          <h3 className="loc-detail__name">{loc.city}</h3>
          <span className={`loc-card__status loc-card__status--${loc.status === "available" ? "live" : "soon"}`}>
            <span className={`dot ${loc.status === "available" ? "dot--green" : "dot--grey"}`} />
            {loc.statusLabel}
          </span>
        </div>
        <div className="loc-detail__stats">
          <div className="loc-detail__stat">
            <span className="loc-detail__stat-icon">👁</span>
            <span className="loc-detail__stat-val"><strong>{loc.traffic.toLocaleString()}</strong> impressions / day</span>
          </div>
          <div className="loc-detail__stat">
            <span className="loc-detail__stat-icon">📍</span>
            <span className="loc-detail__stat-val">{loc.address}</span>
          </div>
          <div className="loc-detail__stat">
            <span className="loc-detail__stat-icon">🏬</span>
            <span className="loc-detail__stat-val">{loc.landmark}</span>
          </div>
          <div className="loc-detail__stat">
            <span className="loc-detail__stat-icon" style={{display:"flex",alignItems:"center"}}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2.5" y="3.5" width="19" height="11" rx="1.2" />
                <path d="M6 7.5h7M6 10.5h10" opacity="0.6" />
                <path d="M9 14.5v6M15 14.5v6M6.5 20.5h4M13.5 20.5h4" />
              </svg>
            </span>
            <span className="loc-detail__stat-val">{loc.boards} digital board{loc.boards > 1 ? "s" : ""} on this site</span>
          </div>
        </div>
      </div>
      <div className="loc-detail__cta">
        {SPEC_SHEETS[loc.id] &&
          <button
            className="btn btn--red btn--sm"
            onClick={() => setShowSpec(true)}>
            See Spec Sheet
          </button>
        }
        <a href="#contact" className={`btn ${loc.live ? "btn--red" : "btn--ghost-navy"} btn--sm`}>
          {loc.live ? "Book This Board" : "Notify Me When Live"}
        </a>
      </div>
      {showSpec && <SpecSheetModal pdfPath={SPEC_SHEETS[loc.id].pdf} title={SPEC_SHEETS[loc.id].title} onClose={() => setShowSpec(false)} />}
    </div>
  );
}

/* ============================================================
   LOCATIONS / MAP
============================================================ */
function Locations() {
  const mapRef = useRef(null);
  const mapInstance = useRef(null);
  const [specOpen, setSpecOpen] = useState(false);
  const markersRef = useRef({});
  const [active, setActive] = useState(null);

  useEffect(() => {
    if (!mapRef.current || mapInstance.current) return;
    const L = window.L;

    const map = L.map(mapRef.current, {
      center: [43.5, -80.2],
      zoom: 7,
      scrollWheelZoom: true,
      zoomControl: true
    });
    mapInstance.current = map;

    // Light, neutral OSM tiles via Carto basemap-like styling
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: '&copy; OpenStreetMap contributors',
      maxZoom: 18
    }).addTo(map);

    LOCATIONS.forEach((loc, i) => {
      const num = i + 1;
      const html = `
        <div class="tn-pin__shape">
          <span class="tn-pin__num">${num}</span>
        </div>
      `;
      const icon = L.divIcon({
        className: `tn-pin ${loc.live ? "tn-pin--live" : ""}`,
        html,
        iconSize: [20, 36],
        iconAnchor: [10, 36],
        popupAnchor: [0, -34]
      });
      const marker = L.marker(loc.coords, {
        icon,
        zIndexOffset: loc.live ? 1000 : 0
      }).addTo(map);

      marker.on("click", () => setActive(loc.id));
      markersRef.current[loc.id] = marker;
    });

    // Fit bounds with padding
    const bounds = L.latLngBounds(LOCATIONS.map((l) => l.coords));
    map.fitBounds(bounds, { padding: [40, 40] });

    return () => {
      map.remove();
      mapInstance.current = null;
    };
  }, []);

  const focus = useCallback((loc) => {
    setActive(loc.id);
    const map = mapInstance.current;
    if (map) {
      map.flyTo(loc.coords, 11, { duration: 0.7 });
    }
  }, []);

  return (
    <section className="section locations" id="locations" data-screen-label="Locations" style={{ padding: "80px 0px 50px" }}>
      <div className="wrap">
        <div className="locations__head reveal">
          <p className="eyebrow">Our Network</p>
          <h2 className="h-display h2" style={{ color: "var(--navy)" }}>Our Billboard Network Across Ontario</h2>
          <p className="lead">Click any pin to see traffic data, nearby landmarks, and live availability. Pin 1 is our flagship board on Wilson St in Ancaster, on-air right now.</p>
        </div>
        <div className="locations__layout reveal">
          <div className="map-wrap">
            <div id="map" ref={mapRef} />
          </div>
          <div className="locations__sidebar">
            {LOCATIONS.map((loc, i) =>
            <button
              key={loc.id}
              className={`loc-card ${active === loc.id ? "loc-card--active" : ""} ${loc.live ? "loc-card--live-card" : ""}`}
              onClick={() => focus(loc)}>
              <span className="loc-card__num">{i + 1}</span>
              <span className="loc-card__body">
                <span className="loc-card__name">{loc.city}</span>
                <span className="loc-card__addr">{loc.address}</span>
                <span className="loc-card__boards-row">
                  <span className="loc-card__boards">
                    <strong>{loc.boards}</strong> digital board{loc.boards > 1 ? "s" : ""}
                  </span>
                  {SPEC_SHEETS[loc.id] &&
                    <span
                      role="button"
                      tabIndex={0}
                      className="btn btn--red btn--sm loc-card__spec-btn"
                      onClick={(e) => { e.stopPropagation(); setSpecOpen(SPEC_SHEETS[loc.id]); }}
                      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.stopPropagation(); setSpecOpen(SPEC_SHEETS[loc.id]); } }}>
                      See Spec Sheet
                    </span>
                  }
                </span>
              </span>
              <span className={`loc-card__status loc-card__status--${loc.status === "available" ? "live" : "soon"}`}>
                <span className={`dot ${loc.status === "available" ? "dot--green" : "dot--grey"}`} />
                {loc.statusLabel}
              </span>
            </button>
            )}
          </div>
        </div>
        {active &&
          <LocationDetail key={active} loc={LOCATIONS.find((l) => l.id === active)} />
        }
        {specOpen && <SpecSheetModal pdfPath={specOpen.pdf} title={specOpen.title} onClose={() => setSpecOpen(null)} />}
      </div>
    </section>);

}

/* ============================================================
   PACKAGES
============================================================ */
function Packages() {
  return (
    <section className="section pkg" id="packages" data-screen-label="Pricing" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <div className="pkg__head reveal">
          <p className="eyebrow">Pricing</p>
          <h2 className="h-display h2" style={{ color: "var(--navy)" }}>One Simple Way to Get on a Board.</h2>
          <p className="lead">One board, your city, your dates. We help you pick the right corner, write creative that works, and get you on-air fast.</p>
        </div>
        <div className="pkg__grid">
          <div className="pkg__card pkg__card--solo reveal">
            <div className="pkg__solo-features">
              <div className="pkg__feature">
                <span className="pkg__feature-icon">📍</span>
                <span className="pkg__feature-label">Coverage</span>
                <span className="pkg__feature-value">2 Boards, Your City</span>
              </div>
              <div className="pkg__feature">
                <span className="pkg__feature-icon">📅</span>
                <span className="pkg__feature-label">Duration</span>
                <span className="pkg__feature-value">Flexible · 4 wks+</span>
              </div>
              <div className="pkg__feature">
                <span className="pkg__feature-icon">👁</span>
                <span className="pkg__feature-label">Reach</span>
                <span className="pkg__feature-value">750K–1.3M / Mo</span>
              </div>
              <div className="pkg__feature">
                <span className="pkg__feature-icon">🔄</span>
                <span className="pkg__feature-label">Creative</span>
                <span className="pkg__feature-value">Updates Included</span>
              </div>
            </div>
            <div className="pkg__solo-pitch" style={{ padding: "40px 56px" }}>
              <div className="pkg__solo-pitch-text">
                <h4 style={{ fontSize: "45px" }}>Every campaign is different.<br />So is every quote.</h4>
                <p style={{ fontSize: "20px" }}>Your price depends on the board, the dates, and how long you want to run. We'll send you a written quote within one business day. No obligation, no sales pressure.</p>
                <ul className="pkg__solo-bullets" style={{ width: "600px", fontSize: "16px", padding: "5px 0px 0px" }}>
                  <li>Tailored to your dates &amp; city</li>
                  <li>Talk to a real human</li>
                  <li>Local SMB rates</li>
                </ul>
              </div>
              <div className="pkg__solo-pitch-cta">
                <a href="#contact" className="btn btn--red btn--lg">Get Your Custom Quote <Icon.Arrow /></a>
                <small>Reply within 1 business day</small>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>);

}

/* ============================================================
   ROI
============================================================ */
function ROI() {
  const [city, setCity] = useState("ancaster-wilson");
  const [weeks, setWeeks] = useState(12);

  const daily = CITY_TRAFFIC[city].daily;
  const monthly = useMemo(() => daily * 30, [daily]);
  const campaign = useMemo(() => Math.round(daily * 7 * weeks), [daily, weeks]);

  return (
    <section className="section roi" id="how" data-screen-label="ROI Estimator" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <div className="roi__head reveal">
          <p className="eyebrow">How It Works · ROI Estimator</p>
          <h2 className="h-display h2" style={{ color: "var(--navy)", fontSize: "68px", lineHeight: "0.95", fontWeight: "400", whiteSpace: "nowrap" }}>See Your Potential Reach</h2>
          <p className="lead">Pick a board location and a campaign length, and we'll show you the real-world impressions you can expect, based on traffic counts at that exact corner.</p>
        </div>
        <div className="roi__grid reveal">
          <div className="sliders">
            <div className="slider">
              <div className="slider__label">
                <span className="slider__title">City &amp; Board Location</span>
                <span className="slider__val" style={{ fontSize: 18, fontFamily: "var(--sans)", fontWeight: 600 }}>{daily.toLocaleString()}/day</span>
              </div>
              <select
                value={city}
                onChange={(e) => setCity(e.target.value)}
                style={{
                  fontFamily: "var(--sans)",
                  fontSize: 16,
                  fontWeight: 500,
                  padding: "14px 16px",
                  border: "1px solid var(--line)",
                  borderRadius: 4,
                  background: "#fff",
                  color: "var(--navy)",
                  outline: "none",
                  width: "100%",
                  cursor: "pointer"
                }}>
                
                {Object.entries(CITY_TRAFFIC).map(([k, v]) =>
                <option key={k} value={k}>{v.label}</option>
                )}
              </select>
              <div className="slider__ticks"><span>Traffic count varies by corner</span></div>
            </div>
            <div className="slider">
              <div className="slider__label">
                <span className="slider__title">Campaign Duration</span>
                <span className="slider__val">{weeks}<span style={{ fontSize: 16, marginLeft: 6, color: "var(--ink-soft)" }}>weeks</span></span>
              </div>
              <input type="range" min={4} max={24} step={1} value={weeks} onChange={(e) => setWeeks(+e.target.value)} className="slider__input" />
              <div className="slider__ticks slider__ticks--anchored">
                <span style={{ left: "12px" }}>4 wks</span>
                <span style={{ left: "calc(12px + 0.4 * (100% - 24px))" }}>12 wks</span>
                <span style={{ left: "calc(100% - 12px)" }}>24 wks</span>
              </div>
            </div>
            <div style={{
              padding: "18px 20px",
              background: "rgba(30, 58, 95, 0.06)",
              borderRadius: 6,
              fontFamily: "var(--serif)",
              fontStyle: "italic",
              fontSize: 14,
              color: "var(--ink-soft)",
              lineHeight: 1.5
            }}>
              “{CITY_TRAFFIC[city].label}” sees <strong style={{ fontStyle: "normal", color: "var(--navy)" }}>{daily.toLocaleString()} impressions per day</strong> on average. Every one of them a potential customer.
            </div>
          </div>
          <div className="roi__output">
            <p className="roi__output-label">Estimated Monthly Impressions</p>
            <div className="roi__output-num" key={monthly}>{monthly.toLocaleString()}</div>
            <div className="roi__output-unit">eyes on your brand / month</div>
            <div style={{
              padding: "14px 16px",
              margin: "4px 0 20px",
              borderRadius: 4,
              background: "rgba(255,255,255,0.07)",
              border: "1px solid rgba(255,255,255,0.12)"
            }}>
              <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)", marginBottom: 4 }}>Over your {weeks}-week run</div>
              <div style={{ fontFamily: "var(--display)", fontSize: 36, letterSpacing: "0.02em", color: "#fff", lineHeight: 1 }}>{campaign.toLocaleString()}</div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginTop: 4 }}>total campaign impressions</div>
            </div>
            <p className="roi__output-note">Based on traffic count data for the selected corner.</p>
            <a href="#contact" className="btn btn--red btn--lg" style={{ width: "100%" }}>Ready to Get Started? Book a Board <Icon.Arrow /></a>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   CASE STUDY
============================================================ */
function CaseStudy() {
  return (
    <section className="section case" data-screen-label="Case Study" style={{ padding: "112px 0px 100px" }}>
      <div className="wrap">
        <div className="case__head reveal">
          <p className="eyebrow eyebrow--light">Case Study</p>
          <h2 className="h-display h2">Real Results for Ontario Businesses</h2>
          <p className="lead">We're just getting started. Here's a look at what's coming.</p>
        </div>
        <div className="case__card reveal">
          <div className="case__photo">
            <div className="case__photo-emoji">☕</div>
            <div className="case__photo-label">Photo placeholder</div>
            <div className="case__photo-biz">Maple &amp; Main Café</div>
            <div className="case__photo-label" style={{ textTransform: "none", letterSpacing: 0, fontStyle: "italic" }}>Hamilton, ON</div>
          </div>
          <div className="case__body">
            <p className="case__quote">
              "We didn't think a billboard was for a place like ours. True North changed that."
            </p>
            <p className="case__attribution">Sarah M., Owner, Maple &amp; Main Café</p>
            <p className="case__desc">
              <strong style={{ color: "#fff" }}>The situation:</strong> A family-run café near Mohawk College struggling to compete with chain coffee shops.<br />
              <strong style={{ color: "#fff" }}>What we did:</strong> Booked 2 Hamilton boards for 6 weeks, running a morning commuter special creative.
            </p>
            <div className="case__stats">
              <div>
                <div className="case__stat-num">~180K</div>
                <div className="case__stat-label">📈 Est. impressions</div>
              </div>
              <div>
                <div className="case__stat-num">30%</div>
                <div className="case__stat-label">☕ Weekday morning uptick</div>
              </div>
              <div>
                <div className="case__stat-num">6 wks</div>
                <div className="case__stat-label">📅 Campaign window</div>
              </div>
            </div>
            <p className="case__disclaimer">Campaign currently in progress. Results are owner-reported estimates.</p>
          </div>
        </div>
        <p className="case__after reveal" style={{ margin: "60px 332px 0px" }}>
          Your business could be next. <a href="#contact">Book a Board →</a>
        </p>
      </div>
    </section>);

}

/* ============================================================
   ABOUT
============================================================ */
function About() {
  return (
    <section className="section about" id="about" data-screen-label="About" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <div className="about__grid">
          <div className="about__text reveal">
            <span className="about__badge">🍁 #TrueNorthLocal</span>
            <h2 className="h-display h2">We're Not an Agency. We're Your Neighbours.</h2>
            <p>
              True North Billboards is a family-owned business built right here in Ontario. We started because we believed local businesses deserved the same advertising tools as big brands, without the big agency price tags.
            </p>
            <p>
              Every board we operate, we operate with care. When you advertise with us, you're supporting an Ontario family that's invested in seeing your community thrive.
            </p>
          </div>
          <div className="about__promise reveal" style={{ "--reveal-delay": "120ms", position: "relative" }}>
            <span className="about__promise-mark" style={{ position: "absolute", top: "20px", right: "24px", fontSize: "2.2rem", lineHeight: 1 }}>🍁</span>
            <h3 className="about__promise-title">The True North Promise</h3>
            <ul className="about__promise-list">
              <li>
                <span style={{ fontSize: "1.15em" }}>Local &amp; accountable</span>
                <p>You deal directly with the family that owns the boards. No call centres, no middlemen.</p>
              </li>
              <li>
                <span style={{ fontSize: "1.15em" }}>Fair, flexible terms</span>
                <p>Run by the week, not the year. No long-term lock-ins and no agency markup.</p>
              </li>
              <li>
                <span style={{ fontSize: "1.15em" }}>Invested in your community</span>
                <p>When your business grows, our Ontario neighbourhoods grow right along with it.</p>
              </li>
            </ul>
            <p className="about__promise-sign" style={{ fontSize: "1.15em", fontWeight: 600 }}>Built and run by an Ontario family.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   CONTACT
============================================================ */
function Contact() {
  const [form, setForm] = useState({
    business: "", name: "", email: "", phone: "", city: "", message: "", isOwner: false, propAddress: "", propPostal: ""
  });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.business.trim()) errs.business = true;
    if (!form.name.trim()) errs.name = true;
    if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = true;
    if (!form.message.trim()) errs.message = true;
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      try {
        const res = await fetch("https://formspree.io/f/mbdeeadp", {
          method: "POST",
          headers: { "Content-Type": "application/json", "Accept": "application/json" },
          body: JSON.stringify({
            "Business Name": form.business,
            "Name": form.name,
            "Email": form.email,
            "Phone": form.phone,
            "City of Interest": form.city,
            "Message": form.message,
            "Property Owner": form.isOwner ? "Yes" : "No",
            "Property Address": form.propAddress,
            "Postal Code": form.propPostal,
          })
        });
        if (res.ok) setSent(true);
        else setErrors({ submit: true });
      } catch {
        setErrors({ submit: true });
      }
    }
  };

  return (
    <section className="section contact" id="contact" data-screen-label="Contact" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <div className="contact__grid">
          <div className="contact__info reveal">
            <p className="eyebrow">Get a Quote</p>
            <h2 className="h-display h2">Let's Get Your Brand on a Board.</h2>
            <p className="lead">Tell us a bit about your business and we'll get back within one business day with a quote and a recommended fit.</p>
            <div className="contact__details">
              <div className="contact__detail">
                <div className="contact__icon">📧</div>
                <div>
                  <div className="contact__detail-label">Email</div>
                  <a href="mailto:albert@truenorthbillboards.ca" className="contact__detail-val">albert@truenorthbillboards.ca</a>
                </div>
              </div>
              <div className="contact__detail">
                <div className="contact__icon">📍</div>
                <div>
                  <div className="contact__detail-label">Office</div>
                  <div className="contact__detail-val">1 St. Clair Ave. W, Toronto, ON</div>
                </div>
              </div>
            </div>
            <span className="contact__tag">🍁 Proudly Ontario-Owned &amp; Operated</span>
          </div>

          <form className="form reveal" onSubmit={submit} noValidate>
            {sent ?
            <div className="form__success">
                <span>✅</span>
                <div>
                  <strong>Thanks, {form.name.split(" ")[0]}.</strong><br />
                  We've got your inquiry for <strong>{form.business}</strong>. We'll be in touch within one business day.
                </div>
              </div> :

            <React.Fragment>
                <div className="form__row">
                  <div className="field">
                    <label htmlFor="f-biz">Business Name</label>
                    <input id="f-biz" value={form.business} onChange={set("business")} aria-invalid={!!errors.business} placeholder="e.g. JBloom Investments" />
                  </div>
                  <div className="field">
                    <label htmlFor="f-name">Your Name</label>
                    <input id="f-name" value={form.name} onChange={set("name")} aria-invalid={!!errors.name} placeholder="Albert Bloom" />
                  </div>
                </div>
                <div className="form__row">
                  <div className="field">
                    <label htmlFor="f-email">Email</label>
                    <input id="f-email" type="email" value={form.email} onChange={set("email")} aria-invalid={!!errors.email} placeholder="albert@truenorthbillboards.ca" />
                  </div>
                  <div className="field">
                    <label htmlFor="f-phone">Phone <span style={{ color: "var(--ink-soft)", fontWeight: 400 }}>(optional)</span></label>
                    <input id="f-phone" type="tel" value={form.phone} onChange={set("phone")} placeholder="(416) 967-1010" />
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="f-city">City of Interest</label>
                  <select id="f-city" value={form.city} onChange={set("city")}>
                    <option value="">Choose a city…</option>
                    <option>Vaughan</option>
                    <option>Ancaster</option>
                    <option>Hamilton</option>
                    <option>London</option>
                    <option>Not Sure</option>
                  </select>
                </div>
                <div className="field">
                  <label htmlFor="f-msg">Tell us about your business</label>
                  <textarea id="f-msg" value={form.message} onChange={set("message")} aria-invalid={!!errors.message} placeholder="What you sell, who your customers are, what you're hoping a billboard helps with…" />
                </div>
                <label className="field--check">
                  <input type="checkbox" id="f-owner" checked={form.isOwner} onChange={set("isOwner")} style={{ margin: "3px 3px 3px 4px" }} />
                  <span>I own a property and I’m interested in hosting a billboard</span>
                </label>
                {form.isOwner &&
              <div className="form__row form__row--owner">
                    <div className="field">
                      <label htmlFor="f-prop-addr">Property Address</label>
                      <input id="f-prop-addr" value={form.propAddress} onChange={set("propAddress")} placeholder="123 Main St, Hamilton, ON" />
                    </div>
                    <div className="field field--postal">
                      <label htmlFor="f-prop-postal">Postal Code</label>
                      <input id="f-prop-postal" value={form.propPostal} onChange={set("propPostal")} placeholder="L8P 1A1" />
                    </div>
                  </div>
              }
                {errors.submit && <p style={{ color: "var(--red)", fontFamily: "var(--sans)", fontSize: ".9rem", margin: "0 0 8px" }}>Something went wrong. Please email us directly at albert@truenorthbillboards.ca</p>}
                <button type="submit" className="btn btn--red btn--lg">Send My Inquiry <Icon.Arrow /></button>
              </React.Fragment>
            }
          </form>
        </div>
      </div>
    </section>);

}

/* ============================================================
   FOOTER
============================================================ */
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer" style={{ padding: "30px 0px 40px" }}>
      <div className="wrap">
        <div className="footer__top" style={{ fontSize: "17px", padding: "0px 0px 40px", gap: "50px", height: "105px" }}>
          <a href="#top" className="footer__brand">
            <img src="assets/logo.png" alt="" className="footer__logo" />
            <div className="footer__brand-text">
              <span className="footer__brand-name" style={{ fontSize: "28px" }}>True North Billboards</span>
              <span className="footer__brand-sub" style={{ fontSize: "20px" }}>Family-owned. Built in Ontario.</span>
            </div>
          </a>
          <nav className="footer__links" aria-label="Footer">
            {NAV_LINKS.map((l) =>
            <a key={l.href} href={l.href}>{l.label}</a>
            )}
          </nav>
        </div>
        <div className="footer__bottom">
          <div>© 2026 True North Billboards. All rights reserved.</div>
          <div>🍁 Proudly Ontario-Owned &amp; Operated.</div>
        </div>
      </div>
    </footer>);

}

/* ============================================================
   PROPERTY OWNERS
============================================================ */
function PropertyOwners() {
  return (
    <section className="po" id="list-property" data-screen-label="Real Estate">
      <div className="po__top">
        <div className="wrap" style={{ padding: "0px 48px 40px" }}>
          <div className="po__head">
            <p className="eyebrow eyebrow--center eyebrow--light">For Property Owners</p>
            <h2 className="h-display h2" style={{ color: "#fff" }}>Own the Corner.<br />Earn the Cheque.</h2>
            <p className="po__sub" style={{ fontSize: "21px", width: "750px", textAlign: "center", margin: "0 auto" }}>True North leases high-traffic roadside properties across Ontario.
We handle everything: permits, installation, power, maintenance.
You collect a steady annual cheque and keep one free ad spot on your board.</p>
          </div>
          <div className="po__stat-grid reveal">
            <div className="po__stat po__stat--green">
              <div className="po__stat-val">$0</div>
              <div className="po__stat-lbl">Cost or Liability</div>
            </div>
            <div className="po__stat po__stat--green">
              <div className="po__stat-val">15–20<span>yr</span></div>
              <div className="po__stat-lbl">Lease Term</div>
            </div>
            <div className="po__stat po__stat--green">
              <div className="po__stat-val">12+</div>
              <div className="po__stat-lbl">Cities Targeted</div>
            </div>
            <div className="po__stat po__stat--green">
              <div className="po__stat-val">1</div>
              <div className="po__stat-lbl">Free Ad Spot Included</div>
            </div>
          </div>
          <div className="po__stat-cta">
            <a href="#contact" className="btn btn--red">List Your Property →</a>
          </div>
        </div>
      </div>
      <div className="po__perks" style={{ padding: "30px 0px" }}>
        <div className="wrap">
          <div className="po__perks-grid">
            {[{ icon: "💵", title: "Steady Passive Income", body: "Annual lease payments deposited directly. No vacancy risk, no tenant headaches." }, { icon: "🔧", title: "Zero Maintenance", body: "We own and service the structure. Repairs, power, upgrades, all on us, always." },
            { icon: "📺", title: "One Free Ad Spot", body: "Promote your own business or property on your board, included in every lease." },
            { icon: "📜", title: "Simple Long-Term Lease", body: "Transparent 15–20 year contracts. You know exactly what you’re signing." }].
            map((p, i) =>
            <div key={p.title} className="po__perk reveal" style={{ "--reveal-delay": `${i * 60}ms` }}>
                <div className="po__perk-icon">{p.icon}</div>
                <div className="po__perk-title">{p.title}</div>
                <div className="po__perk-body">{p.body}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   APP
============================================================ */
function App() {
  useReveal();
  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Locations />
      <Why />
      <Packages />
      <PropertyOwners />
      <ROI />
      <About />
      <Contact />
      <Footer />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);