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

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

  return (
    <section className="relative h-[calc(100vh-160px)] min-h-125 w-full overflow-hidden">
      <Image
        src={heroBgImage}
        alt="Hero Background"
        fill
        priority
        className="object-cover"
      />

      <div className="bg-martinique/70 myContainer relative z-10 flex h-full flex-col justify-center sm:items-center">
        <h1
          className={cn(
            "max-w-3xl text-center text-3xl leading-tight text-white uppercase",
            localeHeadingClass(locale),
          )}
        >
          {t("title")}
        </h1>
        <p
          className={cn(
            "mt-6 max-w-4xl text-center text-sm text-white sm:text-lg",
            locale === "hy" || locale === "am"
              ? "font-montserrat-arm"
              : "font-montserrat",
          )}
        >
          {t("description")}
        </p>
        <div className="mt-6 flex flex-col gap-4 sm:flex-row sm:p-8">
          <Button
            asChild
            variant="default"
            className="w-full cursor-pointer rounded-full bg-white px-8 py-6 text-base font-bold tracking-wider text-black uppercase transition-all hover:bg-white/70 sm:w-auto"
          >
            <Link href="/book-a-demo">
              {t("bookDemo")}
              <CustomArrow />
            </Link>
          </Button>

          <Button
            asChild
            variant="outline"
            className="w-full cursor-pointer rounded-full border-white bg-transparent px-8 py-6 text-base font-bold tracking-wider text-white uppercase transition-all hover:bg-white/10 sm:w-auto"
          >
            <Link href="/get-a-quote">
              {t("getProposal")} <CustomArrow />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  );
}