/* global React, Icon, Logo */
const { useState: useS, useEffect: useE } = React;

const NAV_LINKS = [
  { label: "Servicios", href: "#servicios-agencia" },
  { label: "Portafolio", href: "/portfolio/" },
  { label: "Nosotros", href: "#agencia" },
  { label: "Contacto", href: "#contacto" },
];

function Navbar({ onContact }) {
  const [scrolled, setScrolled] = useS(false);
  const [open, setOpen] = useS(false);

  useE(() => {
    const stylesheetId = "agency-hero-styles";
    if (document.getElementById(stylesheetId)) return undefined;
    const stylesheet = document.createElement("link");
    stylesheet.id = stylesheetId;
    stylesheet.rel = "stylesheet";
    stylesheet.href = "agency-hero.css";
    document.head.appendChild(stylesheet);
    return () => stylesheet.remove();
  }, []);

  useE(() => {
    const updateHeader = () => setScrolled(window.scrollY > 24);
    updateHeader();
    window.addEventListener("scroll", updateHeader, { passive: true });
    return () => window.removeEventListener("scroll", updateHeader);
  }, []);

  useE(() => {
    if (!open) return undefined;
    const closeOnEscape = (event) => {
      if (event.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", closeOnEscape);
    return () => window.removeEventListener("keydown", closeOnEscape);
  }, [open]);

  const closeMenu = () => setOpen(false);
  const contact = () => {
    closeMenu();
    onContact();
  };

  return (
    <header className={"agency-nav" + (scrolled || open ? " agency-nav--solid" : "")}>
      <div className="agency-shell agency-nav__inner">
        <a className="agency-nav__brand" href="#inicio" aria-label="STAMINEX, ir al inicio" onClick={closeMenu}>
          <Logo light size={27} />
        </a>

        <nav className="agency-nav__desktop" aria-label="Navegación principal">
          {NAV_LINKS.map((link) => (
            <a className="agency-nav__link" href={link.href} key={link.label}>{link.label}</a>
          ))}
        </nav>

        <div className="agency-nav__actions">
          <button className="agency-button agency-button--nav" type="button" onClick={contact}>
            Hablemos <Icon name="arrow" size={16} />
          </button>
          <button
            className="agency-nav__toggle"
            type="button"
            aria-label={open ? "Cerrar menú" : "Abrir menú"}
            aria-expanded={open}
            aria-controls="agency-mobile-menu"
            onClick={() => setOpen((current) => !current)}
          >
            <Icon name={open ? "close" : "menu"} size={24} />
          </button>
        </div>
      </div>

      <nav
        className={"agency-nav__mobile" + (open ? " agency-nav__mobile--open" : "")}
        id="agency-mobile-menu"
        aria-label="Navegación móvil"
        aria-hidden={!open}
      >
        {NAV_LINKS.map((link) => (
          <a className="agency-nav__mobile-link" href={link.href} key={link.label} onClick={closeMenu} tabIndex={open ? 0 : -1}>
            {link.label}<Icon name="arrow" size={17} />
          </a>
        ))}
        <button className="agency-button agency-button--primary" type="button" onClick={contact} tabIndex={open ? 0 : -1}>
          Cuéntanos tu proyecto <Icon name="arrow" size={18} />
        </button>
      </nav>
    </header>
  );
}

const HERO_VALUES = [
  "Estrategia antes de código",
  "Desarrollo realmente a medida",
  "Comunicación directa con el equipo",
];

function Hero({ onContact }) {
  return (
    <section className="agency-hero" id="presentacion">
      <div className="agency-hero__ambient" aria-hidden="true" />
      <div className="agency-shell agency-hero__grid">
        <div className="agency-hero__copy">
          <p className="agency-hero__eyebrow agency-reveal" style={{ "--delay": "80ms" }}>
            <span /> Agencia de software · Estrategia, diseño y desarrollo
          </p>
          <h2 className="agency-hero__title agency-reveal" style={{ "--delay": "160ms" }}>
            Software que convierte ideas en <em>resultados reales.</em>
          </h2>
          <p className="agency-hero__lead agency-reveal" style={{ "--delay": "260ms" }}>
            Diseñamos software a medida, sitios web y aplicaciones que simplifican tu operación,
            mejoran la experiencia de tus clientes y automatizan procesos con inteligencia artificial.
          </p>
          <div className="agency-hero__ctas agency-reveal" style={{ "--delay": "340ms" }}>
            <button className="agency-button agency-button--primary" type="button" onClick={onContact}>
              Cuéntanos tu proyecto <Icon name="arrow" size={18} />
            </button>
            <a className="agency-button agency-button--ghost" href="/portfolio/">
              Ver proyectos
            </a>
          </div>
          <ul className="agency-hero__values agency-reveal" style={{ "--delay": "420ms" }}>
            {HERO_VALUES.map((value) => (
              <li key={value}><span><Icon name="check" size={13} stroke={2.4} /></span>{value}</li>
            ))}
          </ul>
        </div>

        <div className="agency-hero__visual agency-reveal" style={{ "--delay": "240ms" }}>
          <div className="agency-hero__photo-wrap">
            <img
              className="agency-hero__photo"
              src="assets/projects/staminex-agencia.webp"
              alt="Espacio de trabajo contemporáneo de una agencia de software"
            />
            <div className="agency-hero__purple-overlay" aria-hidden="true" />
            <div className="agency-hero__photo-mask" aria-hidden="true" />
            <span className="agency-hero__visual-label">STAMINEX / SOFTWARE STUDIO</span>
          </div>

        </div>
      </div>
    </section>
  );
}

const MARQUEE_ITEMS = [
  { icon: "layout", text: "Desarrollo web" },
  { icon: "mobile", text: "Aplicaciones móviles" },
  { icon: "code", text: "Software a medida" },
  { icon: "sparkle2", text: "Automatización con IA" },
  { icon: "api", text: "Integraciones" },
  { icon: "database", text: "Plataformas de gestión" },
];

function Marquee() {
  const renderItems = (duplicate) => MARQUEE_ITEMS.map((item) => (
    <span className="agency-marquee__item" key={(duplicate ? "copy-" : "") + item.text} aria-hidden={duplicate || undefined}>
      <Icon name={item.icon} size={18} />
      {item.text}
      <span className="agency-marquee__dot" aria-hidden="true" />
    </span>
  ));

  return (
    <section className="agency-marquee" aria-label="Capacidades de STAMINEX">
      <div className="agency-marquee__track">
        <div className="agency-marquee__group">{renderItems(false)}</div>
        <div className="agency-marquee__group" aria-hidden="true">{renderItems(true)}</div>
      </div>
    </section>
  );
}

Object.assign(window, { Navbar, Hero, Marquee });