"use client"; import React, { useRef, useEffect, useState } from "react"; import { motion, useScroll, useMotionValueEvent, AnimatePresence } from "framer-motion"; import { ChevronDown, X, Calendar, ArrowRight, Check, Mountain } from "lucide-react"; export default function HotelView({ className }: { className?: string }) { const videoRef = useRef(null); const targetTimeRef = useRef(0); const durationRef = useRef(0); const [isMenuOpen, setIsMenuOpen] = useState(false); const [inquirySent, setInquirySent] = useState(false); // Get scroll progress (0 to 1) const { scrollYProgress } = useScroll(); // Keep targetTime updated based on scroll progress useMotionValueEvent(scrollYProgress, "change", (latest) => { if (durationRef.current > 0) { targetTimeRef.current = latest * durationRef.current; } }); // Smoothly interpolate the video's currentTime towards the target scroll position useEffect(() => { let animationFrameId: number; const updateVideoTime = () => { const video = videoRef.current; if (video && durationRef.current > 0 && !video.seeking) { // Smooth interpolation (easing) const diff = targetTimeRef.current - video.currentTime; if (Math.abs(diff) > 0.01) { video.currentTime += diff * 0.08; // Buttery smooth easing factor } } animationFrameId = requestAnimationFrame(updateVideoTime); }; animationFrameId = requestAnimationFrame(updateVideoTime); return () => cancelAnimationFrame(animationFrameId); }, []); const handleLoadedMetadata = (e: React.SyntheticEvent) => { const video = e.currentTarget; durationRef.current = video.duration || 0; // Pause the video because we will manually seek it through scrolling video.pause(); }; const menuItems = [ { name: "Suites & Villas", desc: "Private sanctuaries nested in the mist", link: "#suites" }, { name: "Dining & Culinary", desc: "Gastronomical masterpieces in the wild", link: "#dining" }, { name: "Wellness & Spa", desc: "Holistic rejuvenation above the clouds", link: "#wellness" }, { name: "Our Heritage", desc: "The story of Mount Reserve", link: "#heritage" }, ]; const handleBookClick = () => { setInquirySent(true); setTimeout(() => { setInquirySent(false); setIsMenuOpen(false); }, 3500); }; return ( <> {/* Outer container defines scroll height to enable scrolling */}

{/* Pinned viewport content */}

{/* FULL SCREEN BACKGROUND VIDEO */}

); }

{item.name}

Inquiry Registered