import React, { useState, useRef, useEffect } from 'react'; import { useTheme } from '../next/next-themes'; import { Play, Pause, Mail, ArrowRight, Menu, ChevronDown, Sun, Moon } from 'lucide-react'; interface NavbarHeroProps { brandName?: string; heroTitle?: string; heroSubtitle?: string; heroDescription?: string; backgroundImage?: string; videoUrl?: string; emailPlaceholder?: string; } const NavbarHero: React.FC = ({ brandName = "nexus", heroTitle = "Innovation Meets Simplicity", heroSubtitle = "Join the community", heroDescription = "Discover cutting-edge solutions designed for the modern digital landscape.", backgroundImage = "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80", videoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", emailPlaceholder = "enter@email.com" }) => { const [email, setEmail] = useState(''); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [openDropdown, setOpenDropdown] = useState(null); const [isVideoPlaying, setIsVideoPlaying] = useState(false); const [isVideoPaused, setIsVideoPaused] = useState(false); const videoRef = useRef(null); const { theme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); const handleEmailSubmit = () => { console.log('Email submitted:', email); }; const toggleDropdown = (dropdownName: string) => { setOpenDropdown(openDropdown === dropdownName ? null : dropdownName); }; const handlePlayVideo = () => { if (videoRef.current) { videoRef.current.play(); setIsVideoPlaying(true); setIsVideoPaused(false); } }; const handlePauseVideo = () => { if (videoRef.current) { videoRef.current.pause(); setIsVideoPaused(true); } }; const handleResumeVideo = () => { if (videoRef.current) { videoRef.current.play(); setIsVideoPaused(false); } }; const handleVideoEnded = () => { setIsVideoPlaying(false); setIsVideoPaused(false); }; const ThemeToggleButton = () => { if (!mounted) return

; return ( ); }; return (

{/* --- Navbar --- */}

{brandName}

About
{openDropdown === 'desktop-resources' && (
- Submenu 1
- Submenu 2
)}
Blog
{openDropdown === 'desktop-pricing' && (
- Plan A
- Plan B
)}

{isMobileMenuOpen && (

About
{openDropdown === 'mobile-resources' && (
- Submenu 1
- Submenu 2
)}
Blog
{openDropdown === 'mobile-pricing' && (
- Plan A
- Plan B
)}
Login

)}

{/* --- Hero Section --- */}

{heroTitle}

{heroDescription}

setEmail(e.target.value)} className="w-full max-w-xs bg-muted border-border text-foreground placeholder-muted-foreground font-medium pl-10 pr-4 py-2 text-sm sm:pl-11 sm:py-3 sm:text-base rounded-full focus:outline-none focus:ring-2 focus:ring-ring" />

{/* --- Media Header --- */}

); }; export { NavbarHero };