import logo from "@/assets/homeLogo.png";
import Image from "next/image";
import { CustomArrow } from "@/components/general/CustomArrow";
import { getLocale, getTranslations } from "next-intl/server";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { localeHeadingClass } from "@/lib/locale-fonts";
import { Link } from "@/i18n/navigation";

export default async function WhoWeAre() {
  const t = await getTranslations("Home.whoWeAre");
  const locale = await getLocale();

  return (
    <div className="flex justify-between bg-white px-5 py-10 md:py-20 lg:px-20 xl:px-45">
      <div className="hidden min-w-100 items-center justify-center md:flex">
        <Image
          src={logo}
          alt="Sirius Logo"
          width={427}
          height={138}
          quality={100}
          className="object-contain"
          priority
        />
      </div>
      <div className="w-full max-w-xl 2xl:max-w-2xl">
        <h2
          className={cn(
            "mt-6 text-3xl tracking-[0.04em] text-neutral-700 uppercase",
            localeHeadingClass(locale),
          )}
        >
          {t("title")}
        </h2>
        <p className="mt-4 text-base leading-7 font-medium text-black md:text-lg">
          {t("description")}
        </p>
        <Button
          variant="outline"
          className="mt-6 w-full cursor-pointer rounded-[20px] border border-neutral-700 bg-white px-8 py-6 text-base font-semibold text-neutral-700 uppercase hover:bg-gray-50 sm:w-auto"
        >
          <Link href="/about-us">{t("buttonText")}</Link>

          <CustomArrow />
        </Button>
      </div>
    </div>
  );
}