Fold Effect

"use client";

export default function ImgfxFold() {
  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-neutral-50 to-neutral-100 px-6 py-24 dark:from-neutral-950 dark:to-neutral-900 sm:py-32">
      <style>{`
        .imgfxfold-stage {
          perspective: 1800px;
          perspective-origin: 50% 45%;
        }
        .imgfxfold-frame {
          transform-style: preserve-3d;
        }
        .imgfxfold-leaf {
          transform-style: preserve-3d;
          backface-visibility: hidden;
          transition: transform 820ms cubic-bezier(0.16, 0.84, 0.24, 1),
                      box-shadow 820ms cubic-bezier(0.16, 0.84, 0.24, 1);
          will-change: transform;
        }
        .imgfxfold-left { transform-origin: left center; }
        .imgfxfold-right { transform-origin: right center; }
        .imgfxfold-shade {
          transition: opacity 820ms cubic-bezier(0.16, 0.84, 0.24, 1);
        }
        .imgfxfold-frame:hover .imgfxfold-left,
        .imgfxfold-frame:focus-visible .imgfxfold-left {
          transform: rotateY(-112deg) translateZ(0.5px);
          box-shadow: 34px 0 60px -30px rgba(0,0,0,0.55);
        }
        .imgfxfold-frame:hover .imgfxfold-right,
        .imgfxfold-frame:focus-visible .imgfxfold-right {
          transform: rotateY(112deg) translateZ(0.5px);
          box-shadow: -34px 0 60px -30px rgba(0,0,0,0.55);
        }
        .imgfxfold-frame:hover .imgfxfold-shade,
        .imgfxfold-frame:focus-visible .imgfxfold-shade {
          opacity: 0.9;
        }
        .imgfxfold-hint {
          animation: imgfxfold-breathe 2600ms ease-in-out infinite;
        }
        @keyframes imgfxfold-breathe {
          0%, 100% { opacity: 0.55; transform: translateY(0); }
          50% { opacity: 1; transform: translateY(-2px); }
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfxfold-leaf,
          .imgfxfold-shade { transition: none; }
          .imgfxfold-hint { animation: none; }
        }
      `}</style>

      <div className="mx-auto mb-12 max-w-xl text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.28em] text-indigo-600 dark:text-indigo-400">
          Paper Fold
        </p>
        <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Folded Reveal
        </h2>
        <p className="mt-3 text-sm leading-relaxed text-neutral-500 dark:text-neutral-400">
          The cover creases down the middle and swings open like two paper leaves,
          uncovering the story behind the frame.
        </p>
        <p className="imgfxfold-hint mt-4 inline-flex items-center gap-2 text-xs font-medium text-neutral-400 dark:text-neutral-500">
          <span aria-hidden="true">✦</span> hover or focus to unfold
        </p>
      </div>

      <div className="imgfxfold-stage mx-auto w-full max-w-2xl">
        <div
          tabIndex={0}
          role="group"
          aria-label="A folded cover that opens to reveal a message"
          className="imgfxfold-frame group relative mx-auto aspect-[4/3] w-full overflow-hidden rounded-2xl shadow-2xl outline-none ring-offset-4 ring-offset-neutral-100 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:ring-offset-neutral-900"
        >
          {/* Content revealed behind the fold */}
          <div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-indigo-600 via-violet-600 to-indigo-800 p-8 text-center dark:from-indigo-700 dark:via-violet-700 dark:to-indigo-900">
            <p className="text-[0.65rem] font-semibold uppercase tracking-[0.35em] text-indigo-200">
              Behind the paper
            </p>
            <p className="mt-3 max-w-xs text-2xl font-semibold leading-snug text-white sm:text-3xl">
              Every project starts with a single, careful crease.
            </p>
            <p className="mt-4 text-sm text-indigo-100/80">
              Web Innoventix &mdash; built by hand, opened with intent.
            </p>
          </div>

          {/* Left leaf */}
          <div className="imgfxfold-leaf imgfxfold-left absolute inset-y-0 left-0 w-1/2 overflow-hidden">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g07.webp"
              alt="Folded cover artwork, left half"
              loading="lazy"
              draggable={false}
              className="absolute inset-y-0 left-0 h-full w-[200%] max-w-none object-cover"
            />
            <div
              aria-hidden="true"
              className="imgfxfold-shade pointer-events-none absolute inset-0 bg-gradient-to-l from-black/45 via-transparent to-transparent opacity-30"
            />
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-y-0 right-0 w-px bg-white/25"
            />
          </div>

          {/* Right leaf */}
          <div className="imgfxfold-leaf imgfxfold-right absolute inset-y-0 right-0 w-1/2 overflow-hidden">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g07.webp"
              alt="Folded cover artwork, right half"
              loading="lazy"
              draggable={false}
              className="absolute inset-y-0 right-0 h-full w-[200%] max-w-none object-cover"
            />
            <div
              aria-hidden="true"
              className="imgfxfold-shade pointer-events-none absolute inset-0 bg-gradient-to-r from-black/45 via-transparent to-transparent opacity-30"
            />
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-y-0 left-0 w-px bg-black/20"
            />
          </div>
        </div>
      </div>
    </section>
  );
}