const Footer = () => {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo.jpeg" alt="Prestige Auto Spa Mobile"/>
            <p>Premium mobile auto spa serving the Los Angeles coast — Malibu through Newport Beach.</p>
            <div className="footer-social">
              <a href="#" aria-label="Instagram"><Icon name="ig" size={16}/></a>
              <a href="#" aria-label="Facebook"><Icon name="fb" size={16}/></a>
              <a href="#" aria-label="TikTok"><Icon name="tiktok" size={16}/></a>
            </div>
          </div>

          <div className="footer-col">
            <h4 className="mono">CONTACT</h4>
            <ul>
              <li><Icon name="phone" size={13}/> <a href="tel:+14244150208">(424) 415-0208</a></li>
              <li><Icon name="mail" size={13}/> <a href="mailto:hello@prestigeautospa.com">hello@prestigeautospa.com</a></li>
              <li><Icon name="pin" size={13}/> Los Angeles, CA</li>
            </ul>
          </div>

          <div className="footer-col">
            <h4 className="mono">HOURS</h4>
            <ul>
              <li>Mon &ndash; Sun · 7:00 AM &ndash; 7:00 PM</li>
              <li>Open every day</li>
            </ul>
          </div>

          <div className="footer-col">
            <h4 className="mono">SERVICE AREA</h4>
            <ul>
              <li>Malibu · Pacific Palisades</li>
              <li>Beverly Hills · West Hollywood</li>
              <li>Santa Monica · Manhattan Beach</li>
              <li>Newport Beach · Laguna</li>
            </ul>
          </div>

          <div className="footer-col">
            <h4 className="mono">QUICK LINKS</h4>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#how">How It Works</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#">Terms &amp; Conditions</a></li>
              <li><a href="#">Privacy Policy</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div className="mono">© 2026 PRESTIGE AUTO SPA MOBILE · ALL RIGHTS RESERVED</div>
          <div className="mono footer-pay">
            ACCEPTING&nbsp;&nbsp;
            <span>Stripe</span> · <span>Visa</span> · <span>Mastercard</span> · <span>Amex</span> · <span>Cash on service</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;
