import React from "react";
import Image from "next/image";
import Link from "next/link";
import { PRODUCT_INFO } from "@/shared/constants";
import { useTranslations } from "next-intl";

const DownloadAppSection = () => {
  const t = useTranslations("")
  return (
    <section
      id={"download-app-section"}
      className={
        "bg-slate-900 my-container rounded-4xl max-md:rounded-3xl mb-20 relative overflow-hidden max-md:pt-12"
      }
    >
      <div
        className="bg-radial from-blue-950 via-transparent to-transparent w-[700px] h-[700px] rounded-full absolute -bottom-60 -left-60"
        aria-hidden
      />

      <div
        className="bg-radial from-indigo-900 via-transparent to-transparent w-[700px] h-[700px] rounded-full absolute -top-80 -right-80"
        aria-hidden
      />
      <div
        className={
          "max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 justify-between items-center gap-12 relative z-20"
        }
      >
        <div className={"text-white px-4"}>
          <h1 className="section-title">{t("Ilovamizni yuklab oling")}</h1>
          <p className="section-subtitle">
            {t("download_our_app_desc")}
          </p>
          <br aria-hidden />
          <div className={"flex gap-4 mt-5"}>
            <Link href={PRODUCT_INFO.app.ios}>
              <Image
                src={"/images/app-store-light.svg"}
                alt={""}
                width={200}
                height={200}
                className="max-md:w-40"
              />
            </Link>
            <Link href={PRODUCT_INFO.app.android}>
              <Image
                src={"/images/google-play-light.svg"}
                alt={""}
                width={200}
                height={200}
                className="max-md:w-40"
              />
            </Link>
          </div>
        </div>
        <div
          className={
            "relative flex justify-end max-md:justify-center pt-24 max-md:pt-20"
          }
        >
          <Image
            className={"-mb-96"}
            src={"/images/screenshot-home.png"}
            alt={"About us image"}
            width={500}
            height={500}
          />
        </div>
      </div>
    </section>
  );
};

export default DownloadAppSection;
