"use client";

import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import { FaFacebookF, FaLinkedinIn } from "react-icons/fa";
import { FaXTwitter, FaInstagram } from "react-icons/fa6";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import LogoImage from "@/assets/images/newLogo.svg";
import Image from "next/image";
interface FooterProps {
  innerPage?: boolean;
}
export default function Footer({ innerPage = false }: FooterProps) {
  const t = useTranslations("faqSection.footer");

  return (
    <div
      className={cn(
        "relative px-5 md:px-10 lg:px-20  ",
        !innerPage && "pt-140 sm:pt-130 md:pt-60"
      )}
    >
      <div className="absolute inset-0 bg-[#2C1938] -z-10"></div>

      <div className="relative border-t border-secondary-main py-10 md:py-16 z-10">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-30">
          <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-6">
            {/* <h3 className="text-secondary-main text-[24px] md:text-[32px] font-bold">
              GloFairs
            </h3> */}
            <Image src={LogoImage} alt="logo" width={100} height={88} />
            <div className="flex flex-col gap-4 justify-center">
              <h2 className="text-[18px] font-bold text-white">
                {t("joinUs")}
              </h2>
              <div className="flex gap-1">
                <a
                  href="#"
                  className="w-10 h-10 rounded-full text-white hover:text-[#2C1938] transition-all"
                >
                  <FaFacebookF className="size-6" />
                </a>
                <a
                  href="#"
                  className="w-10 h-10 rounded-full text-white hover:text-[#2C1938] transition-all"
                >
                  <FaXTwitter className="size-6" />
                </a>
                <a
                  href="#"
                  className="w-10 h-10 rounded-full text-white hover:text-[#2C1938] transition-all"
                >
                  <FaInstagram className="size-6" />
                </a>
                <a
                  href="#"
                  className="w-10 h-10 rounded-full text-white hover:text-[#2C1938] transition-all"
                >
                  <FaLinkedinIn className="size-6" />
                </a>
              </div>
            </div>
          </div>

          <div className="flex flex-col gap-4">
            <h3 className="text-white text-[18px] md:text-[24px] font-bold">
              {t("subscribeTitle")}
            </h3>
            <div className="flex flex-col sm:flex-row gap-3">
              <Input
                type="email"
                placeholder={t("emailPlaceholder")}
                className="flex-1 px-4 py-3 rounded-[8px] bg-white border border-white/20 text-black placeholder:text-black focus:outline-none focus:border-secondary-main"
              />
              <Button className="px-6 py-3 whitespace-nowrap">
                {t("subscribeButton")}
              </Button>
            </div>
          </div>
        </div>

        <div className="mt-6 pt-6 border-t border-secondary-main">
          <p className="text-white text-[12px] md:text-[14px]">
            {t("copyright")}
          </p>
        </div>
      </div>
    </div>
  );
}