Corner Caption Gallery

"use client";

import { useRef } from "react";
import { motion, useInView, useReducedMotion } from "motion/react";

type Corner = "tl" | "tr" | "bl" | "br";

interface Shot {
  src: string;
  alt: string;
  title: string;
  place: string;
  category: string;
  year: string;
  corner: Corner;
  span: string;
  ratio: string;
}

const SHOTS: Shot[] = [
  {
    src: "/img/gallery/g03.webp",
    alt: "Fog settling over a ridge of pine at first light",
    title: "Blue Hour, Cascade Ridge",
    place: "Olympic Peninsula, WA",
    category: "Landscape",
    year: "2025",
    corner: "bl",
    span: "sm:col-span-2 sm:row-span-2",
    ratio: "aspect-[4/5]",
  },
  {
    src: "/img/gallery/g11.webp",
    alt: "Neon signage reflected in wet pavement after rain",
    title: "Rain Never Stops the Neon",
    place: "Shinjuku, Tokyo",
    category: "Street",
    year: "2024",
    corner: "tr",
    span: "",
    ratio: "aspect-square",
  },
  {
    src: "/img/gallery/g18.webp",
    alt: "Weathered fisherman mending nets at a harbour dock",
    title: "The Net Mender",
    place: "Nazaré, Portugal",
    category: "Portrait",
    year: "2025",
    corner: "br",
    span: "",
    ratio: "aspect-square",
  },
  {
    src: "/img/gallery/g24.webp",
    alt: "Sunlight raking across the ribs of a desert dune",
    title: "A Thousand Quiet Ridges",
    place: "Erg Chebbi, Morocco",
    category: "Landscape",
    year: "2023",
    corner: "tl",
    span: "sm:col-span-2",
    ratio: "aspect-[13/9]",
  },
  {
    src: "/img/gallery/g07.webp",
    alt: "Steam rising from a market stall at dawn",
    title: "Six A.M. Broth",
    place: "Hanoi, Vietnam",
    category: "Street",
    year: "2024",
    corner: "bl",
    span: "",
    ratio: "aspect-square",
  },
  {
    src: "/img/gallery/g29.webp",
    alt: "Glacial meltwater carving pale blue channels through ice",
    title: "Where the Ice Breathes",
    place: "Vatnajökull, Iceland",
    category: "Landscape",
    year: "2025",
    corner: "tr",
    span: "sm:col-span-2",
    ratio: "aspect-[13/9]",
  },
  {
    src: "/img/gallery/g15.webp",
    alt: "A dancer mid-turn, skirt caught in motion against a bare wall",
    title: "Second Position, Held",
    place: "Havana, Cuba",
    category: "Portrait",
    year: "2024",
    corner: "br",
    span: "sm:row-span-2",
    ratio: "aspect-[4/5]",
  },
  {
    src: "/img/gallery/g21.webp",
    alt: "Aerial view of terraced rice fields curling around a hillside",
    title: "Contours of Patience",
    place: "Bali, Indonesia",
    category: "Aerial",
    year: "2023",
    corner: "tl",
    span: "",
    ratio: "aspect-square",
  },
  {
    src: "/img/gallery/g33.webp",
    alt: "Warm interior of a bookshop lit by a single lamp at dusk",
    title: "The Last Reader",
    place: "Porto, Portugal",
    category: "Interior",
    year: "2025",
    corner: "bl",
    span: "",
    ratio: "aspect-square",
  },
];

const CORNER_ORIGIN: Record<Corner, string> = {
  tl: "top-3 left-3 origin-top-left",
  tr: "top-3 right-3 origin-top-right",
  bl: "bottom-3 left-3 origin-bottom-left",
  br: "bottom-3 right-3 origin-bottom-right",
};

const CORNER_HIDDEN: Record<Corner, string> = {
  tl: "-translate-x-3 -translate-y-3",
  tr: "translate-x-3 -translate-y-3",
  bl: "-translate-x-3 translate-y-3",
  br: "translate-x-3 translate-y-3",
};

