Frame Hover Gallery

"use client";

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

type Shape = "portrait" | "landscape" | "square";

interface Frame {
  id: number;
  src: string;
  title: string;
  category: string;
  location: string;
  shape: Shape;
}

const FRAMES: Frame[] = [
  {
    id: 1,
    src: "/img/gallery/g03.webp",
    title: "Coastal Light",
    category: "Landscape",
    location: "Cape Perpetua",
    shape: "landscape",
  },
  {
    id: 2,
    src: "/img/gallery/g07.webp",
    title: "Studio 04",
    category: "Portrait",
    location: "North Wing",
    shape: "portrait",
  },
  {
    id: 3,
    src: "/img/gallery/g12.webp",
    title: "Quiet Geometry",
    category: "Architecture",
    location: "Lisbon",
    shape: "square",
  },
  {
    id: 4,
    src: "/img/gallery/g18.webp",
    title: "Understory",
    category: "Nature",
    location: "Hoh Rainforest",
    shape: "portrait",
  },
  {
    id: 5,
    src: "/img/gallery/g21.webp",
    title: "Salt & Fog",
    category: "Landscape",
    location: "Big Sur",
    shape: "landscape",
  },
  {
    id: 6,
    src: "/img/gallery/g24.webp",
    title: "Warm Neutral",
    category: "Still Life",
    location: "Table No.6",
    shape: "square",
  },
  {
    id: 7,
    src: "/img/gallery/g29.webp",
    title: "First Frost",
    category: "Nature",
    location: "Dolomites",
    shape: "portrait",
  },
  {
    id: 8,
    src: "/img/gallery/g31.webp",
    title: "Low Horizon",
    category: "Landscape",
    location: "Rannoch Moor",
    shape: "landscape",
  },
  {
    id: 9,
    src: "/img/gallery/g35.webp",
    title: "In Profile",
    category: "Portrait",
    location: "Studio 09",
    shape: "square",
  },
];

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

