import Link from "next/link";
import { MessageCircleMore } from "lucide-react";

import DemoButton from "@/components/demo/DemoButton";
import { productThemes } from "@/components/products/product-theme";
import type { Product, ProductPageCopy } from "@/data/products.data";
import { getProductLinks } from "@/data/products.data";
import type { Locale } from "@/lib/locales";

export default function ProductCTA({
  bookDemoLabel,
  copy,
  locale,
  product,
}: {
  bookDemoLabel: string;
  copy: ProductPageCopy;
  locale: Locale;
  product: Product;
}) {
  const theme = productThemes[product.tone];
  const links = getProductLinks(locale, product);
  return (
    <section className="mx-auto max-w-[1360px] px-6 py-12 xl:px-8">
      <div className={`relative overflow-hidden rounded-[26px] bg-gradient-to-r p-7 text-white shadow-[0_18px_40px_rgba(51,65,142,0.2)] sm:p-9 ${theme.accent}`}>
        <div className="pointer-events-none absolute -right-12 -top-24 h-60 w-60 rounded-full bg-white/15 blur-2xl" />
        <div className="relative flex flex-col justify-between gap-6 lg:flex-row lg:items-center">
          <div>
            <h2 className="text-2xl font-extrabold tracking-[-0.045em]">{copy.ctaTitle}</h2>
            <p className="mt-2 max-w-2xl text-[13px] leading-6 text-white/80">{copy.ctaDescription}</p>
          </div>
          <div className="flex flex-wrap gap-3">
            <DemoButton locale={locale} productSlug={product.slug} label={bookDemoLabel} className="inline-flex items-center gap-2 rounded-xl bg-white px-5 py-3 text-[12px] font-extrabold text-[#4c5bc8]" />
            <Link href={links.contact} className="inline-flex items-center gap-2 rounded-xl border border-white/35 px-5 py-3 text-[12px] font-extrabold text-white">
              <MessageCircleMore size={14} />{copy.navbar.contact}
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}