/* global React */
const { useState, useEffect } = React;

// Shared Lacquery chrome — Header + Footer
window.Logo = function Logo({ size = 40, variant = 'wordmark', dark = false }) {
  if (variant === 'round') {
    return <img src="assets/logo-round.png" alt="Lacquery" width={size} height={size} style={{ width: size, height: size, borderRadius: '50%' }} />;
  }
  if (variant === 'wordmark-light') {
    return <img src="assets/logo-wordmark-color.png" alt="Lacquery Nails" style={{ ...{ height: size, width: 'auto', display: 'block' }, width: "210px", padding: "3px", borderStyle: "solid", borderWidth: "0px", height: "82px" }} />;
  }
  // navbar: in dark mode the dark wordmark is invisible on navy → use color/gold variant
  const src = dark ? 'assets/logo-wordmark-color.png' : 'assets/logo-navbar.png';
  return <img src={src} alt="Lacquery Nails" style={{ height: size, width: 'auto', display: 'block' }} />;
};

window.Wordmark = function Wordmark() {
  return null;
};

window.Header = function Header({ active = 'home', dark = false }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);

  return (
    <>
      <header className="header">
        <div className="shell header-inner">
          <a href="index.html" className="header-logo">
            <Logo size={44} dark={dark} />
          </a>
          <nav className="header-nav">
            <a href="index.html" className={active === 'home' ? 'active' : ''}>Home</a>
            <a href="index.html#services" className={active === 'services' ? 'active' : ''}>Services</a>
            <a href="shop.html" className={active === 'shop' ? 'active' : ''}>Press-Ons</a>
            <a href="index.html#gallery">Gallery</a>
          </nav>
          <a href="book.html" className="btn btn-primary header-cta-desktop" style={{ padding: '12px 22px', fontSize: 11 }}>
            Book Appointment
          </a>
          <a href="book.html" className="header-book-mobile" aria-label="Book appointment">Book</a>
          <button className="menu-btn header-cta-mobile" onClick={() => setOpen(!open)} aria-label="Menu">
            <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
              {open ?
              <>
                  <line x1="2" y1="2" x2="16" y2="12" stroke="currentColor" strokeWidth="1.4" />
                  <line x1="16" y1="2" x2="2" y2="12" stroke="currentColor" strokeWidth="1.4" />
                </> :

              <>
                  <line x1="0" y1="2" x2="18" y2="2" stroke="currentColor" strokeWidth="1.4" />
                  <line x1="0" y1="7" x2="18" y2="7" stroke="currentColor" strokeWidth="1.4" />
                  <line x1="0" y1="12" x2="18" y2="12" stroke="currentColor" strokeWidth="1.4" />
                </>
              }
            </svg>
          </button>
        </div>
      </header>
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        <a href="index.html" onClick={() => setOpen(false)}>Home</a>
        <a href="index.html#services" onClick={() => setOpen(false)}>Services</a>
        <a href="shop.html" onClick={() => setOpen(false)}>Press-Ons</a>
        <a href="index.html#gallery" onClick={() => setOpen(false)}>Gallery</a>
        <a href="book.html" onClick={() => setOpen(false)} className="btn btn-primary" style={{ marginTop: 16 }}>
          Book Appointment
        </a>
      </div>
    </>);

};

window.Footer = function Footer() {
  return (
    <footer className="footer" id="contact">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-logo">
            <Logo size={72} variant="wordmark-light" />
            <p style={{ color: 'oklch(0.78 0.04 320)', fontSize: 13 }}>A nail boutique near Shrirampura Metrov gel polish, nail art, extensions & custom press-ons.

            </p>
          </div>

          <div>
            <h4>Visit</h4>
            <ul>
              <li>Near Shrirampura Metro Station</li>
              <li>Bengaluru, Karnataka</li>
              <li>Mon to Sun · 10 AM to 9 PM</li>
            </ul>
            <h4 style={{ marginTop: 28 }}>Reach Us</h4>
            <ul>
              <li><a href="tel:+918317451779">+91 83174 51779</a></li>
              <li><a href="mailto:hello@lacquerynails.com">hello@lacquerynails.com</a></li>
            </ul>
          </div>

          <div>
            <h4>Salon</h4>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="index.html#services">Services</a></li>
              <li><a href="shop.html">Press-Ons</a></li>
              <li><a href="index.html#gallery">Gallery</a></li>
              <li><a href="book.html">Book Appointment</a></li>
              <li><a href="blog.html">Blog</a></li>
            </ul>
            <h4 style={{ marginTop: 28 }}>Follow</h4>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">WhatsApp</a></li>
              <li><a href="#">Google Maps</a></li>
            </ul>
          </div>

          <div>
            <h4>Find Us</h4>
            <div className="footer-map" aria-label="Map showing Lacquery near Shrirampura Metro">
              <div className="pin"></div>
              <div className="pin-label">Lacquery · Shrirampura</div>
            </div>
            <p style={{ marginTop: 14, fontSize: 12, color: 'oklch(0.78 0.04 320)', letterSpacing: '0.05em' }}>
              2 min walk from Shrirampura Metro Station, Exit B
            </p>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Lacquery Nails. All rights reserved.</span>
          <span style={{ display: 'flex', gap: 24 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
          </span>
        </div>
      </div>
    </footer>);

};