const { useEffect, useState, useRef } = React;

/* ===== Cursor ===== */
function Cursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);
  useEffect(() => {
    if (window.matchMedia('(hover: none), (max-width: 880px)').matches) return;
    let mx = innerWidth/2, my = innerHeight/2, rx = mx, ry = my, raf;
    const onMove = (e) => {
      mx = e.clientX; my = e.clientY;
      if (dotRef.current) dotRef.current.style.transform = `translate(${mx}px,${my}px) translate(-50%,-50%)`;
    };
    const loop = () => {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      if (ringRef.current) ringRef.current.style.transform = `translate(${rx}px,${ry}px) translate(-50%,-50%)`;
      raf = requestAnimationFrame(loop);
    };
    loop();
    const hov = 'a, button, .service-card, .testi, .loc, .brand, .menu-btn, .chip';
    const onEnter = () => document.body.classList.add('cursor-hover');
    const onLeave = () => document.body.classList.remove('cursor-hover');
    const attachTimer = setTimeout(() => {
      document.querySelectorAll(hov).forEach((el) => {
        el.addEventListener('mouseenter', onEnter);
        el.addEventListener('mouseleave', onLeave);
      });
    }, 300);
    window.addEventListener('mousemove', onMove);
    return () => {
      cancelAnimationFrame(raf);
      clearTimeout(attachTimer);
      window.removeEventListener('mousemove', onMove);
    };
  }, []);
  return (
    <>
      <div ref={ringRef} className="cursor-ring" />
      <div ref={dotRef} className="cursor-dot" />
    </>
  );
}

/* ===== Site Shell (ambient bg + cursor) ===== */
function SiteShell() {
  return (
    <>
      <Cursor />
      <div className="grid-bg" aria-hidden="true"></div>
      <div className="particle-layer" aria-hidden="true"></div>
    </>
  );
}

/* ===== Navigation (multi-page) ===== */
const PAGES = {
  home: { href: 'index.html', label: 'Inicio' },
  servicios: { label: 'Servicios', children: [
    { href: 'polarizados.html', label: 'Polarizados', desc: 'Hüperoptik · Autobahn · Americano' },
    { href: 'pelicula-seguridad.html', label: 'Película de Seguridad', desc: 'UltraSecure — 300–1500 µ' },
    { href: 'ppf.html', label: 'PPF', desc: 'Paint Protection Film 3M' },
    { href: 'wraps.html', label: 'Wraps', desc: 'Personalización vehicular 3M' },
    { href: 'detailing.html', label: 'Detailing & Ceramic', desc: 'Recubrimiento nanotecnológico' },
  ]},
  accesorios: { href: 'accesorios.html', label: 'Accesorios' },
  nosotros: { href: 'nosotros.html', label: 'Nosotros' },
  sedes: { href: 'sedes.html', label: 'Sedes' },
  contacto: { href: 'contacto.html', label: 'Contacto' },
};

function Nav({ active = 'home' }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [dropdown, setDropdown] = useState(false);
  const [mobileServicesOpen, setMobileServicesOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]);

  return (
    <>
      <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="container nav-inner">
          <a href="index.html" className="logo">
            <img src="assets/logo.png" alt="Polarizados Ya" className="logo-img" />
          </a>
          <nav className="nav-links">
            <a href="index.html" className={active === 'home' ? 'active' : ''}>Inicio</a>
            <div
              className={`nav-drop ${dropdown ? 'open' : ''}`}
              onMouseEnter={() => setDropdown(true)}
              onMouseLeave={() => setDropdown(false)}
            >
              <button className={`nav-drop-trigger ${active === 'servicios' ? 'active' : ''}`}>
                Servicios
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
                  <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <div className="nav-drop-menu">
                {PAGES.servicios.children.map((c) => (
                  <a key={c.href} href={c.href}>
                    <span className="drop-label">{c.label}</span>
                    <span className="drop-desc">{c.desc}</span>
                  </a>
                ))}
              </div>
            </div>
            <a href="accesorios.html" className={active === 'accesorios' ? 'active' : ''}>Accesorios</a>
            <a href="nosotros.html" className={active === 'nosotros' ? 'active' : ''}>Nosotros</a>
            <a href="sedes.html" className={active === 'sedes' ? 'active' : ''}>Sedes</a>
          </nav>
          <div className="nav-right">
            <div className="nav-social">
              <a href="https://instagram.com/polarizadosya" aria-label="Instagram" target="_blank" rel="noopener"><InstagramIcon /></a>
              <a href="https://tiktok.com/@polarizadosya" aria-label="TikTok" target="_blank" rel="noopener"><TiktokIcon /></a>
              <a href="https://facebook.com/polarizadosya" aria-label="Facebook" target="_blank" rel="noopener"><FacebookIcon /></a>
            </div>
            <a href="contacto.html" className="nav-cta">
              Agenda tu cita <Arrow />
            </a>
          </div>
          <button className="menu-btn" aria-label="Menú" onClick={() => setOpen(true)}>
            <svg viewBox="0 0 20 20" fill="none">
              <path d="M3 6h14M3 10h14M3 14h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </header>

      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        <div className="mobile-menu-top">
          <a href="index.html" className="logo" onClick={() => setOpen(false)}>
            <img src="assets/logo.png" alt="Polarizados Ya" className="logo-img" />
          </a>
          <button className="menu-btn" aria-label="Cerrar" onClick={() => setOpen(false)}>
            <svg viewBox="0 0 20 20" fill="none">
              <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
        <nav className="mobile-nav">
          <a href="index.html"><span>Inicio</span><span className="m-num">01</span></a>
          <div className={`m-services ${mobileServicesOpen ? 'open' : ''}`}>
            <button className="m-services-toggle" onClick={() => setMobileServicesOpen(!mobileServicesOpen)}>
              <span>Servicios</span>
              <span className="m-num">02</span>
            </button>
            <div className="m-services-list">
              {PAGES.servicios.children.map((c) => (
                <a key={c.href} href={c.href}>{c.label}</a>
              ))}
            </div>
          </div>
          <a href="accesorios.html"><span>Accesorios</span><span className="m-num">03</span></a>
          <a href="nosotros.html"><span>Nosotros</span><span className="m-num">04</span></a>
          <a href="sedes.html"><span>Sedes</span><span className="m-num">05</span></a>
          <a href="contacto.html"><span>Contacto</span><span className="m-num">06</span></a>
        </nav>
        <div className="mobile-social">
          <a href="https://instagram.com/polarizadosya"><InstagramIcon /></a>
          <a href="https://tiktok.com/@polarizadosya"><TiktokIcon /></a>
          <a href="https://facebook.com/polarizadosya"><FacebookIcon /></a>
          <a href="https://wa.me/573106018633"><Whatsapp /></a>
        </div>
        <a href="contacto.html" className="nav-cta" onClick={() => setOpen(false)}>
          Agenda tu cita <Arrow />
        </a>
      </div>
    </>
  );
}

