Color Wash Effect

"use client";

import { useState } from "react";

export default function ImgfxColorWash() {
  const [active, setActive] = useState(false);

  return (
    <section className="relative w-full bg-white px-6 py-20 sm:py-28 dark:bg-neutral-950">
      <style>{`
        .cwash-overlay {
          background: linear-gradient(115deg, rgba(99,102,241,0.72) 0%, rgba(139,92,246,0.68) 45%, rgba(244,63,94,0.60) 100%);
          transform: translateX(0);
          transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
          will-change: transform;
        }
        .cwash-card:hover .cwash-overlay,
        .cwash-card:focus-visible .cwash-overlay,
        .cwash-card.is-active .cwash-overlay {
          transform: translateX(101%);
        }
        .cwash-img {
          filter: saturate(0.72) contrast(0.98);
          transform: scale(1.04);
          transition: filter 720ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .cwash-card:hover .cwash-img,
        .cwash-card:focus-visible .cwash-img,
        .cwash-card.is-active .cwash-img {
          filter: saturate(1.08) contrast(1.02);
          transform: scale(1);
        }
        .cwash-sheen {
          background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
          transform: translateX(-30%);
          opacity: 0;
          transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1), opacity 720ms ease;
        }
        .cwash-card:hover .cwash-sheen,
        .cwash-card:focus-visible .cwash-sheen,
        .cwash-card.is-active .cwash-sheen {
          transform: translateX(140%);
          opacity: 1;
        }
        @media (prefers-reduced-motion: reduce) {
          .cwash-overlay,
          .cwash-img,
          .cwash-sheen {
            transition: none !important;
          }
        }
      `}</style>

      <div className="mx-auto max-w-2xl text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </p>
        <h2 className="mt-3 text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl dark:text-white">
          Colour Wash Reveal
        </h2>
        <p className="mt-4 text-base text-neutral-600 dark:text-neutral-400">
          A tinted gradient veils the photo, then slides away to reveal its full colour.
        </p>
      </div>

      <div className="mx-auto mt-12 flex max-w-md justify-center">
        <button
          type="button"
          aria-pressed={active}
          onClick={() => setActive((v) => !v)}
          onMouseEnter={() => setActive(false)}
          className={`cwash-card group relative block w-full overflow-hidden rounded-2xl bg-neutral-200 shadow-xl ring-1 ring-neutral-900/5 outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-800 dark:ring-white/10 ${
            active ? "is-active" : ""
          }`}
        >
          <div className="relative aspect-[4/5] w-full">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g14.webp"
              alt="A quiet architectural scene revealed beneath a sliding colour wash"
              loading="lazy"
              draggable={false}
              className="cwash-img absolute inset-0 h-full w-full object-cover"
            />
            <div className="cwash-overlay pointer-events-none absolute inset-0" aria-hidden="true" />
            <div className="cwash-sheen pointer-events-none absolute inset-0" aria-hidden="true" />
          </div>

          <span className="pointer-events-none absolute bottom-4 left-4 rounded-full bg-black/45 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm transition-opacity duration-500 group-hover:opacity-0">
            Hover to reveal
          </span>
        </button>
      </div>
    </section>
  );
}