import type { Metadata } from "next";
import Reveal from "@/components/Reveal";
import AppointmentInvite from "@/components/AppointmentInvite";
import GalleryExplorer from "@/components/GalleryExplorer";
import { archiveEvents, eventImages, eventImagesFull, archiveCount } from "@/content/archive";

export const metadata: Metadata = {
  title: "Gallery, The Genesis Archive",
  description:
    "The visual archive of Genesis Global: exhibitions, private events, acquisitions and the collection, photographed between 2013 and 2017.",
};

export default function GalleryPage() {
  const events = archiveEvents.map((e) => ({
    ...e,
    images: eventImages(e.key),
    full: eventImagesFull(e.key),
  }));

  return (
    <>
      <Reveal />

      <section className="vitrine" style={{ paddingTop: "clamp(150px, 20vh, 230px)", paddingBottom: "clamp(60px, 8vw, 110px)" }}>
        <div className="wrap">
          <p className="eyebrow rv on">The Genesis Archive</p>
          <h1 className="h1 rv on d1" style={{ maxWidth: "14ch" }}>
            A house, on the record
          </h1>
          <p className="lead rv on d2" style={{ marginTop: 26, maxWidth: "58ch" }}>
            {`${archiveCount()} photographs from the house's own archive, 2013 to 2017: exhibitions, private viewings, acquisitions and the collection itself. Evidence, not decoration.`}
          </p>
        </div>
      </section>

      <section className="section room" aria-label="Archive explorer">
        <div className="wrap">
          <GalleryExplorer events={events} />
        </div>
      </section>

      <AppointmentInvite heading="See the collection in person" />
    </>
  );
}