'use client';

import { useTranslations } from 'next-intl';
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
import { useEffect, useState } from 'react';

export function Navbar() {
  const t = useTranslations();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const floating = window.scrollY > 60;
      setIsScrolled(floating);
      document.body.classList.toggle('nav-is-floating', floating);
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    handleScroll();

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div className={`nav-wrapper ${isScrolled ? 'floating' : ''}`}>
      <div className="container">
        <nav className="nav">
          <div className="brand">
            <a href="#">
              <div className="brand-mark">
                <img src="/brand/logo-primary.svg" alt="" />
              </div>
            </a>
          </div>
          <button className="nav-toggle" aria-label="Open menu" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M4 7h16M4 12h16M4 17h16" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
            </svg>
          </button>
          <div className={`nav-links ${isMenuOpen ? 'open' : ''}`} id="navLinks" onClick={() => setIsMenuOpen(false)}>
            <a href="#" style={{ color: '#fff', opacity: 0.85 }}>
              {t('Nav.home')}
            </a>
            <a href="#ecosystem" style={{ color: '#fff', opacity: 0.85 }}>
              {t('Nav.solutions')}
            </a>
            <a href="#destinations" style={{ color: '#fff', opacity: 0.85 }}>
              {t('Nav.industries')}
            </a>
            <a href="#pricing" style={{ color: '#fff', opacity: 0.85 }}>
              {t('Nav.pricing')}
            </a>
            <a href="#contact" style={{ color: '#fff', opacity: 0.85 }}>
              {t('Nav.contact')}
            </a>
            <a href="#contact" className="btn btn-orange">
              {t('Nav.demo')}
            </a>
            <div className="nav-divider"></div>
            <div onClick={(e) => e.stopPropagation()}>
              <LanguageSwitcher />
            </div>
          </div>
        </nav>
      </div>
    </div>
  );
}