Headline Over Effect

"use client";

import { useRef } from "react";
import { motion, useInView, useReducedMotion } from "motion/react";

export default function ImgfxHeadlineOver() {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, margin: "-15% 0px" });
  const reduce = useReducedMotion();

  const reveal = (delay: number) =>
    reduce
      ? { initial: false as const }
      : {
          initial: { opacity: 0, y: 24 },
          animate: inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 },
          transition: { duration: 0.7, delay, ease: [0.22, 1, 0.36, 1] as const },
        };

  return (
    <section className="relative w-full bg-neutral-50 px-6 py-20 dark:bg-neutral-950 sm:px-8 sm:py-28">
      <style>{`
        @keyframes imgfxho-drift {
          0%   { transform: scale(1.06) translate3d(0, 0, 0); }
          100% { transform: scale(1.12) translate3d(0, -1.4%, 0); }
        }
        .imgfxho-frame:hover .imgfxho-media {
          transform: scale(1.05);
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfxho-media { animation: none !important; }
          .imgfxho-frame:hover .imgfxho-media { transform: none !important; }
        }
      `}</style>

      <div className="mx-auto max-w-4xl">
        <motion.p
          {...reveal(0)}
          className="mb-4 text-center text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600 dark:text-indigo-400"
        >
          Image Effect / Headline Overlay
        </motion.p>

        <motion.div
          ref={ref}
          {...reveal(0.08)}
          className="imgfxho-frame group relative overflow-hidden rounded-3xl bg-neutral-900 shadow-2xl shadow-neutral-900/20 ring-1 ring-neutral-900/10 dark:ring-white/10"
        >
          <div className="relative aspect-[16/10] w-full overflow-hidden sm:aspect-[16/9]">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g14.webp"
              alt="Aerial view of a winding coastal road cutting through dense evergreen forest"
              loading="lazy"
              draggable={false}
              className="imgfxho-media absolute inset-0 h-full w-full object-cover transition-transform duration-[1200ms] ease-out will-change-transform"
              style={
                reduce
                  ? undefined
                  : { animation: "imgfxho-drift 14s ease-in-out infinite alternate" }
              }
            />

            {/* bottom gradient scrim */}
            <div
              aria-hidden="true"
              className="absolute inset-0 bg-gradient-to-t from-neutral-950 via-neutral-950/55 to-transparent"
            />
            <div
              aria-hidden="true"
              className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-neutral-950/70 to-transparent"
            />
          </div>

          {/* overlaid copy */}
          <div className="absolute inset-x-0 bottom-0 p-6 sm:p-10">
            <span className="mb-3 inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-[11px] font-medium uppercase tracking-widest text-white/80 backdrop-blur-sm ring-1 ring-white/15">
              Field Notes
            </span>
            <h2 className="max-w-2xl text-3xl font-black leading-[1.05] tracking-tight text-white drop-shadow-sm sm:text-5xl">
              Where the road ends,
              <span className="text-emerald-300"> the view begins.</span>
            </h2>
            <p className="mt-3 max-w-md text-sm text-white/70 sm:text-base">
              A single bold headline, anchored by a soft bottom gradient so type stays
              legible over any photo.
            </p>
          </div>
        </motion.div>

        <motion.p
          {...reveal(0.2)}
          className="mt-5 text-center text-sm text-neutral-500 dark:text-neutral-400"
        >
          Hover the image for a slow zoom &mdash; the gradient keeps the headline readable.
        </motion.p>
      </div>
    </section>
  );
}