"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Search, ArrowRight, X, Check, ShoppingBag } from "lucide-react"; export default function HeaderV2({ className }: { className?: string }) { const [isNavOpen, setIsNavOpen] = useState(false); const [isSearchOpen, setIsSearchOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [showBuyModal, setShowBuyModal] = useState(false); const [addedToCart, setAddedToCart] = useState(false); const [quantity, setQuantity] = useState(1); const [isLargeScreen, setIsLargeScreen] = useState(false); const [scrollYValue, setScrollYValue] = useState(0); const [scrollMax1, setScrollMax1] = useState(1600); const [translateMax1, setTranslateMax1] = useState(1620); const [scrollMax2, setScrollMax2] = useState(2500); const [translateMax2, setTranslateMax2] = useState(2400); const [scrollMax3, setScrollMax3] = useState(3500); const [translateMax3, setTranslateMax3] = useState(3400); const [translateX3, setTranslateX3] = useState(-350); const [targetScale3State, setTargetScale3State] = useState(0.85); const currentScaleRef = useRef(1); useEffect(() => { const handleResize = () => { setIsLargeScreen(window.innerWidth >= 1024); }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); useEffect(() => { const handleScroll = () => { setScrollYValue(window.scrollY); }; window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, []); useEffect(() => { const calculatePositions = () => { const targetEl1 = document.getElementById("perfume-bottle-target"); const targetEl2 = document.getElementById("product-note-bottle-target"); const targetEl3 = document.getElementById("about-bottle-target"); const containerEl = document.getElementById("eloria-hero-container"); if (containerEl) { const containerRect = containerEl.getBoundingClientRect(); const heroBottom = containerRect.height; if (targetEl1) { const targetRect = targetEl1.getBoundingClientRect(); const absoluteTargetY = window.scrollY + targetRect.top; const absoluteTargetBottom = absoluteTargetY + targetRect.height * 0.95; const computedTranslate = absoluteTargetBottom - heroBottom + 70; const computedScroll = absoluteTargetY - (window.innerHeight - targetRect.height) / 2; setTranslateMax1(computedTranslate > 0 ? computedTranslate : 1620); setScrollMax1(computedScroll > 0 ? computedScroll : 1600); } if (targetEl2) { const sectionEl = document.getElementById("product-note-section"); const targetRect2 = targetEl2.getBoundingClientRect(); const absoluteTargetY2 = window.scrollY + targetRect2.top; const absoluteTargetBottom2 = absoluteTargetY2 + targetRect2.height * 0.5 - 30; const computedTranslate2 = absoluteTargetBottom2 - heroBottom; let computedScroll2 = absoluteTargetY2 - (window.innerHeight - targetRect2.height) / 2; if (sectionEl) { const sectionRect = sectionEl.getBoundingClientRect(); computedScroll2 = window.scrollY + sectionRect.top; } setTranslateMax2(computedTranslate2 > 0 ? computedTranslate2 : 2520); setScrollMax2(computedScroll2 > 0 ? computedScroll2 : 2500); } if (targetEl3) { const targetRect3 = targetEl3.getBoundingClientRect(); const absoluteTargetY3 = window.scrollY + targetRect3.top; const absoluteTargetBottom3 = absoluteTargetY3 + targetRect3.height - window.innerHeight * 0.04; const computedTranslate3 = absoluteTargetBottom3 - heroBottom; const computedScroll3 = absoluteTargetY3 - (window.innerHeight - targetRect3.height) / 2; const containerCenter = containerRect.left + containerRect.width / 2; const targetCenter = targetRect3.left + targetRect3.width / 2; const computedTranslateX3 = targetCenter - containerCenter; const floatingEl = document.getElementById("perfume-bottle-image"); let computedScale3 = 0.85; if (floatingEl) { const floatingRect = floatingEl.getBoundingClientRect(); const currentScaleVal = currentScaleRef.current || 1; const unscaledFloatingWidth = floatingRect.width / currentScaleVal; if (unscaledFloatingWidth > 0) { computedScale3 = targetRect3.width / unscaledFloatingWidth; } } computedScale3 = Math.min(Math.max(computedScale3, 0.45), 1.25); setTargetScale3State(computedScale3); setTranslateMax3(computedTranslate3 > 0 ? computedTranslate3 : 3400); setScrollMax3(computedScroll3 > 0 ? computedScroll3 : 3500); setTranslateX3(computedTranslateX3); } } }; const timer = setTimeout(calculatePositions, 1000); window.addEventListener("resize", calculatePositions); return () => { clearTimeout(timer); window.removeEventListener("resize", calculatePositions); }; }, []); let currentY = 0; let currentX = 0; let currentScale = 1; let currentRotation = 0; let currentOpacity = 1; const stayDuration = 350; if (scrollYValue <= scrollMax1) { const progress1 = Math.min(Math.max(scrollYValue / scrollMax1, 0), 1); currentY = progress1 * translateMax1; currentX = 0; currentScale = 1; currentRotation = 0; currentOpacity = 1; } else if (scrollYValue <= scrollMax1 + stayDuration) { currentY = translateMax1; currentX = 0; currentScale = 1; currentRotation = 0; currentOpacity = 1; } else if (scrollYValue <= scrollMax2) { const startScroll = scrollMax1 + stayDuration; const progress2 = (scrollYValue - startScroll) / (scrollMax2 - startScroll); const clampedProgress2 = Math.min(Math.max(progress2, 0), 1); currentY = translateMax1 + clampedProgress2 * (translateMax2 - translateMax1); currentX = 0; currentScale = 1 - clampedProgress2 * (1 - 0.42); currentRotation = 0; currentOpacity = 1; } else if (scrollYValue <= scrollMax2 + stayDuration) { currentY = translateMax2; currentX = 0; currentScale = 0.42; currentRotation = 0; currentOpacity = 0; } else { const startScroll = scrollMax2 + stayDuration; const progress3 = (scrollYValue - startScroll) / (scrollMax3 - startScroll); const clampedProgress3 = Math.min(Math.max(progress3, 0), 1); currentY = translateMax2 + clampedProgress3 * (translateMax3 - translateMax2); currentX = clampedProgress3 * translateX3; currentScale = 0.42 + clampedProgress3 * (targetScale3State - 0.42); currentRotation = clampedProgress3 * -8; currentOpacity = 1; } currentScaleRef.current = currentScale; const handleBuySubmit = (e: React.FormEvent) => { e.preventDefault(); setAddedToCart(true); setTimeout(() => { setAddedToCart(false); setShowBuyModal(false); }, 2000); }; const handleNavItemClick = (item: string) => { setIsNavOpen(false); if (item === "Collections" || item === "Elegance Parfum" || item === "Brand Story") { const el = document.getElementById("ingredients-section"); if (el) { el.scrollIntoView({ behavior: "smooth" }); } } else if (item === "Home") { window.scrollTo({ top: 0, behavior: "smooth" }); } else { setShowBuyModal(true); } }; const ingredients = [ { id: 1, name: "CHERRY BLOSSOM", para: "Delicate floral notes that create a soft, romantic, and elegant first impression.", icon: "https://cdn.jiro.build/Eloria%20Perfume/Images/Icon%201.png" }, { id: 2, name: "AMBER", para: "Delicate floral notes that create a soft, romantic, and elegant first impression.", icon: "https://cdn.jiro.build/Eloria%20Perfume/Images/Icon%202.png" }, { id: 3, name: "PEAR NECTAR", para: "A fresh fruity touch that adds brightness and a naturally sweet opening.", icon: "https://cdn.jiro.build/Eloria%20Perfume/Images/Icon%203.png" }, { id: 4, name: "SANDALWOOD", para: "A warm woody base that brings depth, sophistication, and balance.", icon: "https://cdn.jiro.build/Eloria%20Perfume/Images/Icon%204.png" }, { id: 5, name: "WHITE MUSK", para: "Provides a clean, sensual, and long-lasting signature scent.", icon: "https://cdn.jiro.build/Eloria%20Perfume/Images/Icon%205.png" }, ]; return ( <>

