Lightbox Zoom Gallery

"use client";

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

type Shape = "portrait" | "landscape" | "square";

interface Photo {
  id: number;
  src: string;
  title: string;
  category: string;
  caption: string;
  location: string;
  shape: Shape;
}

const PHOTOS: Photo[] = [
  {
    id: 1,
    src: "/img/gallery/g03.webp",
    title: "Salt Flats at First Light",
    category: "Landscape",
    caption:
      "Sunrise cracks across the mineral crust minutes before the wind picks up and erases every footprint.",
    location: "Uyuni, Bolivia",
    shape: "portrait",
  },
  {
    id: 2,
    src: "/img/gallery/g11.webp",
    title: "The Fishmonger's Hands",
    category: "Reportage",
    caption:
      "Forty years at the same stall. He can fillet a mackerel without looking down once.",
    location: "Tsukiji, Tokyo",
    shape: "landscape",
  },
  {
    id: 3,
    src: "/img/gallery/g21.webp",
    title: "Concrete & Fog",
    category: "Architecture",
    caption:
      "A brutalist stairwell dissolves into morning haze, its geometry softened for exactly one hour a day.",
    location: "Barbican, London",
    shape: "square",
  },
  {
    id: 4,
    src: "/img/gallery/g07.webp",
    title: "Monsoon Commute",
    category: "Street",
    caption:
      "Umbrellas bloom the instant the sky opens. The whole street changes color in seconds.",
    location: "Kochi, India",
    shape: "portrait",
  },
  {
    id: 5,
    src: "/img/gallery/g18.webp",
    title: "Kelp Forest, Low Tide",
    category: "Nature",
    caption:
      "Cold current, warmer than it looks. The kelp moves like slow breathing under the surface.",
    location: "Big Sur, California",
    shape: "landscape",
  },
  {
    id: 6,
    src: "/img/gallery/g25.webp",
    title: "Neon After Rain",
    category: "Street",
    caption:
      "Every puddle becomes a second city, brighter and upside down.",
    location: "Mongkok, Hong Kong",
    shape: "square",
  },
  {
    id: 7,
    src: "/img/gallery/g14.webp",
    title: "The Weaver's Loom",
    category: "Craft",
    caption:
      "Indigo thread, dyed in the same courtyard for six generations. The blue never quite repeats.",
    location: "Sakai, Japan",
    shape: "portrait",
  },
  {
    id: 8,
    src: "/img/gallery/g30.webp",
    title: "Dune Ridge, Noon",
    category: "Landscape",
    caption:
      "The line between light and shadow is razor sharp until a gust rewrites it.",
    location: "Sossusvlei, Namibia",
    shape: "landscape",
  },
  {
    id: 9,
    src: "/img/gallery/g09.webp",
    title: "Greenhouse No. 4",
    category: "Botanical",
    caption:
      "Condensation on old glass turns every leaf into a watercolor of itself.",
    location: "Kew Gardens, London",
    shape: "square",
  },
  {
    id: 10,
    src: "/img/gallery/g33.webp",
    title: "Last Ferry",
    category: "Reportage",
    caption:
      "The 11:40 crossing, half empty, engine warm against the harbor cold.",
    location: "Wellington, NZ",
    shape: "portrait",
  },
];

const SPAN: Record<Shape, string> = {
  portrait: "sm:row-span-2",
  landscape: "sm:col-span-2",
  square: "",
};

const gridVariants: Variants = {
  hidden: {},
  show: {
    transition: { staggerChildren: 0.06, delayChildren: 0.05 },
  },
};

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 28, filter: "blur(6px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
  },
};

