// ============================================================
// HERO — 2-column layout with CHARACTER ROTATION (animation back)
// All featured characters stacked in DOM; only one visible at a time.
// Bulletproof — never blank, always alive.
// ============================================================
const { useState, useEffect, useMemo, useRef } = React;

function Hero() {
  // Gatito Te Amo first (corazón) — then the team rotates around it
  const featured = useMemo(() => {
    const ids = ["gatito-te-amo", "voxi", "automatitto", "miau", "codemiau", "datamiao", "disenita"];
    return ids.map(id => CHARACTERS.find(c => c.id === id)).filter(Boolean);
  }, []);

  const [idx, setIdx] = useState(0);
  const [burstKey, setBurstKey] = useState(0);
  const timerRef = useRef(null);

  // Preload every character image
  useEffect(() => {
    CHARACTERS.forEach(c => { const i = new Image(); i.src = c.img; });
  }, []);

  // Cycle: every 3.8s the focus jumps to the next character
  useEffect(() => {
    timerRef.current = setTimeout(() => {
      setIdx(i => (i + 1) % featured.length);
      setBurstKey(k => k + 1);
    }, 3800);
    return () => clearTimeout(timerRef.current);
  }, [idx, featured.length]);

  const current = featured[idx];
  const prevIdx = (idx - 1 + featured.length) % featured.length;

  // Particle burst on transition
  const burstDots = useMemo(() => {
    const out = [];
    for (let i = 0; i < 14; i++) {
      const ang = (i / 14) * Math.PI * 2;
      const dist = 180 + Math.random() * 90;
      out.push({
        bx: Math.cos(ang) * dist + "px",
        by: Math.sin(ang) * dist + "px",
        delay: (Math.random() * 0.15).toFixed(2) + "s",
      });
    }
    return out;
  }, [burstKey]);

  return (
    <section className="hero">
      <div className="hero-copy">
        <div className="hero-tag"><span className="pulse" /> Sistemas Vivos · cohorte 2026</div>
        <h1>
          Vende con bots.
          <span className="stroke">Crece con cursos.</span>
        </h1>
        <p className="lead">
          Implementamos sistemas con bots, IA y CRM para empresas que ya venden… pero están perdiendo tiempo, seguimiento y clientes.
        </p>

        <div className="hero-actions">
          <a className="btn btn-primary" href="#bots">Quiero un bot <span className="arr">↗</span></a>
          <a className="btn btn-cyan" href="#cursos">Ver cursos <span className="arr">↗</span></a>
          <a className="btn btn-ghost" href="#cohorte">Aplicar al bootcamp</a>
        </div>

        <div className="hero-proof">
          <span><b>3</b><small>Tipos de bot</small></span>
          <span><b>5</b><small>Cursos de IA</small></span>
          <span><b>10</b><small>Cupo bootcamp</small></span>
          <span><b>+20 años</b><small>Resolviendo sistemas</small></span>
        </div>
      </div>

      <div className="hero-stage" style={{ "--hc": current.color }}>
        <div className="stage-frame" />

        {/* Stacked character slots — all in DOM, only one visible */}
        <div className="hero-stack">
          {featured.map((c, i) => {
            let state = "hidden";
            if (i === idx) state = "active";
            else if (i === prevIdx) state = "leaving";
            return (
              <div key={c.id} className={"hero-slot is-" + state} style={{ "--hc": c.color }}>
                <img className="hero-char-img" src={c.img} alt={c.name} draggable="false" loading="eager" />
              </div>
            );
          })}
        </div>

        {/* Particle burst on transition */}
        <div className="hero-burst go" key={"burst-" + burstKey}>
          {burstDots.map((d, i) => (
            <i key={i} style={{
              "--bx": d.bx, "--by": d.by,
              animationDelay: d.delay,
              background: current.color,
              boxShadow: `0 0 12px ${current.color}`,
            }} />
          ))}
        </div>

        <div className="tag-chip top" style={{ color: current.color }}>
          <span className="dot" style={{ background: current.color }} />
          <span><b>{current.name}</b><br /><small>{current.role}</small></span>
        </div>
        <div className="tag-chip mid" style={{ color: current.color }}>
          <span><b>{current.transform}</b><br /><small>{current.tool}</small></span>
        </div>
        <div className="tag-chip bot">
          <span><b>Sistema activo</b><br /><small style={{ color: "var(--ink-mute)" }}>WhatsApp · CRM · IA · VoIP</small></span>
        </div>

        <div className="stage-meter">
          {featured.map((c, i) => (
            <span key={c.id + i} className={i === idx ? "active" : ""} style={{ "--hc": c.color }} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;