Label Strip Effect

"use client";

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

export default function ImgfxLabelStrip() {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.4 });
  const reduce = useReducedMotion();

  const animate = reduce ? {} : inView ? { opacity: 1, y: 0 } : {};
  const initial = reduce ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 };

  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>{`
        @keyframes lblstrip_sheen {
          0% { transform: translateY(-120%); }
          100% { transform: translateY(120%); }
        }
        .lblstrip_card:hover .lblstrip_img {
          transform: scale(1.05);
        }
        .lblstrip_card:hover .lblstrip_sheen {
          animation: lblstrip_sheen 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        .lblstrip_card:hover .lblstrip_barcode {
          opacity: 0.9;
        }
        @media (prefers-reduced-motion: reduce) {
          .lblstrip_img,
          .lblstrip_barcode { transition: none !important; }
          .lblstrip_card:hover .lblstrip_img { transform: none; }
          .lblstrip_card:hover .lblstrip_sheen { animation: none; }
        }
      `}</style>

      <motion.div
        ref={ref}
        initial={initial}
        animate={animate}
        transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
        className="mx-auto max-w-4xl"
      >
        <div className="mb-8 text-center">
          <span className="inline-block text-xs font-semibold uppercase tracking-[0.28em] text-indigo-600 dark:text-indigo-400">
            Image Effect
          </span>
          <h2 className="mt-3 text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
            Vertical Label Strip
          </h2>
          <p className="mx-auto mt-3 max-w-md text-sm text-neutral-500 dark:text-neutral-400">
            A spine of type runs down the edge of the frame. Hover to see it catch the light.
          </p>
        </div>

        <figure className="lblstrip_card group relative mx-auto flex max-w-2xl overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-neutral-900/10 dark:bg-neutral-900 dark:ring-white/10">
          {/* Vertical label strip */}
          <div className="relative flex w-14 shrink-0 flex-col items-center justify-between overflow-hidden bg-neutral-900 py-5 dark:bg-indigo-600 sm:w-16">
            <span
              className="lblstrip_sheen pointer-events-none absolute inset-x-0 -top-full h-1/2 bg-gradient-to-b from-transparent via-white/25 to-transparent"
              aria-hidden="true"
            />
            <span
              className="text-[9px] font-semibold uppercase tracking-[0.3em] text-white/70"
              aria-hidden="true"
            >
              N°07
            </span>
            <span
              className="select-none whitespace-nowrap text-sm font-bold uppercase tracking-[0.4em] text-white"
              style={{ writingMode: "vertical-rl" }}
            >
              Field Notes
            </span>
            <span
              className="lblstrip_barcode flex h-6 items-end gap-[2px] opacity-40 transition-opacity duration-500"
              aria-hidden="true"
            >
              {[6, 12, 4, 16, 8, 14, 5, 10].map((h, i) => (
                <span
                  key={i}
                  className="w-[2px] bg-white"
                  style={{ height: `${h}px` }}
                />
              ))}
            </span>
          </div>

          {/* Image */}
          <div className="relative aspect-[4/3] flex-1 overflow-hidden">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g07.webp"
              alt="A quiet landscape captured on a field expedition"
              loading="lazy"
              draggable={false}
              className="lblstrip_img h-full w-full object-cover transition-transform duration-[900ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
            />
            <figcaption className="pointer-events-none absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-4 py-3">
              <span className="text-xs font-medium text-white/90">
                Coastal survey — 07:42, low tide
              </span>
            </figcaption>
          </div>
        </figure>
      </motion.div>
    </section>
  );
}