"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Search, ShoppingBag, Star, Pause, Play, X, Plus, Minus, Sparkles, Menu, Check } from "lucide-react"; interface Shoe { id: number; name: string; subtitle: string; price: string; rawPrice: number; image: string; rating: number; details: string; colors: string[]; specs: { weight: string; cushioning: string; durability: string; }; } const SHOES_DATA: Shoe[] = [ { id: 1, name: "NIKE AIR HURAMKE", subtitle: "PRE-DAY RED FUSION", price: "RS. 14,999/-", rawPrice: 14999, image: "https://cdn.jiro.build/Jahid/nike%202/middle%20img%2001.png", rating: 4, details: "Bringing a fresh edge to the classic athletics look, the Nike Air Huramke Red Fusion features elite responsive comfort and a bold crimson energy print.", colors: ["#EF4444", "#F59E0B", "#10B981"], specs: { weight: "310g", cushioning: "Max Air 270", durability: "High Abrasion Rubber" } }, { id: 2, name: "NIKE AIR MAX 270", subtitle: "PRE-DAY BLACK STEALTH", price: "RS. 13,999/-", rawPrice: 13999, image: "https://cdn.jiro.build/Jahid/nike%202/middle%20img%2002.png", rating: 5, details: "Boasting Nike's first lifestyle Air Max unit, the Air Max 270 Black Stealth delivers premium comfort, responsive energy transfer, and a slick, nocturnal look.", colors: ["#1F2937", "#EF4444", "#3B82F6"], specs: { weight: "295g", cushioning: "Air Max Custom 270", durability: "Multi-Surface Grip" } }, { id: 3, name: "NIKE AIR ZOOM VOMERO", subtitle: "PRE-DAY VOLT FLAME", price: "RS. 15,499/-", rawPrice: 15499, image: "https://cdn.jiro.build/Jahid/nike%202/middle%20img%2003.png", rating: 4, details: "Engineered for high miles and maximum pace. Responsive Zoom Air cushioning pairs with multi-layered support structures to elevate your running thresholds.", colors: ["#F59E0B", "#EF4444", "#10B981"], specs: { weight: "320g", cushioning: "Zoom Air Dual-Unit", durability: "Super Duralon" } }, { id: 4, name: "NIKE AIR ONE TAKE", subtitle: "PRE-DAY PLATINUM SPEC", price: "RS. 14,499/-", rawPrice: 14499, image: "https://cdn.jiro.build/Jahid/nike%202/middle%20img%2004.png", rating: 5, details: "For quick lateral movements and snappy response on and off courts. Dynamic webbing lock-down and lightweight chassis keep your balance sharp.", colors: ["#9CA3AF", "#EF4444", "#3B82F6"], specs: { weight: "305g", cushioning: "Forefoot Zoom Unit", durability: "Engineered Traction Pattern" } } ]; interface CartItem { shoe: Shoe; size: string; quantity: number; } export default function HeaderNike01({ className }: { className?: string }) { const [activeIndex, setActiveIndex] = useState(0); const [spinDirection, setSpinDirection] = useState<'next' | 'prev'>('next'); const [selectedSize, setSelectedSize] = useState("US 9"); const [isAutoplay, setIsAutoplay] = useState(false); const [soundEnabled, setSoundEnabled] = useState(true); const [searchQuery, setSearchQuery] = useState(""); const [isCartOpen, setIsCartOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [cart, setCart] = useState([]); const [showSpecsModal, setShowSpecsModal] = useState(false); const [checkoutStatus, setCheckoutStatus] = useState<'idle' | 'success'>('idle'); const [hoveredIdx, setHoveredIdx] = useState(null); const [hoveredCaret, setHoveredCaret] = useState<'left' | 'right' | null>(null); const currentShoe = SHOES_DATA[activeIndex]; const playSound = (type: 'click' | 'whoosh' | 'success' | 'remove') => { if (!soundEnabled) return; try { const AudioCtxCtor = window.AudioContext || (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; if (!AudioCtxCtor) return; const ctx = new AudioCtxCtor(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); if (type === 'click') { osc.frequency.setValueAtTime(800, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(150, ctx.currentTime + 0.1); gain.gain.setValueAtTime(0.08, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1); osc.start(); osc.stop(ctx.currentTime + 0.1); } else if (type === 'whoosh') { osc.type = 'triangle'; osc.frequency.setValueAtTime(100, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(450, ctx.currentTime + 0.25); gain.gain.setValueAtTime(0.12, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.25); osc.start(); osc.stop(ctx.currentTime + 0.25); } else if (type === 'success') { osc.frequency.setValueAtTime(400, ctx.currentTime); osc.frequency.setValueAtTime(600, ctx.currentTime + 0.1); osc.frequency.setValueAtTime(1200, ctx.currentTime + 0.2); gain.gain.setValueAtTime(0.06, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3); osc.start(); osc.stop(ctx.currentTime + 0.3); } else if (type === 'remove') { osc.frequency.setValueAtTime(400, ctx.currentTime); osc.frequency.setValueAtTime(200, ctx.currentTime + 0.15); gain.gain.setValueAtTime(0.06, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.25); osc.start(); osc.stop(ctx.currentTime + 0.25); } } catch (e) { console.warn("Audio Context init blocked or not supported", e); } }; const handlePrev = () => { playSound('whoosh'); setSpinDirection('prev'); setActiveIndex(prev => (prev === 0 ? SHOES_DATA.length - 1 : prev - 1)); }; const handleNext = () => { playSound('whoosh'); setSpinDirection('next'); setActiveIndex(prev => (prev === SHOES_DATA.length - 1 ? 0 : prev + 1)); }; useEffect(() => { if (!isAutoplay) return; const interval = setInterval(() => { setSpinDirection('next'); setActiveIndex(prev => (prev === SHOES_DATA.length - 1 ? 0 : prev + 1)); }, 6000); return () => clearInterval(interval); }, [isAutoplay]); const handleSelectShoe = (index: number) => { if (index === activeIndex) return; playSound('whoosh'); setSpinDirection(index > activeIndex ? 'next' : 'prev'); setActiveIndex(index); }; const addToBag = () => { playSound('success'); setCart(prev => { const existing = prev.find(item => item.shoe.id === currentShoe.id && item.size === selectedSize); if (existing) { return prev.map(item => item.shoe.id === currentShoe.id && item.size === selectedSize ? { ...item, quantity: item.quantity + 1 } : item ); } return [...prev, { shoe: currentShoe, size: selectedSize, quantity: 1 }]; }); setIsCartOpen(true); }; const updateQuantity = (shoeId: number, size: string, delta: number) => { if (delta > 0) { playSound('click'); } else { playSound('remove'); } setCart(prev => { const target = prev.find(item => item.shoe.id === shoeId && item.size === size); if (!target) return prev; const newQty = target.quantity + delta; if (newQty <= 0) { return prev.filter(item => !(item.shoe.id === shoeId && item.size === size)); } return prev.map(item => item.shoe.id === shoeId && item.size === size ? { ...item, quantity: newQty } : item ); }); }; const cartTotal = cart.reduce((acc, item) => acc + (item.shoe.rawPrice * item.quantity), 0); const filteredShoes = SHOES_DATA.filter(s => s.name.toLowerCase().includes(searchQuery.toLowerCase()) || s.subtitle.toLowerCase().includes(searchQuery.toLowerCase()) ); return ( <>

