import Image from "next/image";
import image1 from "@/public/images/Play store.png";
import image2 from "@/public/images/apple store.png";
import image3 from "@/public/images/Group.png";
import Link from "next/link";
import { useTranslations } from "next-intl";

function Download() {
  const t = useTranslations("Download");
  return (
    <section className="bg-[#03B89E] my-8">
      <div className="container mx-auto flex flex-col-reverse md:flex-row justify-between items-center py-8 gap-4 px-4">
        <div className="text-center">
          <h2 className="text-white text-[20px] min-[400px]:text-[24px] sm:text-[29px] md:text-[29px] lg:text-[38px] xl:text-[40px] font-semibold mb-[10px] sm:mb-[15px] uppercase sm:leading-[40px] lg:leading-[50px]">
            {t("download-title")} <br /> {t("download-desc")}
          </h2>
          <p className="text-white opacity-[0.9] font-light text-[16px] sm:text-lg md:text-xl xl:text-[23px] mb-[20px] sm:mb-[28px]">
            {t("download-title2")} <br /> {t("download-title3")}
          </p>
          <div className="flex min-[280px]:justify-center sm:justify-start items-center min-[280px]:flex-wrap">
            <div className="relative  max-w-[150px] lg:max-w-[170px] mr-2 rtl:ml-2 min-[280px]:mb-[10px] min-[357px]:mb-0">
              <Image
                src={"/images/download/play-store.png"}
                alt="Play Store"
                width={223}
                height={66}
                className=" object-contain "
              />
              <Link
                href={
                  "https://play.google.com/store/apps/details?id=com.dawaa.outlets"
                }
                target="_blank"
                className="absolute cursor-pointer !text-transparent !bg-transparent w-full h-full left-0 top-0"
              ></Link>
            </div>
            <div className="relative  max-w-[150px] lg:max-w-[170px]">
              <Image
                src={"/images/download/apple-store.png"}
                alt="Apple Store"
                width={223}
                height={66}
                className=" object-contain"
              />
              <Link
                href={"https://apps.apple.com/us/app/outlet-plus/id6742233009"}
                target="_blank"
                className="absolute cursor-pointer !text-transparent !bg-transparent w-full h-full left-0 top-0"
              ></Link>
            </div>
          </div>
        </div>
        <div className="relative max-w-[320px] md:max-w-[340px] lg:max-w-[420px]">
          <Image
            src={"/images/download.png"}
            alt="image"
            width={515}
            height={452}
            className="object-contain"
          />
        </div>
      </div>
    </section>
  );
}

export default Download;