Tilted Marquee Gallery

"use client";

import { useCallback, useEffect, useId, useRef, useState, type CSSProperties } from "react";
import { AnimatePresence, motion } from "motion/react";

type Shot = {
  src: string;
  alt: string;
  title: string;
  category: string;
  location: string;
  span: "portrait" | "landscape" | "square";
};

const ROW_ONE: Shot[] = [
  {
    src: "/img/gallery/g03.webp",
    alt: "Low mist rolling over a ridge of pine trees at first light",
    title: "Blue Hour, Cascade Ridge",
    category: "Landscape",
    location: "North Cascades, WA",
    span: "landscape",
  },
  {
    src: "/img/gallery/g07.webp",
    alt: "A weathered fisherman mending a net on a wooden dock",
    title: "Hands That Remember",
    category: "Portrait",
    location: "Nazaré, Portugal",
    span: "portrait",
  },
  {
    src: "/img/gallery/g12.webp",
    alt: "Neon signage reflected in a rain-soaked city street at night",
    title: "After the Rain",
    category: "Street",
    location: "Shinjuku, Tokyo",
    span: "square",
  },
  {
    src: "/img/gallery/g18.webp",
    alt: "Sweeping sand dunes shaped by wind under a low golden sun",
    title: "The Long Wind",
    category: "Landscape",
    location: "Erg Chebbi, Morocco",
    span: "landscape",
  },
  {
    src: "/img/gallery/g22.webp",
    alt: "Close portrait of a dancer resting between rehearsals",
    title: "In the Wings",
    category: "Portrait",
    location: "Paris, France",
    span: "portrait",
  },
  {
    src: "/img/gallery/g29.webp",
    alt: "Abstract detail of layered coastal rock in warm ochre tones",
    title: "Sediment No. 4",
    category: "Abstract",
    location: "Jurassic Coast, UK",
    span: "square",
  },
];

const ROW_TWO: Shot[] = [
  {
    src: "/img/gallery/g05.webp",
    alt: "A lone cyclist crossing a wide empty bridge in fog",
    title: "Crossing, Alone",
    category: "Street",
    location: "Porto, Portugal",
    span: "landscape",
  },
  {
    src: "/img/gallery/g10.webp",
    alt: "Sunlight breaking through the canopy of an old-growth forest",
    title: "Cathedral of Ferns",
    category: "Nature",
    location: "Olympic Forest, WA",
    span: "portrait",
  },
  {
    src: "/img/gallery/g15.webp",
    alt: "Geometric shadows cast across a minimalist concrete stairwell",
    title: "Angles of Descent",
    category: "Architecture",
    location: "Valencia, Spain",
    span: "square",
  },
  {
    src: "/img/gallery/g24.webp",
    alt: "A market vendor arranging bright citrus at dawn",
    title: "First Light Market",
    category: "Street",
    location: "Marrakech, Morocco",
    span: "landscape",
  },
  {
    src: "/img/gallery/g31.webp",
    alt: "Portrait of a potter with clay-dusted hands beside her wheel",
    title: "The Maker's Studio",
    category: "Portrait",
    location: "Kyoto, Japan",
    span: "portrait",
  },
  {
    src: "/img/gallery/g34.webp",
    alt: "Turquoise glacial lake meeting jagged snow-capped peaks",
    title: "Meltwater",
    category: "Landscape",
    location: "Banff, Canada",
    span: "square",
  },
];

const ALL_SHOTS: Shot[] = [...ROW_ONE, ...ROW_TWO];

function spanClasses(span: Shot["span"]): string {
  switch (span) {
    case "portrait":
      return "aspect-[4/5] w-[15rem] sm:w-[17rem] lg:w-[19rem]";
    case "landscape":
      return "aspect-[13/9] w-[24rem] sm:w-[27rem] lg:w-[31rem]";
    case "square":
      return "aspect-square w-[17rem] sm:w-[19rem] lg:w-[21rem]";
  }
}

