"use client";

import { ArrowRight, Sparkles } from "lucide-react";
import { Container } from "@/components/common/Container";
import { ButtonLink } from "@/components/common/Button";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";

export function FinalCta() {
  const { t, dir } = useTranslation();

  return (
    <section className="pb-16 sm:pb-20 lg:pb-28">
      <Container>
        <Reveal className="relative isolate overflow-hidden rounded-[2rem] bg-gradient-to-br from-brand-600 via-brand-500 to-accent-500 px-6 py-16 text-white shadow-elevated sm:rounded-[2.5rem] sm:px-12 sm:py-20">
          {/* Animated gradient overlay */}
          <div
            aria-hidden
            className="absolute inset-0 -z-10 animate-gradient-shift bg-gradient-to-br from-brand-600 via-purple-500 to-accent-500 bg-[length:200%_200%] opacity-90"
          />

          {/* Decorative orbs */}
          <div
            aria-hidden
            className="pointer-events-none absolute -top-24 -right-24 h-72 w-72 animate-float rounded-full bg-white/15 blur-3xl"
          />
          <div
            aria-hidden
            className="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 animate-float-slow rounded-full bg-accent-300/30 blur-3xl"
            style={{ animationDelay: "2s" }}
          />

          {/* Dot pattern */}
          <div
            aria-hidden
            className="absolute inset-0 opacity-[0.12]"
            style={{
              backgroundImage:
                "radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
              backgroundSize: "32px 32px",
            }}
          />

          <div className="relative mx-auto flex max-w-3xl flex-col items-center text-center">
            <Reveal delay={0.05}>
              <span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/15 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider backdrop-blur-md">
                <Sparkles className="h-3.5 w-3.5" />
                {t("cta.eyebrow")}
              </span>
            </Reveal>
            <Reveal delay={0.1} className="mt-6">
              <h2 className="text-balance text-display-md tracking-tight sm:text-display-lg md:text-display-xl">
                {t("cta.title")}
              </h2>
            </Reveal>
            <Reveal delay={0.15} className="mt-6">
              <p className="max-w-2xl text-balance text-base leading-[1.7] text-white/90 sm:text-lg">
                {t("cta.subtitle")}
              </p>
            </Reveal>
            <Reveal delay={0.2} className="mt-9 flex flex-col items-center gap-3 sm:flex-row">
              <ButtonLink
                href="/calculator"
                size="lg"
                className="!bg-white !text-brand-700 shadow-elevated hover:!bg-slate-50"
              >
                {t("cta.primary")}
                <ArrowRight
                  className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5"
                  style={{ transform: dir === "rtl" ? "scaleX(-1)" : undefined }}
                />
              </ButtonLink>
              <ButtonLink
                href="/how-it-works"
                size="lg"
                className="!border-white/30 !bg-white/10 !text-white backdrop-blur-md hover:!bg-white/20"
                variant="outline"
              >
                {t("cta.secondary")}
              </ButtonLink>
            </Reveal>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}