import Link from "next/link";

type CommunityPhoto = {
  id: string;
  src: string;
  alt: string;
  caption: string;
  span: string;
};

const communityPhotos: CommunityPhoto[] = [
  {
    id: "community-1",
    src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80",
    alt: "Equipo colaborando en una mesa de trabajo",
    caption: "Taller colaborativo",
    span: "md:col-span-2 md:row-span-2",
  },
  {
    id: "community-2",
    src: "https://images.unsplash.com/photo-1528901166007-3784c7dd3653?auto=format&fit=crop&w=1200&q=80",
    alt: "Grupo de estudiantes revisando material",
    caption: "Cohorte activa",
    span: "md:col-span-2",
  },
  {
    id: "community-3",
    src: "https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1200&q=80",
    alt: "Conversación profesional durante evento",
    caption: "Networking legal",
    span: "",
  },
  {
    id: "community-4",
    src: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1200&q=80",
    alt: "Sesión en auditorio con ponentes",
    caption: "Masterclass",
    span: "",
  },
  {
    id: "community-5",
    src: "https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=1200&q=80",
    alt: "Personas participando en una dinámica",
    caption: "Práctica guiada",
    span: "md:col-span-2",
  },
  {
    id: "community-6",
    src: "https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&q=80",
    alt: "Estudiantes en jornada formativa",
    caption: "Comunidad ACVE",
    span: "",
  },
];

export default function ComunidadPage() {
  return (
    <div className="acve-page">
      <section className="acve-panel acve-section-base">
        <p className="acve-pill mb-4 w-fit">Comunidad ACVE</p>
        <h1 className="acve-heading text-4xl md:text-5xl">Red de práctica y colaboración</h1>
        <p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
          Collage visual temporal con fotos de referencia para representar talleres, networking y actividades colaborativas.
        </p>

        <div className="mt-8 grid auto-rows-[150px] grid-cols-2 gap-3 md:auto-rows-[170px] md:grid-cols-4">
          {communityPhotos.map((photo) => (
            <figure
              key={photo.id}
              className={`group relative overflow-hidden rounded-2xl border border-border/80 bg-card shadow-sm ${photo.span}`}
            >
              <img alt={photo.alt} className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]" loading="lazy" src={photo.src} />
              <figcaption className="absolute inset-x-2 bottom-2 rounded-lg bg-black/55 px-2 py-1 text-xs font-semibold text-white">
                {photo.caption}
              </figcaption>
            </figure>
          ))}
        </div>

        <p className="mt-5 text-sm font-semibold text-primary">Estas imágenes son temporales y se podrán reemplazar por contenido oficial.</p>
        <Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
          Regresar al inicio
        </Link>
      </section>
    </div>
  );
}