'use client'

import Link from 'next/link'
import { useEffect, useState } from 'react'
import { useLang } from '@/context/LangContext'
import type { Lang } from '@/lib/i18n'

const LANGS: { code: Lang; label: string; flag: string }[] = [
  { code: 'de', label: 'DE', flag: 'DE' },
  { code: 'en', label: 'EN', flag: 'EN' },
  { code: 'es', label: 'ES', flag: 'ES' },
]

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false)
  const [menuOpen, setMenuOpen] = useState(false)
  const { lang, setLang, t } = useLang()

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40)
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  return (
    <nav className={`navbar${scrolled ? ' scrolled' : ''}`} id="navbar" role="navigation" aria-label="Main navigation">
      <div className="container">
        <Link href="/" className="nav-logo" aria-label="GreenLens Home">
          GREENLENS
        </Link>

        <div className={`nav-links${menuOpen ? ' nav-links--open' : ''}`}>
          <a href="#features" onClick={() => setMenuOpen(false)}>{t.nav.features}</a>
          <a href="#intelligence" onClick={() => setMenuOpen(false)}>{t.nav.tech}</a>
          <a href="#faq" onClick={() => setMenuOpen(false)}>FAQ</a>
          <a href="#how" onClick={() => setMenuOpen(false)}>{t.nav.how}</a>
          <Link href="/support" onClick={() => setMenuOpen(false)}>Support</Link>
          <a href="#cta" onClick={() => setMenuOpen(false)}>{t.nav.download}</a>

          <div className="lang-switcher" role="group" aria-label="Language selector">
            {LANGS.map((l) => (
              <button
                key={l.code}
                className={`lang-btn${lang === l.code ? ' lang-btn--active' : ''}`}
                onClick={() => {
                  setLang(l.code)
                  setMenuOpen(false)
                }}
                aria-label={`Switch to ${l.label}`}
                aria-pressed={lang === l.code}
              >
                <span>{l.flag}</span>
                <span>{l.label}</span>
              </button>
            ))}
          </div>

          <a href="#cta" className="nav-cta" onClick={() => setMenuOpen(false)}>{t.nav.cta}</a>
        </div>

        <button
          className="nav-hamburger"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}
        >
          <span />
          <span />
          <span />
        </button>
      </div>

      <style jsx>{`
        .nav-links--open {
          display: flex !important;
          flex-direction: column;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: rgba(19,31,22,0.97);
          backdrop-filter: blur(18px);
          padding: 1.5rem 2rem;
          gap: 1rem;
          border-top: 1px solid rgba(244,241,232,0.08);
        }
        .lang-switcher {
          display: flex;
          align-items: center;
          gap: 2px;
          background: rgba(244,241,232,0.07);
          border: 1px solid rgba(244,241,232,0.12);
          border-radius: 999px;
          padding: 3px;
        }
        .lang-btn {
          display: flex;
          align-items: center;
          gap: 4px;
          background: transparent;
          border: none;
          color: rgba(244,241,232,0.6);
          font-size: 0.7rem;
          font-weight: 600;
          letter-spacing: 0.04em;
          padding: 4px 10px;
          border-radius: 999px;
          cursor: pointer;
          transition: background 0.2s, color 0.2s;
          white-space: nowrap;
        }
        .lang-btn:hover {
          color: rgba(244,241,232,0.9);
          background: rgba(244,241,232,0.1);
        }
        .lang-btn--active {
          background: rgba(244,241,232,0.15);
          color: #fff;
        }
      `}</style>
    </nav>
  )
}