<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= selectedService.title %> | AquaNova Solutions</title>

  <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" />
</head>

<body>
  <!-- Topbar -->
  <div class="topbar">
    <div class="container topbar__inner">
      <div class="topbar__left">
        <a class="topbar__link" href="mailto:info@aquanovasolutions.com">
          <span class="dot"></span> info@aquanovasolutions.com
        </a>
      </div>

      <div class="topbar__right">
        <span class="topbar__meta">Serving</span>
        <span class="sep"></span>
        <span class="topbar__meta">8:00 AM – 8:00 PM</span>
        <span class="sep"></span>
      </div>
    </div>
  </div>

  <!-- Header / Nav -->
  <header class="header">
    <div class="container header__inner">
      <a href="/" class="brand">
        <div class="brand__mark">Aqua<span>Nova</span></div>
        <div class="brand__sub">SOLUTIONS</div>
      </a>

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

        <!-- Services dropdown -->
        <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 (serviceKeywords && serviceKeywords.length > 0) { %>
                <% serviceKeywords.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>

        <!-- Areas We Serve dropdown -->
        <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">
            <% if (states && states.length > 0) { %>
              <% states.forEach(st => { %>
                <a href="/states/<%= st.slug %>"><%= st.name %> (<%= st.code %>)</a>
              <% }) %>
            <% } else { %>
              <div class="nav__empty">No states found</div>
            <% } %>
          </div>
        </div>

        <a class="nav__link" href="/about">About Us</a>
      </nav>
    </div>
  </header>

  <main>
    <!-- Hero -->
    <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__content">
          <div class="badge">Service Details</div>

          <h1 class="hero__title"><%= servicePage.hero_title %></h1>
          <p class="hero__usLine">In the United States (US)</p>
          <p class="hero__subtitle"><%= servicePage.hero_subtitle %></p>

          <div class="hero__actions">
            <a class="btn btn--primary" href="/contact">Get Emergency Help Now</a>
            <a class="btn btn--ghost" href="tel:(866)498-1374">Call (866) 498-1374</a>
          </div>

          <div class="note">Currently viewing: <strong><%= selectedService.title %></strong></div>
        </div>
      </div>
    </section>

    <!-- AI Body -->
    <section class="aboutSection">
      <div class="container aboutWrap">

        <div class="aboutIntro">
          <h2 class="aboutIntro__title"><%= servicePage.intro_title %></h2>
          <p class="aboutIntro__text"><%= servicePage.intro_text %></p>
        </div>

        <div class="aboutGrid">
          <div class="aboutCard">
            <h3 class="aboutCard__title"><%= servicePage.steps_title %></h3>
            <ul class="aboutValues__list">
              <% servicePage.steps.forEach(s => { %>
                <li><%= s %></li>
              <% }) %>
            </ul>
          </div>

          <div class="aboutCard">
            <h3 class="aboutCard__title"><%= servicePage.why_title %></h3>
            <ul class="aboutValues__list">
              <% servicePage.why_points.forEach(p => { %>
                <li><%= p %></li>
              <% }) %>
            </ul>
          </div>

          <div class="aboutCard">
            <h3 class="aboutCard__title"><%= servicePage.faq_title %></h3>
            <% servicePage.faqs.forEach(f => { %>
              <p class="aboutCard__text"><strong><%= f.q %></strong><br/><%= f.a %></p>
            <% }) %>
          </div>
        </div>

        <div class="aboutCTA">
          <div class="aboutCTA__box">
            <h3 class="aboutCTA__title"><%= servicePage.cta_title %></h3>
            <p class="aboutCTA__text"><%= servicePage.cta_text %></p>
            <a class="aboutCTA__btn" href="/contact"><%= servicePage.cta_button_text %></a>
          </div>
        </div>

      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container footer__inner">
      <div class="footer__muted">
        © <%= new Date().getFullYear() %> AquaNova Solutions. All rights reserved.
      </div>
    </div>
  </footer>

  <script>
    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";
      });
    }
  </script>
</body>
</html>