Hover Zoom Overlay Gallery

"use client";

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

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

const PHOTOS: Photo[] = [
  { src: "/img/gallery/g03.webp", title: "Coastal light", category: "Landscape", span: "tall" },
  { src: "/img/gallery/g11.webp", title: "Studio 04", category: "Portrait", span: "square" },
  { src: "/img/gallery/g19.webp", title: "Salt flats", category: "Travel", span: "wide" },
  { src: "/img/gallery/g07.webp", title: "Quiet harbour", category: "Landscape", span: "square" },
  { src: "/img/gallery/g24.webp", title: "Linen & shadow", category: "Still life", span: "tall" },
  { src: "/img/gallery/g15.webp", title: "First frost", category: "Nature", span: "wide" },
  { src: "/img/gallery/g30.webp", title: "The long room", category: "Architecture", span: "square" },
  { src: "/img/gallery/g22.webp", title: "Dune wind", category: "Travel", span: "tall" },
  { src: "/img/gallery/g09.webp", title: "Amber hour", category: "Portrait", span: "square" },
  { src: "/img/gallery/g33.webp", title: "Tide pools", category: "Nature", span: "wide" },
];

const spanClass: Record<Photo["span"], string> = {
  tall: "sm:row-span-2 aspect-[4/5] sm:aspect-auto",
  wide: "sm:col-span-2 aspect-[16/10]",
  square: "aspect-square",
};

function GalleryCard({ photo, index, onOpen }: { photo: Photo; index: number; onOpen: (i: number) => void }) {
  const ref = useRef<HTMLButtonElement>(null);
  const inView = useInView(ref, { once: true, margin: "-80px" });

  return (
    <motion.button
      ref={ref}
      type="button"
      onClick={() => onOpen(index)}
      aria-label={`View ${photo.title}, ${photo.category}`}
      initial={{ opacity: 0, y: 28 }}
      animate={inView ? { opacity: 1, y: 0 } : undefined}
      transition={{ duration: 0.6, delay: (index % 4) * 0.06, ease: [0.22, 1, 0.36, 1] }}
      className={`group relative block w-full overflow-hidden rounded-2xl bg-slate-200 text-left ring-1 ring-slate-900/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-slate-800 dark:ring-white/10 dark:focus-visible:ring-offset-slate-950 ${spanClass[photo.span]}`}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={photo.src}
        alt={`${photo.title} — ${photo.category}`}
        loading="lazy"
        draggable={false}
        className="ghzo-img h-full w-full object-cover transition-transform duration-[700ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform group-hover:scale-[1.08] group-focus-visible:scale-[1.08]"
      />

      {/* Dark gradient overlay */}
      <span
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/85 via-slate-950/25 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-focus-visible:opacity-100"
      />

      {/* Revealed content */}
      <span className="pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-3 p-5 sm:p-6">
        <span className="translate-y-3 opacity-0 transition-all duration-500 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100">
          <span className="block text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-indigo-300">
            {photo.category}
          </span>
          <span className="mt-1 block text-lg font-semibold leading-tight text-white sm:text-xl">
            {photo.title}
          </span>
        </span>

        <span className="flex translate-y-4 items-center gap-2 self-start rounded-full bg-white/95 px-4 py-2 text-sm font-medium text-slate-900 opacity-0 shadow-lg shadow-slate-950/30 backdrop-blur transition-all delay-75 duration-500 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100 dark:bg-white dark:text-slate-900">
          View
          <svg viewBox="0 0 20 20" fill="none" className="h-4 w-4" aria-hidden="true">
            <path d="M4 10h11M11 5.5 15.5 10 11 14.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </span>

      {/* Persistent corner label */}
      <span className="absolute left-4 top-4 rounded-full bg-slate-950/45 px-3 py-1 text-[0.65rem] font-medium uppercase tracking-wider text-white/90 backdrop-blur-sm transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0">
        {photo.category}
      </span>
    </motion.button>
  );
}

