import type { PublicGaleriaFoto } from '@/lib/funnel/public-queries';

type GaleriaTrabajosProps = {
  fotos: PublicGaleriaFoto[];
  nombreEmpresa: string;
};

// Galería de trabajos del reformista en su landing pública. Solo se muestra si
// el reformista ha subido fotos desde su panel.
export default function GaleriaTrabajos({ fotos, nombreEmpresa }: GaleriaTrabajosProps) {
  if (fotos.length === 0) return null;

  return (
    <section id="galeria" className="bg-gray-50 section" aria-label="Galería de trabajos">
      <div className="container">
        <div className="max-w-2xl mb-10 md:mb-14">
          <span
            className="badge mb-4"
            style={{ backgroundColor: 'var(--brand)', color: 'var(--brand-contrast)' }}
          >
            Nuestros trabajos
          </span>
          <h2 className="text-[clamp(1.75rem,4vw,2.75rem)] font-black tracking-tight text-black leading-tight">
            Reformas que ya hemos hecho
          </h2>
          <p className="text-gray-500 mt-3 leading-relaxed">
            Una muestra real del trabajo de {nombreEmpresa}. Calidad de acabados, plazos cumplidos.
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
          {fotos.map((f) => (
            <figure
              key={f.id}
              className="group relative aspect-[4/3] overflow-hidden rounded-xl bg-gray-100 border border-gray-200"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={f.url}
                alt={f.titulo ?? `Reforma de ${nombreEmpresa}`}
                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
              />
              {f.titulo && (
                <figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-sm font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  {f.titulo}
                </figcaption>
              )}
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}