import Link from "next/link";
import { SmoothLink } from "@/components/providers/NavigationProvider";

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-white py-12 transition-all duration-500">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
          {/* Product Column */}
          <div>
            <h3 className="text-lg font-semibold mb-4 transition-all duration-300 hover:text-[#1D9E75] cursor-pointer">
              Product
            </h3>
            <ul className="space-y-2">
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-all duration-300 hover:translate-x-1 inline-block cursor-pointer"
                >
                  Features
                </SmoothLink>
              </li>
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-all duration-300 hover:translate-x-1 inline-block cursor-pointer"
                >
                  Pricing
                </SmoothLink>
              </li>
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-all duration-300 hover:translate-x-1 inline-block cursor-pointer"
                >
                  Changelog
                </SmoothLink>
              </li>
            </ul>
          </div>

          {/* Company Column */}
          <div>
            <h3 className="text-lg font-semibold mb-4 transition-all duration-300 hover:text-[#1D9E75] cursor-pointer">
              Company
            </h3>
            <ul className="space-y-2">
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-all duration-300 hover:translate-x-1 inline-block cursor-pointer"
                >
                  About
                </SmoothLink>
              </li>
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-all duration-300 hover:translate-x-1 inline-block cursor-pointer"
                >
                  Blog
                </SmoothLink>
              </li>
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-all duration-300 hover:translate-x-1 inline-block cursor-pointer"
                >
                  Careers
                </SmoothLink>
              </li>
            </ul>
          </div>

          {/* Support Column */}
          <div>
            <h3 className="text-lg font-semibold mb-4 transition-all duration-300 hover:text-[#1D9E75] cursor-pointer">
              Support
            </h3>
            <ul className="space-y-2">
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  Docs
                </SmoothLink>
              </li>
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  Contact
                </SmoothLink>
              </li>
              <li>
                <SmoothLink
                  href="#"
                  className="text-gray-400 hover:text-white transition-colors"
                >
                  Status
                </SmoothLink>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-gray-800 pt-8 text-center">
          <p className="text-gray-400 transition-all duration-300 hover:text-white cursor-pointer">
            &copy; {new Date().getFullYear()} Vela. All Rights Reserved.
          </p>
          <p className="text-gray-500 text-xs mt-2">Vela — Built for small business.</p>
        </div>
      </div>
    </footer>
  );
}