/* GALLOS MEDIA — Página "Contacto" (con fondo de polvo interactivo) */

function ContactoApp() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { rootMargin: '0px 0px -6% 0px', threshold: 0.05 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <SiteNav active="contacto" />
      <main>
        <section className="ct-hero has-photo">
          <img className="hero-photo-bg" src="assets/ventana%20contacto.jpg" alt="GALLOS MEDIA — Reunión con el equipo" fetchpriority="high" decoding="async" />
          <DustField />
          <div className="container ct-hero-inner">
            <span className="sec-label reveal">— HABLEMOS</span>
            <h1 className="reveal">
              Toda gran pieza<br/>empieza con un <span className="red">hola.</span>
            </h1>
            <p className="ct-lead reveal">
              Una idea, un brief o solo una corazonada. Cuéntanos y la dirigimos contigo.
              Respondemos en menos de 24 horas.
            </p>

            <div className="reveal" style={{ marginTop: 44 }}>
              <ContactDirect />
            </div>

            <div className="ct-social reveal">
              <a href="https://wa.me/526646961560?text=Hola%20GALLOS%20MEDIA%2C%20me%20interesa%20platicar%20sobre%20un%20proyecto." target="_blank" rel="noreferrer">WhatsApp <span className="arr">↗</span></a>
              <a href="https://www.instagram.com/gallos.media/" target="_blank" rel="noreferrer">Instagram <span className="arr">↗</span></a>
              <a href="https://www.tiktok.com/@gallos.media" target="_blank" rel="noreferrer">TikTok <span className="arr">↗</span></a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<ContactoApp />);