'use client';

import Link from 'next/link';
import { Shield } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const NAV_LINKS = [
  { href: '/about', label: 'About' },
  { href: '/faq', label: 'FAQ' },
  { href: '/contact', label: 'Contact' },
];

export function AppHeader() {
  const sysConfig = useSystemConfig();
  return (
    <header className="sticky top-0 z-40 w-full border-b border-line bg-surface-overlay backdrop-blur-xl">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
        <Link href="/" className="flex items-center gap-2">
          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-primary-500 to-indigo-600 text-white">
            <Shield className="h-5 w-5" />
          </div>
          <span className="text-base font-bold tracking-wide text-ink">{sysConfig.projectName}</span>
        </Link>

        <nav className="hidden items-center gap-6 md:flex">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={cn('text-sm text-ink-muted transition-colors hover:text-ink')}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <Link
            href="/auth/login"
            className="hidden rounded-xl px-4 py-2 text-sm font-medium text-ink transition-colors hover:bg-surface-raised sm:block"
          >
            Sign In
          </Link>
          <Link
            href="/auth/register"
            className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
          >
            Sign Up
          </Link>
        </div>
      </div>
    </header>
  );
}