"use client";

import { useLanguage } from "@/context/language-context";
import { motion } from "framer-motion";
import { Facebook, Linkedin, Send } from "lucide-react";
import Image from "next/image";

export function Footer() {
  const { t } = useLanguage();
  const socialLinks = [
    { icon: Facebook, href: "#", label: "Facebook" },
    { icon: Linkedin, href: "#", label: "LinkedIn" },
    { icon: Send, href: "#", label: "Telegram" },
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 10 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <footer className="bg-linear-to-br from-primary to-gray-800 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"
        >
          {/* Brand */}
          <motion.div variants={itemVariants}>
            <h3 className=" mb-2">
              <Image
                src="/logo.jpg"
                alt="image"
                width={80}
                height={50}
                className="rounded-xl object-cover"
              />
            </h3>
            <p className="text-gray-400 text-sm">
              {t.footer.common.premium_title}
            </p>
          </motion.div>

          {/* Quick Links */}
          <motion.div variants={itemVariants}>
            <h4 className="font-semibold mb-4">{t.footer.common.quickLinks}</h4>
            <ul className="space-y-2 text-gray-400 text-sm">
              <li>
                <a href="#about" className="hover:text-white transition-colors text-[15px] ">
                  {t.footer.common.aboutUs}
                </a>
              </li>
              <li>
                <a
                  href="#products"
                  className="hover:text-white text-[15px] transition-colors"
                >
                  {t.footer.common.products}
                </a>
              </li>
              <li>
                <a
                  href="#contact"
                  className="hover:text-white text-[15px] transition-colors"
                >
                  {t.footer.common.contact}
                </a>
              </li>
            </ul>
          </motion.div>

          {/* Contact Info */}
          <motion.div variants={itemVariants}>
            <h4 className="font-semibold mb-4">{t.footer.common.contact}</h4>
            <ul className="space-y-2 text-gray-400 text-sm">
              <li className="text-[15px]">{t.footer.common.email}: info@firma.uz</li>
              <li className="text-[15px]">{t.footer.common.phone}: +998 (99) 869-74-70</li>
              <li className="text-[15px]">{t.footer.common.telegram}: @firma_support</li>
            </ul>
          </motion.div>

          {/* Social */}
          <motion.div variants={itemVariants}>
            <h4 className="font-semibold mb-4">{t.footer.followUs}</h4>
            <div className="flex gap-4">
              {socialLinks.map((link) => {
                const Icon = link.icon;
                return (
                  <motion.a
                    key={link.label}
                    href={link.href}
                    whileHover={{ scale: 1.2 }}
                    whileTap={{ scale: 0.95 }}
                    className="p-2 bg-gray-800 rounded-lg hover:bg-primary transition-colors"
                    aria-label={link.label}
                  >
                    <Icon size={20} />
                  </motion.a>
                );
              })}
            </div>
          </motion.div>
        </motion.div>

        {/* Divider */}
        <div className="border-t border-gray-800 pt-8">
          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center text-gray-400 text-sm"
          >
            {t.footer.copyright}
          </motion.p>
        </div>
      </div>
    </footer>
  );
}
