// import { useState, useEffect } from 'react'
// import { Link } from 'react-router-dom'
// import logo from '../assets/images/logo200x50.png'
// import { ScrollRestoration } from 'react-router-dom';

// export default function Header() {
//   const [isScrolled, setIsScrolled] = useState(false)

//   useEffect(() => {
//     const handleScroll = () => {
//       const isFullScreenPassed = window.scrollY > window.innerHeight
//       setIsScrolled(isFullScreenPassed)
//     }

//     window.addEventListener('scroll', handleScroll)
//     return () => window.removeEventListener('scroll', handleScroll)
//   }, [])

//   return (
//     <header
//       className={`
//         fixed top-0 left-0 w-full z-50
//         transition-all duration-300
//         ${isScrolled 
//           ? 'bg-white bg-opacity-90 backdrop-blur-md' 
//           : 'bg-transparent backdrop-blur-md bg-opacity-30'
//         }
//       `}
//     >
//       <div className="container mx-auto px-4">
//         <div className="flex items-center justify-between h-16">
//           <div className="flex items-center">
//           <a href="#">
//             <img
//               src={logo}
//               alt="Logo"
//               className="h-12 w-auto"
//             />
//           </a>
//           </div>
          
//           <nav className="hidden md:flex space-x-8">
//             <Link
//               to="/pricing"
//               className={`text-lg font-light transition-colors duration-200 ${
//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
//               }`}
//             >
//               Тарифный план
//             </Link>
//             <a 
//               href="#contacts-section" 
//               className={`text-lg font-light transition-colors duration-200 ${
//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
//               }`}
//             >
//               Обратная связь
//             </a>
//           </nav>
//         </div>
//       </div>
//     </header>
//   )
// }

// import { useState, useEffect } from 'react';
// import { Link } from 'react-router-dom';
// import logo from '../assets/images/logo200x50.png';
// import translations from '../translations.json';
// import { useLanguage } from '../contexts/LanguageContext';
// import { CustomLink } from './CustomLink';

// export default function Header() {
//   const [isScrolled, setIsScrolled] = useState(false);
//   const { language, toggleLanguage } = useLanguage();
//   const t = translations.header[language];

//   useEffect(() => {
//     const handleScroll = () => {
//       const isFullScreenPassed = window.scrollY > window.innerHeight;
//       setIsScrolled(isFullScreenPassed);
//     };

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

//   return (
//     <header
//       className={`
//         fixed top-0 left-0 w-full z-50
//         transition-all duration-300
//         ${isScrolled 
//           ? 'bg-white bg-opacity-90 backdrop-blur-md' 
//           : 'bg-transparent backdrop-blur-md bg-opacity-30'
//         }
//       `}
//     >
//       <div className="container mx-auto px-4">
//         <div className="flex items-center justify-between h-16">
//           <div className="flex items-center">
//             <CustomLink to="/">
//               <img
//                 src={logo}
//                 alt="Logo"
//                 className="h-12 w-auto"
//               />
//             </CustomLink>
//           </div>
          
//           <nav className="hidden md:flex items-center space-x-8">
//             <CustomLink
//               to="/pricing"
//               className={`text-lg font-light transition-colors duration-200 ${
//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
//               }`}
//             >
//               {t.pricing}
//             </CustomLink>
//             <a 
//               href="#contacts-section" 
//               className={`text-lg font-light transition-colors duration-200 ${
//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
//               }`}
//             >
//               {t.feedback}
//             </a>
//             <button
//               onClick={toggleLanguage}
//               className={`text-lg font-semibold transition-colors duration-200 px-3 py-1 rounded-md border-2 ${
//                 isScrolled 
//                   ? 'text-gray-800 hover:text-gray-600 border-gray-800' 
//                   : 'text-white hover:text-gray-200 border-white'
//               }`}
//             >
//               {t.langButton}
//             </button>
//           </nav>
//         </div>
//       </div>
//     </header>
//   );
// }


// import { useState, useEffect } from 'react';
// import logo from '../assets/images/logo200x50.png';
// import translations from '../translations.json';
// import { useLanguage } from '../contexts/LanguageContext';
// import { CustomLink } from './CustomLink';
// import LanguageSwitcher from './LanguageSwitcher';
// import { ScrollLink } from './ScrollLink';

