Contrast Pop Effect

"use client";

export default function ImgfxContrastPop() {
  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-20 dark:bg-neutral-950 sm:px-10 sm:py-28">
      <style>{`
        .cpop-frame {
          transition: box-shadow 500ms ease, transform 500ms ease;
        }
        .cpop-img {
          filter: contrast(0.72) saturate(0.62) brightness(1.08);
          transform: scale(1.02);
          transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
          will-change: filter, transform;
        }
        .cpop-frame:hover .cpop-img,
        .cpop-frame:focus-visible .cpop-img {
          filter: contrast(1.18) saturate(1.28) brightness(1);
          transform: scale(1);
        }
        .cpop-badge {
          opacity: 0;
          transform: translateY(6px);
          transition: opacity 500ms ease, transform 500ms ease;
        }
        .cpop-frame:hover .cpop-badge,
        .cpop-frame:focus-visible .cpop-badge {
          opacity: 1;
          transform: translateY(0);
        }
        @media (prefers-reduced-motion: reduce) {
          .cpop-frame,
          .cpop-img,
          .cpop-badge {
            transition: none !important;
          }
          .cpop-img {
            transform: none;
          }
        }
      `}</style>

      <div className="mx-auto max-w-3xl text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600 dark:text-indigo-400">
          Image Effect / Contrast Pop
        </p>
        <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Flat now, vivid on touch
        </h2>
        <p className="mt-4 text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
          The photo sits muted and low-contrast until you engage it, then snaps
          into punchy, saturated color. Hover, or tab to it, to feel the shift.
        </p>
      </div>

      <div className="mx-auto mt-12 max-w-2xl">
        <figure
          tabIndex={0}
          className="cpop-frame group relative block cursor-pointer overflow-hidden rounded-2xl bg-neutral-200 shadow-lg outline-none ring-1 ring-neutral-900/5 hover:shadow-2xl focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-800 dark:ring-white/10"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="A vivid landscape photograph that gains punchy contrast and saturation on hover"
            loading="lazy"
            draggable={false}
            className="cpop-img aspect-[4/3] w-full object-cover"
          />

          <figcaption className="cpop-badge pointer-events-none absolute bottom-4 left-4 rounded-full bg-neutral-900/80 px-4 py-1.5 text-xs font-medium text-white backdrop-blur-sm dark:bg-white/85 dark:text-neutral-900">
            Contrast engaged
          </figcaption>
        </figure>

        <p className="mt-4 text-center text-sm text-neutral-500 dark:text-neutral-500">
          Hover to reveal the full-contrast image.
        </p>
      </div>
    </section>
  );
}