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

function NosotrosApp() {
  // Reveal on scroll
  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();
  }, []);

  return (
    <>
      <SiteNav active="sobre-nosotros" />
      <main>
        {/* HERO con foto de fondo */}
        <section className="nos-hero has-photo">
          <img className="hero-photo-bg" src="assets/vetana%20sobre%20nosotros.jpg" alt="GALLOS MEDIA — El equipo dirigiendo un proyecto" fetchpriority="high" decoding="async" />
          <div className="container">
            <span className="sec-label reveal">— EL ESTUDIO</span>
            <h1 className="reveal">
              El gallo anuncia<br/>el amanecer.
            </h1>
            <p className="nos-hero-sub reveal">
              Nosotros anunciamos una nueva forma de contar historias.
            </p>
          </div>
        </section>

        {/* INTRO — manifiesto + pilares */}
        <section className="nos-intro">
          <div className="container nos-intro-grid">
            <div className="nos-body reveal">
              <p className="nos-lead">Somos un estudio creativo independiente. Unimos la <em>dirección cinematográfica</em> (cámara, color, sonido y edición) con las herramientas de IA que están redefiniendo cómo se cuenta una historia.</p>
              <p>No somos una agencia ni una productora más. Nos sentamos contigo, escuchamos tu historia y la dirigimos como si fuera nuestra, hasta convertirla en algo que emociona hoy y permanece mañana.</p>
            </div>

            <div className="reveal nos-values">
              <span className="sec-label nos-values-kicker">— CÓMO TRABAJAMOS</span>
              <ul className="nos-pillars">
                {[
                  ['01', 'Visión cinematográfica', 'Dirigimos cada proyecto como cine, con intención en cada cuadro.'],
                  ['02', 'Trato cercano', 'Te acompañamos de cerca en todo el proceso, de persona a persona.'],
                  ['03', 'Compromiso total', 'No entregamos hasta que la pieza esté a la altura de tu marca.'],
                  ['04', 'Innovación con criterio', 'Integramos lo último en IA con oficio y propósito.'],
                ].map(([n, t, d]) => (
                  <li key={n}>
                    <span className="np-num">{n}</span>
                    <div className="np-text">
                      <h3>{t}</h3>
                      <p>{d}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

        {/* MISIÓN / VISIÓN — banda roja */}
        <section className="nos-mv">
          <div className="container">
            <span className="sec-label nos-mv-kicker reveal">— LO QUE NOS MUEVE</span>
            <div className="nos-mv-grid">
              <div className="nos-mv-block reveal">
                <span className="nos-mv-idx" aria-hidden="true">01</span>
                <div className="ttl">Misión</div>
                <p>Producir contenido cinematográfico que las marcas necesitan hoy y van a presumir mañana. Cada proyecto busca ser, al mismo tiempo, una pieza con valor narrativo propio y una herramienta efectiva de comunicación.</p>
              </div>
              <div className="nos-mv-block reveal">
                <span className="nos-mv-idx" aria-hidden="true">02</span>
                <div className="ttl">Visión</div>
                <p>Convertirnos en el estudio de referencia para marcas que entienden el marketing como narrativa cinematográfica. Demostrar que la nueva generación de creadores no tiene que elegir entre velocidad y profundidad: puede entregar ambas.</p>
              </div>
            </div>
          </div>
        </section>

        {/* CTA + CONTACTO */}
        <section className="nos-cta contact">
          <div className="container">
            <span className="sec-label reveal">— EMPECEMOS</span>
            <h2 className="reveal" style={{marginTop:20}}>¿Tienes una historia<br/>que contar?</h2>
            <p className="nos-cta-sub reveal">Escríbenos. Respondemos en menos de 24 horas.</p>
            <div style={{marginTop:48}}>
              <ContactDirect center />
            </div>
          </div>
        </section>
      </main>
      <Footer home="/" />
    </>
  );
}

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