export default function GalleryLightboxZoom() {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const sectionRef = useRef<HTMLElement>(null);
  const inView = useInView(sectionRef, { once: true, margin: "-80px" });
  const uid = useId().replace(/[:]/g, "");
  const closeBtnRef = useRef<HTMLButtonElement>(null);

  const open = activeIndex !== null;
  const active = activeIndex !== null ? PHOTOS[activeIndex] : null;

  const goTo = useCallback((idx: number) => {
    setActiveIndex(((idx % PHOTOS.length) + PHOTOS.length) % PHOTOS.length);
  }, []);

  const next = useCallback(() => {
    setActiveIndex((i) => (i === null ? i : (i + 1) % PHOTOS.length));
  }, []);

  const prev = useCallback(() => {
    setActiveIndex((i) =>
      i === null ? i : (i - 1 + PHOTOS.length) % PHOTOS.length
    );
  }, []);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setActiveIndex(null);
      else if (e.key === "ArrowRight") next();
      else if (e.key === "ArrowLeft") prev();
    };
    window.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    closeBtnRef.current?.focus();
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open, next, prev]);

  return (
    <section
      ref={sectionRef}
      aria-label="Photography gallery"
      className="relative w-full overflow-hidden bg-neutral-50 px-5 py-20 text-neutral-900 sm:px-8 sm:py-28 dark:bg-neutral-950 dark:text-neutral-100"
    >
      <style>{`
        @keyframes ${uid}-sheen {
          0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
          18% { opacity: 0.7; }
          60% { opacity: 0.7; }
          100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
        }
        @keyframes ${uid}-float {
          0%, 100% { transform: translate3d(0,0,0); }
          50% { transform: translate3d(0,-14px,0); }
        }
        @keyframes ${uid}-ring {
          0% { transform: scale(0.6); opacity: 0.55; }
          100% { transform: scale(1.9); opacity: 0; }
        }
        .${uid}-sheen::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
          transform: translateX(-120%) skewX(-18deg);
          pointer-events: none;
        }
        .${uid}-card:hover .${uid}-sheen::after {
          animation: ${uid}-sheen 1.1s ease-in-out;
        }
        .${uid}-orb { animation: ${uid}-float 11s ease-in-out infinite; }
        .${uid}-orb-2 { animation: ${uid}-float 14s ease-in-out infinite reverse; }
        @media (prefers-reduced-motion: reduce) {
          .${uid}-card:hover .${uid}-sheen::after { animation: none; }
          .${uid}-orb, .${uid}-orb-2 { animation: none; }
        }
      `}</style>

      {/* Atmosphere */}
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div
          className={`${uid}-orb absolute -left-24 top-10 h-72 w-72 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-600/20`}
        />
        <div
          className={`${uid}-orb-2 absolute -right-20 bottom-0 h-80 w-80 rounded-full bg-violet-300/25 blur-3xl dark:bg-violet-700/20`}
        />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(0,0,0,0.05)_1px,transparent_0)] [background-size:22px_22px] dark:bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.05)_1px,transparent_0)]" />
      </div>

      <div className="mx-auto max-w-6xl">
        {/* Header */}
        <div className="mb-12 flex flex-col gap-6 sm:mb-16 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <span className="inline-flex items-center gap-2 rounded-full border border-neutral-300/70 bg-white/60 px-3 py-1 text-[0.7rem] font-medium uppercase tracking-[0.2em] text-neutral-600 backdrop-blur dark:border-neutral-700/70 dark:bg-neutral-900/60 dark:text-neutral-400">
              <span className="h-1.5 w-1.5 rounded-full bg-indigo-500 dark:bg-indigo-400" />
              Field Archive · Vol. 07
            </span>
            <h2 className="mt-5 text-4xl font-semibold tracking-tight text-neutral-900 sm:text-5xl dark:text-neutral-50">
              Frames from the{" "}
              <span className="bg-gradient-to-r from-indigo-500 via-violet-500 to-rose-500 bg-clip-text text-transparent">
                road
              </span>
            </h2>
          </div>
          <p className="max-w-sm text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
            Ten photographs from eighteen months across four continents. Tap any
            frame to enlarge, then use the arrow keys to move through the set.
          </p>
        </div>

        {/* Grid */}
        <motion.ul
          variants={gridVariants}
          initial="hidden"
          animate={inView ? "show" : "hidden"}
          className="grid auto-rows-[180px] grid-cols-2 gap-3 sm:auto-rows-[200px] sm:grid-cols-3 sm:gap-4 lg:grid-cols-4"
        >
          {PHOTOS.map((photo, i) => (
            <motion.li
              key={photo.id}
              variants={cardVariants}
              className={`relative ${SPAN[photo.shape]}`}
            >
              <motion.button
                type="button"
                onClick={() => goTo(i)}
                aria-label={`Open “${photo.title}” — ${photo.location}`}
                whileHover={{ y: -4 }}
                whileTap={{ scale: 0.98 }}
                transition={{ type: "spring", stiffness: 320, damping: 26 }}
                className={`${uid}-card group relative h-full w-full overflow-hidden rounded-2xl border border-neutral-900/5 bg-neutral-200 text-left shadow-sm outline-none ring-indigo-500/60 transition-shadow duration-300 hover:shadow-xl focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:border-white/10 dark:bg-neutral-800 dark:ring-indigo-400/60 dark:shadow-black/40 dark:focus-visible:ring-offset-neutral-950`}
              >
                <motion.div
                  layoutId={`${uid}-frame-${photo.id}`}
                  className="absolute inset-0"
                  transition={{
                    type: "spring",
                    stiffness: 260,
                    damping: 30,
                  }}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={photo.src}
                    alt={`${photo.title}. ${photo.caption}`}
                    loading="lazy"
                    draggable={false}
                    className="h-full w-full object-cover transition-transform duration-[900ms] ease-out will-change-transform group-hover:scale-[1.06]"
                  />
                </motion.div>

                <span
                  aria-hidden
                  className={`${uid}-sheen absolute inset-0 overflow-hidden rounded-2xl`}
                />

                <span
                  aria-hidden
                  className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent opacity-80"
                />

                <span className="pointer-events-none absolute left-3 top-3 rounded-full bg-white/85 px-2.5 py-1 text-[0.62rem] font-semibold uppercase tracking-[0.14em] text-neutral-700 backdrop-blur-sm dark:bg-neutral-900/80 dark:text-neutral-200">
                  {photo.category}
                </span>

                <span className="pointer-events-none absolute inset-x-3 bottom-3 translate-y-1 transition-transform duration-300 group-hover:translate-y-0">
                  <span className="block text-sm font-semibold leading-tight text-white drop-shadow">
                    {photo.title}
                  </span>
                  <span className="mt-0.5 block text-[0.7rem] font-medium text-white/70">
                    {photo.location}
                  </span>
                </span>
              </motion.button>
            </motion.li>
          ))}
        </motion.ul>
      </div>

      {/* Lightbox */}
      <AnimatePresence>
        {open && active && (
          <motion.div
            key="lightbox"
            role="dialog"
            aria-modal="true"
            aria-label={`${active.title}, ${active.location}`}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-8"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.25 }}
          >
            {/* Backdrop */}
            <motion.button
              type="button"
              aria-label="Close gallery"
              onClick={() => setActiveIndex(null)}
              className="absolute inset-0 cursor-zoom-out bg-neutral-950/80 backdrop-blur-md"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            />

            {/* Stage */}
            <div className="relative z-10 flex w-full max-w-5xl flex-col items-center">
              <motion.div
                layoutId={`${uid}-frame-${active.id}`}
                className="relative w-full overflow-hidden rounded-3xl bg-neutral-900 shadow-2xl shadow-black/60 ring-1 ring-white/10"
                transition={{ type: "spring", stiffness: 260, damping: 30 }}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={active.src}
                  alt={`${active.title}. ${active.caption}`}
                  loading="lazy"
                  draggable={false}
                  className="mx-auto max-h-[72vh] w-auto max-w-full object-contain"
                />

                {/* Caption bar */}
                <motion.div
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 16 }}
                  transition={{ delay: 0.12, duration: 0.35 }}
                  className="absolute inset-x-0 bottom-0 flex flex-wrap items-end justify-between gap-3 bg-gradient-to-t from-black/85 via-black/45 to-transparent p-5 sm:p-7"
                >
                  <div className="max-w-lg">
                    <span className="text-[0.62rem] font-semibold uppercase tracking-[0.2em] text-indigo-300">
                      {active.category} · {active.location}
                    </span>
                    <h3 className="mt-1 text-xl font-semibold text-white sm:text-2xl">
                      {active.title}
                    </h3>
                    <p className="mt-1.5 text-sm leading-relaxed text-white/75">
                      {active.caption}
                    </p>
                  </div>
                  <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white/70 ring-1 ring-white/15">
                    {(activeIndex ?? 0) + 1} / {PHOTOS.length}
                  </span>
                </motion.div>
              </motion.div>

              {/* Thumbnail strip */}
              <div className="mt-5 flex max-w-full items-center gap-2 overflow-x-auto px-1 pb-1">
                {PHOTOS.map((p, i) => (
                  <button
                    key={p.id}
                    type="button"
                    onClick={() => goTo(i)}
                    aria-label={`View ${p.title}`}
                    aria-current={i === activeIndex}
                    className={`relative h-12 w-12 shrink-0 overflow-hidden rounded-lg outline-none ring-offset-2 ring-offset-neutral-950 transition focus-visible:ring-2 focus-visible:ring-indigo-400 ${
                      i === activeIndex
                        ? "opacity-100 ring-2 ring-indigo-400"
                        : "opacity-45 hover:opacity-90"
                    }`}
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={p.src}
                      alt={p.title}
                      loading="lazy"
                      draggable={false}
                      className="h-full w-full object-cover"
                    />
                  </button>
                ))}
              </div>
            </div>

            {/* Controls */}
            <button
              ref={closeBtnRef}
              type="button"
              onClick={() => setActiveIndex(null)}
              aria-label="Close gallery"
              className="absolute right-4 top-4 z-20 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white outline-none ring-1 ring-white/20 backdrop-blur transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400 sm:right-6 sm:top-6"
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                aria-hidden
              >
                <path d="M6 6l12 12M18 6L6 18" />
              </svg>
            </button>

            <button
              type="button"
              onClick={prev}
              aria-label="Previous photo"
              className="group absolute left-3 top-1/2 z-20 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white outline-none ring-1 ring-white/20 backdrop-blur transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400 sm:left-6"
            >
              <span
                aria-hidden
                className="absolute inset-0 rounded-full ring-2 ring-indigo-400/50 opacity-0 group-active:opacity-100"
                style={{ animation: `${uid}-ring 0.5s ease-out` }}
              />
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden
              >
                <path d="M15 5l-7 7 7 7" />
              </svg>
            </button>

            <button
              type="button"
              onClick={next}
              aria-label="Next photo"
              className="group absolute right-3 top-1/2 z-20 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white outline-none ring-1 ring-white/20 backdrop-blur transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400 sm:right-6"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden
              >
                <path d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}