import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Facebook, Instagram, Twitter, Mail, ArrowRight } from "lucide-react"
import { motion } from "framer-motion"

export default function Footer() {
  const fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.5 }
  }

  const staggerContainer = {
    animate: { transition: { staggerChildren: 0.1 } }
  }

  return (
    <footer className="bg-gradient-to-r from-primary to-primary/90 text-white pt-20 pb-8">
      <div className="container mx-auto px-4">
        <motion.div 
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-16"
          variants={staggerContainer}
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
        >
          {/* Колонка 1: О нас */}
          <motion.div variants={fadeInUp}>
            <div className="mb-8">
              <div className="relative h-12 w-36">
                <Image 
                  src="/logo.svg" 
                  alt="Dressed for Success" 
                  fill 
                  className="object-contain"
                />
              </div>
            </div>
            <p className="text-white/80 mb-8 leading-relaxed">
              Мы создаем стильную и качественную одежду для современных людей, ценящих комфорт и индивидуальность.
            </p>
            <div className="flex space-x-5">
              <motion.a 
                href="#" 
                className="bg-white/10 hover:bg-white/20 p-3 rounded-full transition-colors"
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
              >
                <Instagram className="h-5 w-5" />
                <span className="sr-only">Instagram</span>
              </motion.a>
              {/* <motion.a 
                href="#" 
                className="bg-white/10 hover:bg-white/20 p-3 rounded-full transition-colors"
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.95 }}
              >
                <Twitter className="h-5 w-5" />
                <span className="sr-only">Twitter</span>
              </motion.a> */}
            </div>
          </motion.div>

          {/* Колонка 2: Информация */}
          <motion.div variants={fadeInUp}>
            <h3 className="text-lg font-medium mb-6 uppercase tracking-wider">Информация</h3>
            <ul className="space-y-4">
              {[
                { name: "О нас", href: "/about" },
                { name: "Контакты", href: "/contact" },
                { name: "Доставка и оплата", href: "/delivery" },
                { name: "Возврат и обмен", href: "/returns" },
                { name: "Часто задаваемые вопросы", href: "/faq" },
              ].map((link) => (
                <motion.li key={link.name} whileHover={{ x: 5 }}>
                  <Link href={link.href} className="text-white/70 hover:text-white transition-colors flex items-center">
                    <span className="mr-2 opacity-0 group-hover:opacity-100 transition-opacity">•</span>
                    {link.name}
                  </Link>
                </motion.li>
              ))}
            </ul>
          </motion.div>

          {/* Колонка 3: Категории */}
          <motion.div variants={fadeInUp}>
            <h3 className="text-lg font-medium mb-6 uppercase tracking-wider">Категории</h3>
            <ul className="space-y-4">
              {[
                { name: "Платья", href: "/catalog?category=dresses" },
                { name: "Блузы и рубашки", href: "/catalog?category=tops" },
                { name: "Брюки и джинсы", href: "/catalog?category=pants" },
                { name: "Верхняя одежда", href: "/catalog?category=outerwear" },
                { name: "Аксессуары", href: "/catalog?category=accessories" },
              ].map((link) => (
                <motion.li key={link.name} whileHover={{ x: 5 }}>
                  <Link href={link.href} className="text-white/70 hover:text-white transition-colors flex items-center">
                    <span className="mr-2 opacity-0 group-hover:opacity-100 transition-opacity">•</span>
                    {link.name}
                  </Link>
                </motion.li>
              ))}
            </ul>
          </motion.div>

          {/* Колонка 4: Подписка */}
          <motion.div variants={fadeInUp}>
            <h3 className="text-lg font-medium mb-6 uppercase tracking-wider">Подписка на новости</h3>
            <p className="text-white/80 mb-6 leading-relaxed">
              Подпишитесь на нашу рассылку, чтобы первыми узнавать о новых коллекциях и специальных предложениях.
            </p>
            <div className="flex flex-col space-y-4">
              <div className="flex overflow-hidden rounded-lg">
                <Input
                  type="email"
                  placeholder="Ваш email"
                  className="rounded-none border-0 bg-white/10 text-white placeholder:text-white/60 focus-visible:ring-0 px-4"
                />
                <Button className="rounded-none bg-white text-primary hover:bg-white/90 px-4">
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </div>
              <p className="text-xs text-white/60">
                Подписываясь, вы соглашаетесь с нашей{" "}
                <Link href="/privacy" className="underline hover:text-white">
                  политикой конфиденциальности
                </Link>
              </p>
            </div>
          </motion.div>
        </motion.div>

        {/* Нижняя часть футера */}
        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center">
          <p className="text-white/60 text-sm mb-4 md:mb-0"> 2025 Dressed for Success. Все права защищены.</p>
          <div className="flex space-x-6">
            <Link href="/terms" className="text-white/60 text-sm hover:text-white">
              Условия использования
            </Link>
            <Link href="/privacy" className="text-white/60 text-sm hover:text-white">
              Политика конфиденциальности
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}