"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { MapPinIcon, PhoneIcon, MailIcon } from "./Icons";

const footerLinks = {
  company: [
    { href: "/what-we-do", label: "What We Do" },
    { href: "/culture", label: "Our Culture" },
    { href: "/contact", label: "Contact Us" },
  ],
  products: [
    { href: "/products", label: "All Products" },
    { href: "/sustainability", label: "Sustainability" },
    { href: "/state-ordinances", label: "State Ordinances" },
  ],
  categories: [
    { href: "/products#packaging", label: "Food Packaging" },
    { href: "/products#green", label: "Green Products" },
    { href: "/products#janitorial", label: "Janitorial" },
  ],
};

const territories = [
  "Colorado",
  "Washington",
  "Oregon",
  "Idaho",
  "Utah",
  "Wyoming",
  "Montana",
  "New Mexico",
  "Nebraska",
  "Arizona",
];

export default function Footer() {
  return (
    <footer className="relative bg-neutral-950 text-white overflow-hidden">
      {/* Decorative gradient */}
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[hsl(0,100%,40%)] to-transparent" />

      {/* Background decoration */}
      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[200px] opacity-5 -translate-y-1/2 translate-x-1/2" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main Footer Content */}
        <div className="py-16 lg:py-20">
          <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-8">
            {/* Brand Column */}
            <div className="lg:col-span-2">
              <Link href="/" className="inline-block">
                <motion.div
                  whileHover={{ scale: 1.05 }}
                  className="flex items-center gap-3"
                >
                  <Image
                    src="/assets/brand-logo.png"
                    alt="TCM Sales & Marketing"
                    width={50}
                    height={50}
                    className="w-12 h-12 object-contain"
                  />
                  <div>
                    <span className="font-bold text-xl">TCM</span>
                    <span className="text-[hsl(0,100%,50%)] font-bold text-xl">
                      {" "}
                      Sales & Marketing
                    </span>
                  </div>
                </motion.div>
              </Link>

              <p className="mt-6 text-neutral-400 max-w-md leading-relaxed">
                Industry trusted since 2005. Your partner for foodservice and
                janitorial solutions across the Rocky Mountain and Northwest
                regions.
              </p>

              {/* Contact Info */}
              <div className="mt-8 space-y-4">
                <motion.a
                  href="tel:303-371-2810"
                  whileHover={{ x: 5 }}
                  className="flex items-center gap-3 text-neutral-400 hover:text-white transition-colors group"
                >
                  <span className="p-2 rounded-lg bg-white/5 group-hover:bg-[hsl(0,100%,40%)] transition-colors">
                    <PhoneIcon size={18} />
                  </span>
                  <span>303-371-2810</span>
                </motion.a>

                <motion.a
                  href="mailto:info@tcm-sales.com"
                  whileHover={{ x: 5 }}
                  className="flex items-center gap-3 text-neutral-400 hover:text-white transition-colors group"
                >
                  <span className="p-2 rounded-lg bg-white/5 group-hover:bg-[hsl(0,100%,40%)] transition-colors">
                    <MailIcon size={18} />
                  </span>
                  <span>info@tcm-sales.com</span>
                </motion.a>

                <motion.div
                  whileHover={{ x: 5 }}
                  className="flex items-start gap-3 text-neutral-400 group"
                >
                  <span className="p-2 rounded-lg bg-white/5">
                    <MapPinIcon size={18} />
                  </span>
                  <span className="leading-relaxed">
                    12424 East Weaver Place
                    <br />
                    Centennial, CO 80111
                  </span>
                </motion.div>
              </div>
            </div>

            {/* Links Columns */}
            <div>
              <h4 className="font-semibold text-white mb-4">Company</h4>
              <ul className="space-y-3">
                {footerLinks.company.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href}>
                      <motion.span
                        whileHover={{ x: 5, color: "#ff4d4d" }}
                        className="text-neutral-400 hover:text-white transition-colors cursor-pointer inline-block"
                      >
                        {link.label}
                      </motion.span>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">Products</h4>
              <ul className="space-y-3">
                {footerLinks.products.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href}>
                      <motion.span
                        whileHover={{ x: 5, color: "#ff4d4d" }}
                        className="text-neutral-400 hover:text-white transition-colors cursor-pointer inline-block"
                      >
                        {link.label}
                      </motion.span>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">Categories</h4>
              <ul className="space-y-3">
                {footerLinks.categories.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href}>
                      <motion.span
                        whileHover={{ x: 5, color: "#ff4d4d" }}
                        className="text-neutral-400 hover:text-white transition-colors cursor-pointer inline-block"
                      >
                        {link.label}
                      </motion.span>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Territory Tags */}
          <div className="mt-12 pt-8 border-t border-white/10">
            <p className="text-sm text-neutral-500 mb-4">
              Proudly serving the Rocky Mountain & Northwest regions:
            </p>
            <div className="flex flex-wrap gap-2">
              {territories.map((territory, index) => (
                <motion.span
                  key={territory}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ delay: index * 0.05 }}
                  whileHover={{
                    scale: 1.05,
                    backgroundColor: "hsl(0, 100%, 40%)",
                  }}
                  className="px-3 py-1 text-xs font-medium text-neutral-400 bg-white/5 rounded-full cursor-default transition-colors hover:text-white"
                >
                  {territory}
                </motion.span>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="py-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-sm text-neutral-500">
            &copy; {new Date().getFullYear()} TCM Sales & Marketing. All rights
            reserved.
          </p>
          <div className="flex items-center gap-6">
            <Link href="/privacy">
              <motion.span
                whileHover={{ color: "#fff" }}
                className="text-sm text-neutral-500 cursor-pointer"
              >
                Privacy Policy
              </motion.span>
            </Link>
            <Link href="/terms">
              <motion.span
                whileHover={{ color: "#fff" }}
                className="text-sm text-neutral-500 cursor-pointer"
              >
                Terms of Service
              </motion.span>
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}