function Hero() {
  return (
    <section id="top" className="hero hero-glass">
      {/* layered gradient glow */}
      <div className="glow glow-a" aria-hidden="true"></div>
      <div className="glow glow-b" aria-hidden="true"></div>
      <div className="glow glow-c" aria-hidden="true"></div>

      {/* brand stickers — playful signature */}
      <Sticker kind="star" className="hg-st hg-st-1 anim" />
      <Sticker kind="sparkle" className="hg-st hg-st-2 anim" style={{ animationDelay: "0.6s" }} />
      <Sticker kind="squig" className="hg-st hg-st-3" />
      <Sticker kind="burst" className="hg-st hg-st-4 anim" style={{ animationDelay: "1.2s" }} />
      <Sticker kind="dot" className="hg-st hg-st-5 anim" style={{ animationDelay: "1.8s" }} />
      <Sticker kind="plus" className="hg-st hg-st-6" />
      <Sticker kind="sparkle" className="hg-st hg-st-7 anim" style={{ animationDelay: "0.9s" }} />

      <div className="wrap hero-glass-grid">
        {/* LEFT — content */}
        <div className="hero-glass-left">
          <h1 className="hero-glass-title">
            Consigue más clientes,<br /><em>con menos esfuerzo</em>
          </h1>

          <p className="hero-glass-lead">
            Sistemas inteligentes de marketing y ventas, optimizados con
            <strong> IA y datos</strong> que trabajan para crecer tu negocio
          </p>

          <div className="hero-glass-ctas">
            <a className="btn btn-primary" href="#cba672efdb">
              Crece tu negocio con datos <Arrow />
            </a>
            <a className="btn btn-ghost-dark" href="#sistemas" onClick={(e) => {e.preventDefault();document.getElementById("sistemas").scrollIntoView({ behavior: "smooth" });}}>
              Ver los sistemas
            </a>
          </div>

          <div className="logo-marquee" aria-label="Negocios que crecen con Aigenci">
            <div className="lm-label">Negocios que ya crecen con Aigenci</div>
            <div className="lm-viewport">
              <div className="lm-track">
                <LogoSet />
                <LogoSet />
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — glass analytics dashboard (one coherent campaign story) */}
        <div className="hero-glass-right">
          <div className="dash-glass">
            <div className="dg-head">
              <div className="dg-title"><span className="dg-dot"></span>Resultados de campaña</div>
            </div>

            {/* focus metric */}
            <div className="dg-focus">
              <div className="dg-focus-k">Leads calificados este mes</div>
              <div className="dg-focus-row">
                <div className="dg-focus-v">1,284</div>
                <div className="dg-focus-delta">+118% <span>vs. mes anterior</span></div>
              </div>
            </div>

            {/* animated growth line chart */}
            <div className="dg-chart">
              <svg viewBox="0 0 300 120" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id="dgFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#FD327B" stopOpacity="0.40" />
                    <stop offset="100%" stopColor="#FD327B" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <line x1="0" y1="30" x2="300" y2="30" className="dg-grid" />
                <line x1="0" y1="60" x2="300" y2="60" className="dg-grid" />
                <line x1="0" y1="90" x2="300" y2="90" className="dg-grid" />
                <path className="dg-area" d="M0 100 L43 92 L86 96 L129 70 L172 76 L215 46 L258 38 L300 12 L300 120 L0 120 Z" fill="url(#dgFill)" />
                <path className="dg-line" d="M0 100 L43 92 L86 96 L129 70 L172 76 L215 46 L258 38 L300 12" fill="none" stroke="#FD327B" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                <circle className="dg-pt" cx="300" cy="12" r="5" fill="#fff" stroke="#FD327B" strokeWidth="3" />
              </svg>
            </div>

            {/* coherent KPI row */}
            <div className="dg-foot">
              <div className="dg-chip"><span className="dg-chip-k">ROI</span><span className="dg-chip-v">+72%</span></div>
              <div className="dg-chip"><span className="dg-chip-k">Costo / lead</span><span className="dg-chip-v cyan">−58%</span></div>
              <div className="dg-chip"><span className="dg-chip-k">Conversión</span><span className="dg-chip-v">+104%</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// Real client logos (white wordmarks on transparent), height-normalized per shape.
function LogoSet() {
  const logos = [
  { src: "assets/logo-abiliti-blanco.png", name: "Abiliti", h: 30 },
  { src: "assets/logo-inversolar-blanco.png", name: "Inversolar", h: 34 },
  { src: "assets/logo-ipancorazon-blanco.png", name: "Ipan Corazón", h: 34 },
  { src: "assets/logo-alg-blanco.png", name: "ALG", h: 52 },
  { src: "assets/logo-alhumo-blanco.png", name: "Alhumo", h: 50 },
  { src: "assets/logo-byc-blanco.png", name: "B&C", h: 40 },
  { src: "assets/logo-padillawow-blanco.png", name: "Padilla WOW", h: 26 }];

  return (
    <div className="lm-set" aria-hidden="true">
      {logos.map((l, i) =>
      <div key={i} className="lm-logo">
          <img src={l.src} alt={l.name} style={{ height: l.h }} />
        </div>
      )}
    </div>);

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