const FOOTER_WHATSAPP_URL = 'https://wa.me/971563690151?text=Hi%20HAYRE%2C%20I%27d%20like%20to%20book%20an%20appointment.';

const Footer = () => {
  return (
    <footer className="footer" data-screen-label="07 Footer">
      <div className="footer-bg" aria-hidden="true"></div>

      <a href="#home" className="footer-top">
        Back to top
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M12 19V5M6 11l6-6 6 6"/></svg>
      </a>

      <div className="footer-content">
        <div className="footer-main">
          <div className="footer-brand">
            <img src="assets/HAYRE-logo-white.webp" alt="HAYRE" className="footer-logo" />
            <p className="footer-tagline">Grooming Salon · Abu Dhabi</p>
            <div className="copyright">© 2026 HAYRE. All rights reserved.</div>
          </div>

          <div className="footer-col">
            <h4>Navigation</h4>
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="#stylists">Studio</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Services</h4>
            <ul>
              <li><a href="services.html">HAYRE Packages</a></li>
              <li><a href="services.html">Cuts</a></li>
              <li><a href="services.html">Beard &amp; Shave</a></li>
              <li><a href="services.html">Hair Colour</a></li>
              <li><a href="services.html">Hair &amp; Scalp Treatments</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Book</h4>
            <ul>
              <li><a href="https://www.fresha.com/a/hayre-grooming-salon-abu-dhabi-hayre-grooming-salon-united-square-gwywnytl/booking" target="_blank" rel="noopener noreferrer">Book Appointment</a></li>
              <li><a href={FOOTER_WHATSAPP_URL} target="_blank" rel="noopener noreferrer">WhatsApp Booking</a></li>
              <li><a href="https://share.google/s0vmIT502uhOf8Tir" target="_blank" rel="noopener noreferrer">Google Maps</a></li>
              <li><a href="https://instagram.com/hayre.ae" target="_blank" rel="noopener noreferrer">Instagram</a></li>
              <li><a href="#contact">Hours &amp; Location</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;