'use client';

import Link from 'next/link';
import { useState } from 'react';
import { usePathname } from 'next/navigation';
import { Menu, X, Building2, ArrowRight } from 'lucide-react';
import { cn } from '@/lib/utils';

interface NavLink {
  href: string;
  label: string;
}

const LINKS: NavLink[] = [
  { href: '/', label: '首页' },
  { href: '/about', label: '关于我们' },
  { href: '/products', label: '产品方案' },
  { href: '/news', label: '新闻资讯' },
  { href: '/team', label: '团队介绍' },
  { href: '/contact', label: '联系我们' },
];

export function Header({ siteName }: { siteName: string }) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 w-full border-b border-slate-200 bg-white">
      <div className="container-page flex h-16 items-center justify-between">
        <Link href="/" className="flex items-center gap-2">
          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-slate-800 to-slate-900 text-white shadow-md shadow-slate-900/25 ring-1 ring-inset ring-white/10">
            <Building2 className="h-5 w-5" />
          </span>
          <span className="text-base font-bold text-slate-900">
            {siteName}
          </span>
        </Link>

        <nav className="hidden items-center gap-6 md:flex">
          {LINKS.map((l) => {
            const active = pathname === l.href || pathname.startsWith(l.href + '/');
            return (
              <Link
                key={l.href}
                href={l.href}
                className={cn(
                  'text-sm font-medium transition-colors',
                  active ? 'text-brand-600' : 'text-slate-600 hover:text-slate-900',
                )}
              >
                {l.label}
              </Link>
            );
          })}
        </nav>

        <Link
          href="/contact"
          className="hidden items-center gap-1 rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-md shadow-slate-900/20 transition-all hover:bg-black hover:shadow-lg hover:shadow-slate-900/30 md:inline-flex"
        >
          免费试用
          <ArrowRight className="h-3.5 w-3.5" />
        </Link>

        <button
          className="text-slate-600 md:hidden"
          aria-label="菜单"
          onClick={() => setOpen((v) => !v)}
        >
          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {open && (
        <div className="border-t border-slate-200/70 bg-white md:hidden">
          <nav className="container-page flex flex-col py-2">
            {LINKS.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                className="py-2 text-sm text-slate-600 hover:text-brand-600"
                onClick={() => setOpen(false)}
              >
                {l.label}
              </Link>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
}