import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import { useI18n } from "@/i18n/context";

export function FinalCTASection() {
  const { ref, isVisible } = useScrollAnimation();
  const { t } = useI18n();

  return (
    <section className="relative overflow-hidden px-4 py-24 sm:py-32">
      <div className="pointer-events-none absolute inset-0 bg-radial-glow" />
      <div className="pointer-events-none absolute inset-0 bg-grid-pattern opacity-50" />

      <div className="relative z-10 mx-auto max-w-3xl text-center" ref={ref}>
        <h2 className={`mb-4 text-3xl font-bold sm:text-5xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
          {t("cta_title_1")}{" "}
          <span className="gradient-text">{t("cta_title_2")}</span>
        </h2>
        <p className={`mb-8 text-lg text-muted-foreground ${isVisible ? "animate-fade-up-delay-1" : "opacity-0"}`}>
          {t("cta_subtitle")}
        </p>
        <div className={isVisible ? "animate-fade-up-delay-2" : "opacity-0"}>
          <Button variant="glow" size="xl">
            {t("cta_button")}
            <ArrowRight size={18} />
          </Button>
          <p className="mt-4 text-sm text-muted-foreground">
            {t("cta_note")}
          </p>
        </div>
      </div>
    </section>
  );
}