import Link from "next/link";
import { Facebook, Instagram, Twitter, Youtube, ChevronDown, ChevronUp } from "lucide-react";
import { useState } from "react";

export default function Footer() {
  // Состояния для отображения/скрытия разделов на мобильных устройствах
  const [helpOpen, setHelpOpen] = useState(false);
  const [shopOpen, setShopOpen] = useState(false);
  const [aboutOpen, setAboutOpen] = useState(false);

  return (
    <footer className="bg-[#2B5F47] text-white py-8 md:py-12 border-t border-[#63823B]">
      <div className="container mx-auto px-4 md:px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8">
          {/* Помощь - с аккордеоном на мобильных */}
          <div className="border-b border-[#63823B]/30 pb-4 md:border-b-0 md:pb-0">
            <div 
              className="flex justify-between items-center mb-4 cursor-pointer md:cursor-default"
              onClick={() => setHelpOpen(!helpOpen)}
            >
              <h4 className="text-lg font-medium">Помощь</h4>
              <div className="md:hidden">
                {helpOpen ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
              </div>
            </div>
            <ul className={`space-y-2 overflow-hidden transition-all duration-300 ${helpOpen ? 'max-h-60' : 'max-h-0 md:max-h-60'}`}>
              <li><Link href="/contact" className="text-sm hover:text-[#E2E2C1] transition-colors">Связаться с нами</Link></li>
              <li><Link href="/faq" className="text-sm hover:text-[#E2E2C1] transition-colors">Часто задаваемые вопросы</Link></li>
              <li><Link href="/shipping" className="text-sm hover:text-[#E2E2C1] transition-colors">Доставка и возврат</Link></li>
              <li><Link href="/track-order" className="text-sm hover:text-[#E2E2C1] transition-colors">Отследить заказ</Link></li>
              <li><Link href="/size-guide" className="text-sm hover:text-[#E2E2C1] transition-colors">Руководство по размерам</Link></li>
            </ul>
          </div>
          
          {/* Магазин - с аккордеоном на мобильных */}
          <div className="border-b border-[#63823B]/30 pb-4 md:border-b-0 md:pb-0">
            <div 
              className="flex justify-between items-center mb-4 cursor-pointer md:cursor-default"
              onClick={() => setShopOpen(!shopOpen)}
            >
              <h4 className="text-lg font-medium">Магазин</h4>
              <div className="md:hidden">
                {shopOpen ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
              </div>
            </div>
            <ul className={`space-y-2 overflow-hidden transition-all duration-300 ${shopOpen ? 'max-h-60' : 'max-h-0 md:max-h-60'}`}>
              <li><Link href="/women" className="text-sm hover:text-[#E2E2C1] transition-colors">Женщинам</Link></li>
              <li><Link href="/men" className="text-sm hover:text-[#E2E2C1] transition-colors">Мужчинам</Link></li>
              <li><Link href="/accessories" className="text-sm hover:text-[#E2E2C1] transition-colors">Аксессуары</Link></li>
              <li><Link href="/collections" className="text-sm hover:text-[#E2E2C1] transition-colors">Коллекции</Link></li>
              <li><Link href="/sale" className="text-sm hover:text-[#E2E2C1] transition-colors">Распродажа</Link></li>
            </ul>
          </div>
          
          {/* О компании - с аккордеоном на мобильных */}
          <div className="border-b border-[#63823B]/30 pb-4 md:border-b-0 md:pb-0">
            <div 
              className="flex justify-between items-center mb-4 cursor-pointer md:cursor-default"
              onClick={() => setAboutOpen(!aboutOpen)}
            >
              <h4 className="text-lg font-medium">О компании</h4>
              <div className="md:hidden">
                {aboutOpen ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
              </div>
            </div>
            <ul className={`space-y-2 overflow-hidden transition-all duration-300 ${aboutOpen ? 'max-h-60' : 'max-h-0 md:max-h-60'}`}>
              <li><Link href="/about" className="text-sm hover:text-[#E2E2C1] transition-colors">О нас</Link></li>
              <li><Link href="/careers" className="text-sm hover:text-[#E2E2C1] transition-colors">Карьера</Link></li>
              <li><Link href="/sustainability" className="text-sm hover:text-[#E2E2C1] transition-colors">Устойчивое развитие</Link></li>
              <li><Link href="/press" className="text-sm hover:text-[#E2E2C1] transition-colors">Пресса</Link></li>
              <li><Link href="/affiliates" className="text-sm hover:text-[#E2E2C1] transition-colors">Партнерская программа</Link></li>
            </ul>
          </div>
          
          {/* Подписка - всегда видима */}
          <div className="mt-6 md:mt-0">
            <h4 className="text-lg font-medium mb-4">Подписаться</h4>
            <p className="text-sm mb-4">Подпишитесь на нашу рассылку, чтобы получать новости о новых коллекциях и эксклюзивных предложениях.</p>
            <div className="flex mb-6">
              <input
                type="email"
                placeholder="Ваш email"
                className="bg-white px-4 py-2 text-sm border border-[#63823B] rounded-l focus:outline-none focus:border-[#E2E2C1] text-[#2B5F47] flex-grow"
              />
              <button className="bg-[#63823B] text-white px-4 py-2 text-sm rounded-r hover:bg-[#63823B]/80 transition-colors">
                →
              </button>
            </div>
            <div className="flex space-x-4">
              <a href="#" className="text-white hover:text-[#E2E2C1] transition-colors">
                <Facebook size={20} />
              </a>
              <a href="#" className="text-white hover:text-[#E2E2C1] transition-colors">
                <Instagram size={20} />
              </a>
              <a href="#" className="text-white hover:text-[#E2E2C1] transition-colors">
                <Twitter size={20} />
              </a>
              <a href="#" className="text-white hover:text-[#E2E2C1] transition-colors">
                <Youtube size={20} />
              </a>
            </div>
          </div>
        </div>
        
        <div className="border-t border-[#63823B] mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-xs text-[#E2E2C1]/80 mb-4 md:mb-0 text-center md:text-left">© {new Date().getFullYear()} Brand Store. Все права защищены.</p>
          <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 items-center">
            <Link href="/privacy" className="text-xs text-[#E2E2C1]/80 hover:text-[#E2E2C1] transition-colors">Политика конфиденциальности</Link>
            <Link href="/terms" className="text-xs text-[#E2E2C1]/80 hover:text-[#E2E2C1] transition-colors">Условия использования</Link>
            <Link href="/cookies" className="text-xs text-[#E2E2C1]/80 hover:text-[#E2E2C1] transition-colors">Политика использования файлов cookie</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}