setIsNavOpen(true)} style={{ display: "flex", padding: "13px 20px", alignItems: "center", gap: "30px", borderRadius: "40px", background: "#FFF" }} className="cursor-pointer transition-transform duration-300 active:scale-95 hover:bg-neutral-50 shadow-md group" >

handleNavItemClick("Home")} style={{ display: isLargeScreen ? "flex" : "none", padding: "8px 20px", alignItems: "center", gap: "30px", borderRadius: "40px", background: "rgba(255, 255, 255, 0.10)" }} className="cursor-pointer transition-all duration-300 hover:bg-white/20 active:scale-95 backdrop-blur-[4px] border border-white/5" > Home

handleNavItemClick("Home")} style={{ color: "#FFF", fontFamily: "Anta, sans-serif", fontSize: "24px", fontStyle: "normal", fontWeight: 400, lineHeight: "normal" }} className="tracking-[0.25em] select-none text-center cursor-pointer transition-transform duration-300 hover:scale-105 active:scale-95" > ELORIA

setIsSearchOpen(!isSearchOpen)} style={{ display: isLargeScreen ? "flex" : "none", padding: "9px", alignItems: "center", gap: "10px", borderRadius: "40px", background: "rgba(255, 255, 255, 0.10)" }} className="cursor-pointer transition-all duration-300 hover:bg-white/20 active:scale-95 backdrop-blur-[4px] border border-white/5 aspect-square justify-center" >

setShowBuyModal(true)} style={{ display: "flex", padding: isLargeScreen ? "5px 16px 5px 5px" : "4px 12px 4px 4px", alignItems: "center", gap: isLargeScreen ? "10px" : "6px", borderRadius: "40px", background: "rgba(255, 255, 255, 0.10)" }} className="cursor-pointer transition-all duration-300 hover:bg-white/25 active:scale-95 backdrop-blur-[4px] border border-white/10 group" >

Buy Now

NEW LUXURY

FRAGRANCE

Eloria Perfumes Elegance Eau de Parfum

Volume 50 ML e 1.7 FL. OZ.

{isNavOpen && ( setIsNavOpen(false)} > ) => e.stopPropagation()} >

ELORIA

{["Home", "Collections", "Brand Story", "Elegance Parfum", "Store Locator", "Contact Us"].map((item) => ( ))}

Exclusive Fragrance

Crafted in Grasse, France

)} {isSearchOpen && (

Search Elegance

) => setSearchQuery(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm outline-none focus:border-white/30 font-[\'Cabinet_Grotesk\'] placeholder-white/40" />

)} {showBuyModal && ( setShowBuyModal(false)} > ) => e.stopPropagation()} >