function Tile({
  shot,
  onOpen,
}: {
  shot: Shot;
  onOpen: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onOpen}
      aria-label={`View “${shot.title}” — ${shot.category}, ${shot.location}`}
      className={`group/tile relative shrink-0 overflow-hidden rounded-2xl ${spanClasses(
        shot.span,
      )} bg-slate-200 shadow-[0_18px_40px_-24px_rgba(15,23,42,0.7)] outline-none ring-1 ring-slate-900/10 transition-[transform,box-shadow,filter] duration-500 ease-out hover:z-10 hover:-translate-y-1 hover:shadow-[0_34px_70px_-28px_rgba(15,23,42,0.85)] focus-visible:z-10 focus-visible:-translate-y-1 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-indigo-400 dark:focus-visible:ring-offset-slate-950`}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={shot.src}
        alt={shot.alt}
        loading="lazy"
        draggable={false}
        className="h-full w-full select-none object-cover transition-transform duration-[900ms] ease-out group-hover/tile:scale-[1.06]"
      />

      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/5 to-transparent opacity-70 transition-opacity duration-500 group-hover/tile:opacity-95"
      />

      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex translate-y-2 flex-col gap-1 p-4 opacity-0 transition-all duration-500 ease-out group-hover/tile:translate-y-0 group-hover/tile:opacity-100 group-focus-visible/tile:translate-y-0 group-focus-visible/tile:opacity-100">
        <span className="w-fit rounded-full bg-white/15 px-2.5 py-0.5 text-[0.62rem] font-semibold uppercase tracking-[0.18em] text-white/90 backdrop-blur-sm">
          {shot.category}
        </span>
        <span className="text-[0.98rem] font-semibold leading-tight text-white">
          {shot.title}
        </span>
        <span className="text-[0.72rem] font-medium tracking-wide text-white/70">
          {shot.location}
        </span>
      </div>
    </button>
  );
}