function Tile({ shot, index }: { shot: Shot; index: number }) {
  const ref = useRef<HTMLElement | null>(null);
  const inView = useInView(ref, { once: true, margin: "-40px" });
  const reduce = useReducedMotion();

  return (
    <motion.article
      ref={ref}
      initial={reduce ? false : { opacity: 0, y: 26 }}
      animate={reduce ? undefined : inView ? { opacity: 1, y: 0 } : undefined}
      transition={
        reduce
          ? undefined
          : {
              duration: 0.7,
              delay: (index % 3) * 0.08,
              ease: [0.22, 1, 0.36, 1],
            }
      }
      tabIndex={0}
      aria-label={`${shot.title} — ${shot.place}, ${shot.category}, ${shot.year}`}
      className={`gcc-tile group relative overflow-hidden rounded-2xl bg-neutral-200 ring-1 ring-neutral-900/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:bg-neutral-800 dark:ring-white/10 dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-neutral-950 ${shot.span} ${shot.ratio}`}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={shot.src}
        alt={shot.alt}
        loading="lazy"
        draggable={false}
        className="gcc-img h-full w-full object-cover transition-[transform,filter] duration-[900ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform group-hover:scale-[1.06] group-focus-visible:scale-[1.06]"
      />

      {/* readability veil */}
      <div
        aria-hidden="true"
        className={`pointer-events-none absolute inset-0 bg-gradient-to-t opacity-0 transition-opacity duration-500 group-hover:opacity-100 group-focus-visible:opacity-100 ${
          shot.corner === "tl" || shot.corner === "tr"
            ? "from-transparent via-transparent to-black/45"
            : "from-black/55 via-black/5 to-transparent"
        }`}
      />

      {/* category chip — always visible, top opposite corner */}
      <span className="pointer-events-none absolute right-3 top-3 rounded-full bg-white/85 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-700 shadow-sm backdrop-blur-md transition-opacity duration-300 group-hover:opacity-0 group-focus-visible:opacity-0 dark:bg-neutral-950/70 dark:text-neutral-200">
        {shot.category}
      </span>

      {/* corner caption card */}
      <div
        className={`gcc-card pointer-events-none absolute z-10 max-w-[82%] rounded-xl bg-white/90 p-3.5 opacity-0 shadow-xl shadow-black/20 ring-1 ring-black/5 backdrop-blur-xl transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:opacity-100 group-focus-visible:opacity-100 dark:bg-neutral-900/85 dark:ring-white/10 ${CORNER_ORIGIN[shot.corner]} ${CORNER_HIDDEN[shot.corner]} group-hover:translate-x-0 group-hover:translate-y-0 group-focus-visible:translate-x-0 group-focus-visible:translate-y-0`}
      >
        <div className="flex items-baseline justify-between gap-3">
          <span className="text-[10px] font-semibold uppercase tracking-[0.16em] text-indigo-600 dark:text-indigo-400">
            {shot.category}
          </span>
          <span className="text-[10px] font-medium tabular-nums text-neutral-400 dark:text-neutral-500">
            {shot.year}
          </span>
        </div>
        <h3 className="mt-1.5 text-[15px] font-semibold leading-snug tracking-tight text-neutral-900 dark:text-white">
          {shot.title}
        </h3>
        <p className="mt-0.5 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400">
          <svg
            viewBox="0 0 24 24"
            aria-hidden="true"
            className="h-3.5 w-3.5 shrink-0 fill-none stroke-current"
            strokeWidth={1.8}
          >
            <path d="M12 21s-6-5.2-6-9.6A6 6 0 0 1 18 11.4C18 15.8 12 21 12 21Z" />
            <circle cx="12" cy="11" r="2" />
          </svg>
          {shot.place}
        </p>
      </div>
    </motion.article>
  );
}

export default function GalleryCornerCaption() {
  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 gcc-rise {
          from { opacity: 0; transform: translateY(14px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .gcc-head { animation: gcc-rise 0.8s cubic-bezier(0.22,1,0.36,1) both; }
        .gcc-head-2 { animation-delay: 0.1s; }
        @media (prefers-reduced-motion: reduce) {
          .gcc-head, .gcc-head-2 { animation: none !important; }
          .gcc-tile, .gcc-tile * { transition: none !important; }
          .gcc-img { transform: none !important; }
        }
      `}</style>

      {/* atmosphere */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -top-32 left-1/2 h-[38rem] w-[38rem] -translate-x-1/2 rounded-full bg-gradient-to-b from-indigo-200/40 via-violet-100/20 to-transparent blur-3xl dark:from-indigo-500/10 dark:via-violet-500/5"
      />

      <div className="relative mx-auto max-w-6xl">
        <header className="mb-12 flex flex-col gap-6 sm:mb-16 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="gcc-head flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.22em] text-indigo-600 dark:text-indigo-400">
              <span className="h-px w-8 bg-indigo-500/60 dark:bg-indigo-400/60" />
              Field Notes · 2023—2025
            </p>
            <h2 className="gcc-head gcc-head-2 mt-4 text-4xl font-semibold tracking-tight text-neutral-900 sm:text-5xl dark:text-white">
              The Long Way Around
            </h2>
          </div>
          <p className="gcc-head gcc-head-2 max-w-xs text-sm leading-relaxed text-neutral-500 dark:text-neutral-400">
            Thirty-six months, nine frames worth keeping. Hover or focus any
            plate to read where it was made.
          </p>
        </header>

        <div className="grid auto-rows-[minmax(0,1fr)] grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
          {SHOTS.map((shot, i) => (
            <Tile key={shot.src} shot={shot} index={i} />
          ))}
        </div>

        <p className="mt-10 text-center text-xs text-neutral-400 dark:text-neutral-600">
          Shot on 35mm and medium format · Prints available on request
        </p>
      </div>
    </section>
  );
}