Split Open Effect

"use client";

export default function ImgfxSplitOpen() {
  const src = "/img/gallery/g12.webp";

  return (
    <section className="relative w-full bg-white px-6 py-20 sm:py-28 dark:bg-neutral-950">
      <style>{`
        @media (prefers-reduced-motion: reduce) {
          .imgfxso-door { transition: none !important; }
          .imgfxso-group:hover .imgfxso-door,
          .imgfxso-group:focus-within .imgfxso-door { transform: none !important; }
        }
      `}</style>

      <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.22em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </p>
        <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-50">
          Split Open
        </h2>
        <p className="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
          The photo splits down the middle and swings open like a pair of doors.
        </p>

        <figure
          tabIndex={0}
          aria-label="A photograph that splits down the centre and opens on hover"
          className="imgfxso-group group relative mt-12 aspect-[4/3] w-full max-w-2xl cursor-pointer overflow-hidden rounded-2xl bg-neutral-900 shadow-xl ring-1 ring-black/5 outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:ring-white/10"
          style={{ perspective: "1400px" }}
        >
          {/* Revealed panel behind the two halves */}
          <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 px-6 text-center">
            <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-white/70">
              Behind the frame
            </p>
            <p className="mt-3 max-w-xs text-lg font-medium leading-snug text-white">
              Every image holds a second story. Hover to let it open.
            </p>
          </div>

          {/* Left half — hinged on the left edge */}
          <div
            className="imgfxso-door absolute left-0 top-0 h-full w-1/2 origin-left overflow-hidden transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] [backface-visibility:hidden] group-hover:[transform:rotateY(-62deg)] group-focus-within:[transform:rotateY(-62deg)]"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={src}
              alt="Featured photograph, left half"
              loading="lazy"
              draggable={false}
              className="h-full w-[200%] max-w-none object-cover object-left"
            />
            <span className="pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent to-black/30 opacity-0 transition-opacity duration-700 group-hover:opacity-100 group-focus-within:opacity-100" />
          </div>

          {/* Right half — hinged on the right edge */}
          <div
            className="imgfxso-door absolute right-0 top-0 h-full w-1/2 origin-right overflow-hidden transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] [backface-visibility:hidden] group-hover:[transform:rotateY(62deg)] group-focus-within:[transform:rotateY(62deg)]"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={src}
              alt="Featured photograph, right half"
              loading="lazy"
              draggable={false}
              className="h-full w-[200%] max-w-none object-cover object-right"
            />
            <span className="pointer-events-none absolute inset-0 bg-gradient-to-l from-transparent to-black/30 opacity-0 transition-opacity duration-700 group-hover:opacity-100 group-focus-within:opacity-100" />
          </div>

          {/* Centre seam highlight */}
          <span className="pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-white/40 opacity-70 transition-opacity duration-500 group-hover:opacity-0 group-focus-within:opacity-0" />

          <figcaption className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-black/55 px-3 py-1 text-[0.7rem] font-medium text-white/90 backdrop-blur-sm transition-opacity duration-500 group-hover:opacity-0 group-focus-within:opacity-0">
            Hover to open
          </figcaption>
        </figure>
      </div>
    </section>
  );
}