Index Overlay Gallery

"use client";

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

type Shot = {
  src: string;
  title: string;
  category: string;
  location: string;
  span: "tall" | "wide" | "square";
};

const SHOTS: Shot[] = [
  {
    src: "/img/gallery/g03.webp",
    title: "Salt Flats at First Light",
    category: "Landscape",
    location: "Uyuni, Bolivia",
    span: "tall",
  },
  {
    src: "/img/gallery/g11.webp",
    title: "Concrete & Fog",
    category: "Architecture",
    location: "Rotterdam, NL",
    span: "wide",
  },
  {
    src: "/img/gallery/g07.webp",
    title: "Vendor, Morning Market",
    category: "Portrait",
    location: "Marrakech, MA",
    span: "square",
  },
  {
    src: "/img/gallery/g19.webp",
    title: "Ridgeline Traverse",
    category: "Landscape",
    location: "Dolomites, IT",
    span: "wide",
  },
  {
    src: "/img/gallery/g24.webp",
    title: "Neon After Rain",
    category: "Street",
    location: "Osaka, JP",
    span: "tall",
  },
  {
    src: "/img/gallery/g02.webp",
    title: "The Reading Room",
    category: "Interior",
    location: "Lisbon, PT",
    span: "square",
  },
  {
    src: "/img/gallery/g30.webp",
    title: "Dune Shadows",
    category: "Landscape",
    location: "Sossusvlei, NA",
    span: "wide",
  },
  {
    src: "/img/gallery/g15.webp",
    title: "Weaver's Hands",
    category: "Documentary",
    location: "Oaxaca, MX",
    span: "tall",
  },
  {
    src: "/img/gallery/g28.webp",
    title: "Glasshouse, Section 4",
    category: "Architecture",
    location: "Copenhagen, DK",
    span: "square",
  },
];

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

function Tile({
  shot,
  index,
  onOpen,
}: {
  shot: Shot;
  index: number;
  onOpen: (i: number) => void;
}) {
  const ref = useRef<HTMLButtonElement>(null);
  const inView = useInView(ref, { once: true, margin: "-12% 0px" });
  const reduce = useReducedMotion();
  const label = String(index + 1).padStart(2, "0");

  return (
    <motion.button
      ref={ref}
      type="button"
      onClick={() => onOpen(index)}
      initial={reduce ? false : { opacity: 0, y: 28 }}
      animate={inView ? { opacity: 1, y: 0 } : undefined}
      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1], delay: (index % 3) * 0.06 }}
      aria-label={`Open image ${label}: ${shot.title}, ${shot.location}`}
      className={[
        "group relative isolate overflow-hidden rounded-2xl text-left",
        "bg-slate-200 dark:bg-zinc-800",
        "ring-1 ring-slate-900/10 dark:ring-white/10",
        "shadow-sm transition-shadow duration-500 hover:shadow-xl",
        "focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-zinc-950",
        SPAN_CLASS[shot.span],
      ].join(" ")}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={shot.src}
        alt={`${shot.title} — ${shot.category} photograph shot in ${shot.location}`}
        loading="lazy"
        draggable={false}
        className="absolute inset-0 h-full w-full object-cover transition-transform duration-[900ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-[1.06]"
      />

      {/* readability wash — strengthens on hover */}
      <div
        aria-hidden
        className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-black/25 opacity-70 transition-opacity duration-500 group-hover:opacity-90"
      />

      {/* giant index numeral */}
      <span
        aria-hidden
        className={[
          "gio-numeral pointer-events-none absolute -top-3 left-1 select-none",
          "font-black leading-none tracking-tighter text-[clamp(4.5rem,14vw,9rem)]",
          "text-white/85 mix-blend-overlay",
          "transition-all duration-500 group-hover:text-white/95 group-hover:-translate-y-1",
        ].join(" ")}
      >
        {label}
      </span>

      {/* category chip — always visible */}
      <span className="absolute right-3 top-3 rounded-full bg-white/15 px-2.5 py-1 text-[0.65rem] font-semibold uppercase tracking-widest text-white ring-1 ring-white/25 backdrop-blur-md">
        {shot.category}
      </span>

      {/* title reveal */}
      <div className="absolute inset-x-0 bottom-0 p-4 sm:p-5">
        <div className="overflow-hidden">
          <h3 className="translate-y-[110%] text-lg font-semibold text-white opacity-0 transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100">
            {shot.title}
          </h3>
        </div>
        <div className="overflow-hidden">
          <p className="translate-y-[110%] text-sm text-white/70 opacity-0 transition-all delay-[60ms] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100">
            {shot.location}
          </p>
        </div>
        {/* animated underline */}
        <span
          aria-hidden
          className="mt-3 block h-px w-0 bg-white/60 transition-[width] duration-700 ease-out group-hover:w-full group-focus-visible:w-full"
        />
      </div>
    </motion.button>
  );
}

