<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <%- include('partials/headSeo') %>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/site.css" />

  <style>
    /* Homepage hero background image */
    .hero__bg {
      background: none !important;
      filter: none;
      transform: none;
    }

    /* Remove black side bars: blurred cover backdrop + sharp contain foreground */
    .hero__bg::before,
    .hero__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: url("<%= (typeof img !== 'undefined' && img && img.homeHero) ? img.homeHero : '/images/Home/image.jpeg' %>");
      background-repeat: no-repeat;
      background-position: center;
    }

    .hero__bg::before {
      background-size: cover;
      filter: blur(18px) brightness(0.95) saturate(1.05);
      transform: scale(1.12);
    }

    .hero__bg::after {
      background-size: contain;
      filter: brightness(1.18) contrast(1.05) saturate(1.05);
    }

    .serviceLongDesc {
      padding: 34px 0 14px;
      background: #f3f3f3;
    }

    .serviceLongDesc__wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 34px 38px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.96));
      border: 1px solid rgba(19, 42, 87, 0.08);
      box-shadow: 0 18px 48px rgba(13, 35, 84, 0.08);
    }

    .serviceLongDesc__head {
      margin-bottom: 18px;
    }

    .serviceLongDesc__title {
      margin: 0;
      font-size: clamp(28px, 3vw, 42px);
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: #132a57;
      font-weight: 800;
    }

    .serviceLongDesc__accent {
      color: #f4ab00;
    }

    .serviceLongDesc__underline {
      width: 72px;
      height: 3px;
      border-radius: 999px;
      margin-top: 16px;
      background: linear-gradient(90deg, #0b5cff, #2f6dff);
    }

    .serviceLongDesc__text {
      margin: 0;
      font-size: 16px;
      line-height: 1.95;
      color: #40516f;
      text-align: left;
    }

    .serviceLongDesc__text:not(:last-child) {
      margin-bottom: 14px;
    }

    /* NOTE: Serve section styles live in /public/css/site.css */


    .service-item__title {
      display: block;
      font-weight: 700;
      color: #0f172a;
    }
    .service-item__desc {
      display: block;
      font-size: 12px;
      line-height: 1.4;
      color: #64748b;
      margin-top: 4px;
      font-weight: 500;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }


    /* Hero: lead form (right column) */
    .hero .hero__inner {
      display: block;
    }

    .hero__layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
      width: 100%;
    }

    .heroLeadForm {
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 18px;
      padding: 22px 20px 20px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
      color: #0f172a;
    }

    .heroLeadForm__title {
      margin: 0 0 6px;
      font-size: 18px;
      font-weight: 900;
      color: #132a57;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .heroLeadForm__sub {
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.45;
      color: #64748b;
      font-weight: 500;
    }

    .heroLeadForm__field {
      margin-bottom: 12px;
    }

    .heroLeadForm__field label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 5px;
    }

    .heroLeadForm__field .req {
      color: #dc2626;
      font-weight: 800;
    }

    .heroLeadForm__field .opt {
      color: #94a3b8;
      font-weight: 600;
      font-size: 11px;
    }

    .heroLeadForm input,
    .heroLeadForm textarea {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
      font-family: inherit;
      background: #fff;
      color: #0f172a;
    }

    .heroLeadForm textarea {
      min-height: 88px;
      resize: vertical;
      line-height: 1.45;
    }

    .heroLeadForm input:focus,
    .heroLeadForm textarea:focus {
      outline: none;
      border-color: #0b5cff;
      box-shadow: 0 0 0 3px rgba(11, 92, 255, 0.15);
    }

    .heroLeadForm__submit {
      width: 100%;
      margin-top: 6px;
      border: none;
      cursor: pointer;
      font-size: 14px;
    }

    .heroLeadForm__msg {
      margin: 12px 0 0;
      font-size: 13px;
      line-height: 1.4;
      min-height: 1.4em;
    }

    .heroLeadForm__msg--ok {
      color: #15803d;
      font-weight: 800;
    }

    .heroLeadForm__msg--err {
      color: #b91c1c;
      font-weight: 600;
    }

    @media (min-width: 1180px) {
      .hero__layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        gap: 28px 40px;
      }
    }

    @media (max-width: 640px) {
      .serviceLongDesc {
        padding: 24px 0 8px;
      }

      .serviceLongDesc__wrap {
        padding: 22px 18px;
        border-radius: 18px;
      }

      .serviceLongDesc__text {
        font-size: 15px;
        line-height: 1.9;
      }

      /* NOTE: Serve section responsive styles live in /public/css/site.css */
    }

    /* Must load after site.css: keep hero as a vertical stack (no grid/center clipping on tablets). */
    @media (max-width: 991px) {
      .hero .hero__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
      }
      .hero__layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.35rem !important;
        width: 100% !important;
      }
    }
  </style>
