"use client";

import { ArrowRight, Compass } from "lucide-react";
import { Container } from "@/components/container";
import { Button } from "@/components/ui/button";
import { FadeIn } from "@/components/fade-in";
import { useLanguage } from "@/lib/i18n/context";

export function FinalCta() {
  const { t } = useLanguage();

  return (
    <section className="relative overflow-hidden border-t border-border py-20 sm:py-28">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-radial-spotlight"
      />
      <Container className="relative">
        <FadeIn className="mx-auto flex max-w-2xl flex-col items-center gap-6 rounded-3xl border border-border bg-card/50 px-6 py-14 text-center glass-panel sm:px-12">
          <h2 className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
            {t.finalCta.title}
          </h2>
          <p className="text-balance max-w-xl text-base text-muted-foreground sm:text-lg">
            {t.finalCta.description}
          </p>
          <div className="flex flex-col items-center gap-4 sm:flex-row">
            <Button size="lg" className="group" asChild>
              <a href="/register">
                {t.finalCta.startFree}
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
              </a>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <a href="#features">
                <Compass className="size-4" />
                {t.finalCta.exploreFeatures}
              </a>
            </Button>
          </div>
        </FadeIn>
      </Container>
    </section>
  );
}