"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Menu, X } from "lucide-react"; interface CardItem { id: string; number: string; title: string; image: string; } // List of card data for catalog images and text const CARDS: CardItem[] = [ { id: "01", number: "01.", title: "Moder Family Home", image: "https://cdn.jiro.build/EstayMart/All%20Images/catalog%20img%20img%201.png", }, { id: "02", number: "02.", title: "Luxurious Beach Villa", image: "https://cdn.jiro.build/EstayMart/All%20Images/catalog%20img%20img%202.png", }, { id: "03", number: "03.", title: "Stunning Ocean Retreat", image: "https://cdn.jiro.build/EstayMart/All%20Images/catalog%20img%20img%203.png", }, { id: "04", number: "04.", title: "Minimalist Santorini Suite", image: "https://cdn.jiro.build/EstayMart/All%20Images/catalog%20img%20img%204.png", }, { id: "05", number: "05.", title: "Tropical Bali Escape", image: "https://cdn.jiro.build/EstayMart/All%20Images/catalog%20img%20img%205.png", }, { id: "06", number: "06.", title: "Cozy Costa Rica Lodge", image: "https://cdn.jiro.build/EstayMart/All%20Images/catalog%20img%20img%26.png", }, ]; export default function Header({ className }: { className?: string }) { const [currentIndex, setCurrentIndex] = useState(0); const [hoveredBtn, setHoveredBtn] = useState<"left" | "right" | null>(null); const [activeNav, setActiveNav] = useState("Home"); const [menuOpen, setMenuOpen] = useState(false); const [scrollProgress, setScrollProgress] = useState(0); // State for dynamic viewport scaling const [windowSize, setWindowSize] = useState({ width: 1600, height: 900 }); const containerRef = useRef(null); const videoRef = useRef(null); const progressRef = useRef(0); const targetProgressRef = useRef(0); useEffect(() => { const video = videoRef.current; if (!video) return; // Explicitly configure and load the video video.preload = "auto"; video.muted = true; video.playsInline = true; try { video.load(); } catch (e) { console.error("Video load error", e); } const handleCanPlay = () => { try { video.pause(); if (video.currentTime === 0) { video.currentTime = 0.05; } } catch (e) { console.error("Error in handleCanPlay:", e); } }; video.addEventListener("canplay", handleCanPlay); video.addEventListener("loadeddata", handleCanPlay); video.addEventListener("loadedmetadata", handleCanPlay); if (video.readyState >= 2) { handleCanPlay(); } const timer = setTimeout(() => { try { if (video.currentTime === 0) { video.currentTime = 0.05; } } catch (e) { console.error(e); } }, 500); const handleScroll = () => { const container = containerRef.current; if (!container) return; const rect = container.getBoundingClientRect(); const totalScrollable = rect.height - window.innerHeight; if (totalScrollable <= 0) return; // Scrolled offset inside the container const currentScroll = -rect.top; const progress = Math.max(0, Math.min(1, currentScroll / totalScrollable)); targetProgressRef.current = progress; }; window.addEventListener("scroll", handleScroll, { passive: true }); handleScroll(); // Smooth animation frame loop for video scrubbing and state updates let rafId: number; const updateVideoFrame = () => { if (video) { const duration = video.duration && !isNaN(video.duration) && video.duration > 0 ? video.duration : 5.5; // Smooth linear interpolation (lerp) so video speed perfectly aligns with scroll speed smoothly const diff = targetProgressRef.current - progressRef.current; if (Math.abs(diff) < 0.0001) { progressRef.current = targetProgressRef.current; } else { progressRef.current += diff * 0.08; // extremely fluid, responsive scrubbing rate } progressRef.current = Math.max(0, Math.min(1, progressRef.current)); // Sync with video currentTime const targetTime = progressRef.current * duration; if (!isNaN(targetTime) && isFinite(targetTime)) { if (Math.abs(video.currentTime - targetTime) > 0.01) { video.currentTime = targetTime; } } setScrollProgress(progressRef.current); } rafId = requestAnimationFrame(updateVideoFrame); }; rafId = requestAnimationFrame(updateVideoFrame); return () => { clearTimeout(timer); video.removeEventListener("canplay", handleCanPlay); video.removeEventListener("loadeddata", handleCanPlay); video.removeEventListener("loadedmetadata", handleCanPlay); window.removeEventListener("scroll", handleScroll); cancelAnimationFrame(rafId); }; }, []); useEffect(() => { if (typeof window === "undefined") return; const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const isDesktop = windowSize.width >= 1024; const isTablet = windowSize.width >= 768 && windowSize.width < 1024; // Calculate scaling factor based on 1600:900 design reference const scale = Math.min(windowSize.width / 1600, windowSize.height / 900); const handleNext = () => { setCurrentIndex((prev) => (prev + 1) % CARDS.length); }; const handlePrev = () => { setCurrentIndex((prev) => (prev - 1 + CARDS.length) % CARDS.length); }; const activeCard = CARDS[currentIndex]; return ( <>

{/* Scroll-Controlled Background Video */}