Push Neighbors Gallery

"use client";

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

type Shot = {
  id: string;
  src: string;
  title: string;
  category: string;
  location: string;
  alt: string;
};

const SHOTS: Shot[] = [
  {
    id: "g03",
    src: "/img/gallery/g03.webp",
    title: "Salt Flats at First Light",
    category: "Landscape",
    location: "Uyuni, Bolivia",
    alt: "A mirror-like salt flat reflecting a pale dawn sky at first light",
  },
  {
    id: "g07",
    src: "/img/gallery/g07.webp",
    title: "The Copper Stairwell",
    category: "Architecture",
    location: "Lisbon, Portugal",
    alt: "A spiral stairwell wrapped in warm copper tones seen from above",
  },
  {
    id: "g12",
    src: "/img/gallery/g12.webp",
    title: "Night Market Steam",
    category: "Street",
    location: "Osaka, Japan",
    alt: "Steam rising over a crowded night market lit by paper lanterns",
  },
  {
    id: "g18",
    src: "/img/gallery/g18.webp",
    title: "Ridge Line, Blue Hour",
    category: "Landscape",
    location: "Dolomites, Italy",
    alt: "A jagged mountain ridge silhouetted against a deep blue dusk sky",
  },
  {
    id: "g21",
    src: "/img/gallery/g21.webp",
    title: "Weaver's Hands",
    category: "Portrait",
    location: "Oaxaca, Mexico",
    alt: "Close-up of an artisan's hands guiding threads across a wooden loom",
  },
  {
    id: "g24",
    src: "/img/gallery/g24.webp",
    title: "Concrete & Fog",
    category: "Architecture",
    location: "Chandigarh, India",
    alt: "A brutalist concrete facade softened by low morning fog",
  },
  {
    id: "g29",
    src: "/img/gallery/g29.webp",
    title: "Tide Pool Study",
    category: "Nature",
    location: "Big Sur, USA",
    alt: "A shallow tide pool holding anemones and green sea grass at low tide",
  },
  {
    id: "g33",
    src: "/img/gallery/g33.webp",
    title: "Rooftop Rain",
    category: "Street",
    location: "Hanoi, Vietnam",
    alt: "Rooftops slick with rain glowing under scattered neon signage",
  },
  {
    id: "g36",
    src: "/img/gallery/g36.webp",
    title: "Field of Amber",
    category: "Nature",
    location: "Provence, France",
    alt: "Rows of golden wheat bending in warm afternoon wind",
  },
  {
    id: "g05",
    src: "/img/gallery/g05.webp",
    title: "The Long Platform",
    category: "Street",
    location: "Berlin, Germany",
    alt: "An empty train platform stretching into vanishing-point perspective",
  },
];

const ROWS: Shot[][] = [SHOTS.slice(0, 5), SHOTS.slice(5, 10)];