/* ===== Footer ===== */
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <a href="index.html" className="logo">
              <img src="assets/logo.png" alt="Polarizados Ya" className="logo-img" />
            </a>
            <p>
              La empresa de polarizados mejor calificada de Colombia.
              Distribuidores exclusivos de Hüperoptik, Autobahn y 3M.
              Garantía de por vida en cada instalación.
            </p>
            <div className="foot-social">
              <a href="https://instagram.com/polarizadosya" aria-label="Instagram"><InstagramIcon /></a>
              <a href="https://tiktok.com/@polarizadosya" aria-label="TikTok"><TiktokIcon /></a>
              <a href="https://facebook.com/polarizadosya" aria-label="Facebook"><FacebookIcon /></a>
              <a href="https://wa.me/573106018633" aria-label="WhatsApp"><Whatsapp /></a>
            </div>
          </div>
          <div className="foot-col">
            <h4>Servicios</h4>
            <ul>
              <li><a href="polarizados.html">Polarizados</a></li>
              <li><a href="pelicula-seguridad.html">Película de Seguridad</a></li>
              <li><a href="ppf.html">Paint Protection Film</a></li>
              <li><a href="wraps.html">Wraps</a></li>
              <li><a href="detailing.html">Detailing & Ceramic</a></li>
              <li><a href="accesorios.html">Accesorios</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Sedes</h4>
            <ul>
              <li><a href="sedes.html#bogota-norte">Bogotá Norte</a></li>
              <li><a href="sedes.html#bogota-centro">Bogotá Centro</a></li>
              <li><a href="sedes.html#chia">Chía</a></li>
              <li><a href="sedes.html#cali">Cali</a></li>
              <li><a href="sedes.html#medellin">Medellín</a></li>
              <li><a href="sedes.html#villavicencio">Villavicencio</a></li>
              <li><a href="sedes.html#miami">Miami, FL</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Compañía</h4>
            <ul>
              <li><a href="nosotros.html">Sobre nosotros</a></li>
              <li><a href="contacto.html">Contacto / PQRS</a></li>
              <li><a href="#">Términos y Condiciones</a></li>
              <li><a href="#">Política de Privacidad</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span>© 2026 Polarizados Ya · Todos los derechos reservados</span>
          <span>BOG · CALI · MDE · VVO · CHÍA · MIA</span>
        </div>
      </div>
    </footer>
  );
}

/* ===== WhatsApp float ===== */
function WhatsappFloat() {
  return (
    <a
      href="https://wa.me/573106018633?text=Hola%20Polarizados%20Ya,%20quisiera%20más%20información"
      className="whatsapp-float"
      target="_blank"
      rel="noopener"
      aria-label="WhatsApp"
    >
      <Whatsapp />
      <span className="wa-label">¡Escríbenos ahora!</span>
    </a>
  );
}

window.Cursor = Cursor;
window.SiteShell = SiteShell;
window.Nav = Nav;
window.Footer = Footer;
window.WhatsappFloat = WhatsappFloat;