const Hero = () => {
  const heroRef = React.useRef(null);
  const [mouse, setMouse] = React.useState({x: 50, y: 50});

  React.useEffect(() => {
    const h = (e) => {
      if (!heroRef.current) return;
      const r = heroRef.current.getBoundingClientRect();
      setMouse({
        x: ((e.clientX - r.left) / r.width) * 100,
        y: ((e.clientY - r.top) / r.height) * 100
      });
    };
    window.addEventListener('mousemove', h);
    return () => window.removeEventListener('mousemove', h);
  }, []);

  return (
    <section className="hero" ref={heroRef} id="top">
      <div className="hero-bg" style={{
        background: `radial-gradient(700px circle at ${mouse.x}% ${mouse.y}%, rgba(74,204,192,.14), transparent 60%)`
      }}/>
      <div className="container">
        <div className="hero-eyebrow">
          <span className="hero-tag"><span className="live"/>studio · são paulo · remoto</span>
          <span className="hero-tag">v2026 · rebranding</span>
          <span className="hero-tag">⬡ 7 disciplinas · 1 time</span>
        </div>

        <h1>
          <span className="line">Produtos digitais</span>
          <span className="line">que <em className="grad">funcionam</em> <span className="amp">&</span></span>
          <span className="line">marcas que <em className="grad">vendem</em>.</span>
        </h1>

        <p className="hero-sub">
          Somos um studio de produto digital. Desenhamos, programamos e lançamos sites, softwares sob-demanda, SaaS, automações de WhatsApp, e-commerces e toda a identidade que vem junto — do branding à arte diária para redes sociais.
        </p>

        <div className="hero-meta">
          <div className="cell">
            <div className="label">Entregas / ano</div>
            <div className="value grad-text">60+</div>
          </div>
          <div className="cell">
            <div className="label">Produto carro-chefe</div>
            <div className="value">BBOX Connect</div>
          </div>
          <div className="cell">
            <div className="label">Setup médio</div>
            <div className="value">1 semana</div>
          </div>
          <div className="cta-cell">
            <a href="#contact" className="btn-primary">
              Agendar uma conversa
              <svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M3 9L9 3M9 3H4M9 3V8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
            </a>
          </div>
        </div>

        <div className="marquee">
          <div className="marquee-track">
            <span>⬡ Websites</span><span>⬡ Software sob-demanda</span><span>⬡ SaaS</span><span>⬡ Automação WhatsApp</span><span>⬡ E-commerce</span><span>⬡ Branding</span><span>⬡ Social</span>
            <span>⬡ Websites</span><span>⬡ Software sob-demanda</span><span>⬡ SaaS</span><span>⬡ Automação WhatsApp</span><span>⬡ E-commerce</span><span>⬡ Branding</span><span>⬡ Social</span>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;