// Hero.jsx
const { useRef: useHeroRef, useEffect: useHeroEffect } = React;

function Hero() {
  const ref = useHeroRef();
  const canvasRef = useHeroRef();

  useReveal(ref);

  // Particle canvas
  useHeroEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let W, H;

    const resize = () => {
      W = canvas.width = canvas.offsetWidth;
      H = canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener('resize', resize);

    const particles = Array.from({ length: 48 }, () => ({
      x: Math.random(),
      y: Math.random(),
      r: 1.5 + Math.random() * 2.5,
      vx: (Math.random() - 0.5) * 0.0003,
      vy: -0.0003 - Math.random() * 0.0003,
      alpha: 0.15 + Math.random() * 0.35,
    }));

    const draw = () => {
      ctx.clearRect(0, 0, W, H);
      particles.forEach(p => {
        p.x += p.vx;
        p.y += p.vy;
        if (p.y < -0.05) { p.y = 1.05; p.x = Math.random(); }
        if (p.x < 0) p.x = 1;
        if (p.x > 1) p.x = 0;
        ctx.beginPath();
        ctx.arc(p.x * W, p.y * H, p.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(217,123,150,${p.alpha})`;
        ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    };
    draw();

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

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  const kpis = [
    { val: '+10 anos', lbl: 'Atleta profissional' },
    { val: 'Corpo · Mente · Espírito', lbl: 'Método completo integrado' },
    { val: 'Brasil & EUA', lbl: 'Mulheres transformadas' },
  ];

  return (
    <section className="hero-section" ref={ref} id="hero">
      <canvas
        ref={canvasRef}
        className="hero-canvas"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}
      />
      <div className="container">
        <div className="hero-inner">

          {/* Left — copy */}
          <div>
            <div className="hero-chip reveal">
              <div style={{
                width: 6, height: 6, borderRadius: '50%',
                background: 'var(--accent)', flexShrink: 0,
              }} />
              <span>Método Conectadas Fitness — Taty Vaillant</span>
            </div>

            <h1 className="hero-title reveal rev-d1">
              Você não precisa de <s>mais uma dieta</s>.{' '}
              Você precisa de <em>transformação real</em> de dentro para fora.
            </h1>

            <p className="hero-lede reveal rev-d2">
              O método Conectadas Fitness une corpo, mente e identidade para que você
              finalmente sustente os resultados. Porque quando você entende quem você é,
              nada te para.
            </p>

            <div className="hero-ctas reveal rev-d3">
              <button className="btn-p" onClick={() => scrollTo('cta')}>
                Quero me destravar agora →
              </button>
              <button className="btn-s" onClick={() => scrollTo('metodo')}>
                Conhecer o método
              </button>
            </div>

            <div className="hero-kpis reveal rev-d4">
              {kpis.map((k, i) => (
                <div key={i} className="hero-kpi">
                  <span className="hero-kpi-val">{k.val}</span>
                  <span className="hero-kpi-lbl">{k.lbl}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right — photo */}
          <div className="hero-visual reveal rev-d2">
            <div className="hero-bloom" id="hero-bloom" />
            <div className="hero-photo-box">
              <img
                src={(window.__resources && window.__resources['heroImg']) || 'assets/taty-vaillant.jpg'}
                alt="Taty Vaillant — Personal Trainer e Atleta Profissional"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
              />
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });