"use client";

import Image from "next/image";
import {
  FaFacebookF,
  FaTwitter,
  FaLinkedinIn,
  FaInstagram,
} from "react-icons/fa";

import {
  FiMapPin,
  FiPhone,
  FiMail,
} from "react-icons/fi";

export default function Footer() {
  return (
    <footer className="border-t border-gray-200 ">
      <div className="max-w-7xl mx-auto py-16 px-4 lg:px-0">

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-10 ">

          {/* Logo */}
          <div>
            <Image
              src="/logo.png"
              alt="Logo"
              width={180}
              height={50}
            />

            <p className="text-gray-600 leading-8 mt-6">
              Grabit is the biggest market of grocery
              products. Get your daily needs from our
              store.
            </p>

           
          </div>

          {/* Category */}

          <div>
            <h3 className="text-xl text-[#4B5966] font-semibold mb-6">
              Category
            </h3>

            <div className="h-px bg-gray-200 mb-6"></div>
            <ul className="space-y-5 text-gray-600">
              <li>Dairy & Milk</li>
              <li>Snack & Spice</li>
              <li>Fast Food</li>
              <li>Juice & Drinks</li>
              <li>Bakery</li>
              <li>Seafood</li>
            </ul>
          </div>

          {/* Company */}

          <div>
            <h3 className="text-xl text-[#4B5966] font-semibold mb-6">
              Company
            </h3>

            <div className="h-px bg-gray-200 mb-6"></div>

            <ul className="space-y-5 text-gray-600">
              <li>About us</li>
              <li>Delivery</li>
              <li>Legal Notice</li>
              <li>Terms & Conditions</li>
              <li>Secure Payment</li>
              <li>Contact us</li>
            </ul>
          </div>

          {/* Account */}

          <div>
            <h3 className="text-xl text-[#4B5966] font-semibold mb-6">
              Account
            </h3>

            <div className="h-px bg-gray-200 mb-6"></div>

            <ul className="space-y-5 text-gray-600">
              <li>Sign In</li>
              <li>View Cart</li>
              <li>Return Policy</li>
              <li>Become a Vendor</li>
              <li>Affiliate Program</li>
              <li>Payments</li>
            </ul>
          </div>

          {/* Contact */}

          <div>

            <h3 className="text-xl text-[#4B5966] font-semibold mb-6">
              Contact
            </h3>

            <div className="h-px bg-gray-200 mb-6"></div>

            <div className="space-y-6 text-gray-600">

              <div className="flex gap-4">
                <FiMapPin className="text-[#5CAF8B] mt-1 text-xl shrink-0" />

                <p>
                  2548 Broaddus Maple Court,
                  Madisonville KY 4783, USA.
                </p>
              </div>

              <div className="flex gap-4">
                <FiPhone className="text-[#5CAF8B] text-xl shrink-0" />

                <p>+00 9876543210</p>
              </div>

              <div className="flex gap-4">
                <FiMail className="text-[#5CAF8B] text-xl shrink-0" />

                <p>example@email.com</p>
              </div>

            </div>

            <div className="flex gap-3 mt-8">

              <a className="w-10 h-10 bg-gray-700 text-white rounded flex items-center justify-center hover:bg-[#5CAF8B] transition">
                <FaFacebookF />
              </a>

              <a className="w-10 h-10 bg-gray-700 text-white rounded flex items-center justify-center hover:bg-[#5CAF8B] transition">
                <FaTwitter />
              </a>

              <a className="w-10 h-10 bg-gray-700 text-white rounded flex items-center justify-center hover:bg-[#5CAF8B] transition">
                <FaLinkedinIn />
              </a>

              <a className="w-10 h-10 bg-gray-700 text-white rounded flex items-center justify-center hover:bg-[#5CAF8B] transition">
                <FaInstagram />
              </a>

            </div>

          </div>

        </div>

      </div>
    </footer>
  );
}