"use client";

import Image from "next/image";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";

export default function ScrollHero({
  src,
  alt,
}: {
  src: string;
  alt: string;
}) {
  const ref = useRef<HTMLDivElement | null>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });

  // Tech-style: slightly more noticeable than Apple A, but still classy
  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1.0]);
  const y = useTransform(scrollYProgress, [0, 1], [0, 18]);

  return (
    <div ref={ref} className="rounded-3xl glass-strong specular overflow-hidden">
      <div className="relative h-[320px] md:h-[420px] w-full">
        <motion.div style={{ scale, y }} className="absolute inset-0">
          <Image
            src={src}
            alt={alt}
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/15 via-black/0 to-transparent pointer-events-none" />
        </motion.div>
      </div>
    </div>
  );
}