{/* HEADER */}

{ playSound('click'); }}> Nike Logo

) => setSearchQuery(e.target.value)} className="w-44 md:w-56 text-sm pl-10 pr-4 py-2 rounded-full border border-neutral-800 focus:border-red-600 focus:outline-none transition-all duration-300 font-medium placeholder-neutral-500" style={{ backgroundColor: "rgba(12,13,18,0.9)" }} /> {searchQuery && ( )}

{/* MOBILE NAV DRAWER */} {isMobileMenuOpen && (

{["MEN", "WOMEN", "KIDS", "SALE", "SNKRS"].map((link: string) => ( { playSound('click'); setIsMobileMenuOpen(false); }} className="text-base font-bold tracking-widest text-neutral-400 hover:text-white transition-all duration-300 border-b border-neutral-900/50 pb-2.5 flex items-center justify-between" > {link} → ))}

) => setSearchQuery(e.target.value)} className="w-full text-sm pl-10 pr-4 py-2.5 rounded-full border border-neutral-800 focus:border-red-600 focus:outline-none transition-all duration-300 font-medium placeholder-neutral-500" style={{ backgroundColor: "rgba(12,13,18,0.9)" }} /> {searchQuery && ( )}

)} {/* SEARCH PANEL */} {searchQuery && (

Search Results for "{searchQuery}" ({filteredShoes.length})

{filteredShoes.length > 0 ? (

{filteredShoes.map((shoe: Shoe) => { const sIdx = SHOES_DATA.findIndex(s => s.id === shoe.id); return (

{ handleSelectShoe(sIdx); setSearchQuery(""); }} className="flex items-center gap-4 p-3 rounded-lg border border-neutral-800/60 hover:border-red-900/40 transition-all cursor-pointer group" style={{ backgroundColor: "rgba(23,23,23,0.4)" }} >

{shoe.name}

{shoe.subtitle}

{shoe.price}

); })}

) : (

No sneakers matching that query found.

)} )} {/* HERO SECTION */}

