import { createFileRoute, Link } from "@tanstack/react-router";
import { ImageIcon } from "lucide-react";
import { PageHero } from "@/components/layout/PageHero";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/gallery")({
  head: () => ({
    meta: [
      { title: "Gallery | Nasheman Urdu Secondary School" },
      {
        name: "description",
        content:
          "Our gallery of events, celebrations, and campus life at Nasheman Urdu Secondary School is coming soon.",
      },
      { property: "og:title", content: "Gallery | Nasheman Urdu Secondary School" },
      {
        property: "og:description",
        content: "Photos and videos of school events, celebrations, and campus life — coming soon.",
      },
    ],
  }),
  component: GalleryPage,
});

function GalleryPage() {
  return (
    <>
      <PageHero
        title="Gallery"
        subtitle="Moments of learning, celebration, and community life at Nasheman."
      />

      <section className="bg-background py-24 sm:py-32">
        <div className="mx-auto max-w-2xl px-4 text-center sm:px-6">
          <span className="mx-auto grid h-20 w-20 place-items-center rounded-full bg-accent text-primary">
            <ImageIcon className="h-10 w-10" />
          </span>
          <h2 className="mt-8 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            Coming Soon
          </h2>
          <p className="mt-4 text-base leading-relaxed text-muted-foreground">
            We're putting together a collection of photos and videos from our events,
            celebrations, and campus life. Please check back soon.
          </p>
          <Button asChild size="lg" className="mt-8">
            <Link to="/">Back to Home</Link>
          </Button>
        </div>
      </section>
    </>
  );
}