components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background-color: white;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: 1rem 2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
        }
        .nav-container {
          width: 100%;
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .logo img {
          height: 40px;
        }
@keyframes gradientFlow {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }
.logo-icon {
          color: #457B9D;
        }
        .site-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.6rem 1rem;
          background: #fff;
          border-bottom: 1px solid #eee;
          position: relative;
          z-index: 999;
        }

        .logo a { 
          text-decoration: none; 
          font-weight: 700; 
          color: #0a0a0a;
          display: flex;
          align-items: center;
        }

        .nav-list {
          display: flex;
          gap: 1.2rem;
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .nav-list a { 
          text-decoration: none; 
          padding: 0.4rem 0.6rem; 
          display: block;
          color: #1a202c;
          font-weight: 500;
          transition: color 0.2s;
          position: relative;
        }

        .nav-list a:hover {
          color: #E63946;
        }

        .nav-list a::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 0;
          height: 2px;
          background-color: #E63946;
          transition: width 0.2s;
        }

        .nav-list a:hover::after {
          width: 100%;
        }

        .cta-button {
          background-color: #E63946;
          color: white;
          padding: 0.5rem 1.25rem;
          border-radius: 0.375rem;
          font-weight: 500;
          transition: background-color 0.2s;
        }

        .cta-button:hover {
          background-color: #c1121f;
        }

        /* Hamburger button */
        .nav-toggle {
          display: none;
          background: none;
          border: 0;
          cursor: pointer;
          padding: 0.4rem;
        }
        
        .hamburger {
          display: block;
          width: 22px;
          height: 2px;
          background: #000;
          position: relative;
        }
        
        .hamburger::before,
        .hamburger::after {
          content: "";
          position: absolute;
          left: 0;
          width: 22px;
          height: 2px;
          background: #000;
        }
        
        .hamburger::before { top: -7px; }
        .hamburger::after { top: 7px; }
        /* Responsive rules */
        @media (max-width: 768px) {
          .nav-list {
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
          }

          /* Mobile menu styling */
          .primary-nav {
            position: fixed;
            top: var(--header-h);
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            z-index: 900;
            overflow-y: auto;
            transform: translateX(100%);
            transition: transform 300ms ease;
            will-change: transform;
            padding-bottom: 2rem;
          }

          .primary-nav.open {
            transform: translateX(0);
          }

          /* show hamburger on mobile */
          .nav-toggle { 
            display: block;
            margin-left: auto;
            z-index: 1000;
          }

          /* CTA button styling */
          .cta-button {
            display: block;
            width: calc(100% - 2rem);
            margin: 1rem auto;
            text-align: center;
          }

          /* Header styling */
          .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: white;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 0.5rem 1rem;
            height: var(--header-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          /* Prevent body scroll when menu open */
          body.menu-open {
            overflow: hidden;
          }
        }
</style>
      <header class="site-header">
        <div class="logo">
          <a href="/">
            <img src="https://huggingface.co/spaces/iWaffle21/phoenix-sparkle-power-wash-pro/resolve/main/images/logo%20pw.png" alt="Phoenix Pressure Washing Logo" class="h-16 mr-2">
            <span class="hidden md:inline text-xl" style="background: linear-gradient(90deg, #2196F3 0%, #E53935 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">PHOENIX PRESSURE WASHING</span>
          </a>
        </div>

        <button class="nav-toggle" aria-controls="primary-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="hamburger"></span>
        </button>

        <nav id="primary-nav" class="primary-nav" role="navigation" aria-label="Main">
          <ul class="nav-list">
            <li><a href="/">Home</a></li>
            <li><a href="/services.html">Services</a></li>
            <li><a href="/holiday-lighting.html">Holiday Lighting</a></li>
            <li><a href="/gallery.html">Gallery</a></li>
            <li><a href="/estimate-calculator.html">Free Quote Calculator</a></li>
            <li><a href="/contact.html">Contact</a></li>
          </ul>
          <div class="px-4">
            <a href="/contact.html" class="cta-button block text-center">Get Free Quote</a>
          </div>
        </nav>
      </header>
`;
    feather.replace();
      // Mobile menu toggle functionality
      const btn = this.shadowRoot.querySelector('.nav-toggle');
      const nav = this.shadowRoot.getElementById('primary-nav');
      const headerHeight = 64; // Fixed header height for mobile

      if (btn && nav) {
        btn.addEventListener('click', function () {
          const expanded = btn.getAttribute('aria-expanded') === 'true';
          btn.setAttribute('aria-expanded', String(!expanded));
          nav.classList.toggle('open');
          document.body.classList.toggle('menu-open', !expanded);
        });
      }

      // Set fixed header height and padding
      document.documentElement.style.setProperty('--header-h', `${headerHeight}px`);
      document.body.style.paddingTop = `${headerHeight}px`;
}
}
customElements.define('custom-navbar', CustomNavbar);