export default function GalleryPushNeighbors() {
  const sectionRef = useRef<HTMLDivElement>(null);
  const inView = useInView(sectionRef, { once: true, margin: "-80px" });

  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const closeBtnRef = useRef<HTMLButtonElement>(null);

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

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

  const active = openIndex === null ? null : SHOTS[openIndex];

  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-slate-50 to-white px-4 py-20 text-slate-900 sm:px-6 lg:px-8 dark:from-zinc-950 dark:to-neutral-950 dark:text-slate-100">
      <style>{`
        .gpn-panel {
          flex: 1 1 0%;
          transition: flex-grow 620ms cubic-bezier(0.16, 1, 0.3, 1),
            filter 420ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
          will-change: flex-grow;
        }
        .gpn-row:hover .gpn-panel { flex-grow: 0.62; filter: saturate(0.85) brightness(0.92); }
        .gpn-panel:hover, .gpn-panel:focus-within {
          flex-grow: 3.6 !important;
          filter: saturate(1.06) brightness(1) !important;
        }
        .gpn-img { transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
        .gpn-panel:hover .gpn-img, .gpn-panel:focus-within .gpn-img { transform: scale(1.06); }
        .gpn-meta { transition: opacity 400ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
        .gpn-panel:hover .gpn-meta, .gpn-panel:focus-within .gpn-meta {
          opacity: 1; transform: translateY(0);
        }
        @keyframes gpn-float-in {
          from { opacity: 0; transform: translateY(14px) scale(0.98); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .gpn-float { animation: gpn-float-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
        @media (prefers-reduced-motion: reduce) {
          .gpn-panel, .gpn-img, .gpn-meta, .gpn-float { transition: none !important; animation: none !important; }
          .gpn-row:hover .gpn-panel { filter: none; }
          .gpn-panel:hover .gpn-img, .gpn-panel:focus-within .gpn-img { transform: none; }
        }
      `}</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-300/30 blur-3xl dark:bg-indigo-600/20"
      />

      <div ref={sectionRef} className="relative mx-auto max-w-7xl">
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          animate={inView ? { opacity: 1, y: 0 } : undefined}
          transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
          className="mb-12 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"
        >
          <div>
            <span className="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-medium tracking-wide text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300">
              <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
              Field Notebook 2026
            </span>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
              Ten frames, one long road
            </h2>
            <p className="mt-3 max-w-xl text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              Hover any frame to let it breathe — its neighbours ease aside to
              make room. Click to open the full plate.
            </p>
          </div>
          <p className="text-xs uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">
            10 selects · 4 continents
          </p>
        </motion.div>

        <div className="flex flex-col gap-3 sm:gap-4">
          {ROWS.map((row, rowIdx) => (
            <div
              key={rowIdx}
              className="gpn-row flex h-56 gap-3 sm:h-64 sm:gap-4 lg:h-80"
            >
              {row.map((shot, colIdx) => {
                const flatIndex = rowIdx * 5 + colIdx;
                return (
                  <motion.button
                    key={shot.id}
                    type="button"
                    onClick={() => setOpenIndex(flatIndex)}
                    aria-label={`Open ${shot.title}, ${shot.category} from ${shot.location}`}
                    initial={{ opacity: 0, y: 18 }}
                    animate={inView ? { opacity: 1, y: 0 } : undefined}
                    transition={{
                      duration: 0.6,
                      delay: 0.1 + flatIndex * 0.06,
                      ease: [0.16, 1, 0.3, 1],
                    }}
                    className="gpn-panel group relative min-w-0 overflow-hidden rounded-2xl bg-slate-200 text-left ring-1 ring-slate-900/5 outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-zinc-800 dark:ring-white/10 dark:focus-visible:ring-offset-neutral-950"
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={shot.src}
                      alt={shot.alt}
                      loading="lazy"
                      draggable={false}
                      className="gpn-img absolute inset-0 h-full w-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-slate-950/75 via-slate-950/10 to-transparent" />

                    <span className="absolute left-3 top-3 rounded-full bg-white/85 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-800 backdrop-blur-sm dark:bg-zinc-900/70 dark:text-slate-200">
                      {shot.category}
                    </span>

                    <div className="gpn-meta absolute inset-x-0 bottom-0 translate-y-2 p-3 opacity-0 sm:p-4">
                      <p className="truncate text-sm font-semibold text-white sm:text-base">
                        {shot.title}
                      </p>
                      <p className="mt-0.5 flex items-center gap-1.5 text-xs text-slate-300">
                        <svg
                          viewBox="0 0 24 24"
                          className="h-3 w-3 shrink-0"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth={2}
                          aria-hidden
                        >
                          <path
                            d="M12 21s-7-6.2-7-11a7 7 0 1114 0c0 4.8-7 11-7 11z"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <circle cx="12" cy="10" r="2.5" />
                        </svg>
                        {shot.location}
                      </p>
                    </div>
                  </motion.button>
                );
              })}
            </div>
          ))}
        </div>
      </div>

      {/* Lightbox */}
      <AnimatePresence>
        {active && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.25 }}
            className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/85 p-4 backdrop-blur-md sm:p-8"
            role="dialog"
            aria-modal="true"
            aria-label={`${active.title} — enlarged view`}
            onClick={close}
          >
            <motion.figure
              key={active.id}
              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.16, 1, 0.3, 1] }}
              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/10 dark:bg-neutral-900"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="relative flex-1 overflow-hidden bg-slate-100 dark:bg-zinc-950">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={active.src}
                  alt={active.alt}
                  loading="lazy"
                  draggable={false}
                  className="mx-auto max-h-[68vh] w-auto max-w-full object-contain"
                />
              </div>

              <figcaption className="flex items-center justify-between gap-4 border-t border-slate-200 px-5 py-4 dark:border-white/10">
                <div className="min-w-0">
                  <p className="text-xs font-medium uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
                    {active.category}
                  </p>
                  <p className="mt-0.5 truncate text-base font-semibold text-slate-900 dark:text-white">
                    {active.title}
                  </p>
                  <p className="truncate text-sm text-slate-500 dark:text-slate-400">
                    {active.location}
                  </p>
                </div>
                <div className="flex shrink-0 items-center gap-2">
                  <button
                    type="button"
                    onClick={() => step(-1)}
                    aria-label="Previous photo"
                    className="grid h-10 w-10 place-items-center rounded-full bg-slate-100 text-slate-700 outline-none transition hover:bg-slate-200 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-zinc-800 dark:text-slate-200 dark:hover:bg-zinc-700"
                  >
                    <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden>
                      <path d="M15 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </button>
                  <button
                    type="button"
                    onClick={() => step(1)}
                    aria-label="Next photo"
                    className="grid h-10 w-10 place-items-center rounded-full bg-slate-100 text-slate-700 outline-none transition hover:bg-slate-200 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-zinc-800 dark:text-slate-200 dark:hover:bg-zinc-700"
                  >
                    <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden>
                      <path d="M9 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </button>
                </div>
              </figcaption>

              <button
                ref={closeBtnRef}
                type="button"
                onClick={close}
                aria-label="Close enlarged view"
                className="absolute right-3 top-3 grid h-9 w-9 place-items-center rounded-full bg-slate-950/60 text-white outline-none backdrop-blur transition hover:bg-slate-950/80 focus-visible:ring-2 focus-visible:ring-white"
              >
                <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden>
                  <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </motion.figure>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}