function Row({
  shots,
  direction,
  onOpen,
  ariaLabel,
}: {
  shots: Shot[];
  direction: "left" | "right";
  onOpen: (shot: Shot) => void;
  ariaLabel: string;
}) {
  const anim =
    direction === "left" ? "gtm-scroll-left" : "gtm-scroll-right";
  return (
    <div
      className="group/row relative"
      role="list"
      aria-label={ariaLabel}
    >
      <div
        className="flex w-max gap-5 [animation:var(--gtm-anim)_var(--gtm-dur)_linear_infinite] group-hover/row:[animation-play-state:paused] group-focus-within/row:[animation-play-state:paused] motion-reduce:[animation:none]"
        style={
          {
            "--gtm-anim": anim,
            "--gtm-dur": direction === "left" ? "64s" : "78s",
          } as CSSProperties
        }
      >
        {[...shots, ...shots].map((shot, i) => (
          <div role="listitem" key={`${shot.src}-${i}`} aria-hidden={i >= shots.length}>
            <Tile
              shot={shot}
              onOpen={() => onOpen(shot)}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default function GalleryTiltedMarquee() {
  const styleId = useId().replace(/[:]/g, "");
  const [active, setActive] = useState<number | null>(null);
  const closeRef = useRef<HTMLButtonElement | null>(null);
  const lastFocused = useRef<HTMLElement | null>(null);

  const open = useCallback((shot: Shot) => {
    lastFocused.current = document.activeElement as HTMLElement | null;
    setActive(ALL_SHOTS.findIndex((s) => s.src === shot.src));
  }, []);

  const close = useCallback(() => {
    setActive(null);
    lastFocused.current?.focus?.();
  }, []);

  const step = useCallback((delta: number) => {
    setActive((prev) => {
      if (prev === null) return prev;
      return (prev + delta + ALL_SHOTS.length) % ALL_SHOTS.length;
    });
  }, []);

  useEffect(() => {
    if (active === null) return;
    closeRef.current?.focus();
    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 prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [active, close, step]);

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

  return (
    <section
      className="relative w-full overflow-hidden bg-slate-50 py-24 sm:py-28 lg:py-32 dark:bg-slate-950"
      aria-labelledby={`${styleId}-heading`}
    >
      <style>{`
        @keyframes gtm-scroll-left {
          from { transform: translate3d(0, 0, 0); }
          to { transform: translate3d(-50%, 0, 0); }
        }
        @keyframes gtm-scroll-right {
          from { transform: translate3d(-50%, 0, 0); }
          to { transform: translate3d(0, 0, 0); }
        }
        @keyframes gtm-fade-up {
          from { opacity: 0; transform: translate3d(0, 14px, 0); }
          to { opacity: 1; transform: translate3d(0, 0, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
          [style*="gtm-scroll"], .gtm-band [class*="animation"] { animation: none !important; }
          .gtm-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
        }
      `}</style>

      {/* Ambient background */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0"
      >
        <div className="absolute -left-24 top-10 h-72 w-72 rounded-full bg-indigo-300/30 blur-[100px] dark:bg-indigo-600/20" />
        <div className="absolute -right-16 bottom-8 h-80 w-80 rounded-full bg-rose-300/25 blur-[110px] dark:bg-violet-700/20" />
        <div
          className="absolute inset-0 opacity-[0.4] dark:opacity-[0.25]"
          style={{
            backgroundImage:
              "linear-gradient(to right, rgba(100,116,139,0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(100,116,139,0.12) 1px, transparent 1px)",
            backgroundSize: "56px 56px",
            maskImage:
              "radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 85%)",
            WebkitMaskImage:
              "radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 85%)",
          }}
        />
      </div>

      {/* Header */}
      <div className="relative mx-auto mb-16 max-w-3xl px-6 text-center">
        <span
          className="gtm-reveal inline-flex items-center gap-2 rounded-full border border-slate-300/70 bg-white/60 px-3.5 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-slate-600 backdrop-blur-sm dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
          style={{ animation: "gtm-fade-up 0.7s 0.05s both ease-out" }}
        >
          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
          Selected Works · 2020–2026
        </span>
        <h2
          id={`${styleId}-heading`}
          className="gtm-reveal mt-6 text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl dark:text-white"
          style={{ animation: "gtm-fade-up 0.7s 0.12s both ease-out" }}
        >
          Field Notes in Light
        </h2>
        <p
          className="gtm-reveal mx-auto mt-5 max-w-xl text-pretty text-base leading-relaxed text-slate-600 sm:text-lg dark:text-slate-400"
          style={{ animation: "gtm-fade-up 0.7s 0.2s both ease-out" }}
        >
          A wandering archive of landscapes, faces, and quiet streets. Hover to
          pause the drift; select any frame to see it full.
        </p>
      </div>

      {/* Tilted, edge-faded marquee band */}
      <div
        className="gtm-band relative -mx-[8vw] rotate-[-3.5deg]"
        style={{
          maskImage:
            "linear-gradient(to right, transparent, black 12%, black 88%, transparent)",
          WebkitMaskImage:
            "linear-gradient(to right, transparent, black 12%, black 88%, transparent)",
        }}
      >
        <div className="flex flex-col gap-5 py-8">
          <Row
            shots={ROW_ONE}
            direction="left"
            onOpen={open}
            ariaLabel="Gallery, first band"
          />
          <Row
            shots={ROW_TWO}
            direction="right"
            onOpen={open}
            ariaLabel="Gallery, second band"
          />
        </div>
      </div>

      {/* Footnote */}
      <div className="relative mx-auto mt-16 max-w-3xl px-6 text-center">
        <p className="text-sm text-slate-500 dark:text-slate-500">
          {ALL_SHOTS.length} frames · shot on 35mm and medium format · use
          arrow keys inside the viewer
        </p>
      </div>

      {/* Lightbox */}
      <AnimatePresence>
        {current && (
          <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/80 p-4 backdrop-blur-md sm:p-8"
            role="dialog"
            aria-modal="true"
            aria-label={`${current.title}, ${current.category}`}
            onClick={close}
          >
            <button
              ref={closeRef}
              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 outline-none transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                aria-hidden="true"
              >
                <path d="M6 6l12 12M18 6L6 18" />
              </svg>
            </button>

            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                step(-1);
              }}
              aria-label="Previous photo"
              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 outline-none transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400 sm:left-6"
            >
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M15 18l-6-6 6-6" />
              </svg>
            </button>

            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                step(1);
              }}
              aria-label="Next photo"
              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 outline-none transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-indigo-400 sm:right-6"
            >
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M9 6l6 6-6 6" />
              </svg>
            </button>

            <motion.figure
              key={current.src}
              initial={{ opacity: 0, scale: 0.96, y: 12 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.98 }}
              transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
              className="relative flex max-h-[86vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-slate-900 shadow-2xl ring-1 ring-white/10"
              onClick={(e) => e.stopPropagation()}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={current.src}
                alt={current.alt}
                loading="lazy"
                draggable={false}
                className="max-h-[70vh] w-full select-none bg-slate-800 object-contain"
              />
              <figcaption className="flex flex-col gap-1 border-t border-white/10 bg-slate-900/95 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                  <p className="text-[0.62rem] font-semibold uppercase tracking-[0.2em] text-indigo-300">
                    {current.category}
                  </p>
                  <p className="mt-1 text-lg font-semibold text-white">
                    {current.title}
                  </p>
                </div>
                <p className="text-sm font-medium text-slate-400">
                  {current.location}
                </p>
              </figcaption>
            </motion.figure>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}