Corner Fold Effect

"use client";

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

export default function ImgfxCornerFold() {
  const reduce = useReducedMotion();
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, margin: "-15% 0px" });

  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-white to-slate-50 px-6 py-20 sm:py-28 dark:from-slate-950 dark:to-slate-900">
      <style>{`
        @property --cfold-size {
          syntax: '<length>';
          inherits: true;
          initial-value: 46px;
        }
        .cfold-card {
          --cfold-size: 46px;
          transition: --cfold-size .55s cubic-bezier(.22,1,.36,1);
        }
        .cfold-card:hover,
        .cfold-card:focus-visible {
          --cfold-size: 132px;
          outline: none;
        }
        .cfold-page {
          clip-path: polygon(
            0 0,
            calc(100% - var(--cfold-size)) 0,
            100% var(--cfold-size),
            100% 100%,
            0 100%
          );
        }
        .cfold-reveal {
          clip-path: polygon(
            calc(100% - var(--cfold-size)) 0,
            100% 0,
            100% var(--cfold-size)
          );
        }
        .cfold-flap {
          width: var(--cfold-size);
          height: var(--cfold-size);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
          background: linear-gradient(135deg, #eef2ff 0%, #e2e8f0 55%, #cbd5e1 100%);
          filter: drop-shadow(-6px 6px 7px rgba(15, 23, 42, .28));
        }
        .cfold-crease {
          opacity: 0;
          transition: opacity .55s cubic-bezier(.22,1,.36,1);
        }
        .cfold-card:hover .cfold-crease,
        .cfold-card:focus-visible .cfold-crease {
          opacity: .9;
        }
        @media (prefers-color-scheme: dark) {
          .cfold-flap {
            background: linear-gradient(135deg, #312e81 0%, #1e293b 55%, #0f172a 100%);
            filter: drop-shadow(-6px 6px 8px rgba(0, 0, 0, .55));
          }
        }
        .cfold-arrow {
          animation: cfold-bob 1.9s ease-in-out infinite;
        }
        @keyframes cfold-bob {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(3px, -3px); }
        }
        @media (prefers-reduced-motion: reduce) {
          .cfold-card { transition: none; }
          .cfold-arrow { animation: none; }
        }
      `}</style>

      <div className="mx-auto max-w-2xl">
        <motion.div
          initial={reduce ? false : { opacity: 0, y: 24 }}
          animate={inView && !reduce ? { opacity: 1, y: 0 } : undefined}
          transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
          className="mb-10 text-center"
        >
          <span className="inline-block rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-indigo-600 dark:border-indigo-400/30 dark:bg-indigo-400/10 dark:text-indigo-300">
            Corner Fold
          </span>
          <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
            Peel the corner for a peek
          </h2>
          <p className="mt-3 text-base text-slate-500 dark:text-slate-400">
            The page-corner curls back on hover to reveal what waits beneath.
          </p>
        </motion.div>

        <motion.div
          ref={ref}
          initial={reduce ? false : { opacity: 0, scale: 0.96 }}
          animate={inView && !reduce ? { opacity: 1, scale: 1 } : undefined}
          transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1], delay: 0.1 }}
          className="cfold-card group relative mx-auto aspect-[4/3] w-full cursor-pointer overflow-hidden rounded-2xl ring-1 ring-slate-200 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:ring-slate-700"
          tabIndex={0}
          role="group"
          aria-label="Coastal cliffs at golden hour. Peel the corner to reveal a caption."
        >
          {/* Hidden hint revealed under the peeled corner */}
          <div className="cfold-reveal absolute inset-0 z-10 bg-gradient-to-br from-indigo-600 to-violet-700">
            <div className="absolute right-4 top-3 flex items-center gap-1.5 text-right text-white">
              <span className="cfold-arrow text-lg leading-none" aria-hidden="true">
                &#8599;
              </span>
              <span className="text-[11px] font-semibold uppercase tracking-wide">
                Shot on
                <br />
                a 35mm
              </span>
            </div>
          </div>

          {/* The photo (clipped so its corner lifts away) */}
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Coastal cliffs washed in warm golden-hour light above a calm sea"
            loading="lazy"
            draggable={false}
            className="cfold-page absolute inset-0 z-20 h-full w-full object-cover"
          />

          {/* Crease shadow cast onto the page as it lifts */}
          <div
            className="cfold-crease absolute right-0 top-0 z-30 h-40 w-40 bg-gradient-to-bl from-black/25 to-transparent"
            aria-hidden="true"
          />

          {/* The folded-over flap (backside of the page) */}
          <div className="cfold-flap absolute right-0 top-0 z-40" aria-hidden="true" />
        </motion.div>

        <p className="mt-6 text-center text-sm text-slate-400 dark:text-slate-500">
          Hover or focus the frame &mdash; the corner does the rest.
        </p>
      </div>
    </section>
  );
}