"use client";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "react-i18next";

export default function FooterAuth() {
    const { t,i18n } = useTranslation("footer");
  return (
    <footer className="bg-secordary text-white px-5 md:px-[50px]  lg:px-[95px] pt-15 pb-8 rounded-t-lg">
      {/* <div className=" flex items-ceter justify-between  border-b border-gray-600 pb-8">
        <div className="max-w-[424px]">
          <Image
            src="/images/sadu-logo.png"
            width={60}
            height={60}
            alt="twitter"
          />
          <p className="text-sm mt-2 leading-6">
            Sadu is a premier real estate agency based in Saudi Arabia, helping
            clients navigate the Kingdom's dynamic property market with
            confidence. Whether you're a buyer, seller, tenant, or investor, our
            team of local experts delivers personalized guidance, honest advice,
            and professional service at every step.
          </p>
          <div className="mt-8 flex items-center gap-2">
            <Input
              placeholder="Email"
              className="bg-transparent text-white border border-bor  text-[18px]"
            />
            <Button className="bg-primary hover:bg-primary text-white text-[16px] h-12">
              Subscribe
            </Button>
          </div>
        </div>

        <div>
          <h3 className=" mb-5">Quick Links</h3>
          <ul className="space-y-5">
            <li className="hover:text-primary">Home</li>
            <li className="hover:text-primary">About Us</li>
            <li className="hover:text-primary">Services</li>
            <li className="hover:text-primary">Contact</li>
            <li className="hover:text-primary">Blog</li>
          </ul>
        </div>
        <div>
          <h3 className=" mb-5">Information</h3>
          <ul className="space-y-5">
            <li className="hover:text-primary">Contact us</li>
            <li className="hover:text-primary">Privacy Policy</li>
            <li className="hover:text-primary">FAQ</li>
            <li className="hover:text-primary">404</li>
          </ul>
        </div>

        <div className="text-sm">
          <h3 className=" mb-5">Contact Information</h3>
          <ul className="space-y-5 ">
            <li  className="hover:text-primary">+966- XXX-XXXXX</li>
            <li  className="hover:text-primary">info@sadurealestate.sa</li>
            <li  className="hover:text-primary">+966- XXX-XXXXX</li>
          </ul>
          <div className="flex gap-3 mt-5">
            <Button
              variant="ghost"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
            >
              <Image
                src="/icons/twitter.png"
                width={18}
                height={15}
                alt="twitter"
              />
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
            >
              <Image
                src="/icons/facebook.png"
                width={10}
                height={18}
                alt="facebook"
              />
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
            >
              <Image
                src="/icons/linkedin.png"
                width={18}
                height={18}
                alt="linkedin"
              />
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
            >
              <Image
                src="/icons/vimeo.png"
                width={18}
                height={15}
                alt="vimeo"
              />
            </Button>
          </div>
        </div>
      </div>

      <div className="text-center text-[16px] pt-6">
        2025 © Sadu Real Estate. All rights reserved.
      </div> */}


       {/* <div className=" text-white md:flex gap-5 lg:gap-8 items-ceter  border-b border-gray-600 pb-8">
              <div className="md:max-w-[43%] lg:max-w-[38%] ">
                <Image
                  src="/images/sadu-logo.png"
                  width={60}
                  height={60}
                  alt="twitter"
                />
                <p className="text-[12px] lg:text-sm mt-2 leading-6">
                  Sadu is a premier real estate agency based in Saudi Arabia, helping
                  clients navigate the Kingdom's dynamic property market with
                  confidence. Whether you're a buyer, seller, tenant, or investor, our
                  team of local experts delivers personalized guidance, honest advice,
                  and professional service at every step.
                </p>
                <div className="mt-5 lg:mt-8 flex items-center gap-2">
                  <Input
                    placeholder="Email"
                    className="bg-transparent text-white border border-bor h-[40px] lg:h-[55px] text-[14px] lg:text-[18px]"
                  />
                  <Button className="bg-primary hover:bg-primary md:h-[40px] lg:h-[55px] text-white text-[12px] lg:text-[16px] ">
                    Subscribe
                  </Button>
                </div>
              </div>
      
              <div className="flex items-strat justify-between w-full mt-5 md:mt-0">
              <div className="text-[14px] lg:text-[16px]">
                <h3 className=" mb-5">Quick Links</h3>
                <ul className="space-y-5">
                  <li className="hover:text-primary cursor-pointer">
                    <Link href="/home" className="cursor-pointer">
                      Home
                    </Link>
                  </li>
                  <li className="hover:text-primary cursor-pointer">
                    <Link href="/about">About Us</Link>
                  </li>
                  <li className="hover:text-primary cursor-pointer">
                    <Link href="/services">Services</Link>
                  </li>
                  <li className="hover:text-primary cursor-pointer">
                    <Link href="/contact">Contact</Link>
                  </li>
                  <li className="hover:text-primary cursor-pointer">
                    <Link href="/blogs">Blog</Link>
                  </li>
                </ul>
              </div>
              <div className="text-[14px] lg:text-[16px]">
                <h3 className=" mb-5">Information</h3>
                <ul className="space-y-5">
                  <li className="hover:text-primary"><Link href="/contact">Contact us</Link></li>
                  <li className="hover:text-primary">Privacy Policy</li>
                  <li className="hover:text-primary">FAQ</li>
                  <li className="hover:text-primary">404</li>
                </ul>
              </div>
              <div className="text-[13px] lg:text-[14px]">
                <h3 className=" mb-5">Contact Information</h3>
                <ul className="space-y-5 ">
                  <li className="hover:text-primary">+966- XXX-XXXXX</li>
                  <li className="hover:text-primary">info@sadurealestate.sa</li>
                  <li className="hover:text-primary">+966- XXX-XXXXX</li>
                </ul>
                <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-3 mt-5">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] max-w-[40px] min-w-[40px] w-[40px]"
                  >
                    <div className="relative w-[18px] h-[15px]">
                    <Image
                      src="/icons/twitter.png"
                      fill
                      alt="twitter"
                      className="object-cover"
                    /></div>
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
                  >
                    <Image
                      src="/icons/facebook.png"
                      width={10}
                      height={18}
                      alt="facebook"
                    />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
                  >
                    <Image
                      src="/icons/linkedin.png"
                      width={18}
                      height={18}
                      alt="linkedin"
                    />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
                  >
                    <Image
                      src="/icons/vimeo.png"
                      width={18}
                      height={15}
                      alt="vimeo"
                    />
                  </Button>
                </div>
              </div>
              </div>
            </div> */}

              <div className=" text-white md:flex gap-5 lg:gap-8 items-ceter  border-b border-gray-600 pb-8">
        {/* Logo + Description */}
        <div className="md:max-w-[43%] lg:max-w-[38%] ">
          <Image
            src="/images/sadu-logo.png"
            width={60}
            height={60}
            alt="twitter"
          />
          <p className="text-[12px] lg:text-sm mt-2 leading-6">
           {t("desc")}
          </p>
          <div className="mt-5 lg:mt-8 flex items-center gap-2">
            <Input
              placeholder={t("Email")}
              className="bg-transparent text-white border border-bor h-[40px] lg:h-[55px] text-[14px] lg:text-[18px]"
            />
            <Button className="bg-primary hover:bg-primary md:h-[40px] lg:h-[55px] text-white text-[12px] lg:text-[16px] ">
             {t("Subscribe")}
            </Button>
          </div>
        </div>

        {/* Links */}
        <div className="flex items-strat justify-between w-full mt-5 md:mt-0">
        <div className="text-[14px] lg:text-[16px]">
          <h3 className=" mb-5 underline">{t("Quick Links")}</h3>
          <ul className="space-y-5">
            <li className="hover:text-primary cursor-pointer">
              <Link href="/home" className="cursor-pointer">
                {t("Home")}
              </Link>
            </li>
            <li className="hover:text-primary cursor-pointer">
              <Link href="/about">{t("About Us")}</Link>
            </li>
            <li className="hover:text-primary cursor-pointer">
              <Link href="/services">{t("Services")}</Link>
            </li>
            <li className="hover:text-primary cursor-pointer">
              <Link href="/contact">{t("Contact")}</Link>
            </li>
            <li className="hover:text-primary cursor-pointer">
              <Link href="/blogs">{t("Blog")}</Link>
            </li>
          </ul>
        </div>
        {/* info// */}
        <div className="text-[14px] lg:text-[16px]">
          <h3 className=" mb-5 underline">{t("Information")}</h3>
          <ul className="space-y-5">
            <li className="hover:text-primary"><Link href="/contact">{t("Contact us")}</Link></li>
            <li className="hover:text-primary">{t("Privacy Policy")}</li>
            <li className="hover:text-primary">{t("FAQ")}</li>
          </ul>
        </div>
        {/* Contact Info + Social */}
        <div className="text-[13px] lg:text-[14px]">
          <h3 className=" mb-5 underline">{t("Contact Information")}</h3>
          <ul className="space-y-5 ">
            <li className="hover:text-primary">{t("+966- XXX-XXXXX")}</li>
            <li className="hover:text-primary">{t("info@sadurealestate.sa")}</li>
            <li className="hover:text-primary">{t("+966- XXX-XXXXX")}</li>
          </ul>
          <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-3 mt-5">
            <Button
              variant="ghost"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] max-w-[40px] min-w-[40px] w-[40px]"
            >
              <div className="relative w-[18px] h-[15px]">
              <Image
                src="/icons/twitter.png"
                fill
                alt="twitter"
                className="object-cover"
              /></div>
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
            >
              <Image
                src="/icons/facebook.png"
                width={10}
                height={18}
                alt="facebook"
              />
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
            >
              <Image
                src="/icons/linkedin.png"
                width={18}
                height={18}
                alt="linkedin"
              />
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="bg-transparent border border-bor hover:border-0 text-white hover:bg-primary h-[40px] w-[40px]"
            >
              <Image
                src="/icons/vimeo.png"
                width={18}
                height={15}
                alt="vimeo"
              />
            </Button>
          </div>
        </div>
        </div>
      </div>
      
            {/* Footer bottom */}
            <div className="text-center text-[14px] md:text-[16px] pt-6 text-white">
              2025 © Sadu Real Estate. All rights reserved.
            </div>
    </footer>
  );
}
