import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { Icon } from "@/components/icons";
import { gallery, videos } from "@/data/site";

export const metadata: Metadata = {
  title: "Gallery",
  description:
    "Photo and video galleries from Vision Aid Foundation programmes and field work.",
};

export default function GalleryPage() {
  return (
    <>
      <section className="page-hero page-hero-photo">
        <Image
          className="page-hero-image"
          src="/hero/cataract-patients.jpg"
          alt="Patients after cataract operations supported by Vision Aid Foundation"
          fill
          priority
          sizes="100vw"
        />
        <div className="page-hero-shade" />
        <div className="shell page-hero-inner">
          <div>
            <span className="eyebrow light">Media centre</span>
            <h1>Gallery</h1>
          </div>
          <p>
            Field photographs and video records from Vision Aid Foundation
            programmes across Bangladesh.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell media-hub-grid">
          <Link className="media-hub-card" href="/gallery/photos">
            <Image
              src="/gallery/vaf-5.jpg"
              alt=""
              width={720}
              height={480}
              aria-hidden="true"
            />
            <div>
              <span>Photo gallery</span>
              <h2>{gallery.length} photographs</h2>
              <p>Click any image to view the full display.</p>
              <strong>
                Open photos <Icon name="arrow" />
              </strong>
            </div>
          </Link>
          <Link className="media-hub-card" href="/gallery/videos">
            <Image
              src="/hero/women-patients.jpg"
              alt=""
              width={720}
              height={480}
              aria-hidden="true"
            />
            <div>
              <span>Video gallery</span>
              <h2>
                {videos.length > 0
                  ? `${videos.length} videos`
                  : "Videos coming soon"}
              </h2>
              <p>
                {videos.length > 0
                  ? "Watch programme and field films."
                  : "No verified video files are available yet."}
              </p>
              <strong>
                Open videos <Icon name="arrow" />
              </strong>
            </div>
          </Link>
        </div>
      </section>
    </>
  );
}