import { getTranslation } from "@turbostarter/i18n/server";
import { cn } from "@turbostarter/ui";
import { buttonVariants } from "@turbostarter/ui-web/button";

import { CtaButton } from "~/modules/marketing/layout/cta-button";
import { Section } from "~/modules/marketing/layout/section";

const ScoreGauge = () => (
  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
    {/* Background arc */}
    <path
      d="M8 36 A16 16 0 1 1 40 36"
      stroke="currentColor"
      strokeWidth="3"
      strokeLinecap="round"
      opacity="0.3"
    />
    {/* Filled arc (~83%) */}
    <path
      d="M8 36 A16 16 0 1 1 38.5 30"
      stroke="currentColor"
      strokeWidth="3"
      strokeLinecap="round"
    />
    <text
      x="24"
      y="30"
      textAnchor="middle"
      fill="currentColor"
      fontSize="13"
      fontWeight="600"
    >
      83
    </text>
  </svg>
);

export const Banner = async () => {
  const { t } = await getTranslation({ ns: "marketing" });
  return (
    <Section
      id="banner"
      className="bg-primary text-primary-foreground !max-w-full gap-4 sm:gap-6 md:gap-8 lg:gap-10"
    >
      <ScoreGauge />
      <h3 className="text-3xl leading-[0.95] font-semibold tracking-tighter text-balance md:text-4xl lg:text-5xl">
        {t("cta.question")}
      </h3>
      <p className="text-primary-foreground/80 text-sm sm:text-base">
        {t("banner.urgency")}
      </p>
      <CtaButton className={cn(buttonVariants({ variant: "secondary" }))} />
    </Section>
  );
};
