<!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>
    /* Use per-service local hero image when available */
    .hero__bg{
      background: none !important;
      filter: none;
      transform: none;
    }

    /* Remove 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("<%= serviceImageUrl %>");
      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;
    }

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

    .serviceIntroRich {
      margin: 28px auto 0;
      max-width: 980px;
      display: grid;
      gap: 18px;
    }

    .serviceIntroRich__body {
      padding: 24px 26px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,255,.96));
      border: 1px solid rgba(11, 92, 255, 0.08);
      box-shadow: 0 18px 48px rgba(13, 35, 84, 0.08);
      text-align: left;
    }

    .serviceIntroRich__body p {
      margin: 0;
      font-size: 16px;
      line-height: 1.9;
      color: #40516f;
    }

    .serviceIntroRich__body p + p {
      margin-top: 14px;
    }

    .serviceIntroRich__points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .serviceIntroRich__point {
      padding: 18px 18px 16px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(19, 42, 87, 0.08);
      box-shadow: 0 12px 32px rgba(19, 42, 87, 0.06);
      color: #28416f;
      font-size: 14px;
      line-height: 1.7;
      font-weight: 600;
      text-align: left;
    }

    .serviceIntroRich__point strong {
      display: block;
      margin-bottom: 6px;
      color: #132a57;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.4;
    }

    .serviceLongDesc {
      padding: 26px 0 8px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .serviceLongDesc__wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 30px 34px;
      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.07);
    }

    .serviceLongDesc__head {
      margin-bottom: 16px;
    }

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

    .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;
      white-space: normal;
    }

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

    @media (max-width: 860px) {
      .serviceIntroRich__points {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      /* NOTE: Serve section responsive styles live in /public/css/site.css */

      .serviceIntroRich__body {
        padding: 18px 18px;
      }

      .serviceIntroRich__body p {
        font-size: 15px;
      }

      .serviceLongDesc {
        padding: 18px 0 4px;
      }

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

      .serviceLongDesc__text {
        font-size: 15px;
        line-height: 1.9;
      }
    }
  </style>
