'use client'; import { useEffect, useState } from 'react'; import { Link } from '@/i18n/navigation'; import Image from 'next/image'; import { motion, AnimatePresence } from 'framer-motion'; import { ChevronDown, Info, BookOpen, LayoutDashboard, Code2, Menu, X } from 'lucide-react'; import { useTranslations } from 'next-intl'; import { useAuth } from '@/lib/context/auth-context'; import { usePathname } from '@/i18n/navigation'; import { LanguageSwitcher } from '@/components/LanguageSwitcher'; interface LandingHeaderProps { transparentOnTop?: boolean; activePage?: 'about' | 'contact' | 'careers' | 'blog' | 'press' | 'docs'; } export function LandingHeader({ transparentOnTop = false, activePage }: LandingHeaderProps) { const t = useTranslations(); const [isScrolled, setIsScrolled] = useState(false); const [isCompanyMenuOpen, setIsCompanyMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const { user, isAuthenticated, loading } = useAuth(); const pathname = usePathname(); useEffect(() => { setIsMobileMenuOpen(false); }, [pathname]); const companyMenuItems = [ { href: '/about', label: t('navigation.about'), icon: Info, description: t('header.company.aboutDescription'), }, { href: '/blog', label: t('navigation.blog'), icon: BookOpen, description: t('header.company.blogDescription'), }, ]; const isCompanyMenuActive = activePage !== undefined && ['about', 'blog'].includes(activePage); const getUserInitials = () => { if (!user) return ''; const firstInitial = user.firstName?.charAt(0)?.toUpperCase() || ''; const lastInitial = user.lastName?.charAt(0)?.toUpperCase() || ''; return firstInitial + lastInitial || user.email?.charAt(0)?.toUpperCase() || '?'; }; const getFullName = () => { if (!user) return ''; if (user.firstName && user.lastName) { return `${user.firstName} ${user.lastName}`; } return user.email || ''; }; useEffect(() => { if (!transparentOnTop) { setIsScrolled(true); return; } const handleScroll = () => { setIsScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [transparentOnTop]); const isActiveLink = (href: string) => { if (!activePage) return false; return href === `/${activePage}`; }; return ( <>
Xpeditis {/* Mobile hamburger button */}
{t('navigation.features')} {t('navigation.pricing')} {/* Menu Entreprise */}
setIsCompanyMenuOpen(true)} onMouseLeave={() => setIsCompanyMenuOpen(false)} > {isCompanyMenuOpen && (
{companyMenuItems.map(item => { const IconComponent = item.icon; const isActive = isActiveLink(item.href); return (
{item.label}
{item.description}
); })}
)}
{t('navigation.contact')} {t('navigation.docsApi')} {/* Language switcher */} {/* Affichage conditionnel: connecté vs non connecté */} {loading ? (
) : isAuthenticated && user ? (
{getUserInitials()}
{getFullName()} ) : ( <> {t('header.cta.signIn')} {t('header.cta.startFree')} )}
{/* Mobile menu drawer */} {isMobileMenuOpen && ( <> setIsMobileMenuOpen(false)} />
Xpeditis
{loading ? (
) : isAuthenticated && user ? (
{getUserInitials()}
{getFullName()} ) : ( <> {t('header.cta.signIn')} {t('header.cta.startFree')} )}
)} ); }