function Lightbox({
  shots,
  index,
  onClose,
  onStep,
}: {
  shots: Shot[];
  index: number;
  onClose: () => void;
  onStep: (dir: 1 | -1) => void;
}) {
  const shot = shots[index];
  const label = String(index + 1).padStart(2, "0");
  const closeRef = useRef<HTMLButtonElement>(null);

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

  return (
    <motion.div
      role="dialog"
      aria-modal="true"
      aria-label={`Image ${label}: ${shot.title}`}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.25 }}
      className="fixed inset-0 z-[70] flex items-center justify-center bg-slate-950/85 p-4 backdrop-blur-xl sm:p-8"
      onClick={onClose}
    >
      <motion.figure
        initial={{ scale: 0.94, opacity: 0, y: 12 }}
        animate={{ scale: 1, opacity: 1, y: 0 }}
        exit={{ scale: 0.96, opacity: 0, y: 8 }}
        transition={{ duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
        onClick={(e) => e.stopPropagation()}
        className="relative flex max-h-full w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-white/15 dark:bg-zinc-900"
      >
        <div className="relative bg-slate-100 dark:bg-zinc-950">
          <span
            aria-hidden
            className="pointer-events-none absolute left-3 top-1 z-10 select-none font-black leading-none tracking-tighter text-[clamp(3.5rem,9vw,7rem)] text-white/80 mix-blend-overlay"
          >
            {label}
          </span>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={shot.src}
            alt={`${shot.title} — ${shot.category} photograph shot in ${shot.location}`}
            loading="lazy"
            draggable={false}
            className="mx-auto max-h-[68vh] w-full object-contain"
          />
        </div>

        <figcaption className="flex items-end justify-between gap-4 border-t border-slate-200 p-4 dark:border-white/10 sm:p-5">
          <div>
            <p className="text-[0.65rem] font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
              {shot.category}
            </p>
            <h3 className="mt-1 text-lg font-semibold text-slate-900 dark:text-zinc-50">
              {shot.title}
            </h3>
            <p className="text-sm text-slate-500 dark:text-zinc-400">
              {shot.location}
            </p>
          </div>
          <div className="flex shrink-0 items-center gap-2">
            <button
              type="button"
              onClick={() => onStep(-1)}
              aria-label="Previous image"
              className="grid h-10 w-10 place-items-center rounded-full text-slate-600 ring-1 ring-slate-300 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-zinc-300 dark:ring-white/15 dark:hover:bg-white/10"
            >
              <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2}>
                <path d="M15 6l-6 6 6 6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
            <button
              type="button"
              onClick={() => onStep(1)}
              aria-label="Next image"
              className="grid h-10 w-10 place-items-center rounded-full text-slate-600 ring-1 ring-slate-300 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-zinc-300 dark:ring-white/15 dark:hover:bg-white/10"
            >
              <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2}>
                <path d="M9 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </div>
        </figcaption>

        <button
          ref={closeRef}
          type="button"
          onClick={onClose}
          aria-label="Close"
          className="absolute right-3 top-3 grid h-9 w-9 place-items-center rounded-full bg-slate-950/60 text-white ring-1 ring-white/20 backdrop-blur transition hover:bg-slate-950/80 focus:outline-none 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}>
            <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
          </svg>
        </button>
      </motion.figure>
    </motion.div>
  );
}

export default function GalleryIndexOverlay() {
  const [open, setOpen] = useState<number | null>(null);
  const headingId = useId();

  const close = useCallback(() => setOpen(null), []);

  const step = useCallback(
    (dir: 1 | -1) =>
      setOpen((cur) =>
        cur === null ? cur : (cur + dir + SHOTS.length) % SHOTS.length,
      ),
    [],
  );

  return (
    <section
      aria-labelledby={headingId}
      className="relative w-full overflow-hidden bg-slate-50 px-5 py-20 text-slate-900 sm:px-8 sm:py-28 dark:bg-zinc-950 dark:text-zinc-100"
    >
      <style>{`
        @keyframes gio-drift {
          0%, 100% { transform: translate3d(0,0,0); }
          50% { transform: translate3d(0,-10px,0); }
        }
        .gio-numeral { animation: gio-drift 9s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .gio-numeral { animation: none !important; }
        }
      `}</style>

      {/* ambient glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute -top-32 left-1/2 h-72 w-[42rem] -translate-x-1/2 rounded-full bg-indigo-400/20 blur-3xl dark:bg-indigo-500/15"
      />

      <div className="relative mx-auto max-w-6xl">
        <header className="mb-10 flex flex-col gap-5 sm:mb-14 sm:flex-row sm:items-end sm:justify-between">
          <div className="max-w-xl">
            <p className="text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400">
              Field Archive — Vol. 02
            </p>
            <h2
              id={headingId}
              className="mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl"
            >
              Nine frames from the road
            </h2>
            <p className="mt-4 text-pretty text-base leading-relaxed text-slate-600 dark:text-zinc-400">
              A numbered set of stills — hover any frame for its story, or open one
              full-screen. Arrow keys move between images.
            </p>
          </div>
          <p className="shrink-0 text-sm tabular-nums text-slate-400 dark:text-zinc-500">
            <span className="font-semibold text-slate-700 dark:text-zinc-300">
              {String(SHOTS.length).padStart(2, "0")}
            </span>{" "}
            selected works
          </p>
        </header>

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

      <AnimatePresence>
        {open !== null && (
          <Lightbox
            shots={SHOTS}
            index={open}
            onClose={close}
            onStep={step}
          />
        )}
      </AnimatePresence>
    </section>
  );
}