"use client"; import { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Volume2, VolumeX, ShoppingBag, Search, Menu, X, Radio, Sparkles, Heart } from "lucide-react"; interface ColorOption { name: string; hex: string; textClass: string; bgHex: string; } export default function AirpodsHero({ className }: { className?: string }) { const [scrollProgress, setScrollProgress] = useState(0.01); const [isMuted, setIsMuted] = useState(true); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [cartCount, setCartCount] = useState(0); const [isLiked, setIsLiked] = useState(false); const containerRef = useRef(null); const videoRef = useRef(null); const _colors: ColorOption[] = [ { name: "Space Gray", hex: "bg-zinc-800", textClass: "text-zinc-300", bgHex: "#1f1f23" }, { name: "Silver", hex: "bg-zinc-300", textClass: "text-zinc-100", bgHex: "#e3e4e5" }, { name: "Sky Blue", hex: "bg-sky-400", textClass: "text-sky-300", bgHex: "#89b9d3" }, { name: "Pink", hex: "bg-rose-400", textClass: "text-rose-300", bgHex: "#e3a8a3" }, { name: "Green", hex: "bg-emerald-400", textClass: "text-emerald-300", bgHex: "#8cb39d" }, ]; useEffect(() => { const video = videoRef.current; if (!video) return; video.preload = "auto"; video.currentTime = 0.05; const playPromise = video.play(); if (playPromise !== undefined) { playPromise .then(() => { video.pause(); }) .catch((err) => { console.log("Auto-decoding initial video frame: ", err); }); } let targetProgress = 0.01; let currentProgress = 0.01; let animationFrameId: number; const handleScroll = () => { if (!containerRef.current || !video) return; const rect = containerRef.current.getBoundingClientRect(); const availableHeight = window.innerHeight - 72; const totalHeight = rect.height - availableHeight; if (totalHeight <= 0) return; const scrolled = 72 - rect.top; const progress = Math.max(0.01, Math.min(0.999, scrolled / totalHeight)); targetProgress = progress; setScrollProgress(progress); }; const updateVideoFrame = () => { if (video && video.duration && !isNaN(video.duration)) { const diff = targetProgress - currentProgress; currentProgress += diff * 0.15; if (Math.abs(diff) > 0.0005) { const targetTime = currentProgress * video.duration; if (!isNaN(targetTime) && isFinite(targetTime)) { video.currentTime = targetTime; } } } animationFrameId = requestAnimationFrame(updateVideoFrame); }; window.addEventListener("scroll", handleScroll, { passive: true }); window.addEventListener("resize", handleScroll); video.addEventListener("loadedmetadata", handleScroll); video.addEventListener("loadeddata", handleScroll); animationFrameId = requestAnimationFrame(updateVideoFrame); handleScroll(); return () => { window.removeEventListener("scroll", handleScroll); window.removeEventListener("resize", handleScroll); if (video) { video.removeEventListener("loadedmetadata", handleScroll); video.removeEventListener("loadeddata", handleScroll); } cancelAnimationFrame(animationFrameId); }; }, []); const toggleMute = () => { if (videoRef.current) { videoRef.current.muted = !isMuted; setIsMuted(!isMuted); } }; const handleAddToCart = () => { setCartCount((prev) => prev + 1); }; const navItems = ["Store", "AirPods Max", "Features", "Specs", "Support"]; const sideOpacity = Math.max(0, Math.min(1, 1 - Math.abs(scrollProgress - 0.55) * 6)); return ( <>

SoundStudio

{navItems.map((item, index) => ( {item} ))}

{isMobileMenuOpen && ( {navItems.map((item) => ( setIsMobileMenuOpen(false)} className="text-lg font-medium text-zinc-300 hover:text-white transition-colors" > {item} ))}

Free Shipping on all orders Shop Now

)}

); }

High-Fidelity Audio

High-Fidelity Sound

Active Noise Cancellation

Noise Cancellation