Ken Burns Gallery

"use client";

import { useCallback, useEffect, useId, useRef, useState } from "react";
import { AnimatePresence, motion, useInView } from "motion/react";

type Tile = {
  src: string;
  title: string;
  category: string;
  caption: string;
  span: "portrait" | "landscape" | "square";
  pan: "pan-1" | "pan-2" | "pan-3" | "pan-4";
};

const TILES: Tile[] = [
  {
    src: "/img/gallery/g03.webp",
    title: "First Light, Cascade Ridge",
    category: "Landscape",
    caption: "6:14 a.m. — fog burning off the eastern face before the trailheads fill.",
    span: "portrait",
    pan: "pan-1",
  },
  {
    src: "/img/gallery/g11.webp",
    title: "Harbour Reflections",
    category: "Urban",
    caption: "Low tide doubles the waterfront skyline across still marina water.",
    span: "landscape",
    pan: "pan-2",
  },
  {
    src: "/img/gallery/g19.webp",
    title: "Ceramicist's Bench",
    category: "Still Life",
    caption: "Wheel-thrown stoneware drying between the morning and afternoon firings.",
    span: "square",
    pan: "pan-3",
  },
  {
    src: "/img/gallery/g07.webp",
    title: "Dune Grass, Golden Hour",
    category: "Landscape",
    caption: "Onshore wind combs the marram grass into long parallel lines.",
    span: "landscape",
    pan: "pan-4",
  },
  {
    src: "/img/gallery/g24.webp",
    title: "Stairwell No. 4",
    category: "Architecture",
    caption: "A cantilevered spiral shot straight up from the atrium floor.",
    span: "portrait",
    pan: "pan-2",
  },
  {
    src: "/img/gallery/g31.webp",
    title: "Espresso, Slow Pour",
    category: "Still Life",
    caption: "The crema settling seconds after the shot pulls at the roastery bar.",
    span: "square",
    pan: "pan-1",
  },
  {
    src: "/img/gallery/g15.webp",
    title: "Alpine Lake Crossing",
    category: "Landscape",
    caption: "A footbridge over glacial melt, water the colour of ground slate.",
    span: "landscape",
    pan: "pan-3",
  },
  {
    src: "/img/gallery/g28.webp",
    title: "Market Textiles",
    category: "Travel",
    caption: "Hand-dyed indigo bolts stacked at the Saturday cloth market.",
    span: "portrait",
    pan: "pan-4",
  },
  {
    src: "/img/gallery/g05.webp",
    title: "Rooftop, Blue Hour",
    category: "Urban",
    caption: "The last minutes before the streetlights outnumber the windows.",
    span: "landscape",
    pan: "pan-1",
  },
];

const SPAN_CLASS: Record<Tile["span"], string> = {
  portrait: "sm:row-span-2 aspect-[4/5]",
  landscape: "sm:col-span-2 aspect-[13/9]",
  square: "aspect-square",
};

function GalleryTile({
  tile,
  index,
  onOpen,
}: {
  tile: Tile;
  index: number;
  onOpen: (index: number) => void;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, margin: "-10% 0px" });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 26 }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 26 }}
      transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1], delay: (index % 3) * 0.08 }}
      className={`group relative overflow-hidden rounded-2xl ${SPAN_CLASS[tile.span]}`}
    >
      <button
        type="button"
        onClick={() => onOpen(index)}
        aria-label={`Open ${tile.title} in fullscreen viewer`}
        className="absolute inset-0 z-20 h-full w-full cursor-zoom-in rounded-2xl text-left outline-none ring-inset transition-shadow focus-visible:ring-2 focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400"
      >
        <span className="sr-only">{tile.caption}</span>
      </button>

      <div className="kb-frame absolute inset-0 overflow-hidden">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={tile.src}
          alt={`${tile.title} — ${tile.caption}`}
          loading="lazy"
          draggable={false}
          className={`kb-image kb-${tile.pan} h-full w-full select-none object-cover`}
        />
      </div>

      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-t from-slate-950/80 via-slate-950/10 to-transparent opacity-90 transition-opacity duration-500 group-hover:opacity-100"
      />

      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex flex-col gap-1 p-4 sm:p-5">
        <span className="inline-flex w-fit items-center rounded-full border border-white/25 bg-white/10 px-2.5 py-0.5 text-[11px] font-medium uppercase tracking-wider text-white/90 backdrop-blur-sm">
          {tile.category}
        </span>
        <h3 className="mt-1 translate-y-1 text-base font-semibold leading-tight text-white transition-transform duration-500 group-hover:translate-y-0 sm:text-lg">
          {tile.title}
        </h3>
        <p className="max-h-0 translate-y-2 overflow-hidden text-sm leading-snug text-white/80 opacity-0 transition-all duration-500 group-hover:max-h-24 group-hover:translate-y-0 group-hover:opacity-100">
          {tile.caption}
        </p>
      </div>
    </motion.div>
  );
}

