'use client';
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Menu, X, Phone, MapPin } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLanguage } from '@/lib/i18n/language-context';
import { LanguageSwitcher } from './language-switcher';

export function PublicHeader() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const { t } = useLanguage();

  const navLinks = [
    { href: '/', label: t.nav.home },
    { href: '/inventory', label: t.nav.inventory },
    { href: '/about', label: t.nav.about },
    { href: '/why-us', label: t.nav.whyUs },
    { href: '/financing', label: t.nav.financing },
    { href: '/contact', label: t.nav.contact },
  ];

  return (
    <>
      {/* Top bar */}
      <div className="bg-[#1a1a1a] text-white/90 text-xs py-2 hidden md:block">
        <div className="max-w-[1200px] mx-auto px-4 flex justify-between items-center">
          <div className="flex items-center gap-4">
            <span className="flex items-center gap-1"><MapPin className="w-3 h-3" /> 1444 North Broad St, Hillside NJ 07205</span>
          </div>
          <div className="flex items-center gap-4">
            <a href="tel:9085909802" className="flex items-center gap-1 hover:text-white transition"><Phone className="w-3 h-3" /> (908) 590-9802</a>
            <a href="tel:9083436096" className="flex items-center gap-1 hover:text-white transition"><Phone className="w-3 h-3" /> (908) 343-6096</a>
          </div>
        </div>
      </div>
      {/* Main nav */}
      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md shadow-sm border-b border-border">
        <div className="max-w-[1200px] mx-auto px-4 flex items-center justify-between h-16">
          <Link href="/" className="flex items-center gap-2 shrink-0">
            <div className="relative w-[220px] h-[60px]">
              <Image src="/images/logo.png" alt="Evo Truck Sales" fill className="object-contain" priority />
            </div>
          </Link>
          <nav className="hidden lg:flex items-center gap-1">
            {navLinks?.map((link: any) => (
              <Link key={link?.href} href={link?.href} className="px-3 py-2 text-sm font-medium text-gray-700 hover:text-red-600 transition rounded-md hover:bg-red-50">
                {link?.label}
              </Link>
            ))}
          </nav>
          <div className="hidden lg:flex items-center gap-3">
            <LanguageSwitcher />
            <Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg text-sm font-semibold transition shadow-md hover:shadow-lg">
              {t.nav.contactUs}
            </Link>
          </div>
          <button onClick={() => setMobileOpen(!mobileOpen)} className="lg:hidden p-2 text-gray-700">
            {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
        <AnimatePresence>
          {mobileOpen && (
            <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="lg:hidden overflow-hidden bg-white border-t border-border">
              <div className="max-w-[1200px] mx-auto px-4 py-4 space-y-1">
                {navLinks?.map((link: any) => (
                  <Link key={link?.href} href={link?.href} onClick={() => setMobileOpen(false)} className="block px-4 py-3 text-sm font-medium text-gray-700 hover:text-red-600 hover:bg-red-50 rounded-lg transition">
                    {link?.label}
                  </Link>
                ))}
                <div className="pt-3 flex flex-col gap-2">
                  <div className="px-4 py-2">
                    <LanguageSwitcher variant="mobile" />
                  </div>
                  <a href="tel:9085909802" className="flex items-center gap-2 px-4 py-2 text-sm text-gray-600"><Phone className="w-4 h-4" /> (908) 590-9802</a>
                  <Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-5 py-3 rounded-lg text-sm font-semibold text-center transition">
                    {t.nav.contactUs}
                  </Link>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </header>
    </>
  );
}