'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X, Phone, Mail, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

const navItems = [
  { label: 'Home', href: '/' },
  { label: 'Services', href: '/services' },
  { label: 'About', href: '/about' },
  { label: 'Blog', href: '/blog' },
  { label: 'Testimonials', href: '/testimonials' },
  { label: 'Contact', href: '/contact' },
];

export function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handler, { passive: true });
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    <>
      {/* Top bar */}
      <div className="bg-gradient-to-r from-[var(--navy-dark)] via-[var(--navy)] to-[var(--navy-dark)] text-white/70 text-sm py-2.5 hidden md:block">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
          <div className="flex items-center gap-6">
            <a href="tel:+15707553434" className="flex items-center gap-1.5 hover:text-[var(--gold)] transition-colors">
              <Phone className="w-3.5 h-3.5 text-[var(--gold)]" /> +1 570-7553-434
            </a>
            <span className="w-px h-3.5 bg-white/20" />
            <a href="tel:+8801928802438" className="flex items-center gap-1.5 hover:text-[var(--gold)] transition-colors">
              <Phone className="w-3.5 h-3.5 text-[var(--gold)]" /> +88 01928802438
            </a>
            <span className="w-px h-3.5 bg-white/20" />
            <a href="mailto:Accounting@alphacpaconsulting.com" className="flex items-center gap-1.5 hover:text-[var(--gold)] transition-colors">
              <Mail className="w-3.5 h-3.5 text-[var(--gold)]" /> Accounting@alphacpaconsulting.com
            </a>
          </div>
          <div className="text-white/40 text-xs tracking-wide">Mon - Fri: 9:00 AM - 6:00 PM EST</div>
        </div>
      </div>

      {/* Main nav */}
      <header
        className={cn(
          'sticky top-0 z-50 transition-all duration-500',
          scrolled
            ? 'bg-white/90 backdrop-blur-xl shadow-[0_4px_30px_rgba(0,0,0,0.06)] border-b border-[var(--gold)]/5'
            : 'bg-white/70 backdrop-blur-md'
        )}
      >
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16 md:h-[72px]">
            <Link href="/" className="flex items-center gap-3 shrink-0 group">
              <div className="relative w-11 h-11 md:w-12 md:h-12">
                <Image src="/logo.png" alt="Alpha CPA Consulting LLC Logo" fill className="object-contain" priority />
              </div>
              <div className="hidden sm:block">
                <span className="font-display font-bold text-[var(--navy)] text-lg leading-tight block group-hover:text-[var(--navy-light)] transition-colors">Alpha CPA</span>
                <span className="text-[10px] text-[var(--gold)] font-semibold tracking-[0.2em] uppercase">Consulting LLC</span>
              </div>
            </Link>

            {/* Desktop nav */}
            <nav className="hidden md:flex items-center gap-0.5">
              {navItems?.map((item: any) => (
                <Link
                  key={item?.href}
                  href={item?.href ?? '#'}
                  className="relative px-3.5 py-2 text-sm font-medium text-[var(--navy)]/80 hover:text-[var(--navy)] transition-colors rounded-lg hover:bg-[var(--navy)]/[0.03] group"
                >
                  {item?.label ?? ''}
                  <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-0 h-0.5 bg-[var(--gold)] rounded-full group-hover:w-5 transition-all duration-300" />
                </Link>
              ))}
              <Link
                href="/contact"
                className="ml-3 px-5 py-2.5 bg-gradient-to-r from-[var(--navy)] to-[var(--navy-light)] text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-[var(--navy)]/20 hover:-translate-y-0.5 transition-all duration-300 flex items-center gap-1.5"
              >
                Book Consultation <ChevronRight className="w-4 h-4" />
              </Link>
            </nav>

            {/* Mobile menu btn */}
            <button
              onClick={() => setMobileOpen(!mobileOpen)}
              className="md:hidden p-2 text-[var(--navy)] hover:bg-[var(--gold)]/10 rounded-lg transition-colors"
              aria-label="Toggle menu"
            >
              {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>

        {/* Mobile menu */}
        <AnimatePresence>
          {mobileOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="md:hidden bg-white/95 backdrop-blur-xl border-t border-[var(--navy)]/5 overflow-hidden"
            >
              <nav className="px-4 py-4 space-y-1">
                {navItems?.map((item: any) => (
                  <Link
                    key={item?.href}
                    href={item?.href ?? '#'}
                    onClick={() => setMobileOpen(false)}
                    className="block px-4 py-3 text-[var(--navy)] font-medium rounded-xl hover:bg-[var(--gold)]/5 transition-colors"
                  >
                    {item?.label ?? ''}
                  </Link>
                ))}
                <Link
                  href="/contact"
                  onClick={() => setMobileOpen(false)}
                  className="block mt-2 px-4 py-3 bg-gradient-to-r from-[var(--navy)] to-[var(--navy-light)] text-white text-center font-semibold rounded-xl"
                >
                  Book Consultation
                </Link>
              </nav>
            </motion.div>
          )}
        </AnimatePresence>
      </header>
    </>
  );
}