import Image from "next/image";
import Link from "next/link";
import React from "react";
import logo from "../../../assets/images/logo.png";
import { MapPinHouse } from "lucide-react";
import { Mail } from "lucide-react";
import { PhoneCall } from "lucide-react";
import { useTranslations } from "next-intl";
import { Instagram } from "lucide-react";
import { MailCheck } from "lucide-react";

const Footer = () => {
  const t = useTranslations("Footer")
  return (
    // <div className="bg-secondary-700 pt-20 pb-2 px-4 lg:px-0">
    //   {/* <div className="lg:w-7/12 xs:w-full mx-auto py-20">
    //     <div className="flex justify-center">
    //       <div className={`text-center w-ful`}>
    //         <>
    //           {" "}
    //           <p className="mb-0 text-white text-center xs:mt-0 lg:mt-10 font-bold lg:text-[70px] xs:text-[25px] lg:leading-[60px] lg:w-fit xs:w-full">
    //             <small className="text-primary-300">"</small>
    //             ADVANCED HORIZON
    //           </p>
    //           <p className="mb-0 text-white text-center font-bold lg:text-[70px] xs:text-[25px] lg:leading-[60px] lg:w-fit xs:w-full">
    //             SERVICES LLC
    //             <small className="  text-primary-300">"</small>
    //           </p>
    //         </>
    //       </div>
    //     </div>
    //   </div> */}
    //   <div className="flex flex-col gap-4 items-center text-sm text-gray-200 justify-center  pb-20" >
    //     <div className="flex gap-2 items-center">
    //       <MapPinHouse size={20} />
    //       <p>

    //        {t("address")}

    //       </p>
    //     </div>
    //     <Link href={"mailto:info@adhorizonintl.com"} dir="ltr" target="_blank" className="flex gap-2 items-center">
    //       <Mail size={20} />
    //       <p>

    //       info@adhorizonintl.com

    //       </p>
    //     </Link>
    //     <Link href={"tel:+96824289888"} dir="ltr" target="_blank" className="flex gap-2 items-center">
    //       <PhoneCall size={20} />
    //       <p>

    //       +968 24 28 98 88

    //       </p>
    //     </Link>
    //   </div>
    //   <div className="flex  justify-center   ">
    //     <div>
    //       <div className="w-full mb-5">
    //         <Image src={"/images/1.png"} width={90} height={90} className="w-[90px] mx-auto" />

    //       </div>
    //       <Image src={"/images/3.png"} width={300} height={50} className="mx-auto" />
    //       <br />
    //       <p className="mb-0 text-sm text-gray-200  w-full text-center opacity-30 " dir="ltr">
    //         © 2025. All rights reserved. <br />
    //       </p>
    //       {/* <div className="flex justify-center w-full my-5 ">
    //         <Link href={`/products`}>
    //           <p className="mb-0  text-gray-400 mx-4 text-sm">products</p>
    //         </Link>
    //         <Link href={`/#news`}>
    //           <p className="mb-0  text-gray-400 mx-4 text-sm">news</p>
    //         </Link>
    //         <Link href={`/about-us`}>
    //           <p className="mb-0  text-gray-400 mx-4 text-sm">about us</p>
    //         </Link>
    //       </div> */}
    //     </div>
    //   </div>
    // </div>

    <footer className="bg-background border-t">
      <div className="container px-4 py-8 md:py-12 mx-auto">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4 ">
          <div className="space-y-4">
            <div className="flex items-center">
              <div className="flex flex-col">
                <div className="w-full mb-5">
                  <Image src={"/images/1.png"} width={90} height={90} className="w-[90px] mx-auto" />

                </div>
                <Image src={"/images/3.png"} width={300} height={50} className="mx-auto" />
              </div>

            </div>

          </div>

          <div className="space-y-2">
            <h3 className="text-sm font-medium">Address</h3>



            <address className="not-italic text-sm text-muted-foreground">

              {t("address")}
            </address>

          </div>

          <div className="space-y-2">
            <h3 className="text-sm font-medium">Contact</h3>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                <Link href="mailto:info@adhorizonintl.com" className="hover:underline inline-flex gap-2">
                  <Mail size={20} />
                  info@adhorizonintl.com
                </Link>
              </li>
              <li>
                <Link href="tel:+96824289888" className="hover:underline inline-flex gap-2">
                  <PhoneCall size={20} />
                  +968 24 28 98 88
                </Link>
              </li>
            </ul>
          </div>

          <div className="">
            <h3 className="text-sm font-medium">Follow Us</h3>

            {/* QR Code */}
            <div className="flex flex-col items-start space-y-1">
              <Link
                href="https://instagram.com/adhorizonsupply"
                target="_blank"
                rel="noopener noreferrer"
                className="hover:opacity-80 transition-opacity"
                aria-label="Scan QR code for our Instagram"
              >
                <div className="bg-white  rounded-md">
                  <Image src={"/images/instagram.png"} alt="" width={80} height={80} />
                </div>
                <span className="text-xs text-muted-foreground mt-1">Scan for Instagram</span>
              </Link>
            </div>

            {/* Direct Link */}
            <div className="flex items-center space-x-2 mt-2">
              <Link
                href="https://www.instagram.com/adhorizonsupply"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center space-x-2 text-sm hover:underline"
                aria-label="Visit our Instagram"
              >
                <Instagram className="h-4 w-4" />
                <span>Follow us on Instagram</span>
              </Link>
            </div>
          </div>
        </div>

        <div className="mt-8 pt-6 border-t">
          <p className="text-xs text-center text-muted-foreground">
            © {new Date().getFullYear()} Advanced Horizon Services. All rights reserved.
          </p>
        </div>
      </div>
    </footer>


  );
};

export default Footer;
