Curtain Right Effect

"use client";

export default function ImgfxCurtainRight() {
  return (
    <section className="relative w-full bg-neutral-50 px-6 py-20 dark:bg-neutral-950 sm:px-10 sm:py-28">
      <style>{`
        .cwr-stage { --cwr-ease: cubic-bezier(0.65, 0, 0.35, 1); }
        .cwr-curtain {
          transform: translateX(0);
          transform-origin: left center;
          transition: transform 780ms var(--cwr-ease);
          will-change: transform;
        }
        .cwr-stage:hover .cwr-curtain,
        .cwr-stage:focus-within .cwr-curtain {
          transform: translateX(101%);
        }
        .cwr-seam {
          transform: scaleX(1);
          transform-origin: right center;
          transition: transform 780ms var(--cwr-ease), opacity 300ms ease;
        }
        .cwr-stage:hover .cwr-seam,
        .cwr-stage:focus-within .cwr-seam {
          transform: scaleX(0);
          opacity: 0;
        }
        .cwr-img {
          transform: scale(1.06);
          transition: transform 900ms var(--cwr-ease);
        }
        .cwr-stage:hover .cwr-img,
        .cwr-stage:focus-within .cwr-img {
          transform: scale(1);
        }
        .cwr-hint {
          transition: opacity 400ms ease;
        }
        .cwr-stage:hover .cwr-hint,
        .cwr-stage:focus-within .cwr-hint {
          opacity: 0;
        }
        @media (prefers-reduced-motion: reduce) {
          .cwr-curtain, .cwr-seam, .cwr-img, .cwr-hint { transition: none; }
          .cwr-stage:hover .cwr-curtain,
          .cwr-stage:focus-within .cwr-curtain { transform: translateX(101%); }
        }
      `}</style>

      <div className="mx-auto flex max-w-xl flex-col items-center">
        <p className="mb-3 text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </p>
        <h2 className="mb-2 text-center text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Curtain Reveal
        </h2>
        <p className="mb-10 text-center text-sm text-neutral-500 dark:text-neutral-400">
          A colour curtain wipes to the right, drawing back to reveal the photo.
        </p>

        <div
          tabIndex={0}
          className="cwr-stage group relative aspect-[4/5] w-full max-w-md overflow-hidden rounded-2xl bg-neutral-200 shadow-xl shadow-neutral-900/10 ring-1 ring-black/5 outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-800 dark:shadow-black/40 dark:ring-white/10"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="Portrait photograph revealed as the curtain slides away"
            loading="lazy"
            draggable={false}
            className="cwr-img absolute inset-0 h-full w-full object-cover"
          />

          <div
            aria-hidden="true"
            className="cwr-curtain absolute inset-0 bg-gradient-to-br from-indigo-500 via-violet-600 to-indigo-700 dark:from-indigo-600 dark:via-violet-700 dark:to-indigo-900"
          >
            <div className="cwr-hint absolute inset-x-0 bottom-0 flex items-center justify-center gap-2 pb-6 text-[0.7rem] font-medium uppercase tracking-[0.2em] text-white/80">
              <span>Hover to reveal</span>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                className="h-3.5 w-3.5"
                aria-hidden="true"
              >
                <path
                  d="M5 12h14M13 6l6 6-6 6"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </div>
          </div>

          <div
            aria-hidden="true"
            className="cwr-seam pointer-events-none absolute inset-y-0 right-0 w-[3px] bg-white/70 shadow-[0_0_18px_4px_rgba(255,255,255,0.55)]"
          />
        </div>
      </div>
    </section>
  );
}