</head>
<body>

  <%
    const introPrimaryText =
      servicePage.intro_text ||
      `${site.businessName} provides professional ${String(selectedService.title || "service").toLowerCase()} with a strong focus on quality execution, responsive communication, and dependable customer support for residential and commercial properties.`;

    const introSecondaryText =
      servicePage.intro_secondary_text ||
      `Our team approaches every ${String(selectedService.title || "service").toLowerCase()} project with careful planning, clear coordination, and practical solutions designed to improve customer confidence, streamline the overall experience, and deliver consistent results from the first call to final completion.`;

    const introPoints =
      (Array.isArray(servicePage.intro_points) && servicePage.intro_points.length
        ? servicePage.intro_points
        : [
            `Structured service planning for ${selectedService.title.toLowerCase()} projects.`,
            `Clear updates and professional coordination throughout the service process.`,
            `Reliable workmanship and customer-first support from start to finish.`,
          ]);

    const longServiceDescription =
      servicePage.service_long_description ||
      `${site.businessName} provides professional ${String(selectedService.title || "service").toLowerCase()} for residential and commercial customers who need dependable support, clear communication, and quality-focused execution. ${String(selectedService.title || "This service")} is important because it helps property owners address issues efficiently, reduce unnecessary delays, and move forward with greater confidence throughout the service process. Many customers need this type of support when they are dealing with time-sensitive concerns, property-related complications, or situations where experience and proper coordination make a meaningful difference. Our team focuses on understanding the scope of the need, identifying the right approach, and delivering practical solutions with professionalism at every stage. Hiring experienced professionals for ${String(selectedService.title || "this service").toLowerCase()} can help avoid inconsistent results, reduce stress, and create a more organized path from the first call through final completion. Rather than trying to manage everything alone, customers benefit from expert guidance, responsive updates, and a structured service experience designed around reliability and customer care. At ${site.businessName}, we believe strong service is not only about the work itself, but also about how clearly the process is communicated and how confidently customers can move through it. Our goal is to provide timely support, realistic expectations, and dependable results that help customers feel informed, supported, and reassured from start to finish.`;
  %>

  <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 _coverageRaw = String((site && site.coverage) || "");
            var _navStateName =
              (typeof navCitiesStateName !== "undefined" && navCitiesStateName)
                ? String(navCitiesStateName).trim()
                : "";
            var _stateName = String((site && site.stateName) || "").trim() || _navStateName;
            if (!_stateName && _coverageRaw) {
              _stateName = _coverageRaw
                .replace(/^\s*serving\s+/i, "")
                .trim();
              _stateName = _stateName
                .replace(/,?\s*(US|United States)\s*$/i, "")
                .trim();
            }
            if (/^us\s*nationwide$/i.test(String(_stateName || "").trim())) _stateName = "";
            if (!_stateName) _stateName = "";
            var _stateCode = String(_stateName || "")
              .trim()
              .slice(0, 2)
              .toUpperCase();

            function _escRegExp(s) {
              return String(s || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
            }

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

            // Remove any trailing "in <state> (XX)" (stale AI content safety).
            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;
          %>
          <h1 class="hero__title heroTitleMain">
            <span class="heroTitleMain__primary"><%= _heroTitlePrimary %></span>
            <span class="heroTitleMain__location">
              <% if (_stateName) { %>
                in <%= _stateName %><% if (_stateCode) { %> (<%= _stateCode %>)<% } %>, US
              <% } %>
            </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(servicePage.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>
            </div>
          </div>
          <%- include('partials/heroContactForm') %>
        </div>
      </div>
    </section>

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

    <section class="serviceLongDesc">
      <div class="container">
        <div class="serviceLongDesc__wrap">
          <div class="serviceLongDesc__head">
            <h2 class="serviceLongDesc__title">About Our <%= selectedService.title %></h2>
            <div class="serviceLongDesc__underline"></div>
          </div>
          <%
            const raw = String(longServiceDescription || "").trim();
            let paragraphs = [];

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

              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 {
                  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"><%= longServiceDescription %></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>
          <div class="serviceIntroRich">
            <div class="serviceIntroRich__body">
              <p><%= introPrimaryText %></p>
              <p><%= introSecondaryText %></p>
            </div>

            <div class="serviceIntroRich__points">
              <% introPoints.forEach((point, idx) => { %>
                <div class="serviceIntroRich__point">
                  <strong>
                    <% if (idx === 0) { %>Professional Planning<% } %>
                    <% if (idx === 1) { %>Clear Coordination<% } %>
                    <% if (idx === 2) { %>Reliable Results<% } %>
                    <% if (idx > 2) { %>Service Advantage<% } %>
                  </strong>
                  <%= point %>
                </div>
              <% }) %>
            </div>
          </div>
        </div>

        <div class="svcCards">
          <div class="svcCard2">
            <h3 class="svcCard2__title"><%= servicePage.steps_title || "" %></h3>
            <ul class="svcCard2__bullets">
              <% (servicePage.steps || []).forEach((step) => { %>
                <li><%= step %></li>
              <% }) %>
            </ul>
          </div>

          <div class="svcCard2">
            <h3 class="svcCard2__title"><%= servicePage.why_title || "" %></h3>
            <ul class="svcCard2__bullets">
              <% (servicePage.why_points || []).forEach((point) => { %>
                <li><%= point %></li>
              <% }) %>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section class="citiesSection">
      <div class="container">
        <div class="citiesSection__head">
          <h2 class="citiesSection__title"><%= servicePage.faq_title || "" %></h2>
          <div class="citiesSection__underline"></div>
        </div>

        <div class="svcCards">
          <% (servicePage.faqs || []).forEach((faq) => { %>
            <div class="svcCard2">
              <h3 class="svcCard2__title"><%= faq.q %></h3>
              <p class="svcCard2__text"><%= faq.a %></p>
            </div>
          <% }) %>
        </div>
      </div>
    </section>

    <% if (states && states.length > 0) { %>
      <section class="serveSection">
        <div class="container">
          <div class="serveSection__head">
            <h2 class="serveSection__title">
              SERVING <%= selectedService.title.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 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>