{/* LEFT COLUMN */}

JUST

DO

IT.

JUST DO

IT.

JUST DO IT.

Push boundaries. Smash personal records. Play authentic with original style configurations designed for ultimate speed.

{/* MIDDLE COLUMN */}

NIKE

{ playSound('click'); setShowSpecsModal(true); }} >

View Specs

{/* PAGINATION */}

{/* MOBILE DETAILS ROW */}

{currentShoe.name}

{currentShoe.subtitle.split(" ").slice(0, 1).join("") || "PRE-DAY"}.

{currentShoe.price}

{currentShoe.name}

{currentShoe.subtitle.split(" ").slice(0, 1).join("") || "PRE-DAY"}.

{currentShoe.price}

{/* RIGHT COLUMN */}

{currentShoe.name}

{currentShoe.subtitle.split(" ").slice(0, 1).join("") || "PRE-DAY."}.

{currentShoe.price}

{/* BOTTOM SHOWCASE */}

EXPLORE THE DESIGN SELECTION

{SHOES_DATA.map((shoe: Shoe, idx: number) => { const isCurrentlyHighlighted = hoveredIdx === idx; const rotation = isCurrentlyHighlighted ? -26 : -16; let scale = 1.20; let leftOffset = '-26px'; let bottomOffset = '-4px'; const widthVal = '155%'; const heightVal = '155%'; if (idx === 0) { scale = isCurrentlyHighlighted ? 1.45 : 1.26; leftOffset = '-26px'; bottomOffset = '-4px'; } else if (idx === 1) { scale = isCurrentlyHighlighted ? 1.28 : 1.12; leftOffset = '-26px'; bottomOffset = '-6px'; } else if (idx === 2) { scale = isCurrentlyHighlighted ? 1.28 : 1.12; leftOffset = '-26px'; bottomOffset = '-6px'; } else if (idx === 3) { scale = isCurrentlyHighlighted ? 2.05 : 1.82; leftOffset = '-22px'; bottomOffset = '-6px'; } return (

handleSelectShoe(idx)} onMouseEnter={() => setHoveredIdx(idx)} onMouseLeave={() => setHoveredIdx(null)} className={"group relative rounded-[24px] p-[1.5px] cursor-pointer transition-all duration-500 " + (isCurrentlyHighlighted ? 'scale-[1.02]' : 'scale-100')} style={isCurrentlyHighlighted ? { background: "linear-gradient(135deg, rgba(255,255,255,0.2), #171717, rgba(220,38,38,0.95))", boxShadow: "0 15px 35px rgba(239,68,68,0.22)" } : { background: "linear-gradient(135deg, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.02))" }} >

NIKE AIR

{shoe.name.replace("NIKE AIR", "").trim()}

{shoe.price.replace("RS.", "RS").trim()}

{Array.from({ length: 4 }).map((_: unknown, stIdx: number) => ( ))}

); })}

{/* FOOTER */} {/* CART DRAWER */} {isCartOpen && ( <> { playSound('click'); setIsCartOpen(false); }} className="fixed inset-0 bg-black z-50 pointer-events-auto" />

YOUR BAG

{cart.reduce((s, x) => s + x.quantity, 0)} ITEMS

{cart.length === 0 ? (

Your bag is currently empty.

) : ( cart.map((item: CartItem, idx: number) => (

{item.shoe.name}

{item.size} {item.shoe.price}

{item.quantity}

)) )}

{cart.length > 0 && (

BAG SUB-TOTAL: RS. {cartTotal.toLocaleString()}/-

DISCOUNT DELIVERY: FREE

TOTAL VALUE: RS. {cartTotal.toLocaleString()}/-

{checkoutStatus === 'success' ? (

Order Authenticated!

Your dispatch request has been submitted securely to the carrier chain.

) : ( )}

Authorized Retailer Node. Fast worldwide tracking guaranteed.

)} )} {/* SPECS MODAL */} {showSpecsModal && ( <> { playSound('click'); setShowSpecsModal(false); }} className="fixed inset-0 z-50 pointer-events-auto" style={{ backgroundColor: "rgba(0,0,0,0.9)" }} />

{currentShoe.name} SPEC LIST

EDITION LABELS

{currentShoe.subtitle}

AVERAGE CHASSIS WEIGHT

{currentShoe.specs.weight}

CUSHIONING ARCHITECTURE

{currentShoe.specs.cushioning}

SOLE TRACK DURABILITY

{currentShoe.specs.durability}

{currentShoe.details}

)}

); }