"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";

import { SectionReveal } from "@/components/sections/SectionReveal";
import { Button } from "@/components/ui/button";

export function VideoMakerCta() {
  const t = useTranslations("videoMaker");

  return (
    <section className="bg-primary-600 py-20 sm:py-24">
      <div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
        <SectionReveal>
          <h2 className="font-heading text-3xl font-bold text-white sm:text-4xl">
            {t("ctaHeading")}
          </h2>
          <p className="mt-4 text-lg text-primary-100">
            {t("ctaDesc")}
          </p>
          <Button
            size="lg"
            className="mt-8 bg-white text-primary-600 hover:bg-primary-50"
            asChild
          >
            <Link href="/auth?tab=sign-up">{t("ctaButton")}</Link>
          </Button>
        </SectionReveal>
      </div>
    </section>
  );
}
