Photo Wall 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;
  caption: string;
  span: "portrait" | "landscape" | "square";
};

const PHOTOS: Photo[] = [
  {
    src: "/img/gallery/g03.webp",
    title: "First light over the ridge",
    category: "Landscape",
    caption: "Shot at 5:42am from the eastern trailhead — the fog burned off within minutes.",
    span: "landscape",
  },
  {
    src: "/img/gallery/g07.webp",
    title: "Studio portrait, natural window",
    category: "Portrait",
    caption: "One softbox, one reflector, and the afternoon light doing most of the work.",
    span: "portrait",
  },
  {
    src: "/img/gallery/g12.webp",
    title: "Corner cafe, 8am rush",
    category: "Street",
    caption: "Waited eleven minutes for the steam and the stranger to line up just right.",
    span: "square",
  },
  {
    src: "/img/gallery/g18.webp",
    title: "Concrete and citrus",
    category: "Still Life",
    caption: "A brutalist ledge, three oranges, and one very patient assistant.",
    span: "portrait",
  },
  {
    src: "/img/gallery/g21.webp",
    title: "Tide going out at Praia Norte",
    category: "Landscape",
    caption: "Long exposure, 30 seconds, ND1000 filter — the water turns to smoke.",
    span: "landscape",
  },
  {
    src: "/img/gallery/g05.webp",
    title: "Market vendor, hands at work",
    category: "Documentary",
    caption: "She folds a thousand of these a day and never once looks down.",
    span: "square",
  },
  {
    src: "/img/gallery/g27.webp",
    title: "Rooftop, blue hour",
    category: "Architecture",
    caption: "The city exhales for about twenty minutes before the lights fully take over.",
    span: "portrait",
  },
  {
    src: "/img/gallery/g14.webp",
    title: "Rain on the platform",
    category: "Street",
    caption: "Umbrellas, reflections, and a train that was mercifully four minutes late.",
    span: "landscape",
  },
  {
    src: "/img/gallery/g31.webp",
    title: "Ceramics before the kiln",
    category: "Still Life",
    caption: "Raw clay under a north-facing skylight — the texture disappears once it's fired.",
    span: "square",
  },
  {
    src: "/img/gallery/g09.webp",
    title: "Portrait in the greenhouse",
    category: "Portrait",
    caption: "Backlit through fogged glass, no strobes, just a lot of patience with focus.",
    span: "portrait",
  },
  {
    src: "/img/gallery/g23.webp",
    title: "Switchbacks above the treeline",
    category: "Landscape",
    caption: "Two hours up for a frame that only exists when the clouds break.",
    span: "landscape",
  },
  {
    src: "/img/gallery/g16.webp",
    title: "Neon and the late diner",
    category: "Street",
    caption: "Handheld at 1/15, ISO 3200 — grain is a feature, not a bug, at this hour.",
    span: "square",
  },
];

// Deterministic pseudo-random tilt per index so SSR and client match.
function tiltFor(index: number): number {
  const seed = Math.sin(index * 12.9898) * 43758.5453;
  const frac = seed - Math.floor(seed);
  return (frac - 0.5) * 7; // roughly -3.5deg .. +3.5deg
}

function offsetFor(index: number): number {
  const seed = Math.sin(index * 78.233) * 12543.653;
  const frac = seed - Math.floor(seed);
  return (frac - 0.5) * 10; // small vertical stagger in px
}

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

