import { Container, Title } from "@/shared/ui";
import document from "../../../public/assets/document-ui.png";
import Image from "next/image";
import CardImg from "../../../public/assets/Image.png";
import Arrow from "../../../public/assets/arrow-right.png";
import { useTranslations } from "next-intl";
import bg from "../../../public/assets/bg.png";

export default function Home() {
  const t = useTranslations("home");

  return (
    <>
      <Container className="mt-[52px] mb-[21px] max-w-[1280px]">
        <section className="text-white w-full px-5">
          <div className="flex justify-center relative">
            <Image src={bg} alt="bg" className="" />
            <div className="max-w-[943px] text-center absolute top-20 left-15 pt-10">
              <Title
                size="md"
                text={"Transparency International "}
                className="text-[24px] leading-8"
              />
              <Title
                size="xl"
                text={"Название проекта "}
                className="font-extrabold leading-[76px]"
              />
              <p className="leading-8">
                Torem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
                vulputate libero et velit interdum, ac aliquet odio mattis.
                Class aptent taciti sociosqu ad litora torquent per conubia
                nostra
              </p>
            </div>
          </div>
        </section>
      </Container>

      <section className="bg-[#FAFCFF]">
        <Container className="flex flex-col justify-center items-center">
          <div className="mt-[49px] mb-[45px] max-w-[730px]">
            <Title
              size="2xl"
              text={t("instructions")}
              className="text-center text-black mb-[18px] leading-[60px] font-extrabold text-[40px]"
            />
            <p className="text-center text-grey-text leading-[27px]">
              {t("instructionsInfo")}
            </p>
          </div>
          <div className="flex justify-between gap-5 mb-[120px] flex-wrap sm:justify-center">
            <div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
              <div className="flex text-black gap-[18px] items-center mb-7">
                <Image src={document} alt="document" />
                <p className="leading-6">Участие в тендере</p>
              </div>
              <p className="text-grey-text">
                Инструкция по тому как участвовать в тендерах
              </p>
            </div>
            <div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
              <div className="flex text-black gap-[18px] items-center mb-7">
                <Image src={document} alt="document" />
                <p className="leading-6">Подача жалобы</p>
              </div>
              <p className="text-grey-text">
                Инструкция по тому как подавать жалобы
              </p>
            </div>
            <div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
              <div className="flex text-black gap-[18px] items-center mb-7">
                <Image src={document} alt="document" />
                <p className="leading-6">Подача жалобы</p>
              </div>
              <p className="text-grey-text">
                Инструкция по тому как подавать жалобы
              </p>
            </div>
            <div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
              <div className="flex text-black gap-[18px] items-center mb-7">
                <Image src={document} alt="document" />
                <p className="leading-6">Подача жалобы</p>
              </div>
              <p className="text-grey-text">
                Инструкция по тому как подавать жалобы
              </p>
            </div>
          </div>
          <Title
            text={t("articles")}
            className="mb-[32px] font-extrabold text-black leading-[60px] text-[40px]"
            size="lg"
          />
          <section className="flex items-center gap-[33px] justify-between mb-[55px] flex-wrap">
            <article className="max-w-[393px] max-h-[508px] p-6 bg-white shadow-md text-grey-text rounded-md">
              <Image
                src={CardImg}
                alt="card"
                width={345}
                height={240}
                className="rounded-md"
              />
              <Title text="Worem ipsum dolor" className="mt-8 mb-3" />
              <p className="mb-12">
                Borem ipsum dolor sit amet, consectetur adipiscing elit. Borem
                ipsum dolor sit amet
              </p>
              <p className="text-sm">26.10.2023</p>
            </article>
            <article className="max-w-[393px] max-h-[508px] p-6 bg-white shadow-md text-grey-text rounded-md">
              <Image
                src={CardImg}
                alt="card"
                width={345}
                height={240}
                className="rounded-md"
              />
              <Title text="Worem ipsum dolor" className="mt-8 mb-3" />
              <p className="mb-12">
                Borem ipsum dolor sit amet, consectetur adipiscing elit. Borem
                ipsum dolor sit amet
              </p>
              <p className="text-sm">26.10.2023</p>
            </article>
            <article className="max-w-[393px] max-h-[508px] p-6 bg-white shadow-md text-grey-text rounded-md">
              <Image
                src={CardImg}
                alt="card"
                width={345}
                height={240}
                className="rounded-md"
              />
              <Title text="Worem ipsum dolor" className="mt-8 mb-3" />
              <p className="mb-12">
                Borem ipsum dolor sit amet, consectetur adipiscing elit. Borem
                ipsum dolor sit amet
              </p>
              <p className="text-sm">26.10.2023</p>
            </article>
          </section>
          <button className="flex gap-4 items-center justify-center text-blue w-[280px] h-[50px] rounded-md border border-blue ml-auto mb-[120px]">
            {t("articlesBtn")} <Image src={Arrow} alt="arrow" />
          </button>
        </Container>
      </section>
    </>
  );
}