import { createFileRoute } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import playground from "@/assets/gallery-playground.jpg";
import classroom from "@/assets/gallery-classroom.jpg";
import outdoor from "@/assets/gallery-outdoor.jpg";
import toys from "@/assets/gallery-toys.jpg";
import hero from "@/assets/hero-classroom.jpg";

export const Route = createFileRoute("/gallery")({
  head: () => ({
    meta: [
      { title: "Gallery — Little Stars Nursery School" },
      { name: "description", content: "A peek inside the Little Stars classrooms, playground and outdoor play areas in Ruimsig." },
      { property: "og:title", content: "Gallery — Little Stars" },
      { property: "og:description", content: "See our classrooms, playground and outdoor spaces." },
    ],
  }),
  component: Gallery,
});

const collageClassrooms = [
  { src: classroom, alt: "Sunny classroom interior" },
  { src: hero, alt: "Children playing inside" },
  { src: classroom, alt: "Bright learning space" },
  { src: toys, alt: "Wooden toys and crayons" },
];

const collageArt = [
  { src: toys, alt: "Wooden toys and crayons" },
  { src: outdoor, alt: "Shaded outdoor play area" },
  { src: classroom, alt: "Art and learning area" },
  { src: playground, alt: "Colorful playground with slides" },
];

const photos = [
  { src: playground, alt: "Colorful playground with slides", label: "Playground", rotate: "-rotate-2" },
  { src: outdoor, alt: "Shaded outdoor play area", label: "Fine Motor Skills", rotate: "rotate-2" },
  { src: hero, alt: "Children playing inside", label: "Gross Motor Skills", rotate: "-rotate-1" },
  { collage: collageClassrooms, label: "Cozy Classrooms", rotate: "rotate-1" },
  { collage: collageArt, label: "Art Corner", rotate: "-rotate-2" },
];

function Gallery() {
  return (
    <div className="min-h-screen flex flex-col">
      <SiteHeader />

      <section className="mx-auto max-w-6xl px-5 py-16 md:py-20 text-center">
        <span className="inline-block bg-coral/15 text-coral px-4 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider mb-5">
          A peek inside
        </span>
        <h1 className="font-display text-5xl md:text-6xl font-semibold leading-tight text-balance">
          A look around <span className="text-primary">Little Stars</span>.
        </h1>
        <p className="mt-5 text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
          Our school is warm, well-loved and full of sunshine. Come and visit in person — but here's a little preview.
        </p>
      </section>

      <section className="mx-auto max-w-6xl px-5 pb-20">
        <div className="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6">
          {photos.map((p, i) => (
            <figure
              key={i}
              className={`bg-card rounded-[28px] p-3 shadow-soft border border-border/50 ${p.rotate} hover:rotate-0 transition-transform ${p.collage ? "col-span-1 md:col-span-3" : "col-span-1 md:col-span-2"}`}
            >
              {p.collage ? (
                <div className="grid grid-cols-2 grid-rows-2 gap-2 w-full aspect-square rounded-[20px] overflow-hidden">
                  {p.collage.map((img, idx) => (
                    <img
                      key={idx}
                      src={img.src}
                      alt={img.alt}
                      loading="lazy"
                      className="w-full h-full object-cover"
                    />
                  ))}
                </div>
              ) : (
                <img
                  src={p.src}
                  alt={p.alt}
                  loading="lazy"
                  width={900}
                  height={900}
                  className="w-full aspect-square object-cover rounded-[20px]"
                />
              )}
              <figcaption className="text-center text-sm font-semibold text-foreground/80 pt-3 pb-1">{p.label}</figcaption>
            </figure>
          ))}
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}
