"use client";

import { useRef } from "react";
import { motion, useScroll, useTransform, useSpring } from "framer-motion";

export default function ScrollVideo() {
  const containerRef = useRef<HTMLDivElement>(null);
  
  // Use scroll progress within this section
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end end"]
  });

  // Smooth out the scroll value
  const smoothProgress = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  // Calculate the expansion: Starts at 25% circle, grows to 150% (to fully cover screen)
  const clipPathValue = useTransform(smoothProgress, [0, 1], ["circle(25% at 50% 50%)", "circle(100% at 50% 50%)"]);
  
  // Also fade the overlay
  const overlayOpacity = useTransform(smoothProgress, [0, 0.8], [0.3, 0]);

  return (
    <section 
      ref={containerRef} 
      className="relative h-[250vh] bg-white"
    >
      <div className="sticky top-0 h-screen w-full flex items-center justify-center overflow-hidden z-30">
        <motion.div 
          style={{ clipPath: clipPathValue }}
          className="relative w-full h-full flex items-center justify-center bg-white will-change-transform shadow-2xl"
        >
          {/* YouTube Embed with Hardware Acceleration */}
          <div className="absolute inset-0 pointer-events-none scale-110 will-change-transform">
            <iframe
              className="absolute top-1/2 left-1/2 w-[115vw] h-[115vh] -translate-x-1/2 -translate-y-1/2 object-cover pointer-events-none"
              src="https://www.youtube.com/embed/avqL1kRkX0c?autoplay=1&mute=1&controls=0&loop=1&playlist=avqL1kRkX0c&playsinline=1&rel=0&modestbranding=1"
              allow="autoplay; encrypted-media"
              allowFullScreen
            ></iframe>
          </div>
          
          {/* Subtle Overlay */}
          <motion.div 
            style={{ opacity: overlayOpacity }}
            className="absolute inset-0 bg-black/20 z-10 pointer-events-none" 
          />
        </motion.div>
      </div>
    </section>
  );
}