// Gallery.jsx — Landing-Galería (white)
// Lee window.PROJECTS (definido en projects.jsx). Si está vacío, no renderiza.
function ProjectCard({ slug, name, cover }) {
  const [hover, setHover] = React.useState(false);
  const [coverOk, setCoverOk] = React.useState(true);
  const src = cover || `projects/${slug}/cover.jpg`;
  const showImage = coverOk;
  return (
    <a href={`projects/${slug}/`}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ cursor: 'pointer', textDecoration: 'none', color: 'inherit', display: 'block' }}>
      <div style={{
        height: 560, borderRadius: 4, overflow: 'hidden', position: 'relative',
        background: showImage
          ? `url(${src}) center/cover no-repeat`
          : `linear-gradient(150deg, var(--indigo-tint-30), var(--indigo-tint-15))`,
        boxShadow: 'var(--shadow-image)',
      }}>
        {/* Probe the cover so we can fall back to the gradient + name overlay
            if the file is missing. The img itself stays hidden — the visual
            comes from the background-image above. */}
        <img src={src} alt="" onError={() => setCoverOk(false)} style={{ display: 'none' }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: hover ? 'rgba(77,30,112,0.32)' : 'rgba(77,30,112,0)',
          transition: 'background .2s ease',
        }} />
        {!showImage && (
          <span style={{
            position: 'absolute', inset: 0, display: 'flex', alignItems: 'center',
            justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 28, color: 'var(--purple)', opacity: 0.5, whiteSpace: 'pre-line',
            textAlign: 'center',
          }}>{name}</span>
        )}
      </div>
      <div style={{ marginTop: 22 }}>
        <DashedRule width={120} />
        <p className="t-cta" style={{
          color: 'var(--teal)', whiteSpace: 'pre-line', margin: '12px 0 0',
          filter: 'drop-shadow(0px 3px 3px rgba(0,0,0,0.18))',
        }}>{name}</p>
      </div>
    </a>
  );
}

function Gallery() {
  const projects = (typeof window !== 'undefined' && window.PROJECTS) || [];
  if (projects.length === 0) return null;
  return (
    <section data-screen-label="Galería" style={{ padding: '140px 160px', position: 'relative', isolation: 'isolate', overflow: 'visible' }}>
      <BleedLayer bg="var(--white)" />
      <h2 className="t-display" style={{ color: 'var(--purple)', margin: '0 0 70px' }}>
        Galería de<br />Proyectos
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '70px 40px' }}>
        {projects.map(p => <ProjectCard key={p.slug} {...p} />)}
      </div>
    </section>
  );
}
window.Gallery = Gallery;