import React from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";

const AboutusSection = () => {
  const t = useTranslations("");
  return (
    <section id={"about-section"} className={"bg-slate-900 py-12"}>
      <div
        className={
          "max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 justify-between items-center py-10 gap-12"
        }
      >
        <div className={"relative w-full"}>
          <Image
            src={"/images/aboutus.png"}
            alt={"About us image"}
            layout="responsive"
            width={500}
            height={500}
          />
        </div>
        <div className={"text-white px-4"}>
          <h1 className="section-title">{t("Biz haqimizda")}</h1>
          <p className="section-subtitle">{t("about_us_subtitle")}</p>
          <br aria-hidden />
          <p className="section-subtitle">{t("about_us_desc")}</p>
        </div>
      </div>
    </section>
  );
};

export default AboutusSection;
