import { createLocaleFunction } from "@/components/server-locale";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { type Locale, transformPathLocale } from "@/lib/locale";
import Link from "next/link";

const ctaActionButtonClassName = cn(
  "transition-all duration-300 ease-out",
  "hover:-translate-y-0.5 hover:shadow-lg",
  "active:translate-y-0 active:shadow-sm",
  "motion-reduce:transform-none motion-reduce:hover:shadow-none"
);

export default async function CTASection({ locale }: { locale: Locale }) {
  const t = createLocaleFunction(locale);
  const liveDemosUrl = transformPathLocale("/live-demos", locale);
  return (
    <section
      className="px-4 md:px-12 lg:px-24 py-12 mt-8 md:mt-10 bg-[#630D09] bg-cover bg-center bg-no-repeat"
      style={{
        backgroundImage: `url('${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cta-banner.svg')`,
      }}
    >
      <div className="max-w-(--breakpoint-xl) mx-auto px-4 md:px-6 lg:px-8 text-center">
        <h2 className="text-4xl font-bold text-primary-foreground">
          {t("cta.title")}
        </h2>
        <p className="text-lg mt-4 text-primary-foreground">
          {t("cta.description")}
        </p>
        <div className="flex justify-center items-center flex-wrap gap-4 md:gap-8 mt-8">
          <Button size="lg" className={ctaActionButtonClassName} asChild>
            <Link href={liveDemosUrl} prefetch={false}>
              {t("cta.view-live-demos")}
            </Link>
          </Button>
          <Button size="lg" className={ctaActionButtonClassName} asChild>
            <a href="/labs" target="_blank">
              {t("home.view-all-labs")}
            </a>
          </Button>
        </div>
      </div>
    </section>
  );
}