// Hero.jsx — Hero navy a sangre con monograma iM grande
// IZQUIERDO: INTOCABLE. Solo se mejora el lado derecho y el fondo.
function Hero({ onCta, variant = 'sober', articlesCount = 0, worksCount = 0 }) {
  const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 });

  React.useEffect(() => {
    const onMove = (e) => {
      setMouse({
        x: e.clientX / window.innerWidth,
        y: e.clientY / window.innerHeight,
      });
    };
    window.addEventListener('mousemove', onMove, { passive: true });
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  if (variant === 'bold') {
    return (
      <section className="im-hero im-hero-bold">
        <div className="im-hero-pattern" aria-hidden="true"></div>
        {/* Canvas de red animada como fondo (bajo el iM y bajo el texto) */}
        <HeroCanvas mouse={mouse} mode="bg" />
        <div className="im-hero-im" aria-hidden="true">
          <span className="im-hero-i">i</span><span className="im-hero-m">M</span>
        </div>
        <div className="im-hero-bold-content">
          <span className="im-eyebrow im-eyebrow-onnavy">Personal blog · 2026</span>
          <h1 className="im-hero-title-bold">
            IA, CRM y<br />automatizaciones<br /><span className="im-hero-italic">— en castellano llano.</span>
          </h1>
          <p className="im-hero-lead-bold">Soy Isa Muñoz, vallisoletana de corazón y madrileña de adopción. Comparto lo que voy aprendiendo para personas que necesitan quitarse carga administrativa y centrarse en vender.


          </p>
          <div className="im-hero-actions">
            <button className="im-btn im-btn-primary-onnavy" onClick={onCta}>Leer artículos →</button>
            <button className="im-btn im-btn-ghost-onnavy" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>Contacto</button>
          </div>
        </div>
        <div className="im-hero-bold-stats">
          <div><span className="im-stat-num">{articlesCount}</span><span className="im-stat-lbl">artículos publicados</span></div>
          <div><span className="im-stat-num">{worksCount}</span><span className="im-stat-lbl">trabajos publicados</span></div>
        </div>
      </section>
    );
  }

  // sober — monograma grande sustituido por HeroCanvas
  return (
    <section className="im-hero im-hero-sober">
      <div className="im-hero-pattern" aria-hidden="true"></div>
      <div className="im-hero-sober-grid">
        {/* ── IZQUIERDO: INTOCABLE ── */}
        <div className="im-hero-sober-left">
          <span className="im-eyebrow im-eyebrow-onnavy">Personal blog · 2026</span>
          <h1 className="im-hero-title-sober">
            Casos reales<br />de IA, CRM y<br /><span className="im-hero-blue">automatización</span>.
          </h1>
          <p className="im-hero-lead-sober">
            Lo que monto para PYMES que necesitan quitarse carga administrativa
            y centrarse en lo que importa. Por <strong>Isa Muñoz</strong>.
          </p>
          <div className="im-hero-actions">
            <button className="im-btn im-btn-primary-onnavy" onClick={onCta}>Leer artículos →</button>
            <button className="im-btn im-btn-ghost-onnavy" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>Contacto</button>
          </div>
        </div>

        {/* ── DERECHO: visualización animada ── */}
        <div className="im-hero-sober-right im-hero-sober-right--canvas">
          <HeroCanvas mouse={mouse} mode="panel" />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;