</head>
<body>
  <% const menuServices = (navServices && navServices.length > 0) ? navServices : serviceKeywords; %>

  <div class="topbar">
    <div class="container topbar__inner">
      <div class="topbar__left">
        <a class="topbar__link" href="mailto:info@<%= (site.businessName || '').toLowerCase().replace(/[^a-z0-9]+/g,'') %>.com">
          <span class="dot"></span> info@<%= (site.businessName || '').toLowerCase().replace(/[^a-z0-9]+/g,'') %>.com
        </a>
      </div>

      <div class="topbar__center">
        <p class="topbar__tagline">
          <%- include('partials/topbarTaglineState') %>
          <span class="topbar__tagline-sep" aria-hidden="true">|</span>
          <span class="topbar__tagline-accent">24/7</span>
        </p>
      </div>

      <div class="topbar__right">
        <div class="social">
          <a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Facebook" class="social__icon">
            <svg viewBox="0 0 24 24" aria-hidden="true" class="social__svg">
              <path d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.2-1.5 1.6-1.5h1.7V5.1c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3V11H8v3h2.2v8h3.3z"/>
            </svg>
          </a>

          <a href="https://youtube.com" target="_blank" rel="noopener" aria-label="YouTube" class="social__icon social__icon--yt">
            <svg viewBox="0 0 24 24" aria-hidden="true" class="social__svg">
              <path d="M23.5 6.2a3.1 3.1 0 0 0-2.2-2.2C19.4 3.5 12 3.5 12 3.5s-7.4 0-9.3.5A3.1 3.1 0 0 0 .5 6.2 32.7 32.7 0 0 0 0 12s0 3.7.5 5.8a3.1 3.1 0 0 0 2.2 2.2c1.9.5 9.3.5 9.3.5s7.4 0 9.3-.5a3.1 3.1 0 0 0 2.2-2.2c.5-2.1.5-5.8.5-5.8s0-3.7-.5-5.8z"/>
              <path d="M9.6 15.4V8.6L15.8 12l-6.2 3.4z" fill="currentColor" opacity="0.9"/>
            </svg>
          </a>

          <a href="https://linkedin.com" target="_blank" rel="noopener" aria-label="LinkedIn" class="social__icon">
            <svg viewBox="0 0 24 24" aria-hidden="true" class="social__svg">
              <path d="M4.98 3.5C3.88 3.5 3 4.4 3 5.5S3.88 7.5 4.98 7.5 7 6.6 7 5.5 6.08 3.5 4.98 3.5zM3.5 21h3V9h-3v12zM8.5 9h2.9v1.6h.04c.4-.76 1.4-1.56 2.88-1.56 3.08 0 3.64 2.02 3.64 4.64V21h-3v-5.4c0-1.3-.02-3-1.83-3-1.83 0-2.11 1.43-2.11 2.9V21h-3V9z"/>
            </svg>
          </a>

          <a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram" class="social__icon">
            <svg viewBox="0 0 24 24" aria-hidden="true" class="social__svg">
              <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3z"/>
              <path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>
              <path d="M17.5 6.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>

  <header class="header">
    <div class="container header__inner">
      <div class="header__brand">
        <a href="/" class="brand brand--logoOnly">
          <img class="brand__logo" src="<%= (typeof img !== 'undefined' && img && img.logo) ? img.logo : '/images/Logo.jpeg' %>" alt="<%= site.businessName %>" width="240" height="61" loading="eager" decoding="async" />
        </a>
      </div>

      <nav class="nav header__nav">
        <a class="nav__link" href="/">Home</a>

        <div class="nav__dropdown">
          <button class="nav__link nav__link--btn" type="button">
            Services <span class="chev">▾</span>
          </button>

          <div class="nav__menu nav__menu--scroll">
            <div class="service-search-wrapper">
              <input
                type="text"
                id="serviceSearch"
                placeholder="Search services..."
                class="service-search"
                onkeyup="filterServices()"
              />
            </div>

            <div id="serviceList">
              <% if (menuServices && menuServices.length > 0) { %>
                <% menuServices.forEach((k) => { %>
                  <a href="/services/<%= k.slug %>" class="service-item">
                    <%= k.title %>
                  </a>
                <% }) %>
              <% } else { %>
                <div class="nav__empty">No services found</div>
              <% } %>
            </div>
          </div>
        </div>

        <div class="nav__dropdown">
          <button class="nav__link nav__link--btn" type="button">
            Areas We Serve <span class="chev">▾</span>
          </button>

          <div class="nav__menu nav__menu--scroll nav__menu--wide">
            <div class="service-search-wrapper">
              <input
                type="text"
                id="areaSearch"
                placeholder="Filter areas..."
                class="service-search"
                onkeyup="filterAreas()"
              />
            </div>

            <div id="areaList">
            <% if (states && states.length > 0) { %>
              <% states.forEach((st) => { %>
                <a href="/states/<%= st.slug %>"><%= st.name %> (<%= st.code %>)</a>
              <% }) %>
            <% } else { %>
              <div class="nav__empty">No areas found</div>
            <% } %>
            </div>
          </div>
        </div>

        <a class="nav__link" href="/about">About Us</a>
        <a class="nav__link" href="/contact">Contact Us</a>
      </nav>

      <%- include('partials/headerQueries') %>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="hero__bg" aria-hidden="true"></div>
      <div class="hero__overlay" aria-hidden="true"></div>

      <div class="container hero__inner">
        <div class="hero__layout">
          <div class="hero__col hero__col--copy">
            <div class="hero__content hero__content--home">
              <% /* removed hero badge pill */ %>
              <%
                function _toTitleCase(str) {
                  return String(str || "")
                    .toLowerCase()
                    .split(/\s+/)
                    .filter(Boolean)
                    .map(function (w) { return w.charAt(0).toUpperCase() + w.slice(1); })
                    .join(" ");
                }
                var _svcName = _toTitleCase(String(site.primaryService || "Service").trim());
                // Prefer explicit stateName, then the nav-selected state, then parse from coverage.
                var _navStateName =
                  (typeof navCitiesStateName !== "undefined" && navCitiesStateName)
                    ? String(navCitiesStateName).trim()
                    : "";
                var _stateName = String(site.stateName || "").trim() || _navStateName;
                var _coverage = String(site.coverage || "").trim();
                if (!_stateName && _coverage) {
                  _stateName = _coverage
                    .replace(/^\s*serving\s+/i, "")
                    .trim()
                    .replace(/,?\s*(US|United States)\s*$/i, "")
                    .trim();
                }

                // Never render "US Nationwide" as a state label in the hero.
                if (/^us\s*nationwide$/i.test(String(_stateName || "").trim())) {
                  _stateName = "";
                }

                var _stateSlug = String(_stateName || "")
                  .trim()
                  .toLowerCase()
                  .replace(/&/g, "and")
                  .replace(/[^a-z0-9]+/g, "-")
                  .replace(/(^-|-$)+/g, "");

                var _stateObj = (states || []).find(function (s) {
                  var n = String(s && s.name || "").trim().toLowerCase();
                  var sl = String(s && s.slug || "").trim().toLowerCase();
                  return (
                    (_stateSlug && sl === _stateSlug) ||
                    (_stateName && n === String(_stateName).trim().toLowerCase())
                  );
                });

                var _stateLabel = _stateObj
                  ? String(_stateObj.name || "").trim() +
                    ( _stateObj.code ? " (" + String(_stateObj.code).toUpperCase() + ")" : "" )
                  : _stateName;

                // Display should be "<State> (<abbr>), US" (or "<State>, US").
                if (_stateLabel) _stateLabel = _stateLabel + ", US";
                if (!_stateLabel) _stateLabel = "";
              %>
              <h1 class="hero__title heroTitle2">
                <span class="heroTitle2__main">Best <%= _svcName %></span>
                <span class="heroTitle2__sub">
                  <% if (_stateLabel) { %>
                    in <%= _stateLabel %>
                  <% } %>
                </span>
              </h1>
              <p class="hero__usLine">In the United States (US)</p>
              <%
                function _subtitle2Lines(text) {
                  const raw = String(text || "")
                    .replace(/\u2026/g, "")
                    .replace(/\.{3,}/g, "")
                    .replace(/\s+/g, " ")
                    .trim();
                  if (!raw) return "";

                  const sentences = raw
                    .split(/(?<=[.!?])\s+/)
                    .map(s => s.trim())
                    .filter(Boolean);

                  if (sentences.length >= 2) {
                    return sentences.slice(0, 2).join(" ");
                  }
                  if (sentences.length === 1 && sentences[0].length <= 140) {
                    return sentences[0];
                  }

                  const words = raw.split(" ").filter(Boolean);
                  const take = Math.min(words.length, 20);
                  return words.slice(0, take).join(" ");
                }
              %>
              <p class="hero__subtitle"><%= _subtitle2Lines(content.hero_subtitle || "") %></p>

              <div class="hero__actions">
                <a
                  class="btn btn--primary"
                  href="tel:<%= String(site.phone || '').replace(/[^0-9+]/g,'') %>"
                >
                  CALL NOW : <%= site.phone %>
                </a>
              </div>

              <% if (content.trust_items && content.trust_items.length >= 3) { %>
                <div class="trust">
                  <% content.trust_items.slice(0, 3).forEach((t) => { %>
                    <div class="trust__item">
                      <div class="trust__num"><%= t.title %></div>
                      <div class="trust__label"><%= t.subtitle %></div>
                    </div>
                  <% }) %>
                </div>
              <% } %>

              <% if (content.note_text) { %>
                <div class="note"><%= content.note_text %></div>
              <% } %>
            </div>
          </div>

          <%- include('partials/heroContactForm') %>
        </div>
      </div>
    </section>

    <%- include('partials/metrics') %>

    <% if (content.service_long_description) { %>
      <section class="serviceLongDesc">
        <div class="container">
          <div class="serviceLongDesc__wrap">
            <div class="serviceLongDesc__head">
              <h2 class="serviceLongDesc__title">
                <%= content.welcome_heading || ('Welcome to ' + (site.primaryService || '').toUpperCase() + ' Near Me') %>
              </h2>
              <div class="serviceLongDesc__underline"></div>
            </div>

            <%
              const raw = String(content.service_long_description || "").trim();
              let paragraphs = [];

              if (raw) {
                if (raw.includes("\n")) {
                  paragraphs = raw
                    .split(/\n+/)
                    .map((p) => p.trim())
                    .filter(Boolean);
                }

                // If there's only 1 paragraph worth of data, try splitting into 2-3 by sentences.
                if (paragraphs.length < 2) {
                  const sentences = raw
                    .split(/(?<=[.!?])\s+/)
                    .map((s) => s.trim())
                    .filter(Boolean);

                  if (sentences.length >= 2) {
                    const targetCount = sentences.length >= 7 ? 3 : 2;
                    const per = Math.ceil(sentences.length / targetCount);
                    for (let i = 0; i < sentences.length; i += per) {
                      paragraphs.push(sentences.slice(i, i + per).join(" "));
                    }
                  } else {
                    // Final fallback: chunk by length into ~3 paragraphs.
                    const len = raw.length;
                    const cut1 = Math.floor(len / 3);
                    const cut2 = Math.floor((len * 2) / 3);
                    paragraphs = [
                      raw.slice(0, cut1).trim(),
                      raw.slice(cut1, cut2).trim(),
                      raw.slice(cut2).trim(),
                    ].filter(Boolean);
                  }
                }
              }

              paragraphs = (paragraphs || []).filter(Boolean).slice(0, 3);
            %>
            <% if (paragraphs.length) { %>
              <% paragraphs.forEach((para) => { %>
                <p class="serviceLongDesc__text"><%= para %></p>
              <% }) %>
            <% } else { %>
              <p class="serviceLongDesc__text"><%= content.service_long_description %></p>
            <% } %>
          </div>
        </div>
      </section>
    <% } %>

    <section class="svcSection">
      <div class="container">
        <div class="svcSection__head">
          <h2 class="svcSection__title">SERVICES WE OFFER</h2>
          <div class="svcSection__underline"></div>
          <p class="svcSection__sub"><%= content.services_section_subtitle || "" %></p>
        </div>

        <div class="svcCards">
          <% if (serviceKeywords && serviceKeywords.length > 0) { %>
            <% serviceKeywords.forEach((s) => { %>
              <div class="svcCard2">
                <h3 class="svcCard2__title"><%= s.title %> Near Me</h3>
                <p class="svcCard2__text"><%= s.description || "" %></p>

                <% if (s.highlights && s.highlights.length > 0) { %>
                  <ul class="svcCard2__bullets">
                    <% s.highlights.forEach((b) => { %>
                      <li><%= b %></li>
                    <% }) %>
                  </ul>
                <% } %>

                <% var _svcTel = String(site.phone || '').replace(/[^0-9+]/g, ''); if (!_svcTel) _svcTel = '+1'; %>
                <a class="svcCard2__btn" href="tel:<%= _svcTel %>">
                  CALL NOW : <%= site.phone %>
                </a>
              </div>
            <% }) %>
          <% } else { %>
            <div class="svcEmpty">No services available right now.</div>
          <% } %>
        </div>
      </div>
    </section>

    <% if (states && states.length > 0) { %>
      <section class="serveSection">
        <div class="container">
          <div class="serveSection__head">
            <h2 class="serveSection__title">
              SERVING <%= (site.primaryService || "Services").toUpperCase() %> SERVICES
              <span class="serveSection__titleAccent">NATIONWIDE</span>
            </h2>
            <div class="serveSection__underline"></div>
          </div>

          <% if (states.length > 0) { %>
            <ul class="serveGrid">
              <% states.forEach((st) => { %>
                <li class="serveGrid__item">
                  <a class="serveGrid__link" href="/states/<%= st.slug %>">
                    <span class="serveGrid__box" aria-hidden="true"></span>
                    <span class="serveGrid__text"><%= st.name %></span>
                  </a>
                </li>
              <% }) %>
            </ul>
          <% } %>
        </div>
      </section>
    <% } %>
  </main>

  <footer class="footer">
    <div class="container footer__inner">
      <div class="footer__muted">© <%= new Date().getFullYear() %> <%= site.businessName %>. All rights reserved.</div>
      <%- include('partials/footerDisclaimer') %>
    </div>
  </footer>

  <script>
    function animateMetrics() {
      const counters = document.querySelectorAll(".metricCard__num");
      if (!counters.length) return;

      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;

          const el = entry.target;
          const target = parseInt(el.getAttribute("data-target") || "0", 10);
          const suffix = el.getAttribute("data-suffix") || "";
          const duration = 1800;
          const startTime = performance.now();

          function updateCounter(now) {
            const progress = Math.min((now - startTime) / duration, 1);
            const eased = 1 - Math.pow(1 - progress, 3);
            const value = Math.floor(target * eased);

            el.innerHTML =
              value.toLocaleString() +
              (suffix ? `<span class="metricSuffix">${suffix}</span>` : "");

            if (progress < 1) requestAnimationFrame(updateCounter);
          }

          requestAnimationFrame(updateCounter);
          obs.unobserve(el);
        });
      }, { threshold: 0.35 });

      counters.forEach((counter) => observer.observe(counter));
    }

    function filterServices() {
      const input = document.getElementById("serviceSearch");
      const filter = (input.value || "").toLowerCase();
      const items = document.querySelectorAll(".service-item");

      items.forEach((item) => {
        const text = item.textContent.toLowerCase();
        item.style.display = text.includes(filter) ? "block" : "none";
      });
    }

    function filterAreas() {
      const input = document.getElementById("areaSearch");
      const filter = (input?.value || "").toLowerCase();
      const list = document.getElementById("areaList");
      if (!list) return;
      const links = list.querySelectorAll("a");

      links.forEach((a) => {
        const text = (a.textContent || "").toLowerCase();
        a.style.display = text.includes(filter) ? "block" : "none";
      });
    }

    function prefetchStateContent(anchor) {
      try {
        const href = anchor.getAttribute("href") || "";
        const mCity = href.match(/^\/states\/([^\/?#]+)\/([^\/?#]+)/i);
        const mState = href.match(/^\/states\/([^\/?#]+)$/i);

        const injectedNavStateName =
          "<%= (navCitiesStateSlug && states && Array.isArray(states) && states.find(s => s.slug === navCitiesStateSlug) ? states.find(s => s.slug === navCitiesStateSlug).name : '') %>" ||
          "<%= (site && site.stateName ? String(site.stateName) : '').trim() %>" ||
          "";

        if (mCity) {
          const stateSlug = mCity[1];
          const citySlug = mCity[2];
          const cityName = (anchor.textContent || "").trim();
          if (!cityName) return;

          const pageKey = `city:${stateSlug}:${citySlug}`;
          const url =
            "/api/location-content?scope=city" +
            "&pageKey=" + encodeURIComponent(pageKey) +
            "&stateName=" + encodeURIComponent(injectedNavStateName) +
            "&cityName=" + encodeURIComponent(cityName);

          fetch(url, { credentials: "same-origin" }).catch(() => {});
          return;
        }

        // Fallback: old behavior when dropdown lists states.
        if (mState) {
          const stateSlug = mState[1];
          const stateName = (anchor.textContent || "")
            .replace(/\s*\([A-Z]{2}\)\s*$/, "")
            .trim();
          if (!stateName) return;

          const pageKey = `state:${stateSlug}`;
          const url =
            "/api/location-content?scope=state" +
            "&pageKey=" + encodeURIComponent(pageKey) +
            "&stateName=" + encodeURIComponent(stateName);

          fetch(url, { credentials: "same-origin" }).catch(() => {});
        }
      } catch (_) {}
    }

    function wireAreaPrefetch() {
      const list = document.getElementById("areaList");
      if (!list) return;
      const links = list.querySelectorAll("a[href^=\"/states/\"]");

      links.forEach((a) => {
        const handler = () => prefetchStateContent(a);
        a.addEventListener("mouseenter", handler, { passive: true });
        a.addEventListener("focus", handler, { passive: true });
        a.addEventListener("touchstart", handler, { passive: true });
      });
    }

    document.addEventListener("DOMContentLoaded", animateMetrics);
    document.addEventListener("DOMContentLoaded", wireAreaPrefetch);
  </script>
  <%- include('partials/scrollNav') %>
  <%- include('partials/fabCall') %>
</body>
</html>