'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Ghost, Menu, X, Calculator, Home, Swords, Newspaper, FolderOpen, Book, Megaphone, Sparkles } from 'lucide-react';
import { useBrand } from '@/components/providers/brand-provider';

export default function Header() {
  const { brand } = useBrand();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <motion.header
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled ? 'bg-brand-bg/90 backdrop-blur-lg shadow-lg' : 'bg-transparent'
      }`}
    >
      <div className="max-w-[1200px] mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3 group">
            <button
              type="button"
              aria-label="Easter egg"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                window.dispatchEvent(new CustomEvent('ghost-easter-egg'));
              }}
              className="relative cursor-pointer bg-transparent border-none p-2 -m-2 z-10"
            >
              <Ghost className="w-8 h-8 text-brand hover:text-brand-light transition-colors hover:drop-shadow-[0_0_8px_rgba(var(--brand-primary-rgb),0.6)]" />
              <div className="absolute inset-0 bg-brand/30 blur-lg group-hover:blur-xl transition-all pointer-events-none" />
            </button>
            <Link href="/" className="flex items-center">
              <span className="text-xl font-bold text-white">
                {brand.identity.primaryName}<span className="text-brand">-{brand.identity.secondaryName}</span>
              </span>
            </Link>
          </div>

          <nav className="hidden lg:flex items-center gap-5 xl:gap-7">
            <Link
              href="/"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <Home className="w-4 h-4 shrink-0" />
              Home
            </Link>
            <Link
              href="/vs-erp"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <Swords className="w-4 h-4 shrink-0" />
              vs ERP
            </Link>
            <Link
              href="/roi-calculator"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <Calculator className="w-4 h-4 shrink-0" />
              ROI Calculator
            </Link>
            <Link
              href="/blog"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <Newspaper className="w-4 h-4 shrink-0" />
              Blog
            </Link>
            <Link
              href="/familiars"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <Sparkles className="w-4 h-4 shrink-0" />
              Familiars
            </Link>
            <Link
              href="/sales"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <Megaphone className="w-4 h-4 shrink-0" />
              Sales
            </Link>
            <Link
              href="/press-kit"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <FolderOpen className="w-4 h-4 shrink-0" />
              Press Kit
            </Link>
            <Link
              href="/docs"
              className="flex items-center gap-1.5 text-gray-300 hover:text-brand transition-colors whitespace-nowrap text-sm"
            >
              <Book className="w-4 h-4 shrink-0" />
              Docs
            </Link>
            <a
              href="#design-partner"
              className="px-4 py-2 bg-gradient-to-r from-brand-deep to-brand-secondary-deep text-white font-semibold rounded-lg hover:from-brand hover:to-brand-secondary transition-all shadow-lg shadow-brand-deep/25 hover:shadow-brand-deep/40 whitespace-nowrap text-sm"
            >
              {brand.marketing.heroCtaPrimary}
            </a>
          </nav>

          <button
            className="lg:hidden text-white p-2"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {isMobileMenuOpen && (
          <motion.nav
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            className="lg:hidden mt-4 pb-4 flex flex-col gap-4"
          >
            <Link
              href="/"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Home className="w-4 h-4" />
              Home
            </Link>
            <Link
              href="/vs-erp"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Swords className="w-4 h-4" />
              vs ERP
            </Link>
            <Link
              href="/roi-calculator"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Calculator className="w-4 h-4" />
              ROI Calculator
            </Link>
            <Link
              href="/blog"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Newspaper className="w-4 h-4" />
              Blog
            </Link>
            <Link
              href="/familiars"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Sparkles className="w-4 h-4" />
              Familiars
            </Link>
            <Link
              href="/sales"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Megaphone className="w-4 h-4" />
              Sales
            </Link>
            <Link
              href="/press-kit"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <FolderOpen className="w-4 h-4" />
              Press Kit
            </Link>
            <Link
              href="/docs"
              className="flex items-center gap-2 text-gray-300 hover:text-brand transition-colors py-2"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Book className="w-4 h-4" />
              Docs
            </Link>
            <a
              href="#design-partner"
              className="px-5 py-2.5 bg-gradient-to-r from-brand-deep to-brand-secondary-deep text-white font-semibold rounded-lg text-center"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              {brand.marketing.heroCtaPrimary}
            </a>
          </motion.nav>
        )}
      </div>
    </motion.header>
  );
}