static-front/components/Header.tsx

'use client';

// Fixed navigation with language, theme, account, and cart controls.

import {useState, useEffect} from 'react';
import Image from 'next/image';
import Link from 'next/link';
import {usePathname} from 'next/navigation';
import {Badge, Button} from 'antd';
import {ShoppingCartOutlined, MenuOutlined, CloseOutlined, UserOutlined} from '@ant-design/icons';
import {useAppSelector} from '@/store/hooks';
import {selectCartCount} from '@/store/cartSlice';
import {useLanguage} from '@/app/context/LanguageContext';
import {commerceCopy} from '@/data/commerce';
import {accountCopy} from '@/data/account';
import {useAuth} from '@/app/context/AuthContext';
import ProtectedLink from './auth/ProtectedLink';
import ThemeToggle from './ThemeToggle';
import LanguageToggle from './LanguageToggle';

export default function Header() {
    const pathname = usePathname();
    const cartCount = useAppSelector(selectCartCount);
    const {t, locale} = useLanguage();
    const auth = useAuth();
    const account = accountCopy[locale];
    const [scrolled, setScrolled] = useState(false);
    const [mobileOpen, setMobileOpen] = useState(false);

    const navLinks = [
        {href: '/#hero', label: t.nav.home},
        {href: '/products', label: commerceCopy[locale].allProducts},
        {href: '/#about', label: t.nav.about},
        {href: '/#locations', label: t.nav.locations},
    ];
    const accountLabel = auth.session?.profile.firstName
        ? `${auth.session.profile.firstName} ${auth.session.profile.lastName}`.trim()
        : auth.session?.profile.phone || account.login;

    useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 24);
        onScroll();
        window.addEventListener('scroll', onScroll);
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    console.log('%c👋 Hamed Abdollahzade · Frontend Developer', 'font-size:14px;font-weight:600;');

    return (
        <header
            className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
                scrolled || pathname !== '/'
                    ? 'bg-page-85 backdrop-blur-md shadow-[0_1px_0_0_rgba(0,166,147,0.25)]'
                    : 'bg-transparent'
            }`}
        >
            <div className="mx-auto max-w-7xl px-5 md:px-8 h-20 flex items-center justify-between gap-4">
                <Link href="/#hero" onClick={() => setMobileOpen(false)} className="flex items-center gap-2 shrink-0">
                    <Image src="/images/icons/logo.png" alt="روبات مارکت" width={150} height={42} priority />
                </Link>

                <nav className="hidden xl:flex items-center gap-5 2xl:gap-7">
                    {navLinks.map(link => (
                        <Link
                            key={link.href}
                            href={link.href}
                            className="text-sm text-secondary hover:text-brand-300 transition-colors whitespace-nowrap"
                        >
                            {link.label}
                        </Link>
                    ))}
                </nav>

                <div className="flex items-center gap-2 md:gap-3">
                    <div className="hidden md:flex items-center gap-2">
                        <LanguageToggle />
                        <ThemeToggle />
                    </div>
                    {/*FAZ1*/}
                    {/*{auth.isAuthenticated ? (*/}
                    {/*    <Button className="hidden sm:inline-flex" icon={<UserOutlined />} href="/dashboard">*/}
                    {/*        {accountLabel}*/}
                    {/*    </Button>*/}
                    {/*) : (*/}
                    {/*    <Button*/}
                    {/*        className="hidden sm:inline-flex"*/}
                    {/*        icon={<UserOutlined />}*/}
                    {/*        onClick={() => auth.openLogin()}*/}
                    {/*    >*/}
                    {/*        {account.login}*/}
                    {/*    </Button>*/}
                    {/*)}*/}

                    {/*<Badge count={cartCount} size="small" offset={[-2, 2]}>*/}
                    {/*    <ProtectedLink*/}
                    {/*        href="/cart"*/}
                    {/*        onClick={() => setMobileOpen(false)}*/}
                    {/*        className="w-11 h-11 rounded-full border border-subtle bg-elevated inline-flex items-center justify-center text-xl text-primary hover:text-brand-400"*/}
                    {/*    >*/}
                    {/*        <ShoppingCartOutlined />*/}
                    {/*    </ProtectedLink>*/}
                    {/*</Badge>*/}

                    <button
                        className="xl:hidden text-brand-400 text-2xl"
                        onClick={() => setMobileOpen(v => !v)}
                        aria-label="menu"
                    >
                        {mobileOpen ? <CloseOutlined /> : <MenuOutlined />}
                    </button>
                </div>
            </div>

            {mobileOpen && (
                <nav className="xl:hidden bg-elevated-95 backdrop-blur-md border-t border-subtle px-5 py-4 flex flex-col gap-4 max-h-[calc(100vh-5rem)] overflow-y-auto">
                    {navLinks.map(link => (
                        <Link
                            key={link.href}
                            href={link.href}
                            onClick={() => setMobileOpen(false)}
                            className="text-secondary text-base"
                        >
                            {link.label}
                        </Link>
                    ))}
                    <div className="flex items-center gap-3 pt-2 border-t border-subtle">
                        <LanguageToggle />
                        <ThemeToggle />
                        {/*FAZ1*/}
                        {/*{auth.isAuthenticated ? (*/}
                        {/*    <Button*/}
                        {/*        icon={<UserOutlined />}*/}
                        {/*        className="flex-1"*/}
                        {/*        href="/dashboard"*/}
                        {/*        onClick={() => setMobileOpen(false)}*/}
                        {/*    >*/}
                        {/*        {accountLabel}*/}
                        {/*    </Button>*/}
                        {/*) : (*/}
                        {/*    <Button*/}
                        {/*        icon={<UserOutlined />}*/}
                        {/*        className="flex-1"*/}
                        {/*        onClick={() => {*/}
                        {/*            setMobileOpen(false);*/}
                        {/*            auth.openLogin();*/}
                        {/*        }}*/}
                        {/*    >*/}
                        {/*        {account.login}*/}
                        {/*    </Button>*/}
                        {/*)}*/}
                    </div>
                </nav>
            )}
        </header>
    );
}