'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { Menu, X, Globe2 } from 'lucide-react';
import { LanguageSwitcher } from '@/components/ui/LanguageSwitcher';

export function Navbar() {
  const t = useTranslations('nav');
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <nav className="absolute top-0 left-0 right-0 z-20 h-14 bg-[#06060c]/90 backdrop-blur-md border-b border-[var(--map-border)]">
      <div className="flex items-center justify-between h-full px-4">
        {/* Left: hamburger + brand */}
        <div className="flex items-center gap-3">
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            className="w-8 h-8 flex items-center justify-center rounded-md hover:bg-white/10 transition-colors"
            aria-label={menuOpen ? 'Close navigation' : 'Open navigation'}
          >
            {menuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </button>

          <Link href="/" className="flex items-center gap-2 text-[var(--map-text)] hover:text-white transition-colors">
            <div className="w-7 h-7 rounded-full bg-gradient-to-br from-amber-500 to-red-600 flex items-center justify-center">
              <Globe2 className="w-4 h-4 text-white" />
            </div>
            <span className="font-semibold text-sm tracking-wide hidden sm:inline">{t('title')}</span>
          </Link>
        </div>

        {/* Center nav link (like Plants link in reference) */}
        <div className="hidden md:flex items-center gap-1">
          <Link
            href="/"
            className="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium text-[var(--map-text-muted)] hover:text-white hover:bg-white/10 transition-colors"
          >
            <Globe2 className="w-4 h-4" />
            <span>{t('mapLink')}</span>
          </Link>
        </div>

        {/* Right: language + sign in */}
        <div className="flex items-center gap-2">
          <LanguageSwitcher />
          <button className="hidden sm:flex items-center px-3 py-1.5 rounded-md text-sm font-medium text-[var(--map-text-muted)] hover:text-white hover:bg-white/10 transition-colors">
            {t('signIn')}
          </button>
        </div>
      </div>

      {/* Expandable nav links */}
      {menuOpen && (
        <div className="absolute top-14 left-0 right-0 bg-[#0b0f1e]/95 border-b border-[var(--map-border)] px-4 py-3 flex flex-col gap-1">
          <Link href="/" className="text-sm text-[var(--map-text-muted)] hover:text-white py-1.5 px-2 rounded-md hover:bg-white/10 transition-colors">
            {t('home')}
          </Link>
          <Link href="/" className="text-sm text-[var(--map-text-muted)] hover:text-white py-1.5 px-2 rounded-md hover:bg-white/10 transition-colors">
            {t('about')}
          </Link>
          <Link href="/" className="text-sm text-[var(--map-text-muted)] hover:text-white py-1.5 px-2 rounded-md hover:bg-white/10 transition-colors">
            {t('privacy')}
          </Link>
          <Link href="/" className="text-sm text-[var(--map-text-muted)] hover:text-white py-1.5 px-2 rounded-md hover:bg-white/10 transition-colors">
            {t('terms')}
          </Link>
        </div>
      )}
    </nav>
  );
}