import Link from "next/link";
import { IconArrowRight, IconCheck } from "@tabler/icons-react";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { signupUrl } from "@/lib/env";
import { Button } from "@/components/ui/button";
import { Container } from "@/components/ui/container";

export const CTA = ({
  dict,
  lang,
}: {
  dict: Dictionary["cta"];
  lang: string;
}) => {
  return (
    <section className="py-10 md:py-16 lg:py-20">
      <Container>
        <div className="cta-band">
          <div className="glow" />
          <div className="relative z-10">
            {/* .cta-band is always dark in both themes, so text is fixed light. */}
            <h2 className="font-display text-[clamp(30px,4vw,46px)] font-extrabold tracking-[-0.03em] text-white">
              {dict.title}
              <span className="text-gradient-brand">.</span>
            </h2>
            <p className="mx-auto mt-4 max-w-lg text-[17px] leading-relaxed text-gray-200">
              {dict.subtitle}
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3.5">
              <Button asChild size="lg">
                <a href={signupUrl}>
                  {dict.button}
                  <IconArrowRight className="size-4" aria-hidden="true" />
                </a>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href={`/${lang}/pricing`}>{dict.secondary}</Link>
              </Button>
            </div>
            <p className="mt-4 flex items-center justify-center gap-2 text-[13px] text-gray-300">
              <IconCheck className="size-4 text-[#2ec98a]" aria-hidden="true" />
              {dict.note}
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
};