"use client";

import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
import {
  FaFacebook,
  FaInstagram,
  FaLinkedin,
  FaSnapchat,
  FaTiktok,
  FaWhatsapp,
  FaXTwitter,
  FaYoutube,
} from "react-icons/fa6";

const Footer = () => {
  return (
    <footer className="bg-primary-900 text-white py-8">
      <div className="container mx-auto flex-col md:flex-row justify-between items-start space-y-4">
        {/* Logo and Description */}
        <div className="w-full grid grid-cols-2">
          <p></p>
          <Image
            width={500}
            height={500}
            className="h-7 w-fit col-span-2 md:col-span-1"
            src={"/assets/images/logo.svg"}
            alt="logo"
          />
        </div>{" "}
        <div className="flex flex-col md:flex-row-reverse gap-5 items-start mb-8 md:mb-0">
          <p className="md:w-1/2">
            Distribute align list export group vector link opacity font boolean.
            Rotate pixel pixel bullet connection invite invite. Polygon ipsum
            arrange rectangle select team link frame layer.
          </p>
          <div className="mb-8 md:w-1/2 md:mb-0">
            <ul className="flex flex-col items-start space-y-4">
              <li>
                <a href="#" className="hover:underline">
                  About
                </a>
              </li>
              <li>
                <a href="#" className="hover:underline">
                  Features
                </a>
              </li>
              <li>
                <a href="#" className="hover:underline">
                  Download
                </a>
              </li>
              <li>
                <a href="#" className="hover:underline">
                  Sign In
                </a>
              </li>
              <li>
                <a href="#" className="hover:underline">
                  Sign Up
                </a>
              </li>
            </ul>
          </div>
        </div>
        {/* Navigation Links */}
        {/* Newsletter and Store Links */}
        <div className="flex flex-col md:flex-row-reverse gap-5 items-end mb-8 md:mb-0">
          <div className="md:w-1/2 w-full">
            <h4 className="text-lg mb-2">Stay Up To Date</h4>
            <div className="flex border border-white rounded-full p-1 focus-within:ring-1 focus:ring-primary focus-within:border-primary w-full max-w-sm">
              <input
                type="email"
                placeholder="Enter Your Email"
                className="p-2 rounded-full w-full placeholder:text-sm outline-none border-none focus:outline-none bg-transparent text-white"
              />
              <Button className="rounded-full">Subscribe</Button>
            </div>
          </div>
          <div className="md:w-1/2 w-full">
            <div className="flex justify-start space-x-4">
              <Link href="#" className="">
                <Image
                  height={100}
                  width={200}
                  src="/assets/images/googleplay.png"
                  alt="Google Play"
                  className="h-10 w-fit bg-white rounded-md"
                />
              </Link>
              <Link href="#" className="">
                <Image
                  height={500}
                  width={500}
                  src="/assets/images/appstore.png"
                  alt="App Store"
                  className="h-10 w-fit bg-white rounded-md"
                />
              </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Footer Bottom */}
      <div className="container mx-auto mt-8 border-t border-gray-700 pt-4 gap-5 flex flex-col md:flex-row-reverse md:items-center justify-between items-center">
        <div className="flex space-x-4 w-full md:w-1/2 md:justify-start items-center">
          <Link href="#">
            <FaFacebook />
          </Link>
          <Link href="#">
            <FaInstagram />
          </Link>
          <Link href="#">
            <FaLinkedin />
          </Link>
          <Link href="#">
            <FaYoutube />
          </Link>
          <Link href="#">
            <FaXTwitter />
          </Link>
          <Link href="#">
            <FaWhatsapp />
          </Link>
          <Link href="#">
            <FaTiktok />
          </Link>
          <Link href="#">
            <FaSnapchat />
          </Link>
        </div>
        <div className="w-full md:w-1/2 ">
          <p className="text-sm">&copy; 2020 WaaLook. All rights reserved.</p>
          <div className="space-x-3 mt-2 md:mt-0">
            <Link href="#" className="text-sm text-white/60 hover:underline">
              Privacy Policy
            </Link>
            <Link href="#" className="text-sm text-white/60 hover:underline">
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;