"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence, useMotionValue, useSpring, type Variants } from "framer-motion"; import { Menu, X } from "lucide-react"; export default function Header({ className }: { className?: string }) { const [videoClicked, setVideoClicked] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const videoRef = useRef(null); useEffect(() => { const video = videoRef.current; if (!video) return; video.muted = true; video.playsInline = true; const playVideo = () => { video.play().catch((err) => { console.log("Autoplay blocked, waiting for user gesture:", err); }); }; playVideo(); const handleTimeUpdate = () => { if (!videoClicked && video.currentTime >= 5) { video.currentTime = 0; video.play().catch(() => {}); } }; video.addEventListener("timeupdate", handleTimeUpdate); const onFirstUserGesture = () => { if (video.paused) { video.play().catch(() => {}); } window.removeEventListener("click", onFirstUserGesture); window.removeEventListener("touchstart", onFirstUserGesture); }; window.addEventListener("click", onFirstUserGesture); window.addEventListener("touchstart", onFirstUserGesture); return () => { video.removeEventListener("timeupdate", handleTimeUpdate); window.removeEventListener("click", onFirstUserGesture); window.removeEventListener("touchstart", onFirstUserGesture); }; }, [videoClicked]); const handleBackgroundClick = (e: React.MouseEvent) => { const target = e.target as HTMLElement; if (target.closest("button") || target.closest("a") || target.closest(".menu-dropdown")) { return; } if (!videoClicked) { setVideoClicked(true); if (videoRef.current) { videoRef.current.play().catch(() => {}); } } }; const mouseX = useMotionValue(-120); const mouseY = useMotionValue(-120); const springConfig = { damping: 28, stiffness: 280, mass: 0.4 }; const cursorX = useSpring(mouseX, springConfig); const cursorY = useSpring(mouseY, springConfig); const [mouseActive, setMouseActive] = useState(false); const [hideCursor, setHideCursor] = useState(false); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { mouseX.set(e.clientX); mouseY.set(e.clientY); if (!mouseActive) setMouseActive(true); }; const handleMouseLeave = () => { setMouseActive(false); }; const handleMouseOver = (e: MouseEvent) => { const target = e.target as HTMLElement | null; if (target) { const isInteractive = target.closest('button, a, input, select, textarea, [role="button"]') !== null; setHideCursor(isInteractive); } }; window.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseleave", handleMouseLeave); window.addEventListener("mouseover", handleMouseOver); return () => { window.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseleave", handleMouseLeave); window.removeEventListener("mouseover", handleMouseOver); }; }, [mouseX, mouseY, mouseActive]); const headingWords = ["Everything", "Your", "Cats", "Love"]; const containerVariants: Variants = { hidden: { opacity: 1 }, visible: { opacity: 1, transition: { staggerChildren: 0.18, delayChildren: 0.8, }, }, }; const wordVariants: Variants = { hidden: { opacity: 0, x: -50 }, visible: { opacity: 1, x: 0, transition: { type: "spring" as const, stiffness: 70, damping: 12, }, }, }; const charVariants: Variants = { initial: { y: 0, x: 0, scale: 1 }, hover: (i: number) => ({ y: [0, -8, 4, 0], x: [0, 4, -2, 0], scale: [1, 1.15, 0.95, 1], transition: { duration: 0.6, ease: "easeInOut" as const, delay: i * 0.03, }, }), }; const arrowVariants: Variants = { initial: { x: 0 }, hover: { x: 6, transition: { type: "spring" as const, stiffness: 300, damping: 12, }, }, }; const menuItems = [ { name: "Home", href: "#" }, { name: "Premium Products", href: "#" }, { name: "Cat Grooming", href: "#" }, { name: "Wellness & Health", href: "#" }, { name: "Vet Programs", href: "#" }, { name: "Contact Us", href: "#" }, ]; return ( <>