'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

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

const links: NavLink[] = [
  { href: '/', label: 'Home' },
  { href: '/api-explorer', label: 'API Explorer' },
  { href: '/get-started', label: 'Get Started' },
  { href: '/sdks', label: 'SDKs' },
  { href: '/pricing', label: 'Pricing' },
  { href: '/analytics', label: 'Analytics' },
];

export function Nav(): React.ReactElement {
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/90 backdrop-blur">
      <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
        <Link href="/" className="flex items-center gap-2">
          <span className="text-xl font-bold text-brand-600">
            SentryAgent
          </span>
          <span className="rounded bg-brand-100 px-1.5 py-0.5 text-xs font-semibold text-brand-700">
            AgentIdP
          </span>
        </Link>

        <ul className="flex items-center gap-1">
          {links.map(({ href, label }) => {
            const isActive =
              href === '/' ? pathname === '/' : pathname.startsWith(href);
            return (
              <li key={href}>
                <Link
                  href={href}
                  className={[
                    'rounded-md px-3 py-2 text-sm font-medium transition-colors',
                    isActive
                      ? 'bg-brand-100 text-brand-700'
                      : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
                  ].join(' ')}
                >
                  {label}
                </Link>
              </li>
            );
          })}
        </ul>

        <Link
          href="/get-started"
          className="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-brand-700"
        >
          Get Started Free
        </Link>
      </nav>
    </header>
  );
}