Masonry Gallery

"use client";

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

type Shot = {
  src: string;
  title: string;
  category: string;
  location: string;
  ratio: string; // aspect-ratio for stable layout before load
};

const SHOTS: Shot[] = [
  { src: "/img/gallery/g03.webp", title: "Coastal Light", category: "Landscape", location: "Amalfi, IT", ratio: "13 / 9" },
  { src: "/img/gallery/g11.webp", title: "Studio 04", category: "Portrait", location: "Berlin Studio", ratio: "4 / 5" },
  { src: "/img/gallery/g07.webp", title: "Quiet Geometry", category: "Architecture", location: "Lisbon", ratio: "1 / 1" },
  { src: "/img/gallery/g19.webp", title: "Wildflower Verge", category: "Nature", location: "Cotswolds, UK", ratio: "4 / 5" },
  { src: "/img/gallery/g22.webp", title: "Salt & Slate", category: "Landscape", location: "Faroe Islands", ratio: "13 / 9" },
  { src: "/img/gallery/g14.webp", title: "The Long Table", category: "Still Life", location: "Copenhagen", ratio: "1 / 1" },
  { src: "/img/gallery/g28.webp", title: "Morning Reader", category: "Portrait", location: "Kyoto", ratio: "4 / 5" },
  { src: "/img/gallery/g05.webp", title: "Concrete Bloom", category: "Architecture", location: "São Paulo", ratio: "13 / 9" },
  { src: "/img/gallery/g31.webp", title: "Tidal Drift", category: "Nature", location: "Big Sur, US", ratio: "4 / 5" },
  { src: "/img/gallery/g17.webp", title: "Second Skin", category: "Fashion", location: "Milan", ratio: "1 / 1" },
  { src: "/img/gallery/g24.webp", title: "Northbound", category: "Landscape", location: "Lofoten, NO", ratio: "13 / 9" },
  { src: "/img/gallery/g09.webp", title: "Hands at Work", category: "Documentary", location: "Oaxaca, MX", ratio: "4 / 5" },
];

const CATEGORIES = ["All", "Landscape", "Portrait", "Architecture", "Nature", "Still Life", "Fashion", "Documentary"];

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

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 26, filter: "blur(6px)" }}
      animate={inView ? { opacity: 1, y: 0, filter: "blur(0px)" } : undefined}
      transition={{ duration: 0.7, delay: (index % 4) * 0.08, ease: [0.22, 1, 0.36, 1] }}
      className="gm-tile mb-4 break-inside-avoid sm:mb-5"
    >
      <button
        type="button"
        onClick={() => onOpen(index)}
        aria-label={`Open ${shot.title}, ${shot.category}, ${shot.location}`}
        className="group relative block w-full overflow-hidden rounded-2xl bg-neutral-200 text-left ring-1 ring-neutral-900/5 transition-all duration-500 ease-out will-change-transform hover:-translate-y-1.5 hover:shadow-[0_28px_60px_-24px_rgba(15,23,42,0.55)] hover:ring-indigo-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-800 dark:ring-white/10 dark:hover:shadow-[0_28px_60px_-24px_rgba(0,0,0,0.8)] dark:hover:ring-indigo-400/40"
      >
        <div style={{ aspectRatio: shot.ratio }} className="w-full">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={shot.src}
            alt={`${shot.title} — ${shot.category} photographed in ${shot.location}`}
            loading="lazy"
            draggable={false}
            className="h-full w-full object-cover brightness-[0.97] saturate-[0.96] transition-all duration-700 ease-out group-hover:scale-[1.05] group-hover:brightness-110 group-hover:saturate-105"
          />
        </div>

        {/* readability veil */}
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-950/70 via-neutral-950/5 to-transparent opacity-80 transition-opacity duration-500 group-hover:opacity-95" />

        {/* category chip */}
        <span className="absolute left-3 top-3 rounded-full bg-white/85 px-2.5 py-1 text-[11px] font-medium uppercase tracking-wider text-neutral-800 backdrop-blur-sm transition-transform duration-500 group-hover:-translate-y-0.5 dark:bg-neutral-900/80 dark:text-neutral-100">
          {shot.category}
        </span>

        {/* caption */}
        <div className="absolute inset-x-0 bottom-0 translate-y-1 p-4 transition-transform duration-500 ease-out group-hover:translate-y-0">
          <h3 className="text-base font-semibold leading-tight text-white drop-shadow-sm">
            {shot.title}
          </h3>
          <p className="mt-0.5 flex items-center gap-1.5 text-xs text-white/75">
            <svg viewBox="0 0 24 24" fill="none" className="h-3 w-3" aria-hidden="true">
              <path d="M12 21s7-5.686 7-11a7 7 0 1 0-14 0c0 5.314 7 11 7 11Z" stroke="currentColor" strokeWidth="1.6" />
              <circle cx="12" cy="10" r="2.4" stroke="currentColor" strokeWidth="1.6" />
            </svg>
            {shot.location}
          </p>
        </div>
      </button>
    </motion.div>
  );
}

