class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: #0F172A;
          border-top: 1px solid #1E293B;
          padding: 3rem 1rem 2rem;
        }
        
        .container {
          max-width: 1200px;
          margin: 0 auto;
        }
        
        .footer-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 2rem;
          margin-bottom: 3rem;
        }
        
        .footer-column h3 {
          color: #F8FAFC;
          margin-bottom: 1.5rem;
          font-size: 1.25rem;
        }
        
        .footer-links {
          list-style: none;
          padding: 0;
        }
        
        .footer-links li {
          margin-bottom: 0.75rem;
        }
        
        .footer-links a {
          color: #94A3B8;
          text-decoration: none;
          transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
          color: #D4AF37;
        }
        
        .social-links {
          display: flex;
          gap: 1rem;
          margin-top: 1rem;
        }
        
        .social-link {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #1E293B;
          color: #94A3B8;
          transition: all 0.3s ease;
        }
        
        .social-link:hover {
          background: #D4AF37;
          color: #0F172A;
          transform: translateY(-3px);
        }
        
        .footer-bottom {
          border-top: 1px solid #1E293B;
          padding-top: 2rem;
          text-align: center;
          color: #64748B;
          font-size: 0.875rem;
        }
        
        .footer-logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-family: 'Cormorant Garamond', serif;
          font-weight: 700;
          font-size: 1.5rem;
          color: #F8FAFC;
          text-decoration: none;
          margin-bottom: 1rem;
        }
        
        .logo-icon {
          color: #D4AF37;
        }
      </style>
      
      <div class="container">
        <div class="footer-grid">
          <div class="footer-column">
            <a href="/" class="footer-logo">
              <i data-feather="anchor" class="logo-icon"></i>
              <span>Commodore Yachting</span>
            </a>
            <p style="color: #94A3B8; margin-bottom: 1rem; line-height: 1.6;">
              The UK's premier RYA training centre and luxury yacht charter provider since 1998.
            </p>
            <div class="social-links">
              <a href="#" class="social-link">
                <i data-feather="facebook"></i>
              </a>
              <a href="#" class="social-link">
                <i data-feather="instagram"></i>
              </a>
              <a href="#" class="social-link">
                <i data-feather="twitter"></i>
              </a>
              <a href="#" class="social-link">
                <i data-feather="youtube"></i>
              </a>
            </div>
          </div>
          
          <div class="footer-column">
            <h3>Courses</h3>
            <ul class="footer-links">
              <li><a href="#">Day Skipper</a></li>
              <li><a href="#">Coastal Skipper</a></li>
              <li><a href="#">Yachtmaster</a></li>
              <li><a href="#">Powerboat Courses</a></li>
              <li><a href="#">First Aid</a></li>
            </ul>
          </div>
          
          <div class="footer-column">
            <h3>Charter</h3>
            <ul class="footer-links">
              <li><a href="#">Day Charters</a></li>
              <li><a href="#">Weekend Getaways</a></li>
              <li><a href="#">Corporate Events</a></li>
              <li><a href="#">Bareboat Charter</a></li>
              <li><a href="#">Crewed Yachts</a></li>
            </ul>
          </div>
          
          <div class="footer-column">
            <h3>Company</h3>
            <ul class="footer-links">
              <li><a href="#">About Us</a></li>
              <li><a href="#">Our Fleet</a></li>
              <li><a href="#">Instructors</a></li>
              <li><a href="#">Testimonials</a></li>
              <li><a href="#">Blog</a></li>
            </ul>
          </div>
          
          <div class="footer-column">
            <h3>Contact</h3>
            <ul class="footer-links">
              <li><a href="#">Gosport Marina</a></li>
              <li><a href="#">02392 123456</a></li>
              <li><a href="#">info@commodoreyachting.com</a></li>
              <li><a href="#">Find Us</a></li>
            </ul>
          </div>
        </div>
        
        <div class="footer-bottom">
          <p>© 2026 Commodore Yachting. All rights reserved. | RYA Recognised Training Centre</p>
        </div>
      </div>
    `;
    
    // Initialize feather icons
    import('https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js').then(() => {
      feather.replace({ icons: this.shadowRoot.querySelectorAll('[data-feather]') });
    });
  }
}

customElements.define('custom-footer', CustomFooter);