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

const NAV_LINKS = [
  { label: "Inicio", href: "#inicio" },
  { label: "Servicios", href: "#soluciones" },
  { label: "Tecnología", href: "#tecnologia" },
  { label: "Casos", href: "#casos" },
  { label: "Contacto", href: "#contacto" },
];

function Navbar({ onContact }) {
  const [scrolled, setScrolled] = useS(false);
  const [open, setOpen] = useS(false);
  useE(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " nav--solid" : "")}>
      <div className="container nav__inner">
        <a href="#inicio" aria-label="STAMINEX inicio"><Logo light={false} size={28} /></a>
        <nav className="nav__links" aria-label="Principal">
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href} className="nav__link">{l.label}</a>
          ))}
        </nav>
        <div className="nav__cta">
          <button className="btn btn--primary nav__demo" onClick={onContact}>Conversemos</button>
          <button className="nav__burger" aria-label="Menú" onClick={() => setOpen((o) => !o)}>
            <Icon name={open ? "close" : "menu"} size={24} />
          </button>
        </div>
      </div>
      {open && (
        <div className="nav__mobile">
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href} className="nav__mlink" onClick={() => setOpen(false)}>{l.label}</a>
          ))}
          <button className="btn btn--primary btn--lg" onClick={() => { setOpen(false); onContact(); }}>Conversemos</button>
        </div>
      )}
    </header>
  );
}

const HERO_DO = [
  { ic: "layout", t: "Sitios web", d: "Páginas modernas que captan clientes." },
  { ic: "mobile", t: "Apps móviles", d: "Aplicaciones a medida para tu negocio." },
  { ic: "cog", t: "Sistemas web", d: "Plataformas de gestión a tu operación." },
];
const HERO_INDUSTRIES = ["Clínicas", "Hoteles", "Comercio", "Servicios"];
const HERO_VALUES = ["Diseño a medida", "Entrega ágil", "Soporte directo"];

function Hero({ onServices, onContact }) {
  return (
    <section className="hero" id="inicio">
      <div className="container hero__inner">
        <div className="hero__copy">
          <span className="hero__badge"><span className="dot" /> Estudio digital · Desarrollo a medida</span>
          <h1 className="hero__title">
            Construimos sitios y sistemas web que <span className="sx-serif">hacen crecer</span> tu negocio
          </h1>
          <p className="hero__sub">
            En STAMINEX diseñamos y desarrollamos páginas web, aplicaciones móviles y sistemas a la
            medida de cada empresa — con tecnología moderna y soporte cercano.
          </p>
          <div className="hero__btns">
            <button className="btn btn--primary btn--lg" onClick={onContact}>Conversemos <Icon name="arrow" size={18} /></button>
            <button className="btn btn--outline btn--lg" onClick={onServices}>Nuestros servicios</button>
          </div>
          <div className="hero__stats">
            {HERO_VALUES.map((v) => (
              <div className="hero__vp" key={v}>
                <span className="hero__vp__ic"><Icon name="check" size={14} stroke={2.8} /></span>
                {v}
              </div>
            ))}
          </div>
        </div>

        <div className="hero__media">
          <div className="hero__show">
            <div className="hero__show__head">
              <span className="hero__show__eyebrow"><span className="dot" /> Lo que construimos</span>
              <span className="hero__show__brand">STAMINEX</span>
            </div>
            <div className="hero__show__grid">
              {HERO_DO.map((c) => (
                <div className="hero__do" key={c.t}>
                  <span className="hero__do__ic"><Icon name={c.ic} size={22} /></span>
                  <div className="hero__do__t">{c.t}</div>
                  <div className="hero__do__d">{c.d}</div>
                </div>
              ))}
            </div>
            <div className="hero__show__foot">
              <span className="hero__show__label">Para tu industria</span>
              <div className="hero__show__chips">
                {HERO_INDUSTRIES.map((i) => (
                  <span className="hero__indchip" key={i}>{i}</span>
                ))}
              </div>
            </div>
          </div>
          <div className="hero__chip hero__chip--1">
            <span className="hero__chip__ic"><Icon name="spark" size={20} /></span>
            <div>
              <div className="hero__chip__t">100% a medida</div>
              <div className="hero__chip__d">Hecho para tu negocio</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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

/* ----------------------------------------------------------
   Capability marquee — premium logos/keywords strip
---------------------------------------------------------- */
const MARQUEE_ITEMS = [
  { ic: "layout", t: "Sitios web profesionales" },
  { ic: "cog", t: "Sistemas web a medida" },
  { ic: "cart", t: "Tiendas online" },
  { ic: "calendar", t: "Sistemas de reservas" },
  { ic: "whatsapp", t: "Automatización" },
  { ic: "track", t: "Seguimiento y logística" },
  { ic: "bars", t: "Paneles de gestión" },
  { ic: "headset", t: "Soporte y mantenimiento" },
];

function Marquee() {
  const items = [...MARQUEE_ITEMS, ...MARQUEE_ITEMS];
  return (
    <div className="sx-marquee" aria-hidden="true">
      <div className="sx-marquee__track">
        {items.map((m, i) => (
          <span className="sx-marquee__item" key={i}>
            <Icon name={m.ic} size={19} /> {m.t}
            <span className="sx-marquee__sep" />
          </span>
        ))}
      </div>
    </div>
  );
}

window.Marquee = Marquee;