export default function GalleryMasonry() {
  const [filter, setFilter] = useState<string>("All");
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const visible = SHOTS.filter((s) => filter === "All" || s.category === filter);

  const close = useCallback(() => setOpenIndex(null), []);
  const step = useCallback(
    (dir: number) => {
      setOpenIndex((cur) => {
        if (cur === null) return cur;
        const n = visible.length;
        return (cur + dir + n) % n;
      });
    },
    [visible.length],
  );

  useEffect(() => {
    if (openIndex === 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;
    };
  }, [openIndex, close, step]);

  const active = openIndex !== null ? visible[openIndex] : null;

  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-5 py-20 sm:px-8 sm:py-28 dark:bg-neutral-950">
      <style>{`
        @keyframes gmmasonry-sheen {
          0% { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
          40% { opacity: 0.55; }
          100% { transform: translateX(220%) skewX(-16deg); opacity: 0; }
        }
        .gm-sheen::after {
          content: "";
          position: absolute; inset: 0;
          background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
          animation: gmmasonry-sheen 4.5s ease-in-out infinite;
          pointer-events: none;
        }
        @media (prefers-reduced-motion: reduce) {
          .gm-sheen::after { animation: none; opacity: 0; }
          .gm-tile { transition: none !important; }
        }
      `}</style>

      {/* atmospheric backdrop */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(60%_50%_at_15%_0%,rgba(99,102,241,0.10),transparent_60%),radial-gradient(50%_45%_at_100%_20%,rgba(16,185,129,0.08),transparent_55%)]"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 opacity-[0.035] [background-image:linear-gradient(to_right,currentColor_1px,transparent_1px),linear-gradient(to_bottom,currentColor_1px,transparent_1px)] [background-size:44px_44px] text-neutral-900 dark:text-white dark:opacity-[0.05]"
      />

      <div className="relative mx-auto max-w-6xl">
        {/* header */}
        <div className="mb-10 flex flex-col gap-6 sm:mb-14 sm:flex-row sm:items-end sm:justify-between">
          <div className="max-w-xl">
            <span className="gm-sheen relative inline-flex items-center gap-2 overflow-hidden rounded-full border border-indigo-500/20 bg-indigo-500/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-indigo-600 dark:border-indigo-400/20 dark:bg-indigo-400/10 dark:text-indigo-300">
              <span className="h-1.5 w-1.5 rounded-full bg-indigo-500 dark:bg-indigo-400" />
              Collected Frames
            </span>
            <h2 className="mt-4 text-4xl font-semibold tracking-tight text-neutral-900 sm:text-5xl dark:text-white">
              The Field Notes
            </h2>
            <p className="mt-3 text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
              A wandering archive of light, texture, and place — collected on assignment and in
              the in-between hours. Tap any frame to view it full-bleed.
            </p>
          </div>

          <div className="shrink-0 text-right">
            <div className="text-5xl font-semibold tabular-nums text-neutral-900 dark:text-white">
              {String(visible.length).padStart(2, "0")}
            </div>
            <div className="text-xs uppercase tracking-widest text-neutral-500 dark:text-neutral-500">
              Frames shown
            </div>
          </div>
        </div>

        {/* filters */}
        <div
          role="tablist"
          aria-label="Filter photographs by category"
          className="mb-10 flex flex-wrap gap-2"
        >
          {CATEGORIES.map((cat) => {
            const on = filter === cat;
            return (
              <button
                key={cat}
                role="tab"
                aria-selected={on}
                type="button"
                onClick={() => setFilter(cat)}
                className={`rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-offset-neutral-950 ${
                  on
                    ? "bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900"
                    : "bg-white text-neutral-600 ring-1 ring-neutral-900/10 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-neutral-900 dark:text-neutral-400 dark:ring-white/10 dark:hover:bg-neutral-800 dark:hover:text-white"
                }`}
              >
                {cat}
              </button>
            );
          })}
        </div>

        {/* masonry via CSS columns */}
        <div className="columns-1 gap-4 sm:columns-2 sm:gap-5 lg:columns-3">
          {visible.map((shot, i) => (
            <Tile key={shot.src} shot={shot} index={i} onOpen={setOpenIndex} />
          ))}
        </div>

        {visible.length === 0 && (
          <p className="py-16 text-center text-neutral-500 dark:text-neutral-500">
            No frames in this category yet.
          </p>
        )}
      </div>

      {/* lightbox */}
      <AnimatePresence>
        {active && (
          <motion.div
            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.3 }}
            role="dialog"
            aria-modal="true"
            aria-label={`${active.title}, enlarged`}
            onClick={close}
          >
            <div className="absolute inset-0 bg-neutral-950/85 backdrop-blur-md" />

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

            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); step(-1); }}
              aria-label="Previous photograph"
              className="absolute left-3 top-1/2 z-10 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 backdrop-blur transition hover:bg-white/20 focus-visible: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="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>

            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); step(1); }}
              aria-label="Next photograph"
              className="absolute right-3 top-1/2 z-10 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 backdrop-blur transition hover:bg-white/20 focus-visible: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 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>

            <motion.figure
              key={active.src}
              initial={{ opacity: 0, scale: 0.94, y: 12 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.96 }}
              transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
              className="relative z-[1] flex max-h-full w-full max-w-4xl flex-col items-center"
              onClick={(e) => e.stopPropagation()}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={active.src}
                alt={`${active.title} — ${active.category} photographed in ${active.location}`}
                loading="lazy"
                draggable={false}
                className="max-h-[76vh] w-auto max-w-full rounded-xl object-contain shadow-2xl ring-1 ring-white/10"
              />
              <figcaption className="mt-4 flex w-full max-w-2xl items-center justify-between gap-4 text-white">
                <div>
                  <h3 className="text-lg font-semibold">{active.title}</h3>
                  <p className="text-sm text-white/60">
                    {active.category} · {active.location}
                  </p>
                </div>
                <span className="shrink-0 text-sm tabular-nums text-white/50">
                  {String((openIndex ?? 0) + 1).padStart(2, "0")} / {String(visible.length).padStart(2, "0")}
                </span>
              </figcaption>
            </motion.figure>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}