'use client' import Link from 'next/link' import { ArrowRight, BarChart3, BookOpen, Building2, ChevronDown, LayoutDashboard, Menu, NfcIcon, PlugZap, ShieldCheck, Users, X, } from 'lucide-react' import React from 'react' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { cn } from '@/lib/utils' const menuItems = [ { name: 'Features', href: '#features', children: [ { name: 'Dashboard', description: 'Track payments and revenue', href: '#dashboard', icon: LayoutDashboard, }, { name: 'Integrations', description: 'Connect your payment stack', href: '#integrations', icon: PlugZap, }, { name: 'Security', description: 'Built-in fraud protection', href: '#security', icon: ShieldCheck, }, ], }, { name: 'Solutions', href: '#solutions', children: [ { name: 'Startups', description: 'Launch payments faster', href: '#startups', icon: Building2, }, { name: 'Teams', description: 'Manage payment operations', href: '#teams', icon: Users, }, { name: 'Analytics', description: 'Understand your growth', href: '#analytics', icon: BarChart3, }, ], }, { name: 'Pricing', href: '#pricing' }, { name: 'Docs', href: '#docs', icon: BookOpen }, ] export default function HeaderThree() { const [menuState, setMenuState] = React.useState(false) const [isScrolled, setIsScrolled] = React.useState(false) const [openDropdown, setOpenDropdown] = React.useState(null) const [mobileDropdown, setMobileDropdown] = React.useState(null) const closeTimer = React.useRef | null>(null) React.useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 24) } handleScroll() window.addEventListener('scroll', handleScroll, { passive: true }) return () => window.removeEventListener('scroll', handleScroll) }, []) React.useEffect(() => { if (!menuState) { setMobileDropdown(null) } }, [menuState]) React.useEffect(() => { return () => { if (closeTimer.current) { clearTimeout(closeTimer.current) } } }, []) const handleOpenDropdown = (name: string) => { if (closeTimer.current) { clearTimeout(closeTimer.current) } setOpenDropdown(name) } const handleCloseDropdown = () => { closeTimer.current = setTimeout(() => { setOpenDropdown(null) }, 120) } const toggleMobileDropdown = (name: string) => { setMobileDropdown((current) => (current === name ? null : name)) } return (

Payflow

{/* Desktop center nav */}

{item.children ? (
handleOpenDropdown(item.name)} onMouseLeave={handleCloseDropdown} > setOpenDropdown(open ? item.name : null)} > handleOpenDropdown(item.name)} onMouseLeave={handleCloseDropdown} className="w-72 p-2 data-[side=bottom]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95" > {item.children.map((child) => { const Icon = child.icon return ( {child.name} {child.description} ) })}
) : ( {item.name} )}

{/* Mobile menu + CTA */}

{item.children ? (

{item.children.map((child) => { const Icon = child.icon return ( setMenuState(false)} className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground" > {child.name} ) })}

) : ( setMenuState(false)} className="block rounded-xl px-3 py-3 font-medium text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground" > {item.name} )}

) }