function FrameCard({ frame, index }: { frame: Frame; index: number }) {
  const ref = useRef<HTMLElement | null>(null);
  const inView = useInView(ref, { once: true, margin: "-60px" });

  return (
    <motion.figure
      ref={ref}
      initial={{ opacity: 0, y: 26 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{
        duration: 0.7,
        delay: (index % 3) * 0.08 + Math.floor(index / 3) * 0.04,
        ease: [0.22, 1, 0.36, 1],
      }}
      className={`gfh-card group relative overflow-hidden rounded-sm bg-neutral-200 dark:bg-neutral-800 ${SHAPE_CLASS[frame.shape]}`}
    >
      {/* image */}
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={frame.src}
        alt={`${frame.title} — ${frame.category} photograph taken at ${frame.location}`}
        loading="lazy"
        draggable={false}
        className="gfh-img absolute inset-0 h-full w-full object-cover"
      />

      {/* darkening veil for caption legibility */}
      <div className="gfh-veil pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-950/70 via-neutral-950/10 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />

      {/* animated inset frame — drawn with an SVG stroke */}
      <svg
        className="pointer-events-none absolute inset-0 h-full w-full"
        preserveAspectRatio="none"
        viewBox="0 0 100 100"
        aria-hidden="true"
      >
        <rect
          className="gfh-stroke"
          x="4"
          y="4"
          width="92"
          height="92"
          rx="1.2"
          fill="none"
          vectorEffect="non-scaling-stroke"
          pathLength={1}
        />
      </svg>

      {/* corner ticks */}
      <span className="gfh-tick gfh-tick-tl pointer-events-none absolute left-[13px] top-[13px]" aria-hidden="true" />
      <span className="gfh-tick gfh-tick-br pointer-events-none absolute bottom-[13px] right-[13px]" aria-hidden="true" />

      {/* caption */}
      <figcaption className="gfh-cap pointer-events-none absolute inset-x-0 bottom-0 p-5 sm:p-6">
        <span className="gfh-cat mb-1.5 inline-block text-[0.62rem] font-medium uppercase tracking-[0.22em] text-white/70">
          {frame.category}
        </span>
        <h3 className="gfh-title text-lg font-semibold leading-tight text-white sm:text-xl">
          {frame.title}
        </h3>
        <p className="gfh-loc mt-0.5 text-xs font-light tracking-wide text-white/65">
          {frame.location}
        </p>
      </figcaption>
    </motion.figure>
  );
}

export default function GalleryFrameHover() {
  const [active, setActive] = useState<Frame | null>(null);
  const headRef = useRef<HTMLDivElement | null>(null);
  const headInView = useInView(headRef, { once: true, margin: "-40px" });

  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-5 py-20 text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100 sm:px-8 sm:py-28">
      <style>{`
        .gfh-stroke {
          stroke: rgba(255,255,255,0.85);
          stroke-width: 1.5px;
          stroke-dasharray: 1;
          stroke-dashoffset: 1;
          opacity: 0;
          transition: stroke-dashoffset 0.7s cubic-bezier(0.22,1,0.36,1),
                      opacity 0.35s ease;
        }
        .gfh-card:hover .gfh-stroke,
        .gfh-card:focus-within .gfh-stroke {
          stroke-dashoffset: 0;
          opacity: 1;
        }

        .gfh-img {
          transition: transform 0.9s cubic-bezier(0.22,1,0.36,1),
                      filter 0.6s ease;
          transform: scale(1.02);
          filter: saturate(0.94);
        }
        .gfh-card:hover .gfh-img,
        .gfh-card:focus-within .gfh-img {
          transform: scale(1.08);
          filter: saturate(1.05);
        }

        .gfh-tick {
          width: 14px;
          height: 14px;
          opacity: 0;
          transition: opacity 0.5s ease 0.25s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.25s;
        }
        .gfh-tick-tl {
          border-top: 1.5px solid rgba(255,255,255,0.9);
          border-left: 1.5px solid rgba(255,255,255,0.9);
          transform: translate(6px, 6px);
        }
        .gfh-tick-br {
          border-bottom: 1.5px solid rgba(255,255,255,0.9);
          border-right: 1.5px solid rgba(255,255,255,0.9);
          transform: translate(-6px, -6px);
        }
        .gfh-card:hover .gfh-tick,
        .gfh-card:focus-within .gfh-tick {
          opacity: 1;
          transform: translate(0, 0);
        }

        .gfh-cap > * {
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
        }
        .gfh-card:hover .gfh-cat,
        .gfh-card:focus-within .gfh-cat { transition-delay: 0.05s; }
        .gfh-card:hover .gfh-title,
        .gfh-card:focus-within .gfh-title { transition-delay: 0.11s; }
        .gfh-card:hover .gfh-loc,
        .gfh-card:focus-within .gfh-loc { transition-delay: 0.17s; }
        .gfh-card:hover .gfh-cap > *,
        .gfh-card:focus-within .gfh-cap > * {
          opacity: 1;
          transform: translateY(0);
        }

        @keyframes gfh-fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        .gfh-lightbox { animation: gfh-fade-in 0.3s ease both; }

        @media (prefers-reduced-motion: reduce) {
          .gfh-stroke,
          .gfh-img,
          .gfh-tick,
          .gfh-cap > * {
            transition: none !important;
          }
          .gfh-stroke { stroke-dashoffset: 0; }
          .gfh-lightbox { animation: none; }
        }
      `}</style>

      {/* soft ambient wash */}
      <div
        className="pointer-events-none absolute -top-32 left-1/2 h-[38rem] w-[38rem] -translate-x-1/2 rounded-full bg-indigo-200/40 blur-[130px] dark:bg-indigo-500/10"
        aria-hidden="true"
      />

      <div className="relative mx-auto max-w-6xl">
        {/* header */}
        <div ref={headRef} className="mb-14 flex flex-col gap-6 sm:mb-16 sm:flex-row sm:items-end sm:justify-between">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={headInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
          >
            <span className="mb-3 inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[0.28em] text-indigo-600 dark:text-indigo-400">
              <span className="h-px w-8 bg-indigo-500/60" />
              Selected Works
            </span>
            <h2 className="max-w-xl text-4xl font-semibold leading-[1.05] tracking-tight sm:text-5xl">
              The Framed Collection
            </h2>
          </motion.div>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={headInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.7, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
            className="max-w-sm text-sm leading-relaxed text-neutral-600 dark:text-neutral-400"
          >
            Hover any plate to draw its frame and reveal the detail. Nine
            photographs, each printed, mounted and quietly considered.
          </motion.p>
        </div>

        {/* masonry-ish grid */}
        <div className="grid auto-rows-[minmax(0,1fr)] grid-cols-2 gap-4 sm:gap-5 md:grid-cols-3">
          {FRAMES.map((frame, i) => (
            <button
              key={frame.id}
              type="button"
              onClick={() => setActive(frame)}
              aria-label={`Open ${frame.title}, ${frame.category}, in full view`}
              className={`gfh-btn block w-full rounded-sm text-left 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 ${
                frame.shape === "portrait" ? "row-span-2" : ""
              }`}
            >
              <FrameCard frame={frame} index={i} />
            </button>
          ))}
        </div>
      </div>

      {/* lightbox */}
      <AnimatePresence>
        {active && (
          <motion.div
            className="gfh-lightbox fixed inset-0 z-50 flex items-center justify-center bg-neutral-950/85 p-5 backdrop-blur-md sm:p-10"
            role="dialog"
            aria-modal="true"
            aria-label={`${active.title}, enlarged`}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.25 }}
            onClick={() => setActive(null)}
            onKeyDown={(e) => {
              if (e.key === "Escape") setActive(null);
            }}
          >
            <motion.figure
              initial={{ opacity: 0, scale: 0.94, y: 12 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.96 }}
              transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
              className="relative flex max-h-full max-w-3xl flex-col overflow-hidden rounded-lg bg-neutral-100 shadow-2xl ring-1 ring-white/10 dark:bg-neutral-900"
              onClick={(e) => e.stopPropagation()}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={active.src}
                alt={`${active.title} — ${active.category} photograph taken at ${active.location}, enlarged`}
                loading="lazy"
                draggable={false}
                className="max-h-[72vh] w-full object-contain"
              />
              <figcaption className="flex items-center justify-between gap-4 px-6 py-4">
                <div>
                  <span className="text-[0.62rem] font-medium uppercase tracking-[0.22em] text-indigo-600 dark:text-indigo-400">
                    {active.category}
                  </span>
                  <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
                    {active.title}
                  </h3>
                  <p className="text-xs text-neutral-500 dark:text-neutral-400">
                    {active.location}
                  </p>
                </div>
              </figcaption>
            </motion.figure>

            <button
              type="button"
              onClick={() => setActive(null)}
              aria-label="Close full view"
              autoFocus
              className="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white outline-none ring-1 ring-white/20 backdrop-blur transition hover:bg-white/20 focus-visible:ring-2 focus-visible:ring-white sm:right-6 sm:top-6"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path
                  d="M6 6l12 12M18 6L6 18"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              </svg>
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}