"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Moon, X } from "lucide-react"; interface BubbleData { id: number; image: string; x: number; y: number; size: number; zIndex: number; delay: number; } export default function BubbleHeader({ className }: { className?: string }) { const [isPlaying, setIsPlaying] = useState(true); const [activeTab, setActiveTab] = useState(null); const [mousePos, setMousePos] = useState({ x: -9999, y: -9999 }); const [isMenuOpen, setIsMenuOpen] = useState(false); const [windowWidth, setWindowWidth] = useState(1200); useEffect(() => { if (typeof window !== "undefined") { setWindowWidth(window.innerWidth); } const handleResize = () => setWindowWidth(window.innerWidth); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const bubbleScale = Math.min(1, (windowWidth - 32) / 480); const bubbleVideos = [ "https://cdn.jiro.build/Bubble/Video/Video%201.mp4", "https://cdn.jiro.build/Bubble/Video/Video%202.mp4", "https://cdn.jiro.build/Bubble/Video/Video%203.mp4", "https://cdn.jiro.build/Bubble/Video/Video%204.mp4", "https://cdn.jiro.build/Bubble/Video/Video%205.mp4", "https://cdn.jiro.build/Bubble/Video/Video%206.mp4", "https://cdn.jiro.build/Bubble/Video/Video%207.mp4", "https://cdn.jiro.build/Bubble/Video/Video%208.mp4", "https://cdn.jiro.build/Bubble/Video/Video%209.mp4" ]; const handlePointerMove = (e: React.PointerEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; setMousePos({ x, y }); }; const handlePointerLeave = () => { setMousePos({ x: -9999, y: -9999 }); }; const bubbles: BubbleData[] = [ { id: 1, image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=400", x: 162, y: 162, size: 115, zIndex: 40, delay: 0 }, { id: 2, image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=400", x: 202, y: 7, size: 105, zIndex: 12, delay: 0.5 }, { id: 6, image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&q=80&w=400", x: 319, y: 149, size: 112, zIndex: 28, delay: 0.3 }, { id: 8, image: "https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?auto=format&fit=crop&q=80&w=400", x: 292, y: 277, size: 105, zIndex: 22, delay: 1.0 }, { id: 3, image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=400", x: 64, y: 64, size: 92, zIndex: 16, delay: 1.2 }, { id: 4, image: "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&q=80&w=340", x: 292, y: 52, size: 95, zIndex: 18, delay: 0.8 }, { id: 5, image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=340", x: 17, y: 182, size: 95, zIndex: 25, delay: 1.5 }, { id: 7, image: "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?auto=format&fit=crop&q=80&w=340", x: 50, y: 285, size: 90, zIndex: 24, delay: 1.9 }, { id: 9, image: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&q=80&w=340", x: 182, y: 312, size: 96, zIndex: 26, delay: 0.7 }, { id: 11, image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=340", x: 125, y: 375, size: 90, zIndex: 32, delay: 1.4 }, { id: 12, image: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&q=80&w=340", x: 106, y: 131, size: 88, zIndex: 34, delay: 0.9 }, { id: 13, image: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&q=80&w=340", x: 236, y: 191, size: 88, zIndex: 33, delay: 1.6 }, { id: 14, image: "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?auto=format&fit=crop&q=80&w=340", x: 180, y: 80, size: 80, zIndex: 8, delay: 2.5 }, { id: 10, image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=340", x: 347, y: 7, size: 65, zIndex: 6, delay: 2.2 }, { id: 15, image: "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&q=80&w=240", x: 46, y: 36, size: 48, zIndex: 5, delay: 1.1 }, { id: 16, image: "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&q=80&w=240", x: 409, y: 124, size: 52, zIndex: 29, delay: 1.8 }, { id: 17, image: "https://images.unsplash.com/photo-1504257400765-1d61ad2b602e?auto=format&fit=crop&q=80&w=240", x: 1, y: 266, size: 48, zIndex: 27, delay: 2.0 }, { id: 18, image: "https://images.unsplash.com/photo-1513956589380-bad6acb9b9d4?auto=format&fit=crop&q=80&w=240", x: 392, y: 262, size: 55, zIndex: 21, delay: 0.6 }, { id: 19, image: "https://images.unsplash.com/photo-1566492031773-4f4e44671857?auto=format&fit=crop&q=80&w=240", x: 61, y: 381, size: 58, zIndex: 23, delay: 1.3 }, { id: 20, image: "https://images.unsplash.com/photo-1520155707862-5b32817385d3?auto=format&fit=crop&q=80&w=240", x: 306, y: 381, size: 58, zIndex: 20, delay: 0.9 }, { id: 21, image: "https://images.unsplash.com/photo-1512485694743-9c9538b4e6e0?auto=format&fit=crop&q=80&w=240", x: 157, y: -8, size: 46, zIndex: 4, delay: 2.1 }, { id: 22, image: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&q=80&w=240", x: 413, y: 63, size: 44, zIndex: 7, delay: 0.4 }, { id: 23, image: "https://images.unsplash.com/photo-1513258496099-48168024aec0?auto=format&fit=crop&q=80&w=240", x: 84, y: 444, size: 52, zIndex: 15, delay: 1.7 }, { id: 24, image: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&q=80&w=240", x: 253, y: 443, size: 54, zIndex: 14, delay: 2.3 }, ]; const handleActionClick = (tabName: string) => { setActiveTab(tabName); setTimeout(() => setActiveTab(null), 2500); }; return ( <>

