"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check, Menu, X, ArrowUpRight, Send, ChevronDown } from "lucide-react"; export default function FinanceHeaderWallet({ className }: { className?: string }) { const [connectionState, setConnectionState] = useState<"disconnected" | "connecting" | "connected">("disconnected"); const [, setWalletAddress] = useState(""); const [isContactOpen, setIsContactOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const [formData, setFormData] = useState({ name: "", email: "", message: "" }); const [isSubmitted, setIsSubmitted] = useState(false); const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768); }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const [scrollProgress, setScrollProgress] = useState(0); const videoRef = useRef(null); useEffect(() => { const handleScroll = () => { const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; if (scrollHeight <= 0) return; const currentScroll = window.scrollY; const progress = Math.min(Math.max(currentScroll / scrollHeight, 0), 1); setScrollProgress(progress); const video = videoRef.current; if (video) { if (progress >= 0.95) { if (video.paused) { video.loop = false; if (video.currentTime < 4) { video.currentTime = 4; } video.play().catch(() => {}); } } else { if (!video.paused) { video.pause(); } const targetTime = progress * 4; video.currentTime = targetTime; } } }; const handleTimeUpdate = () => { const video = videoRef.current; if (video) { const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; const currentScroll = window.scrollY; const progress = scrollHeight > 0 ? Math.min(Math.max(currentScroll / scrollHeight, 0), 1) : 0; if (progress >= 0.95) { const duration = video.duration || 0; const maxLimit = duration > 0 ? duration - 0.2 : 4; if (video.currentTime >= maxLimit || video.currentTime < 4) { video.currentTime = 4; video.play().catch(() => {}); } } } }; window.addEventListener("scroll", handleScroll, { passive: true }); const video = videoRef.current; const handleLoaded = () => { handleScroll(); }; if (video) { video.addEventListener("loadedmetadata", handleLoaded); video.addEventListener("loadeddata", handleLoaded); video.addEventListener("timeupdate", handleTimeUpdate); video.addEventListener("ended", handleTimeUpdate); } const timer = setTimeout(handleScroll, 100); return () => { clearTimeout(timer); window.removeEventListener("scroll", handleScroll); if (video) { video.removeEventListener("loadedmetadata", handleLoaded); video.removeEventListener("loadeddata", handleLoaded); video.removeEventListener("timeupdate", handleTimeUpdate); video.removeEventListener("ended", handleTimeUpdate); } }; }, []); const triggerConnect = () => { if (connectionState === "connected") { setConnectionState("disconnected"); setWalletAddress(""); return; } setConnectionState("connecting"); setTimeout(() => { setConnectionState("connected"); setWalletAddress("0x71C...B29a"); }, 1800); }; const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault(); setIsSubmitted(true); setTimeout(() => { setIsSubmitted(false); setIsContactOpen(false); setFormData({ name: "", email: "", message: "" }); }, 2500); }; const isPast4Seconds = scrollProgress >= 0.92; const rightOpacity = Math.min(Math.max((scrollProgress - 0.1) / 0.8, 0), 1); const rightX = (1 - rightOpacity) * (isMobile ? 30 : 120); const menuItems: { label: string; action?: () => void; desc?: string }[] = [ { label: "Connect Keystore", action: () => { setIsMenuOpen(false); triggerConnect(); } }, { label: "Ecosystem", desc: "Cosmic scale chains" }, { label: "Security Protocols", desc: "Military-grade cryptographic shield" }, { label: "Interstellar Hub", desc: "Multi-signature smart network" }, ]; return ( <>

Connect your
wallet

Hold the Future
in Your Hands.

Connect your wallet

Hold the Future in Your Hands.

Contact Wallet Agent

Transmission Confirmed

Connect your
wallet

Hold the Future
in Your Hands.