chorus-services-website/components/layout/Header.tsx

'use client';

import React, { useState, useEffect } from 'react';
import { Layout, Menu, Button as AntButton, Drawer, Space } from 'antd';
import { motion, AnimatePresence } from 'framer-motion';
import { MenuIcon, XIcon, ArrowRightIcon } from 'lucide-react';
import { cn } from '@/utils/cn';
import { Button } from '@/components/ui/Button';

const { Header: AntHeader } = Layout;

interface NavigationItem {
  key: string;
  label: string;
  href: string;
}

const navigationItems: NavigationItem[] = [
  { key: 'home', label: 'Home', href: '/' },
  { key: 'services', label: 'Services', href: '/services' },
  { key: 'components', label: 'Components', href: '/components' },
  { key: 'technical-specs', label: 'Technical Specs', href: '/technical-specs' },
  { key: 'pricing', label: 'Pricing', href: '/pricing' },
  { key: 'docs', label: 'Documentation', href: '/docs' },
  { key: 'about', label: 'About', href: '/about' },
];

export const Header: React.FC = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [activeKey, setActiveKey] = useState('home');

  // Handle scroll effect
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Handle navigation click
  const handleNavClick = (href: string, key: string) => {
    setActiveKey(key);
    setIsMobileMenuOpen(false);
    // In a real app, you'd use Next.js router here
    // router.push(href);
  };

  // Mobile menu animation variants
  const drawerVariants = {
    closed: { opacity: 0 },
    open: { opacity: 1 },
  };

  const menuItemVariants = {
    closed: { x: -20, opacity: 0 },
    open: (i: number) => ({
      x: 0,
      opacity: 1,
      transition: { delay: i * 0.1 },
    }),
  };

  return (
    <>
      <AntHeader
        className={cn(
          'fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b',
          isScrolled
            ? 'bg-chorus-charcoal/95 backdrop-blur-md border-gray-800 shadow-lg'
            : 'bg-transparent border-transparent'
        )}
        style={{ height: '80px', padding: '0 24px' }}
      >
        <div className="max-w-7xl mx-auto h-full flex items-center justify-between">
          {/* Logo */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
            className="flex items-center space-x-3"
          >
            <div className="w-10 h-10 bg-gradient-chorus rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-xl">C</span>
            </div>
            <span className="text-white text-xl font-bold">CHORUS</span>
          </motion.div>

          {/* Desktop Navigation */}
          <div className="hidden lg:flex items-center space-x-8">
            {navigationItems.map((item, index) => (
              <motion.button
                key={item.key}
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                onClick={() => handleNavClick(item.href, item.key)}
                className={cn(
                  'px-4 py-2 rounded-lg font-medium transition-all duration-200',
                  'hover:bg-white/10 hover:text-chorus-blue',
                  activeKey === item.key
                    ? 'text-chorus-blue'
                    : 'text-gray-300'
                )}
              >
                {item.label}
              </motion.button>
            ))}
          </div>

          {/* Desktop CTA Buttons */}
          <div className="hidden lg:flex items-center space-x-4">
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
            >
              <Button variant="ghost" size="middle">
                Sign In
              </Button>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              <Button
                variant="primary"
                size="middle"
                icon={<ArrowRightIcon size={16} />}
              >
                Get Started
              </Button>
            </motion.div>
          </div>

          {/* Mobile Menu Button */}
          <motion.button
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
            onClick={() => setIsMobileMenuOpen(true)}
          >
            <MenuIcon size={24} />
          </motion.button>
        </div>
      </AntHeader>

      {/* Mobile Menu Drawer */}
      <Drawer
        title={null}
        placement="right"
        closable={false}
        onClose={() => setIsMobileMenuOpen(false)}
        open={isMobileMenuOpen}
        width={320}
        className="mobile-menu-drawer"
        styles={{
          body: { padding: 0, background: '#1a1a1a' },
          header: { display: 'none' },
        }}
      >
        <AnimatePresence>
          {isMobileMenuOpen && (
            <motion.div
              initial="closed"
              animate="open"
              exit="closed"
              variants={drawerVariants}
              className="h-full bg-chorus-charcoal"
            >
              {/* Mobile Header */}
              <div className="flex items-center justify-between p-6 border-b border-gray-800">
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 bg-gradient-chorus rounded-lg flex items-center justify-center">
                    <span className="text-white font-bold text-sm">C</span>
                  </div>
                  <span className="text-white text-lg font-bold">CHORUS</span>
                </div>
                <button
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
                >
                  <XIcon size={20} />
                </button>
              </div>

              {/* Mobile Navigation */}
              <div className="p-6">
                <nav className="space-y-2">
                  {navigationItems.map((item, index) => (
                    <motion.button
                      key={item.key}
                      custom={index}
                      variants={menuItemVariants}
                      onClick={() => handleNavClick(item.href, item.key)}
                      className={cn(
                        'w-full text-left p-4 rounded-lg font-medium transition-all duration-200',
                        'hover:bg-white/10 hover:text-chorus-blue',
                        activeKey === item.key
                          ? 'text-chorus-blue bg-chorus-blue/10'
                          : 'text-gray-300'
                      )}
                    >
                      {item.label}
                    </motion.button>
                  ))}
                </nav>

                {/* Mobile CTA Buttons */}
                <div className="mt-8 space-y-4">
                  <Button variant="outline" fullWidth size="large">
                    Sign In
                  </Button>
                  <Button
                    variant="primary"
                    fullWidth
                    size="large"
                    icon={<ArrowRightIcon size={16} />}
                  >
                    Get Started
                  </Button>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </Drawer>

      {/* Spacer to prevent content from going under fixed header */}
      <div style={{ height: '80px' }} />
    </>
  );
};

export default Header;