"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Menu, X, ChevronDown } from "lucide-react"; const CARD_ITEMS = [ { tag: "New Arrival", heading: "AI Smart Glasses", bigText: "Sekoda P-39b", image: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/right%20card%20img%2001.png", }, { tag: "Special Edition", heading: "HUD Hologram", bigText: "Sekoda Air X", image: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/right%20card%20img%2001.png", }, { tag: "Spatial Audio", heading: "Acoustic Frame", bigText: "Sekoda Echo", image: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/right%20card%20img%2001.png", }, ]; const KEY_FEATURES = [ "Real-time AR HUD Display", "Spatial Audio integration", "Seamless Device Sync", "12-Hour Active Battery", "Smart Gesture Interface", ]; const PARAGRAPH_TEXT = "Experience the next generation of smart wearable technology with seamless connectivity, immersive visuals, and all-day comfort designed for modern lifestyles."; export default function Header({ className }: { className?: string }) { const [activeMenu, setActiveMenu] = useState("Home"); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [, setScrollProgress] = useState(0); const [smoothScroll, setSmoothScroll] = useState(0); const [cardIndex, setCardIndex] = useState(0); const [featuresOpen, setFeaturesOpen] = useState(false); const [videoDuration, setVideoDuration] = useState(0); const headerContainerRef = useRef(null); const videoRef1 = useRef(null); const videoRef2 = useRef(null); const scrollProgressRef = useRef(0); const smoothScrollRef = useRef(0); const targetTimeRef = useRef(0); const currentTimeRef = useRef(0); // Monitor sticky container scroll to calculate normalized scroll progress useEffect(() => { const handleScroll = () => { if (headerContainerRef.current) { const totalStickyScroll = headerContainerRef.current.offsetHeight - window.innerHeight; if (totalStickyScroll > 0) { const progress = window.scrollY / totalStickyScroll; scrollProgressRef.current = Math.min(Math.max(progress, 0), 1); setScrollProgress(scrollProgressRef.current); } } }; window.addEventListener("scroll", handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener("scroll", handleScroll); }, []); // Configure first background video playback speed useEffect(() => { if (videoRef1.current) { videoRef1.current.playbackRate = 0.6; } }, []); // Preload and pause second video initially useEffect(() => { const video = videoRef2.current; if (!video) return; video.preload = "auto"; video.muted = true; video.playsInline = true; video.pause(); const handleMetadata = () => { if (video.duration && !isNaN(video.duration) && video.duration > 0) { setVideoDuration(video.duration); } }; if (video.readyState >= 1 && video.duration) { handleMetadata(); } video.addEventListener("loadedmetadata", handleMetadata); video.addEventListener("durationchange", handleMetadata); video.addEventListener("canplay", handleMetadata); return () => { video.removeEventListener("loadedmetadata", handleMetadata); video.removeEventListener("durationchange", handleMetadata); video.removeEventListener("canplay", handleMetadata); }; }, []); // Buttery-smooth video scrub loop using lerp useEffect(() => { const video = videoRef2.current; let animFrameId: number; const updateVideoProgress = () => { smoothScrollRef.current += (scrollProgressRef.current - smoothScrollRef.current) * 0.08; setSmoothScroll(smoothScrollRef.current); const duration = (video && video.duration && !isNaN(video.duration) && video.duration > 0) ? video.duration : videoDuration; if (video && duration > 0) { if (videoDuration !== duration) { setVideoDuration(duration); } const scrollActiveRange = Math.min(Math.max(smoothScrollRef.current / 0.95, 0), 1); targetTimeRef.current = scrollActiveRange * duration; currentTimeRef.current += (targetTimeRef.current - currentTimeRef.current) * 0.08; if (Math.abs(currentTimeRef.current - targetTimeRef.current) > 0.002) { if (!video.seeking) { video.currentTime = Math.min(Math.max(currentTimeRef.current, 0), duration - 0.01); } } } animFrameId = requestAnimationFrame(updateVideoProgress); }; animFrameId = requestAnimationFrame(updateVideoProgress); return () => cancelAnimationFrame(animFrameId); }, [videoDuration]); // Dynamic automatic card cycler useEffect(() => { const timer = setInterval(() => { setCardIndex((prev) => (prev + 1) % CARD_ITEMS.length); }, 4000); return () => clearInterval(timer); }, []); const firstViewOpacity = Math.max(0, 1 - smoothScroll / 0.25); const secondViewOpacity = Math.min(1, Math.max(0, (smoothScroll - 0.15) / 0.2)); const titleOpacity = Math.max(0, 1 - smoothScroll / 0.25); const titleYTranslate = (smoothScroll / 0.25) * 80; const buttonProgress = Math.min(Math.max((smoothScroll - 0.28) / 0.28, 0), 1); const buttonOpacity = buttonProgress; const buttonYTranslate = 50 * (1 - buttonProgress); const buttonScale = 0.95 + 0.05 * buttonProgress; const cardProgress = Math.min(Math.max((smoothScroll - 0.22) / 0.28, 0), 1); const cardOpacity = cardProgress; const cardYTranslate = 80 * (1 - cardProgress); const cardXTranslate = 30 * (1 - cardProgress); const cardScale = 0.92 + 0.08 * cardProgress; const featuresProgress = Math.min(Math.max((smoothScroll - 0.3) / 0.28, 0), 1); const featuresOpacity = featuresProgress; const featuresYTranslate = 40 * (1 - featuresProgress); return ( <>

{/* BACKGROUND 1 */}

); }

{CARD_ITEMS[cardIndex].bigText}