Gradient Frame Gallery

"use client";

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

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

type Tile = {
  src: string;
  title: string;
  category: string;
  caption: string;
  shape: Shape;
};

const TILES: Tile[] = [
  {
    src: "/img/gallery/g03.webp",
    title: "Blue Hour, Old Harbor",
    category: "Cityscape",
    caption: "Long exposure across the tidal basin, 30s at f/11.",
    shape: "portrait",
  },
  {
    src: "/img/gallery/g11.webp",
    title: "Salt Flats at Noon",
    category: "Landscape",
    caption: "Mirror reflections after the seasonal rains, Uyuni.",
    shape: "landscape",
  },
  {
    src: "/img/gallery/g07.webp",
    title: "Studio Ceramics No. 4",
    category: "Still Life",
    caption: "Wheel-thrown stoneware, matte celadon glaze.",
    shape: "square",
  },
  {
    src: "/img/gallery/g19.webp",
    title: "Fern Understory",
    category: "Botanical",
    caption: "Backlit fronds in the temperate rainforest canopy.",
    shape: "portrait",
  },
  {
    src: "/img/gallery/g24.webp",
    title: "Ridge Line, First Light",
    category: "Landscape",
    caption: "Alpenglow along the eastern arête before sunrise.",
    shape: "landscape",
  },
  {
    src: "/img/gallery/g15.webp",
    title: "Portrait in Window Light",
    category: "Portrait",
    caption: "Soft north-facing key, no fill, natural falloff.",
    shape: "square",
  },
  {
    src: "/img/gallery/g28.webp",
    title: "Neon & Rain",
    category: "Street",
    caption: "Reflections on wet asphalt, Shinjuku after midnight.",
    shape: "portrait",
  },
  {
    src: "/img/gallery/g32.webp",
    title: "Dune Shadows",
    category: "Landscape",
    caption: "Wind-carved ridges raking across the erg at dusk.",
    shape: "landscape",
  },
  {
    src: "/img/gallery/g09.webp",
    title: "Espresso, Morning Bench",
    category: "Still Life",
    caption: "Single origin, cortado, cast-iron table top.",
    shape: "square",
  },
];

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