export default function GalleryHoverZoomOverlay() {
  const [active, setActive] = useState<number | null>(null);

  const open = useCallback((i: number) => setActive(i), []);
  const close = useCallback(() => setActive(null), []);
  const step = useCallback((dir: 1 | -1) => {
    setActive((cur) => (cur === null ? cur : (cur + dir + PHOTOS.length) % PHOTOS.length));
  }, []);

  useEffect(() => {
    if (active === null) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
      else if (e.key === "ArrowRight") step(1);
      else if (e.key === "ArrowLeft") step(-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;
    };
  }, [active, close, step]);

  const current = active === null ? null : PHOTOS[active];

  return (
    <section className="relative w-full overflow-hidden bg-white px-5 py-20 sm:px-8 sm:py-28 dark:bg-slate-950">
      <style>{`
        @keyframes ghzo-fade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes ghzo-pop { from { opacity: 0; transform: scale(0.94) translateY(12px) } to { opacity: 1; transform: scale(1) translateY(0) } }
        .ghzo-fade { animation: ghzo-fade .3s ease both }
        .ghzo-pop { animation: ghzo-pop .4s cubic-bezier(0.22,1,0.36,1) both }
        @media (prefers-reduced-motion: reduce) {
          .ghzo-fade, .ghzo-pop { animation: none }
          .ghzo-img { transition: none !important }
        }
      `}</style>

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

      <div className="relative mx-auto max-w-6xl">
        <header className="mb-12 flex flex-col gap-4 sm:mb-16 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400">
              Gallery
            </p>
            <h2 className="mt-3 max-w-xl text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
              A field study in light
            </h2>
          </div>
          <p className="max-w-sm text-sm leading-relaxed text-slate-600 dark:text-slate-400">
            Ten frames from coast to studio. Hover any image to reveal its story, or open the viewer to move through the set.
          </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-4">
          {PHOTOS.map((photo, i) => (
            <GalleryCard key={photo.src} photo={photo} index={i} onOpen={open} />
          ))}
        </div>
      </div>

      {/* Lightbox */}
      <AnimatePresence>
        {current && (
          <motion.div
            role="dialog"
            aria-modal="true"
            aria-label={`${current.title}, ${current.category}`}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.25 }}
            onClick={close}
            className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/90 p-4 backdrop-blur-md sm:p-8"
          >
            <button
              type="button"
              onClick={close}
              aria-label="Close viewer"
              className="absolute right-4 top-4 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white ring-1 ring-white/20 transition hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white sm:right-6 sm:top-6"
            >
              <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5" aria-hidden="true">
                <path d="m6 6 12 12M18 6 6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              </svg>
            </button>

            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); step(-1); }}
              aria-label="Previous image"
              className="absolute left-3 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white ring-1 ring-white/20 transition hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white sm:left-6"
            >
              <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5" aria-hidden="true">
                <path d="M14.5 6 8.5 12l6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>

            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); step(1); }}
              aria-label="Next image"
              className="absolute right-3 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white ring-1 ring-white/20 transition hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white sm:right-6"
            >
              <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5" aria-hidden="true">
                <path d="m9.5 6 6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>

            <motion.figure
              key={current.src}
              onClick={(e) => e.stopPropagation()}
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.98 }}
              transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
              className="flex max-h-full max-w-3xl flex-col items-center"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={current.src}
                alt={`${current.title} — ${current.category}`}
                loading="lazy"
                draggable={false}
                className="max-h-[75vh] w-auto max-w-full rounded-2xl object-contain shadow-2xl shadow-black/50"
              />
              <figcaption className="mt-5 text-center">
                <span className="block text-[0.7rem] font-semibold uppercase tracking-[0.2em] text-indigo-300">
                  {current.category}
                </span>
                <span className="mt-1 block text-xl font-semibold text-white">{current.title}</span>
                <span className="mt-1 block text-xs text-white/50">
                  {(active ?? 0) + 1} / {PHOTOS.length}
                </span>
              </figcaption>
            </motion.figure>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}