/* global React, SLCommon */
const { useState: useState_n, useEffect: useEffect_n } = React;
const { useReveal: useReveal_n } = SLCommon;

/* ============ NAV ============ */
function Nav() {
  const [open, setOpen] = useState_n(false);
  const [scrolled, setScrolled] = useState_n(false);
  const [inContact, setInContact] = useState_n(false);

  useEffect_n(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect_n(() => {
    const target = document.getElementById("contacto");
    if (!target) return;
    const io = new IntersectionObserver(
      ([entry]) => setInContact(entry.isIntersecting),
      { rootMargin: "-30% 0px -30% 0px", threshold: 0 }
    );
    io.observe(target);
    return () => io.disconnect();
  }, []);

  const links = [
    { href: "#nosotros", label: "Nosotros" },
    { href: "#servicios", label: "Servicios" },
    { href: "#corporativo", label: "Corporativo" },
    { href: "#proceso", label: "Proceso" },
    { href: "#faq", label: "FAQ" },
  ];

  return (
    <header className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" className="brand">
          <img src="assets/logo-ico.png" alt="" className="brand-ico" />
          <span className="brand-name">Salud Laboral</span>
        </a>
        <nav className="nav-links" aria-label="Principal">
          {links.map((l) => (
            <a key={l.href} href={l.href}>{l.label}</a>
          ))}
        </nav>
        <div className={`nav-cta ${inContact ? "is-hidden" : ""}`}>
          <a href="#contacto" className="btn btn-primary">
            Solicitar cotización
            <span className="arr">{SLCommon.I.arrow(14)}</span>
          </a>
        </div>
        <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menú">
          <span style={{ transform: open ? "translateY(4px) rotate(45deg)" : "" }} />
          <span style={{ opacity: open ? 0 : 1 }} />
          <span style={{ transform: open ? "translateY(-4px) rotate(-45deg)" : "" }} />
        </button>
      </div>

      {open && (
        <div className="nav-mobile">
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
          ))}
          {!inContact && (
            <a href="#contacto" className="btn btn-primary" onClick={() => setOpen(false)}>
              Solicitar cotización
            </a>
          )}
        </div>
      )}
    </header>
  );
}

/* ============ HERO ============ */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <div className="hero-bg-fade" />
      </div>

      <div className="container hero-inner">
        <div className="hero-copy reveal in">
          <div className="eyebrow" style={{ marginBottom: 24 }}>Compromiso y transparencia · Medicina ocupacional</div>
          <h1>
            Menos riesgo.<br />
            <span className="brand-accent">Más productividad.</span>
          </h1>
          <p className="lead" style={{ marginTop: 28 }}>
            Empresa dedicada a la medicina ocupacional. Profesionalismo y transparencia
            nos identifican: brindamos un servicio de excelencia basado en la prevención,
            para que tu empresa logre mayor productividad.
          </p>

          <div className="hero-actions">
            <a href="#contacto" className="btn btn-primary">
              Solicitar cotización
              <span className="arr">{SLCommon.I.arrow(14)}</span>
            </a>
            <a href="#servicios" className="btn btn-ghost">
              Ver servicios
            </a>
          </div>

          <div className="hero-trust">
            <div className="trust-row">
              <div className="trust-item">
                <strong>+15</strong>
                <span>años de trayectoria</span>
              </div>
              <div className="trust-divider" />
              <div className="trust-item">
                <strong>+200</strong>
                <span>empresas atendidas</span>
              </div>
              <div className="trust-divider" />
              <div className="trust-item">
                <strong>13</strong>
                <span>servicios integrales</span>
              </div>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <div className="hero-visual-stage">
            <svg className="hvs-bg-shape hvs-ring" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <polygon points="50,2 96,26 96,74 50,98 4,74 4,26" fill="none" stroke="rgba(13,140,114,0.35)" strokeWidth="0.6" />
            </svg>
            <div className="hvs-bg-shape hvs-circle" />
            <div className="hvs-bg-shape hvs-hex" />
            <img src="assets/doctora.png" alt="Profesional de medicina ocupacional" className="hero-doctora" />
            <div className="hvs-grid-pattern" aria-hidden="true" />
          </div>

          <div className="hero-card-float top">
            <div className="hcf-icon">{SLCommon.I.shield}</div>
            <div>
              <strong>Prevención activa</strong>
              <span>Auditoría · 124 colaboradores</span>
            </div>
          </div>
          <div className="hero-card-float">
            <div className="hcf-icon">{SLCommon.I.pulse}</div>
            <div>
              <strong>Reducción de ausentismo</strong>
              <span>−22% en el primer año</span>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-marquee">
        <div className="marquee-track">
          {Array.from({ length: 2 }).map((_, i) => (
            <div className="marquee-row" key={i}>
              <span>● Exámenes preocupacionales</span>
              <span>● Libreta sanitaria</span>
              <span>● Control de ausentismo</span>
              <span>● Seguridad e higiene</span>
              <span>● Test psicotécnico</span>
              <span>● Campañas de vacunación</span>
              <span>● Capacitación RCP</span>
              <span>● Auditorías nutricionales</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SLNav = Nav;
window.SLHero = Hero;