// export default function Header() {
//   const [isScrolled, setIsScrolled] = useState(false);
//   const { language } = useLanguage();
//   const t = translations.header[language];

//   useEffect(() => {
//     const handleScroll = () => {
//       const isFullScreenPassed = window.scrollY > window.innerHeight;
//       setIsScrolled(isFullScreenPassed);
//     };

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

//   return (
//     <header
//       className={`
//         fixed top-0 left-0 w-full z-50
//         transition-all duration-300
//         ${isScrolled 
//           ? 'bg-white bg-opacity-90 backdrop-blur-md' 
//           : 'bg-transparent backdrop-blur-md bg-opacity-30'
//         }
//       `}
//     >
//       <div className="container mx-auto px-4">
//         <div className="flex items-center justify-between h-16">
//           <div className="flex items-center">
//             <CustomLink to="/">
//               <img
//                 src={logo}
//                 alt="Logo"
//                 className="h-12 w-auto"
//               />
//             </CustomLink>
//           </div>
          
//           <nav className="hidden md:flex items-center space-x-8">
//             <CustomLink
//               to="/pricing"
//               className={`text-lg font-light transition-colors duration-200 ${
//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
//               }`}
//             >
//               {t.pricing}
//             </CustomLink>
//             <ScrollLink 
//               to="#contacts-section" 
//               className={`text-lg font-light transition-colors duration-200 ${
//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
//               }`}
//             >
//               {t.feedback}
//             </ScrollLink>
//             <LanguageSwitcher isScrolled={isScrolled} />
//           </nav>
//         </div>
//       </div>
//     </header>
//   );
// }


import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { Menu, X } from 'lucide-react';
import logo from '../assets/images/logo200x50.png';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';
import { CustomLink } from './CustomLink';
import LanguageSwitcher from './LanguageSwitcher';
import { ScrollLink } from './ScrollLink';

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const { language } = useLanguage();
  const t = translations.header[language];
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      const isFullScreenPassed = window.scrollY > window.innerHeight;
      setIsScrolled(isFullScreenPassed);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Закрываем мобильное меню при смене маршрута
  useEffect(() => {
    setIsMobileMenuOpen(false);
  }, [location]);

  const headerBg = isScrolled 
    ? 'bg-white bg-opacity-90 backdrop-blur-md'
    : 'bg-transparent backdrop-blur-md bg-opacity-30';

  const textColor = isScrolled 
    ? 'text-gray-800 hover:text-gray-600' 
    : 'text-white hover:text-gray-200';

  return (
    <header className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${headerBg}`}>
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Логотип */}
          <div className="flex items-center">
            <CustomLink to="/">
              <img src={logo} alt="Logo" className="h-12 w-auto" />
            </CustomLink>
          </div>

          {/* Десктопная навигация */}
          <nav className="hidden md:flex items-center space-x-8">
            <CustomLink
              to="/pricing"
              className={`text-lg font-light transition-colors duration-200 ${textColor}`}
            >
              {t.pricing}
            </CustomLink>
            <ScrollLink
              to="#contacts-section"
              className={`text-lg font-light transition-colors duration-200 ${textColor}`}
            >
              {t.feedback}
            </ScrollLink>
            <LanguageSwitcher isScrolled={isScrolled} />
          </nav>

          {/* Кнопка мобильного меню */}
          <button
            className="md:hidden p-2 rounded-lg focus:outline-none"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? (
              <X className={textColor} size={24} />
            ) : (
              <Menu className={textColor} size={24} />
            )}
          </button>
        </div>

        {/* Мобильное меню */}
        {isMobileMenuOpen && (
          <div className={`md:hidden ${headerBg} px-4 py-2`}>
            <div className="flex flex-col space-y-4 pb-4">
              <CustomLink
                to="/pricing"
                className={`text-lg font-light transition-colors duration-200 ${textColor}`}
              >
                {t.pricing}
              </CustomLink>
              <ScrollLink
                to="#contacts-section"
                className={`text-lg font-light transition-colors duration-200 ${textColor}`}
              >
                {t.feedback}
              </ScrollLink>
              <div className="pt-2">
                <LanguageSwitcher isScrolled={isScrolled} />
              </div>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}