const shapeAspect: Record<Shape, string> = {
  portrait: "aspect-[4/5]",
  landscape: "aspect-[13/9]",
  square: "aspect-square",
};

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

  const close = useCallback(() => setActive(null), []);
  const step = useCallback((dir: 1 | -1) => {
    setActive((cur) => {
      if (cur === null) return cur;
      return (cur + dir + TILES.length) % TILES.length;
    });
  }, []);

  useEffect(() => {
    if (active === null) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowRight") step(1);
      if (e.key === "ArrowLeft") step(-1);
    };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [active, close, step]);

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

  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>{ggfStyles}</style>

      <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-gradient-to-r from-indigo-300/40 via-violet-300/30 to-rose-300/40 blur-3xl dark:from-indigo-600/20 dark:via-violet-600/15 dark:to-rose-600/20"
      />

      <div className="relative mx-auto max-w-6xl">
        <header className="mb-12 flex flex-col items-start gap-4 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-slate-200 bg-white/70 px-3 py-1 text-xs font-medium uppercase tracking-widest text-slate-500 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-400">
              <span className="h-1.5 w-1.5 rounded-full bg-gradient-to-r from-indigo-500 to-rose-500" />
              Selected Frames
            </span>
            <h2 className="mt-4 max-w-xl text-3xl font-semibold tracking-tight text-slate-900 dark:text-zinc-50 sm:text-4xl">
              A field notebook in light
            </h2>
          </div>
          <p className="max-w-sm text-sm leading-relaxed text-slate-600 dark:text-zinc-400">
            Nine frames from the road. Hover any tile to trace its living
            gradient edge, or open one full-screen to sit with it.
          </p>
        </header>

        <div className="grid auto-rows-[minmax(0,1fr)] grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {TILES.map((tile, i) => (
            <button
              key={tile.src}
              type="button"
              onClick={() => setActive(i)}
              aria-label={`Open ${tile.title} — ${tile.category}`}
              className={`ggf-tile group relative block w-full overflow-hidden rounded-2xl p-[2px] text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950 ${shapeSpan[tile.shape]}`}
            >
              <span aria-hidden="true" className="ggf-frame" />
              <span className="relative block h-full overflow-hidden rounded-[calc(1rem-1px)] bg-slate-200 dark:bg-zinc-800">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={tile.src}
                  alt={`${tile.title} — ${tile.caption}`}
                  loading="lazy"
                  draggable={false}
                  className={`h-full w-full object-cover transition-transform duration-[900ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-[1.06] ${shapeAspect[tile.shape]}`}
                />
                <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent opacity-80 transition-opacity duration-500 group-hover:opacity-95" />
                <span className="pointer-events-none absolute inset-x-0 bottom-0 translate-y-1 p-4 transition-transform duration-500 group-hover:translate-y-0">
                  <span className="block text-[0.7rem] font-medium uppercase tracking-widest text-white/70">
                    {tile.category}
                  </span>
                  <span className="mt-1 block text-base font-semibold text-white drop-shadow">
                    {tile.title}
                  </span>
                  <span className="mt-1 block max-w-[95%] text-xs leading-snug text-white/0 transition-colors duration-500 group-hover:text-white/80">
                    {tile.caption}
                  </span>
                </span>
              </span>
            </button>
          ))}
        </div>
      </div>

      <AnimatePresence>
        {activeTile && (
          <motion.div
            key="ggf-lightbox"
            role="dialog"
            aria-modal="true"
            aria-label={`${activeTile.title}, ${activeTile.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/80 p-4 backdrop-blur-md sm:p-8"
          >
            <button
              type="button"
              onClick={close}
              aria-label="Close"
              className="absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white 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" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
                <path d="M6 6l12 12M18 6L6 18" />
              </svg>
            </button>

            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                step(-1);
              }}
              aria-label="Previous image"
              className="absolute left-2 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white 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" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
                <path d="M15 18l-6-6 6-6" />
              </svg>
            </button>

            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                step(1);
              }}
              aria-label="Next image"
              className="absolute right-2 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white 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" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 18l6-6-6-6" />
              </svg>
            </button>

            <motion.figure
              key={activeTile.src}
              initial={{ opacity: 0, scale: 0.94, y: 12 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.96 }}
              transition={{ type: "spring", stiffness: 260, damping: 26 }}
              onClick={(e) => e.stopPropagation()}
              className="relative flex max-h-[86vh] max-w-4xl flex-col overflow-hidden rounded-2xl p-[2px]"
            >
              <span aria-hidden="true" className="ggf-frame ggf-frame--on" />
              <span className="relative flex flex-col overflow-hidden rounded-[calc(1rem-1px)] bg-zinc-900">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={activeTile.src}
                  alt={`${activeTile.title} — ${activeTile.caption}`}
                  loading="lazy"
                  draggable={false}
                  className="max-h-[70vh] w-full object-contain"
                />
                <figcaption className="flex flex-col gap-1 border-t border-white/10 bg-zinc-950/60 px-5 py-4">
                  <span className="text-[0.7rem] font-medium uppercase tracking-widest text-indigo-300">
                    {activeTile.category}
                  </span>
                  <span className="text-lg font-semibold text-white">
                    {activeTile.title}
                  </span>
                  <span className="text-sm text-zinc-400">{activeTile.caption}</span>
                </figcaption>
              </span>
            </motion.figure>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}

const ggfStyles = `
@property --ggf-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes ggf-spin {
  to { --ggf-angle: 360deg; }
}
.ggf-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  opacity: 0;
  transition: opacity 320ms ease;
  background: conic-gradient(
    from var(--ggf-angle),
    #6366f1,
    #8b5cf6,
    #ec4899,
    #f59e0b,
    #10b981,
    #6366f1
  );
  z-index: 0;
}
.ggf-tile:hover .ggf-frame,
.ggf-tile:focus-visible .ggf-frame {
  opacity: 1;
  animation: ggf-spin 3.2s linear infinite;
}
.ggf-frame--on {
  opacity: 1;
  animation: ggf-spin 4.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ggf-tile:hover .ggf-frame,
  .ggf-tile:focus-visible .ggf-frame,
  .ggf-frame--on {
    animation: none;
    opacity: 1;
  }
}
`;