{/* TOP NAVBAR SECTION */}

{/* LOGO */}

{/* CENTRAL NAV PILL */}

{/* MENU TRIGGER */}

setIsMenuOpen(!isMenuOpen)} className="flex items-center gap-2 cursor-pointer hover:opacity-80 active:scale-95 transition-all duration-200" id="hero-nav-menu-button" >

{/* MOON BUTTON */} {/* 0% INDICATOR PILL */}

handleActionClick("Progress Mode")} style={{ borderRadius: "999px", background: "rgba(255, 255, 255, 0.12)", padding: "4px 12px", border: "1px solid rgba(255, 255, 255, 0.08)" }} className="cursor-pointer hover:bg-white/20 active:scale-95 transition-all duration-200 hidden sm:block" id="hero-percentage-pill" > 0%

{/* DROPDOWN MENU */} {isMenuOpen && ( <>

setIsMenuOpen(false)} id="menu-dropdown-backdrop" /> )}

{/* TRY YOURSELF BUTTON */}

{/* ACTIVE TAB NOTIFICATION */} {activeTab !== null && (

{"\u2605 TRIGGERED: " + activeTab.toUpperCase()}

)} {/* CENTER CONTENT */}

{/* LEFT COLUMN */}

{[ "No editing skills required", "Export in minutes", "AI video director" ].map((text: string, idx: number) => ( {text} ))}

{/* CENTER BUBBLE CLUSTER */}

{bubbles.map((b: BubbleData) => { const bubbleCenterX = b.x + b.size / 2; const bubbleCenterY = b.y + b.size / 2; let pushX = 0; let pushY = 0; if (mousePos.x !== -9999 && mousePos.y !== -9999) { const dx = bubbleCenterX - mousePos.x; const dy = bubbleCenterY - mousePos.y; const distance = Math.sqrt(dx * dx + dy * dy); const threshold = 210; if (distance < threshold && distance > 0) { const force = (threshold - distance) / threshold; const pushFactor = Math.pow(force, 1.2); const pushDistance = pushFactor * 140; pushX = (dx / distance) * pushDistance; pushY = (dy / distance) * pushDistance; } } const centerDistX = bubbleCenterX - 240; const centerDistY = bubbleCenterY - 240; const distFromCenter = Math.sqrt(centerDistX * centerDistX + centerDistY * centerDistY) || 1; const initX = (centerDistX / distFromCenter) * 550; const initY = (centerDistY / distFromCenter) * 550; return (

); })}

{/* RIGHT COLUMN */}

{[ "Upload your footage,", "Describe your vision, and let", "AI select the best moments" ].map((text: string, idx: number) => ( {text} ))}

{/* BOTTOM FOOTER SVG TEXT */}

); }