export default function GalleryKenBurns() {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const closeRef = useRef<HTMLButtonElement>(null);
  const titleId = useId();

  const open = useCallback((index: number) => setOpenIndex(index), []);
  const close = useCallback(() => setOpenIndex(null), []);

  const go = useCallback((dir: 1 | -1) => {
    setOpenIndex((prev) => {
      if (prev === null) return prev;
      return (prev + dir + TILES.length) % TILES.length;
    });
  }, []);

  useEffect(() => {
    if (openIndex === null) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
      else if (e.key === "ArrowRight") go(1);
      else if (e.key === "ArrowLeft") go(-1);
    };
    window.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    closeRef.current?.focus();
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [openIndex, close, go]);

  const active = openIndex === null ? null : TILES[openIndex];

  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-slate-50 via-white to-slate-100 px-5 py-20 dark:from-zinc-950 dark:via-zinc-950 dark:to-black sm:px-8 sm:py-28">
      <style>{`
        @keyframes kbgal-pan-1 {
          0%   { transform: scale(1.08) translate3d(0%, 0%, 0); }
          50%  { transform: scale(1.22) translate3d(-3%, -3%, 0); }
          100% { transform: scale(1.08) translate3d(0%, 0%, 0); }
        }
        @keyframes kbgal-pan-2 {
          0%   { transform: scale(1.20) translate3d(-3%, 2%, 0); }
          50%  { transform: scale(1.08) translate3d(2%, -2%, 0); }
          100% { transform: scale(1.20) translate3d(-3%, 2%, 0); }
        }
        @keyframes kbgal-pan-3 {
          0%   { transform: scale(1.10) translate3d(2%, 2%, 0); }
          50%  { transform: scale(1.24) translate3d(-2%, -3%, 0); }
          100% { transform: scale(1.10) translate3d(2%, 2%, 0); }
        }
        @keyframes kbgal-pan-4 {
          0%   { transform: scale(1.18) translate3d(3%, -2%, 0); }
          50%  { transform: scale(1.06) translate3d(-2%, 2%, 0); }
          100% { transform: scale(1.18) translate3d(3%, -2%, 0); }
        }
        .kb-image {
          transform-origin: center;
          will-change: transform;
          animation-duration: 24s;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
        }
        .kb-pan-1 { animation-name: kbgal-pan-1; }
        .kb-pan-2 { animation-name: kbgal-pan-2; animation-duration: 28s; }
        .kb-pan-3 { animation-name: kbgal-pan-3; animation-duration: 26s; }
        .kb-pan-4 { animation-name: kbgal-pan-4; animation-duration: 30s; }
        .kb-lightbox-img {
          animation: kbgal-lightbox 20s ease-in-out infinite;
          transform-origin: center;
          will-change: transform;
        }
        @keyframes kbgal-lightbox {
          0%   { transform: scale(1.02); }
          50%  { transform: scale(1.10); }
          100% { transform: scale(1.02); }
        }
        @media (prefers-reduced-motion: reduce) {
          .kb-image, .kb-lightbox-img { animation: none !important; transform: scale(1.04) !important; }
        }
      `}</style>

      <div
        aria-hidden="true"
        className="pointer-events-none absolute -top-24 left-1/2 h-72 w-[42rem] max-w-full -translate-x-1/2 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-600/15"
      />

      <div className="relative mx-auto max-w-6xl">
        <header className="mx-auto mb-12 max-w-2xl text-center sm:mb-16">
          <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/70 px-3 py-1 text-xs font-medium uppercase tracking-widest text-indigo-600 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-indigo-400">
            <span className="h-1.5 w-1.5 rounded-full bg-indigo-500 dark:bg-indigo-400" />
            Field Notes
          </span>
          <h2 className="mt-5 text-balance text-3xl font-semibold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
            A year in motion, one frame at a time
          </h2>
          <p className="mt-4 text-pretty text-base leading-relaxed text-slate-600 dark:text-zinc-400">
            Nine photographs from the road, each drifting on a slow pan and zoom. Hover a tile for
            the story behind it, or open any frame for the full view.
          </p>
        </header>

        <div className="grid auto-rows-[minmax(0,1fr)] grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3">
          {TILES.map((tile, i) => (
            <GalleryTile key={tile.src} tile={tile} index={i} onOpen={open} />
          ))}
        </div>
      </div>

      <AnimatePresence>
        {active !== null && (
          <motion.div
            role="dialog"
            aria-modal="true"
            aria-labelledby={titleId}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.25 }}
            className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/90 p-4 backdrop-blur-md sm:p-8"
            onClick={close}
          >
            <motion.figure
              key={active.src}
              initial={{ scale: 0.94, opacity: 0, y: 12 }}
              animate={{ scale: 1, opacity: 1, y: 0 }}
              exit={{ scale: 0.96, opacity: 0, y: 12 }}
              transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
              className="relative w-full max-w-4xl overflow-hidden rounded-3xl bg-black shadow-2xl ring-1 ring-white/10"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="relative aspect-[16/10] w-full overflow-hidden">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={active.src}
                  alt={`${active.title} — ${active.caption}`}
                  loading="lazy"
                  draggable={false}
                  className="kb-lightbox-img h-full w-full select-none object-cover"
                />
                <div
                  aria-hidden="true"
                  className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"
                />
              </div>

              <figcaption className="flex flex-col gap-1 px-6 py-5 sm:px-8">
                <span className="text-[11px] font-medium uppercase tracking-widest text-indigo-400">
                  {active.category}
                </span>
                <h3 id={titleId} className="text-xl font-semibold text-white sm:text-2xl">
                  {active.title}
                </h3>
                <p className="text-sm leading-relaxed text-zinc-300">{active.caption}</p>
              </figcaption>

              <button
                type="button"
                ref={closeRef}
                onClick={close}
                aria-label="Close viewer"
                className="absolute right-4 top-4 z-10 inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white outline-none backdrop-blur transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400"
              >
                <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                  <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
                </svg>
              </button>

              <button
                type="button"
                onClick={() => go(-1)}
                aria-label="Previous photo"
                className="absolute left-3 top-[36%] z-10 inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white outline-none backdrop-blur transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400 sm:left-4"
              >
                <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                  <path d="M15 6l-6 6 6 6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
              <button
                type="button"
                onClick={() => go(1)}
                aria-label="Next photo"
                className="absolute right-3 top-[36%] z-10 inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white outline-none backdrop-blur transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400 sm:right-4"
              >
                <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                  <path d="M9 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </motion.figure>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}