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

export function AppleRevealScroll() {
  const containerRef = useRef<HTMLDivElement>(null);

  const { scrollYProgress } = useScroll({
    target: containerRef,
  });

  // Animations mapped to scroll progress
  const scale = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0.5, 1, 1, 0.5]);
  const rotate = useTransform(scrollYProgress, [0, 0.5, 1], [0, 180, 360]);
  const opacity1 = useTransform(scrollYProgress, [0.1, 0.2, 0.3], [0, 1, 0]);
  const opacity2 = useTransform(scrollYProgress, [0.4, 0.5, 0.6], [0, 1, 0]);
  const opacity3 = useTransform(scrollYProgress, [0.7, 0.8, 0.9], [0, 1, 0]);

  return (
    <div className="w-full bg-[#000] rounded-xl border border-border relative overflow-hidden h-[500px]">
      <div 
        ref={containerRef} 
        className="w-full h-[500px] overflow-y-auto no-scrollbar scroll-smooth relative"
      >
        <div className="h-[200vh] w-full relative">
          <div className="sticky top-0 h-[500px] w-full flex items-center justify-center overflow-hidden">
            
            <motion.div 
              style={{ scale, rotateX: rotate, rotateY: rotate }}
              className="w-48 h-48 bg-gradient-to-br from-zinc-200 to-zinc-600 rounded-3xl shadow-2xl flex items-center justify-center"
            >
              <span className="text-4xl font-bold text-zinc-900 tracking-tighter">PRO</span>
            </motion.div>

            <motion.div 
              style={{ opacity: opacity1 }}
              className="absolute left-10 top-20 max-w-[200px]"
            >
              <h3 className="text-2xl font-bold text-white mb-2">Titanium Build</h3>
              <p className="text-zinc-400 text-sm">Forged from aerospace-grade titanium for ultimate durability.</p>
            </motion.div>

            <motion.div 
              style={{ opacity: opacity2 }}
              className="absolute right-10 top-1/2 -translate-y-1/2 max-w-[200px] text-right"
            >
              <h3 className="text-2xl font-bold text-white mb-2">A17 Pro Chip</h3>
              <p className="text-zinc-400 text-sm">The most powerful chip ever put in a smartphone.</p>
            </motion.div>

            <motion.div 
              style={{ opacity: opacity3 }}
              className="absolute left-10 bottom-20 max-w-[200px]"
            >
              <h3 className="text-2xl font-bold text-white mb-2">Action Button</h3>
              <p className="text-zinc-400 text-sm">A completely new way to interact with your device.</p>
            </motion.div>

            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-zinc-600 text-xs animate-bounce pointer-events-none">
              Scroll down inside container
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}