import { Facebook, Instagram, Linkedin, Twitter, Youtube } from "lucide-react";
import { Link } from "react-router-dom";

export default function Footer() {
  return (
    <footer className="bg-gradient-to-b from-green-50 to-white">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
          {/* Need Help Section */}
          <div>
            <h3 className="text-[#A70710] font-bold text-lg mb-4">
              Need Help?
            </h3>
            <ul className="space-y-2">
              <li>
                <Link to="/login"

                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Member Login
                </Link>
              </li>
              <li>
                <Link
                  to="/registration"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Sign Up
                </Link>
              </li>
              <li>
                <a
                  href="/matches"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Partner Search
                </a>
              </li>
              {/* <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  How to Use Thirukalyanam Matrimony App
                </a>
              </li> */}
              {/* <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Premium Memberships
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Customer Support
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Site Map
                </a>
              </li> */}
            </ul>
            <ul className="space-y-2 py-2">
                <Link
                  to="/contact"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Contact Us
                </Link>
              </ul>
          </div>

          {/* Company Section */}
          {/* <div> */}
            {/* <h3 className="text-[#A70710] font-bold text-lg mb-4">Company</h3> */}
            {/* <ul className="space-y-2"> */}
              {/* <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  About Us
                </a>
              </li> */}
              {/* <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Thirukalyanam Blog
                </a>
              </li> */}
              {/* <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Careers
                </a>
              </li> */}
              {/* <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Awards & Recognition
                </a>
              </li> */}
              {/* <li>
                <Link
                  to="/contact"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Contact Us
                </Link>
              </li> */}
            {/* </ul>
          </div> */}

          {/* Privacy & You Section */}
          <div>
            <h3 className="text-[#A70710] font-bold text-lg mb-4">
              Privacy & You
            </h3>
            <ul className="space-y-2">
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Terms of Use
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Privacy Policy
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Be Safe Online
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Report Misuse
                </a>
              </li>
            </ul>
          </div>

          {/* More Section */}
          <div>
            <h3 className="text-[#A70710] font-bold text-lg mb-4">More</h3>
            <ul className="space-y-2">
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Be Safe Online
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-gray-600 hover:text-green-600 transition-colors"
                >
                  Report Misuse
                </a>
              </li>
            </ul>
          </div>

         {/* Social Media Section */}
          <div className="mb-4">
            <h3 className="text-[#A70710] font-bold text-lg mb-4">
              Find us on:
            </h3>
            <div className="flex gap-3 mb-6">
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Facebook className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Instagram className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Linkedin className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Twitter className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Youtube className="w-5 h-5 text-gray-700" />
              </a>
            </div>
            </div>

          {/* Social Media & Apps Section */}
          <div>
            {/* <h3 className="text-[#A70710] font-bold text-lg mb-4">
              Find us on:
            </h3> */}
            {/* <div className="flex gap-3 mb-6">
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Facebook className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Instagram className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Linkedin className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Twitter className="w-5 h-5 text-gray-700" />
              </a>
              <a
                href="#"
                className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all"
              >
                <Youtube className="w-5 h-5 text-gray-700" />
              </a>
            </div> */}

            <h3 className="text-[#A70710] font-bold text-lg mb-4">
              Get the Thirukalyanam App
            </h3>
            <div className="space-y-3">
              <a href="#" className="block">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg"
                  alt="Download on App Store"
                  className="h-10 hover:opacity-80 transition-opacity"
                />
              </a>
              <a href="#" className="block">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg"
                  alt="Get it on Google Play"
                  className="h-10 hover:opacity-80 transition-opacity"
                />
              </a>
            </div>
            <p className="text-xs text-gray-500 mt-3">
              Apple and the Apple Logo are trademarks of Apple Inc.
            </p>
            <p className="text-xs text-gray-500 mt-1">
              Google Play and the Google Play logo are trademarks of Google LLC.
            </p>
          </div>
        </div>

        {/* Bottom Copyright Section */}
        <div className="border-t border-gray-200 pt-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-sm text-gray-600 mb-4 md:mb-0">
              © {new Date().getFullYear()} Thirukalyanam, The World's
              Leading Matchmaking Service™
            </p>

            <p className="text-sm text-gray-600">
              Passionately created by{" "}
              <span className="text-[#034E08] font-semibold">Amrithaa</span>
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}