import { getTranslation } from "@turbostarter/i18n/server";
import { buttonVariants } from "@turbostarter/ui-web/button";
import { GridPattern } from "@turbostarter/ui-web/grid-pattern";
import { Icons } from "@turbostarter/ui-web/icons";

import { pathsConfig } from "~/config/paths";
import { TurboLink } from "~/modules/common/turbo-link";
import { CtaButton } from "~/modules/marketing/layout/cta-button";
import { Section, SectionBadge } from "~/modules/marketing/layout/section";
import { ReportFan } from "~/modules/marketing/home/report-fan";

export const Hero = async () => {
  const { t } = await getTranslation();

  return (
    <Section id="hero" className="relative gap-6 overflow-x-clip sm:gap-6 md:gap-6 lg:gap-6">
      <GridPattern
        width={48}
        height={48}
        className="opacity-[0.04] [mask-image:radial-gradient(600px_circle_at_center,white,transparent)]"
      />
      <div className="animate-fade-in -translate-y-4 opacity-0">
        <SectionBadge>
          <div className="w-fit py-0.5 text-center text-xs sm:text-sm">
            ★
          </div>
          <div
            data-orientation="vertical"
            role="none"
            className="bg-border mx-2 h-full w-px shrink-0"
          ></div>
          {t("announcement")}
        </SectionBadge>
      </div>
      <h1 className="animate-fade-in mt-4 -translate-y-4 text-center text-5xl leading-[0.95] font-semibold tracking-tighter text-balance opacity-0 [--animation-delay:200ms] sm:text-6xl md:text-7xl lg:text-[5.5rem]">
        {t("product.title")}
      </h1>
      <p className="animate-fade-in text-muted-foreground mx-auto mb-3 max-w-[640px] -translate-y-4 text-center text-lg leading-[26px] text-balance opacity-0 [--animation-delay:400ms] sm:text-xl">
        {t("product.description")}
      </p>
      <div className="animate-fade-in mx-auto flex w-full -translate-y-4 flex-col gap-2 opacity-0 ease-in-out [--animation-delay:600ms] sm:w-auto sm:flex-row sm:gap-3">
        <CtaButton />

        <TurboLink
          href={pathsConfig.marketing.contact}
          className={buttonVariants({ variant: "outline" })}
        >
          {t("contact.cta")}
        </TurboLink>
      </div>
      <div className="animate-fade-in flex -translate-y-4 flex-wrap items-center justify-center gap-3 opacity-0 [--animation-delay:700ms]">
        <span className="text-muted-foreground inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs sm:text-sm">
          <Icons.Star className="size-3.5 fill-yellow-500 text-yellow-500" />
          {t("hero.stats.reviews")}
        </span>
        <span className="text-muted-foreground inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs sm:text-sm">
          <Icons.Target className="size-3.5" />
          {t("hero.stats.score")}
        </span>
        <span className="text-muted-foreground inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs sm:text-sm">
          <Icons.AlertTriangle className="size-3.5" />
          {t("hero.stats.issues")}
        </span>
      </div>
      <ReportFan />
    </Section>
  );
};
