'use client'

import Link from 'next/link'
import { useState } from 'react'
import LanguageSwitcher from '@/components/LanguageSwitcher'
import SeoIcon from '@/components/seo/SeoIcon'
import type { Lang } from '@/lib/i18n'
import { localeHome } from '@/lib/localeRoutes'
import { seoTemplateCopy } from '@/lib/seoTemplateCopy'

interface SeoNavbarProps {
  locale: Lang
}

export default function SeoNavbar({ locale }: SeoNavbarProps) {
  const [menuOpen, setMenuOpen] = useState(false)
  const copy = seoTemplateCopy[locale]

  const links = [
    { href: '#advantage', label: copy.nav.features },
    { href: '#methodology', label: copy.nav.tech },
    { href: '#faq', label: copy.nav.faq },
    { href: '#methodology', label: copy.nav.how },
    { href: '/support', label: copy.nav.support },
  ]

  return (
    <nav className="fixed top-0 w-full z-50 bg-ink text-white border-b border-ink-line">
      <div className="flex justify-between items-center px-6 py-4 max-w-[1200px] mx-auto">
        <Link
          href={localeHome[locale]}
          className="font-display text-2xl font-bold tracking-widest text-white"
          aria-label="GreenLens Home"
        >
          GREENLENS
        </Link>

        {/* Desktop */}
        <div className="hidden lg:flex items-center gap-6">
          {links.map((link) =>
            link.href.startsWith('#') ? (
              <a key={link.label} className="text-white/80 hover:text-white transition-colors text-sm font-semibold" href={link.href}>
                {link.label}
              </a>
            ) : (
              <Link key={link.label} className="text-white/80 hover:text-white transition-colors text-sm font-semibold" href={link.href}>
                {link.label}
              </Link>
            ),
          )}
          <div className="ml-2">
            <LanguageSwitcher variant="seo" />
          </div>
        </div>

        <div className="flex items-center gap-4">
          <a
            className="hidden md:inline-flex bg-white text-ink px-6 py-2 rounded-full font-bold shadow-lg hover:bg-gray-200 transition-colors duration-300"
            href="#download"
          >
            {copy.nav.download}
          </a>
          <button
            className="lg:hidden text-white p-2"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((open) => !open)}
          >
            <SeoIcon name={menuOpen ? 'close' : 'menu'} className="w-6 h-6" />
          </button>
        </div>
      </div>

      {/* Mobile */}
      {menuOpen && (
        <div className="lg:hidden bg-ink border-t border-ink-line px-6 py-6 flex flex-col gap-4">
          {links.map((link) =>
            link.href.startsWith('#') ? (
              <a key={link.label} className="text-white/80 hover:text-white text-sm font-semibold" href={link.href} onClick={() => setMenuOpen(false)}>
                {link.label}
              </a>
            ) : (
              <Link key={link.label} className="text-white/80 hover:text-white text-sm font-semibold" href={link.href} onClick={() => setMenuOpen(false)}>
                {link.label}
              </Link>
            ),
          )}
          <a className="text-white/80 hover:text-white text-sm font-semibold" href="#download" onClick={() => setMenuOpen(false)}>
            {copy.nav.download}
          </a>
          <LanguageSwitcher variant="seo" />
        </div>
      )}
    </nav>
  )
}