/* GALLOS MEDIA — Página "Servicios" (exclusiva) */

function ServiciosApp() {
  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 -8% 0px', threshold: 0.05 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const services = [
    { num: '01', title: 'PRODUCCIONES CINEMATOGRÁFICAS CON IA',
      body: 'Producciones con calidad cinematográfica impulsada por IA. Una propuesta visual de alto nivel respaldada por nuestro trabajo.',
      tags: ['Generativa', 'Cinematográfico', 'Dirección', 'Postproducción'] },
    { num: '02', title: 'PÁGINAS WEB',
      body: 'Sitios completamente personalizables, diseñados y desarrollados a la medida de tu marca. Preparados para crecer contigo.',
      tags: ['Diseño', 'Desarrollo', 'UX/UI', 'SEO'] },
    { num: '03', title: 'CONTENIDO VISUAL',
      body: 'Imágenes, infografías y piezas visuales con dirección de arte. Comunicación clara que refuerza la identidad de tu marca.',
      tags: ['Fotografía', 'Dirección de arte', 'Producto', 'Redes'] },
    { num: '04', title: 'BRAND IDENTITY',
      body: 'Construimos la identidad visual de tu marca: logo, paleta de colores, tipografía y piezas para redes. Una imagen coherente que se reconoce a la primera.',
      tags: ['Identidad', 'Logo', 'Carrusel', 'Guía de marca', 'Paleta'] },
  ];

  const proceso = [
    { num: '01', title: 'Escuchamos', body: 'Entendemos la marca, el objetivo y la historia que hay detrás.' },
    { num: '02', title: 'Dirigimos', body: 'Concepto, guion y dirección. Cada cuadro se decide con intención.' },
    { num: '03', title: 'Entregamos', body: 'Cada pieza con acabado profesional, optimizada para destacar en cualquier plataforma.' },
  ];

  return (
    <>
      <SiteNav active="servicios" />
      <main>
        {/* HERO con foto de fondo */}
        <section className="cat-hero has-photo">
          <img className="hero-photo-bg" src="assets/ventana%20servicios.jpg" alt="GALLOS MEDIA — Sala de color y postproducción" fetchpriority="high" decoding="async" />
          <div className="container">
            <span className="sec-label reveal">— LO QUE HACEMOS</span>
            <h1 className="reveal">Le damos un giro<br/>a tus historias.</h1>
            <p className="reveal">
              No hacemos anuncios: creamos. Video con IA, páginas web,
              contenido audiovisual e identidad de marca, todo con una misma visión.
            </p>
          </div>
        </section>

        {/* SERVICIOS */}
        <section className="services" style={{ paddingBottom: 'clamp(40px, 7vh, 90px)' }}>
          <div className="container">
            <div className="services-grid">
              {services.map((s, i) => (
                <div className="service reveal" key={s.num} style={{ transitionDelay: `${i*70}ms` }}>
                  <div className="num">{s.num}</div>
                  <h3>{s.title}</h3>
                  <p>{s.body}</p>
                  <div className="tags">
                    {s.tags.map(t => <span key={t}>{t}</span>)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* PROCESO */}
        <section className="proceso section-pad">
          <div className="container">
            <div className="sec-head reveal">
              <div className="lhs">
                <span className="sec-label">CÓMO TRABAJAMOS</span>
                <h2 className="display display-md" style={{ marginTop: 24 }}>Del concepto<br/>a la entrega.</h2>
              </div>
              <div className="rhs">
                Un proceso corto y directo. Sin juntas eternas: claridad, dirección y piezas listas para salir al mundo.
              </div>
            </div>

            <div className="proceso-grid">
              {proceso.map((p, i) => (
                <div className="proceso-step reveal" key={p.num} style={{ transitionDelay: `${i*80}ms` }}>
                  <div className="ps-num">{p.num}</div>
                  <h3>{p.title}</h3>
                  <p>{p.body}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA + CONTACTO (banda oscura) */}
        <section className="srv-cta contact">
          <div className="container">
            <span className="sec-label reveal">— EMPECEMOS</span>
            <h2 className="reveal" style={{ marginTop: 20 }}>¿Listos para<br/>dirigir tu historia?</h2>
            <p className="srv-cta-sub reveal">Escríbenos. Respondemos en menos de 24 horas.</p>
            <div style={{ marginTop: 48 }}>
              <ContactDirect center />
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

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