function Casos() {
  const casos = [
    { title: 'Mezcal Rupestre', meta: 'Identidad · 2025', wide: true, hue: '#2C1810', slug: 'mezcal-rupestre' },
    { title: 'Apex Group', meta: 'Identidad · 2025', hue: '#0D1B2A', slug: 'apex-group' },
    { title: 'Fitnepolis', meta: 'Identidad · 2025', hue: '#1A2E1A', slug: 'fitnepolis' },
  ];

  // Parallax on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('[data-parallax]');
    const onScroll = () => {
      els.forEach((el) => {
        const rect = el.getBoundingClientRect();
        const center = rect.top + rect.height / 2 - window.innerHeight / 2;
        const offset = center * -0.08;
        el.style.transform = `translateY(${offset}px) scale(1.12)`;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="casos" id="trabajo">
      <div className="casos__head">
        <div>
          <div className="eyebrow reveal" style={{ color: 'rgba(244,239,230,0.6)' }}>05 · Trabajo seleccionado</div>
          <h2 className="h-section reveal" style={{ marginTop: 24, '--delay': '100ms' }}>
            Manos<br/><span className="italic-display" style={{ color: 'var(--accent)' }}>jugadas.</span>
          </h2>
        </div>
        <p className="lede reveal" style={{ '--delay': '200ms' }}>
          Una selección de jugadas recientes con partners de tecnología, salud, retail y servicios profesionales.
        </p>
      </div>

      <div className="casos__grid">
        {casos.map((c, i) => (
          <a key={i} href={`projects/${c.slug}.html`} className={`caso reveal ${c.wide ? 'caso--wide' : ''}`} style={{ '--delay': `${i * 80}ms` }} data-hover>
            <div className="caso__media">
              <div className="caso__placeholder" style={{ '--placeholder-bg': c.hue }} data-parallax>
                <span className="caso__placeholder-label">{c.title.toUpperCase()} · IMG</span>
              </div>
              <div className="caso__overlay">
                <div>
                  <h3 className="caso__title">{c.title}</h3>
                  <div className="caso__meta">{c.meta}</div>
                </div>
                <div className="caso__arrow">↗</div>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
window.Casos = Casos;