// hero.jsx — Hero full-bleed con gradient mesh + partículas, reactivo al mouse

function Hero({ variant = 'fullbleed' }) {
  const heroRef = React.useRef(null);
  const meshRefA = React.useRef(null);
  const meshRefB = React.useRef(null);
  const meshRefC = React.useRef(null);
  const canvasRef = React.useRef(null);
  const [revealed, setRevealed] = React.useState(false);

  // Reveal on mount
  React.useEffect(() => {
    const t = setTimeout(() => setRevealed(true), 80);
    return () => clearTimeout(t);
  }, []);

  // Mouse parallax for mesh
  React.useEffect(() => {
    if (variant === 'minimal') return;
    const onMove = (e) => {
      const w = window.innerWidth;
      const h = window.innerHeight;
      const mx = (e.clientX / w - 0.5) * 2; // -1..1
      const my = (e.clientY / h - 0.5) * 2;
      if (meshRefA.current) meshRefA.current.style.transform = `translate(${mx * 40}px, ${my * 40}px)`;
      if (meshRefB.current) meshRefB.current.style.transform = `translate(${mx * -60}px, ${my * -30}px)`;
      if (meshRefC.current) meshRefC.current.style.transform = `translate(${mx * 30}px, ${my * -45}px)`;
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, [variant]);

  // Particle system
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let particles = [];
    let w, h, dpr;

    const resize = () => {
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      w = canvas.offsetWidth;
      h = canvas.offsetHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.scale(dpr, dpr);
      const count = Math.min(80, Math.floor(w * h / 22000));
      particles = Array.from({ length: count }, () => ({
        x: Math.random() * w,
        y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.18,
        vy: (Math.random() - 0.5) * 0.18,
        r: Math.random() * 1.4 + 0.4,
        a: Math.random() * 0.4 + 0.15
      }));
    };
    resize();
    window.addEventListener('resize', resize);

    const mouse = { x: -9999, y: -9999 };
    const onMove = (e) => {
      const rect = canvas.getBoundingClientRect();
      mouse.x = e.clientX - rect.left;
      mouse.y = e.clientY - rect.top;
    };
    window.addEventListener('mousemove', onMove);

    const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#10B981';

    const tick = () => {
      ctx.clearRect(0, 0, w, h);
      // Particles
      particles.forEach((p) => {
        // Drift
        p.x += p.vx;
        p.y += p.vy;
        if (p.x < 0) p.x = w;
        if (p.x > w) p.x = 0;
        if (p.y < 0) p.y = h;
        if (p.y > h) p.y = 0;

        // Mouse repulse (subtle)
        const dx = p.x - mouse.x;
        const dy = p.y - mouse.y;
        const d2 = dx * dx + dy * dy;
        if (d2 < 14400) {
          const d = Math.sqrt(d2);
          const f = (1 - d / 120) * 0.6;
          p.x += dx / d * f;
          p.y += dy / d * f;
        }

        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(240, 253, 244, ${p.a})`;
        ctx.fill();
      });

      // Connecting lines between close particles
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const a = particles[i],b = particles[j];
          const dx = a.x - b.x,dy = a.y - b.y;
          const d2 = dx * dx + dy * dy;
          if (d2 < 12000) {
            const d = Math.sqrt(d2);
            const alpha = (1 - d / 110) * 0.16;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.strokeStyle = `rgba(240, 253, 244, ${alpha})`;
            ctx.lineWidth = 0.6;
            ctx.stroke();
          }
        }
      }

      raf = requestAnimationFrame(tick);
    };
    tick();

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
      window.removeEventListener('mousemove', onMove);
    };
  }, []);

  const titleByVariant = {
    fullbleed:
    <>
        Inteligencia<br />
        <em>aplicada</em> al<br />
        <span className="accent">software.</span>
      </>,

    split:
    <>
        Inteligencia<br /><em style={{ padding: "0px 0px 0px 20px" }}>aplicada</em>.
      </>,

    minimal:
    <>
        Inteligencia <em>aplicada</em>.
      </>

  };

  return (
    <section className="hero" data-variant={variant} ref={heroRef}>
      <div className="hero-bg">
        <div className="mesh mesh-a" ref={meshRefA} />
        <div className="mesh mesh-b" ref={meshRefB} />
        <div className="mesh mesh-c" ref={meshRefC} />
      </div>
      <canvas ref={canvasRef} className="particles" />
      <div className="grid-overlay" />

      <div className="shell hero-inner">
        {variant === 'split' ?
        <>
            <div>
              <div className={`hero-eyebrow-wrap reveal ${revealed ? 'in' : ''}`} style={{ display: 'inline-block', transitionDelay: '0ms' }}>
                <div className="hero-eyebrow">
                  <span className="pulse" /> Talos Labs IA · Buenos Aires
                </div>
              </div>
              <h1 className={`hero-title reveal ${revealed ? 'in' : ''}`} style={{ transitionDelay: '120ms', letterSpacing: "-2.804px", padding: "0px 0px 0px 20px" }}>
                {titleByVariant.split}
              </h1>
              <p className={`hero-sub reveal ${revealed ? 'in' : ''}`} style={{ transitionDelay: '240ms', padding: "0px", margin: "28px 0px 0px 20px" }}>Construimos sistemas y páginas a medida para que  emprendedores y monotributistas dejen de improvisar y empiecen a operar como una empresa de verdad.

            </p>
              <div className={`hero-cta reveal ${revealed ? 'in' : ''}`} style={{ transitionDelay: '360ms', padding: "20px" }}>
                <a href="#productos" className="btn btn-primary">Ver productos <Icon.Arrow /></a>
                <a href="#contacto" className="btn btn-ghost">Hablar con nosotros</a>
              </div>
            </div>
            <div className={`reveal ${revealed ? 'in' : ''}`} style={{ transitionDelay: '480ms' }}>
              <Mockups.MockHero />
            </div>
            <HeroMeta delay={revealed ? 600 : 0} />
          </> :

        <>
            <div className={`hero-eyebrow-wrap reveal ${revealed ? 'in' : ''}`} style={{ display: variant === 'minimal' ? 'flex' : 'inline-block', transitionDelay: '0ms' }}>
              <div className="hero-eyebrow">
                <span className="pulse" /> Talos Labs IA · Software a medida
              </div>
            </div>
            <h1 className={`hero-title reveal ${revealed ? 'in' : ''}`} style={{ transitionDelay: '120ms' }}>
              {titleByVariant[variant]}
            </h1>
            <p className={`hero-sub reveal ${revealed ? 'in' : ''}`} style={{ transitionDelay: '240ms' }}>
              Sistemas y páginas que se adaptan a cómo trabajás. Cinco productos en producción y la posibilidad de construir lo tuyo, hecho a medida.
            </p>
            <div className={`hero-cta reveal ${revealed ? 'in' : ''}`} style={{ transitionDelay: '360ms' }}>
              <a href="#productos" className="btn btn-primary">Ver productos <Icon.Arrow /></a>
              <a href="#contacto" className="btn btn-ghost">Pedir desarrollo a medida</a>
            </div>
            <HeroMeta delay={revealed ? 480 : 0} />
          </>
        }
      </div>
    </section>);

}

function HeroMeta({ delay }) {
  return (
    <div className="hero-meta reveal-stagger" style={{ '--d': delay + 'ms' }}>
      {/* The reveal-stagger class needs a parent with .in for animation */}
      <div>
        <span className="num">5<span className="plus">+</span></span>
        <div className="lbl">Productos en producción</div>
      </div>
      <div>
        <span className="num">100<span className="plus">%</span></span>
        <div className="lbl">A medida del cliente</div>
      </div>
      <div>
        <span className="num">24<span className="plus">/7</span></span>
        <div className="lbl">Acceso desde cualquier lugar</div>
      </div>
      <div>
        <span className="num">0</span>
        <div className="lbl">Excusas para no digitalizarse</div>
      </div>
    </div>);

}

window.Hero = Hero;