import type { Metadata } from "next";
import Link from "next/link";
import { Icon } from "@/components/icons";
import { PhotoGallery } from "@/components/photo-gallery";
import { gallery } from "@/data/site";

export const metadata: Metadata = {
  title: "Photo Gallery",
  description:
    "Photo gallery from Vision Aid Foundation eye camps and community programmes.",
};

export default function PhotoGalleryPage() {
  return (
    <>
      <section className="page-hero">
        <div className="shell page-hero-inner">
          <div>
            <span className="eyebrow light">Photo gallery</span>
            <h1>From the field to full display.</h1>
          </div>
          <p>
            Click any photograph to open the full-screen viewer. Use the arrows
            or keyboard to move between images.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="gallery-toolbar">
            <Link className="text-link" href="/gallery">
              <Icon name="arrow" className="back-arrow" /> Back to gallery
            </Link>
            <Link className="text-link" href="/gallery/videos">
              Video gallery <Icon name="arrow" />
            </Link>
          </div>
          <PhotoGallery photos={gallery} columns="wide" />
        </div>
      </section>
    </>
  );
}