import React from "react";
import { motion } from "framer-motion";
import { Link, useLocation, useNavigate } from "react-router-dom";
import ROUTE_CONSTANTS from "@/constants/route.constants";
import {
  Facebook,
  Twitter,
  Instagram,
  Linkedin,
  Mail,
  Phone,
  MapPin,
} from "lucide-react";
import dayjs from "dayjs";

export const Footer: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const handleNavClick = (sectionId: string) => {
    if (location.pathname !== ROUTE_CONSTANTS.Landing) {
      navigate(ROUTE_CONSTANTS.Landing);
      setTimeout(() => {
        const el = document.getElementById(sectionId);
        if (el) el.scrollIntoView({ behavior: "smooth" });
      }, 100);
    } else {
      const el = document.getElementById(sectionId);
      if (el) el.scrollIntoView({ behavior: "smooth" });
    }
  };
  return (
    <motion.footer
      className="bg-brand-navy text-white pt-16 pb-8"
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.7, ease: "easeOut" }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Grid: Stagger Animation */}
        <motion.div
          className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"
          initial="hidden"
          whileInView="show"
          viewport={{ once: true }}
          variants={{
            hidden: {},
            show: {
              transition: { staggerChildren: 0.18 },
            },
          }}
        >
          {/* Column 1 */}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 30 },
              show: { opacity: 1, y: 0 },
            }}
          >
            <motion.img
              src="/logo_horizantal.png"
              alt="logo"
              className="h-10"
              whileHover={{ scale: 1.1 }}
              transition={{ type: "spring", stiffness: 200 }}
            />

            <p className="text-blue-200 text-sm leading-relaxed mb-6 mt-3">
              Digital examination infrastructure designed to support
              institutions with secure assessments, analytics, and scalable
              systems.
            </p>

            {/* Social Icons */}
            <div className="flex space-x-4">
              {[Facebook, Twitter, Instagram, Linkedin].map((Icon, i) => (
                <motion.a
                  key={i}
                  href="#"
                  className="text-blue-300 hover:text-white transition-colors"
                  whileHover={{ scale: 1.2 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <Icon className="w-5 h-5" />
                </motion.a>
              ))}
            </div>
          </motion.div>

          {/* Column 2 */}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 30 },
              show: { opacity: 1, y: 0 },
            }}
          >
            <h3 className="text-lg font-semibold mb-4 text-brand-orange">
              Platform
            </h3>
            <ul className="space-y-3 text-blue-200">
              {[
                { label: "Features", id: "features" },
                { label: "Pricing", id: "pricing" },
                { label: "Success Stories", id: "testimonials" },
              ].map((item, index) => (
                <motion.li
                  key={index}
                  whileHover={{ x: 4 }}
                  transition={{ type: "spring", stiffness: 200 }}
                >
                  <button
                    onClick={() => handleNavClick(item.id)}
                    className="hover:text-white transition-colors"
                  >
                    {item.label}
                  </button>
                </motion.li>
              ))}
            </ul>
          </motion.div>

          {/* Column 3 */}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 30 },
              show: { opacity: 1, y: 0 },
            }}
          >
            <h3 className="text-lg font-semibold mb-4 text-brand-orange">
              Support
            </h3>
            <ul className="space-y-3 text-blue-200">
              {/* <motion.li
                whileHover={{ x: 4 }}
                transition={{ type: "spring", stiffness: 200 }}
              >
                <a href="#" className="hover:text-white transition-colors">
                  Help Center
                </a>
              </motion.li> */}
              <motion.li
                whileHover={{ x: 4 }}
                transition={{ type: "spring", stiffness: 200 }}
              >
                <Link
                  to={ROUTE_CONSTANTS.Terms}
                  className="hover:text-white transition-colors"
                >
                  Terms and Conditions
                </Link>
              </motion.li>
              <motion.li
                whileHover={{ x: 4 }}
                transition={{ type: "spring", stiffness: 200 }}
              >
                <Link
                  to={ROUTE_CONSTANTS.Privacy}
                  className="hover:text-white transition-colors"
                >
                  Privacy Policy
                </Link>
              </motion.li>
              <motion.li
                whileHover={{ x: 4 }}
                transition={{ type: "spring", stiffness: 200 }}
              >
                <Link
                  to={ROUTE_CONSTANTS.Contact}
                  className="hover:text-white transition-colors"
                >
                  Contact Us
                </Link>
              </motion.li>
            </ul>
          </motion.div>

          {/* Column 4 */}
          <motion.div
            variants={{
              hidden: { opacity: 0, y: 30 },
              show: { opacity: 1, y: 0 },
            }}
          >
            <h3 className="text-lg font-semibold mb-4 text-brand-orange">
              Contact
            </h3>
            <ul className="space-y-4 text-blue-200">
              <motion.li
                className="flex items-center gap-3"
                whileHover={{ x: 4 }}
              >
                <Mail className="w-5 h-5 text-brand-green" />
                <a href="mailto:info@examinfra.com">info@examinfra.com</a>
              </motion.li>
              <motion.li
                className="flex items-center gap-3"
                whileHover={{ x: 4 }}
              >
                <Phone className="w-5 h-5 text-brand-green" />
                <a href="tel:+919965866260">+91 9965866260</a>
              </motion.li>
              <motion.li
                className="flex items-center gap-3"
                whileHover={{ x: 4 }}
              >
                <MapPin className="w-5 h-5 text-brand-green" />
                <a
                  href="https://www.google.com/maps/place/Tamil+Nadu,+India"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Tamil Nadu, India.
                </a>
              </motion.li>
            </ul>
          </motion.div>
        </motion.div>

        {/* Footer Bottom */}
        <motion.div
          className="border-t border-blue-900 pt-8 text-center text-blue-400 text-sm"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.3, duration: 0.6 }}
        >
          <p>
            &copy; {dayjs().year()} ExamInfra. All rights reserved.
          </p>
        </motion.div>
      </div>
    </motion.footer>
  );
};