<!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>
    /* Areas We Serve (state/city pages) hero background */
    .hero__bg{
      background: none !important;
      filter: none;
      transform: none;
    }

    .hero__bg::before,
    .hero__bg::after{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: url("<%= (typeof img !== 'undefined' && img && img.areasWeServe) ? img.areasWeServe : '/images/Areas%20We%20Server/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;
    }

    /* Match Home / About / Contact hero layout (form sizing from /css/site.css) */
    .hero .hero__inner {
      display: block;
    }

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

      .heroLeadForm {
        margin-left: 0;
        margin-right: 0;
      }
    }

    .serveSection {
      padding: 72px 0 78px;
      background:
        linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
      border-top: 1px solid rgba(15, 23, 42, 0.06);
    }

    .serveSection__head {
      text-align: center;
      margin-bottom: 34px;
    }

    .serveSection__title {
      margin: 0;
      font-size: clamp(30px, 4vw, 52px);
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: #132a57;
      font-weight: 800;
      text-transform: uppercase;
    }

    .serveSection__titleAccent {
      color: #f4ab00;
    }

    .serveSection__underline {
      width: 66px;
      height: 3px;
      border-radius: 999px;
      margin: 18px auto 0;
      background: linear-gradient(90deg, #0b5cff, #2f6dff);
    }

    .serveGrid {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px 34px;
      align-items: start;
    }

    .serveGrid__item {
      min-width: 0;
    }

    .serveGrid__link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: #5b6472;
      font-size: 15px;
      line-height: 1.9;
      font-weight: 600;
      transition: color .22s ease, transform .22s ease;
    }

    .serveGrid__link::before {
      content: "◽";
      font-size: 11px;
      line-height: 1;
      color: #4a5565;
      flex: 0 0 auto;
      transform: translateY(-1px);
    }

    .serveGrid__link:hover {
      color: #0b5cff;
      transform: translateX(2px);
    }

    .map-frame-card {
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(2,18,43,.12);
      border: 1px solid rgba(15,23,42,.08);
      background: #fff;
    }

    @media (max-width: 1200px) {
      .serveGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }

    @media (max-width: 980px) {
      .serveGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

    }

    @media (max-width: 640px) {
      .serveSection {
        padding: 56px 0 62px;
      }

      .serveGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 18px;
      }

      .serveGrid__link {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  <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">
            <% const menuServices = (navServices && navServices.length > 0) ? navServices : serviceKeywords; %>
            <% 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 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">
          <% /* removed hero badge pill */ %>
          <%
            var _stateName = String((selectedState && selectedState.name) || "").trim();
            var _stateCode = String((selectedState && selectedState.code) || "").trim().toUpperCase();
            if (!_stateCode) _stateCode = _stateName ? String(_stateName).slice(0, 2).toUpperCase() : "";
            function _escRegExp(s) {
              return String(s || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
            }

            var _heroTitleMain = String(content.hero_title || "")
              .toLowerCase()
              .replace(/\b([a-z])/g, function (_, c) { return c.toUpperCase(); });

            // Always remove any trailing "in <state> (XX)".
            // This prevents stale AI content from showing the wrong state.
            var _heroTitlePrimary = _heroTitleMain
              .replace(
                /\s+in\s+[a-zA-Z]+(?:\s+[a-zA-Z]+)*(?:,?\s*\([a-zA-Z]{2}\))?\s*$/i,
                ""
              )
              .trim();
            if (!_heroTitlePrimary) _heroTitlePrimary = _heroTitleMain;

            // Ensure the hero title is consistent:
            // - AI title first
            // - city + state + state code always appended at the end
            // - prevent duplicates by removing any existing tokens from the AI title
            var _cityName = String((selectedCity && selectedCity.name) || "").trim();
            var _heroTitleFinal = String(_heroTitlePrimary || "").trim();

            if (_cityName) {
              _heroTitleFinal = _heroTitleFinal.replace(
                new RegExp(_escRegExp(_cityName), "ig"),
                ""
              );
            }
            if (_stateName) {
              _heroTitleFinal = _heroTitleFinal.replace(
                new RegExp(_escRegExp(_stateName), "ig"),
                ""
              );
            }
            if (_stateCode) {
              _heroTitleFinal = _heroTitleFinal.replace(
                new RegExp(_escRegExp(_stateCode), "ig"),
                ""
              );
            }

            _heroTitleFinal = _heroTitleFinal
              .replace(/\s{2,}/g, " ")
              .replace(/\s+,/g, ",")
              .replace(/,+/g, ",")
              .replace(/[-–—:;]\s*$/g, "")
              .trim();

            if (_cityName && _stateName && _stateCode) {
              _heroTitleFinal =
                (_heroTitleFinal ? `${_heroTitleFinal} ` : "") +
                `${_cityName}, ${_stateName}, ${_stateCode}`;
            }
          %>
          <h1 class="hero__title heroTitleMain">
            <span class="heroTitleMain__primary"><%= _heroTitleFinal %></span>
            <% /* no hero location line on Areas We Serve pages */ %>
          </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(/\s+/g, '') %>"
            >
              CALL NOW : <%= site.phone %>
            </a>
          </div>

          <% if (content.note_text) { %>
            <div class="note"><%= content.note_text %></div>
          <% } %>
            </div>
          </div>
          <%- include('partials/heroContactForm') %>
        </div>
      </div>
    </section>

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

<section class="locationIntro">
  <div class="container">
    <div class="locationIntro__inner">
      <h2 class="locationIntro__title"><%= content.intro_title || "" %></h2>
      <div class="locationIntro__underline"></div>

      <% if (content.intro_subtitle) { %>
        <p class="locationIntro__sub"><%= content.intro_subtitle %></p>
      <% } %>

      <div class="locationIntro__text">
        <% if (content.long_intro) { %>
          <% content.long_intro.split(/\n+/).filter(Boolean).forEach((para) => { %>
            <p><%= para %></p>
          <% }) %>
        <% } else { %>
          <p>Loading location details...</p>
        <% } %>
      </div>
    </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_subtitle || "" %></p>
    </div>

    <div class="svcCards">
      <% serviceKeywords.forEach((s) => { %>
        <div class="svcCard2">
          <% var _stateCodeCard = String((selectedState && selectedState.code) || "").toUpperCase(); if (!_stateCodeCard) _stateCodeCard = String((selectedState && selectedState.name) || "").slice(0,2).toUpperCase(); %>
          <h3 class="svcCard2__title"><%= s.title %>, <%= selectedCity.name %>, <%= _stateCodeCard %></h3>
          <p class="svcCard2__text"><%= s.description || "" %></p>

          <% if (s.highlights && s.highlights.length) { %>
            <ul class="svcCard2__bullets">
              <% s.highlights.forEach((h) => { %>
                <li><%= h %></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>
      <% }) %>
    </div>
  </div>
</section>

<section class="citiesSection">
  <div class="container">
    <div class="citiesSection__head">
      <%
        var _cityName = String((selectedCity && selectedCity.name) || "").trim();
        var _stateCode = String((selectedState && selectedState.code) || "").trim().toUpperCase();
        if (!_stateCode) {
          _stateCode = String((selectedState && selectedState.name) || "").trim().slice(0, 2).toUpperCase();
        }
      %>
      <h2 class="citiesSection__title">
        POSTAL CODES WE SERVE IN <%= _cityName.toUpperCase() %>, <span class="citiesSection__titleAccent"><%= _stateCode %></span>
      </h2>
      <div class="citiesSection__underline"></div>
    </div>

    <ul class="citiesGrid citiesGrid--zips">
      <% (Array.isArray(zipcodes) ? zipcodes : []).forEach((zip) => { %>
        <li class="citiesGrid__item">
          <span class="citiesGrid__zip"><%= zip %></span>
        </li>
      <% }) %>
    </ul>
  </div>
</section>

<section class="citiesSection">
  <div class="container">
    <div class="citiesSection__head">
      <h2 class="citiesSection__title"><%= content.map_title || ('Map of ' + selectedCity.name + ', ' + selectedState.name + ', US') %></h2>
      <div class="citiesSection__underline"></div>
    </div>

    <div class="map-frame-card">
      <iframe
        title="Map of <%= selectedCity.name %>, <%= selectedState.name %>, US"
        src="https://www.google.com/maps?q=<%= mapQuery %>&output=embed"
        width="100%"
        height="420"
        style="border:0; display:block;"
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>
  </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 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";
      });
    }
  </script>

  <%- include('partials/scrollNav') %>
  <%- include('partials/fabCall') %>
</body>
</html>