/* GALLOS MEDIA — Catálogo completo (todos los proyectos) */

function CatalogApp() {
  const [open, setOpen] = React.useState(null);
  const projects = window.GM_PROJECTS || [];

  // 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="proyectos" />
      <main>
        <section className="cat-hero">
          <div className="container">
            <span className="sec-label reveal">NUESTRO ARCHIVO</span>
            <h1 className="reveal">Más de<br/>nuestras historias.</h1>
            <p className="reveal">
              Una colección en constante crecimiento de proyectos de GALLOS MEDIA,
              entre dirección cinematográfica, branding, CGI y narrativa de marca.
            </p>
          </div>
        </section>

        <section className="section-pad" style={{ paddingTop: 0 }}>
          <div className="container">
            <div className="catalog-grid">
              {projects.map((p, i) => (
                <article
                  className="cat-card reveal"
                  key={p.slug}
                  style={{ transitionDelay: `${(i % 3) * 70}ms` }}
                  onClick={() => setOpen(p)}
                >
                  <div className="thumb">
                    <ProjectCarousel frames={p.frames} alt={p.title} interval={4200} />
                    <div className="grain-overlay"></div>
                    <div className="num">{String(i + 1).padStart(2, '0')}</div>
                    <button className="expand" aria-label="Ampliar proyecto"><gmIcons.arrow /></button>
                  </div>
                  <div className="meta">
                    <h3>{p.title}</h3>
                    {p.synopsis && <p className="synopsis">{p.synopsis}</p>}
                    <div className="ymeta">{p.year} · {p.genre}</div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      </main>
      <Footer home="/" />
      <ProjectLightbox project={open} onClose={() => setOpen(null)} />
    </>
  );
}

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