export default function GalleryPhotoWall() {
  const sectionRef = useRef<HTMLElement>(null);
  const inView = useInView(sectionRef, { once: true, margin: "-80px" });
  const [active, setActive] = useState<number | null>(null);
  const closeRef = useRef<HTMLButtonElement>(null);

  const close = useCallback(() => setActive(null), []);

  const step = useCallback(
    (dir: 1 | -1) => {
      setActive((cur) => {
        if (cur === null) return cur;
        return (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);
    };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    closeRef.current?.focus();
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [active, close, step]);

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

  return (
    <section
      ref={sectionRef}
      aria-label="Photo wall gallery"
      className="relative w-full overflow-hidden bg-gradient-to-b from-neutral-50 via-white to-neutral-100 px-5 py-20 sm:px-8 sm:py-28 dark:from-neutral-950 dark:via-neutral-950 dark:to-black"
    >
      <style>{`
        @keyframes gpw-fade-up {
          from { opacity: 0; transform: translateY(24px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes gpw-sheen {
          0% { transform: translateX(-120%) skewX(-12deg); }
          100% { transform: translateX(220%) skewX(-12deg); }
        }
        .gpw-head { animation: gpw-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both; }
        .gpw-card:hover .gpw-sheen { animation: gpw-sheen 0.9s ease-out; }
        @media (prefers-reduced-motion: reduce) {
          .gpw-head { animation: none; }
          .gpw-card { transition: none !important; }
          .gpw-card:hover .gpw-sheen { animation: none; }
        }
      `}</style>

      {/* ambient glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 -z-0 h-72 bg-[radial-gradient(60%_100%_at_50%_0%,rgba(99,102,241,0.14),transparent)] dark:bg-[radial-gradient(60%_100%_at_50%_0%,rgba(129,140,248,0.18),transparent)]"
      />

      <div className="relative mx-auto max-w-6xl">
        <header className="gpw-head mb-14 max-w-2xl">
          <span className="inline-flex items-center gap-2 rounded-full border border-indigo-200/70 bg-indigo-50/80 px-3 py-1 text-xs font-medium uppercase tracking-widest text-indigo-700 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" />
            Field notes
          </span>
          <h2 className="mt-5 text-4xl font-semibold tracking-tight text-neutral-900 sm:text-5xl dark:text-neutral-50">
            The Photo Wall
          </h2>
          <p className="mt-4 text-base leading-relaxed text-neutral-600 sm:text-lg dark:text-neutral-400">
            A pinned-up collection from three years of wandering with a camera.
            Everything sits a little crooked, the way it does on a real wall —
            until you lean in.
          </p>
        </header>

        <div className="columns-2 gap-4 sm:columns-3 sm:gap-6 lg:columns-4">
          {PHOTOS.map((photo, i) => {
            const tilt = tiltFor(i);
            const dy = offsetFor(i);
            return (
              <motion.div
                key={photo.src}
                initial={{ opacity: 0, y: 30, rotate: tilt * 1.6 }}
                animate={
                  inView
                    ? { opacity: 1, y: dy, rotate: tilt }
                    : { opacity: 0, y: 30, rotate: tilt * 1.6 }
                }
                transition={{
                  duration: 0.6,
                  delay: 0.05 * i,
                  ease: [0.22, 1, 0.36, 1],
                }}
                whileHover={{
                  rotate: 0,
                  y: dy - 12,
                  scale: 1.035,
                  zIndex: 20,
                  transition: { type: "spring", stiffness: 320, damping: 22 },
                }}
                className="mb-4 break-inside-avoid sm:mb-6"
                style={{ transformOrigin: "center bottom" }}
              >
                <button
                  type="button"
                  onClick={() => setActive(i)}
                  aria-label={`Open ${photo.title} — ${photo.category}`}
                  className="gpw-card group relative block w-full overflow-hidden rounded-xl border border-white/70 bg-white p-2 shadow-[0_10px_30px_-12px_rgba(15,23,42,0.35)] outline-none ring-indigo-500 transition-shadow duration-300 hover:shadow-[0_28px_55px_-18px_rgba(15,23,42,0.55)] focus-visible:ring-2 dark:border-white/10 dark:bg-neutral-900 dark:shadow-[0_10px_30px_-12px_rgba(0,0,0,0.7)] dark:ring-indigo-400"
                >
                  <div
                    className={`relative w-full overflow-hidden rounded-lg bg-neutral-200 dark:bg-neutral-800 ${SPAN_CLASS[photo.span]}`}
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={photo.src}
                      alt={`${photo.title} — ${photo.category} photograph`}
                      loading="lazy"
                      draggable={false}
                      className="absolute inset-0 h-full w-full object-cover transition-transform duration-[900ms] ease-out group-hover:scale-105"
                    />
                    {/* hover sheen */}
                    <span
                      aria-hidden
                      className="gpw-sheen pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 bg-gradient-to-r from-transparent via-white/40 to-transparent"
                    />
                    {/* gradient caption veil */}
                    <span
                      aria-hidden
                      className="pointer-events-none absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-black/75 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                    />
                    <div className="pointer-events-none absolute inset-x-0 bottom-0 translate-y-2 p-3 text-left opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
                      <span className="text-[10px] font-semibold uppercase tracking-widest text-indigo-200">
                        {photo.category}
                      </span>
                      <p className="mt-0.5 text-sm font-medium leading-snug text-white">
                        {photo.title}
                      </p>
                    </div>
                  </div>
                  {/* tape */}
                  <span
                    aria-hidden
                    className="absolute -top-2 left-1/2 h-5 w-16 -translate-x-1/2 -rotate-2 rounded-[2px] bg-amber-200/70 shadow-sm ring-1 ring-amber-300/40 backdrop-blur-sm dark:bg-amber-100/20 dark:ring-amber-200/20"
                  />
                </button>
              </motion.div>
            );
          })}
        </div>
      </div>

      {/* Lightbox */}
      <AnimatePresence>
        {activePhoto && (
          <motion.div
            role="dialog"
            aria-modal="true"
            aria-label={`${activePhoto.title}, enlarged`}
            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-neutral-950/85 p-4 backdrop-blur-md sm:p-8"
            onClick={close}
          >
            <div
              className="relative flex w-full max-w-4xl flex-col items-center"
              onClick={(e) => e.stopPropagation()}
            >
              <motion.div
                key={activePhoto.src}
                initial={{ opacity: 0, scale: 0.94, y: 16 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.96 }}
                transition={{ type: "spring", stiffness: 240, damping: 26 }}
                className="w-full overflow-hidden rounded-2xl bg-white p-2 shadow-2xl dark:bg-neutral-900"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={activePhoto.src}
                  alt={`${activePhoto.title} — ${activePhoto.category} photograph`}
                  loading="lazy"
                  draggable={false}
                  className="max-h-[70vh] w-full rounded-lg object-contain"
                />
                <div className="flex items-end justify-between gap-4 px-3 py-4">
                  <div>
                    <span className="text-[11px] font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
                      {activePhoto.category}
                    </span>
                    <h3 className="mt-1 text-lg font-semibold text-neutral-900 dark:text-neutral-50">
                      {activePhoto.title}
                    </h3>
                    <p className="mt-1 max-w-md text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
                      {activePhoto.caption}
                    </p>
                  </div>
                  <span className="shrink-0 text-xs tabular-nums text-neutral-400 dark:text-neutral-500">
                    {(active ?? 0) + 1} / {PHOTOS.length}
                  </span>
                </div>
              </motion.div>

              {/* controls */}
              <div className="mt-5 flex items-center gap-3">
                <button
                  type="button"
                  onClick={() => step(-1)}
                  aria-label="Previous photo"
                  className="flex h-11 w-11 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white outline-none transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
                    <path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
                <button
                  ref={closeRef}
                  type="button"
                  onClick={close}
                  className="rounded-full border border-white/20 bg-white/10 px-5 py-2.5 text-sm font-medium text-white outline-none transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400"
                >
                  Close
                </button>
                <button
                  type="button"
                  onClick={() => step(1)}
                  aria-label="Next photo"
                  className="flex h-11 w-11 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white outline-none transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
                    <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}