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

import DemoButton from "@/components/demo/DemoButton";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

type CTASectionProps = {
  bookDemo: string;
  description: string;
  locale: Locale;
  talkSales: string;
  title: string;
};

export default function CTASection({
  bookDemo,
  description,
  locale,
  talkSales,
  title,
}: CTASectionProps) {
  return (
    <section className="mx-auto max-w-[1360px] px-6 py-3 xl:px-8">
      <div className="relative overflow-hidden rounded-[13px] bg-gradient-to-r from-[#5666ec] via-[#5c61ec] to-[#7555eb] px-7 py-6 text-white shadow-[0_12px_26px_rgba(91,87,231,0.2)] sm:px-10">
        <div className="pointer-events-none absolute -right-24 -top-32 h-72 w-72 rounded-full bg-[#9277ff]/35 blur-3xl" />
        <div className="relative flex flex-col justify-between gap-5 lg:flex-row lg:items-center">
          <div>
            <h2 className="text-[18px] font-extrabold tracking-[-0.03em] sm:text-[20px]">
              {title}
            </h2>
            <p className="mt-2 text-[11px] text-[#e0e3ff] sm:text-[12px]">
              {description}
            </p>
          </div>
          <div className="flex flex-wrap gap-4">
            <DemoButton
              locale={locale}
              label={bookDemo}
              className="inline-flex min-w-[155px] items-center justify-center gap-2 rounded-md bg-white px-5 py-3 text-[11px] font-bold text-[#5d61dd] shadow-lg"
            />
            <Link
              href={localizedPath(locale, "/contact")}
              className="inline-flex min-w-[155px] items-center justify-center gap-2 rounded-md border border-white/70 bg-white/5 px-5 py-3 text-[11px] font-bold text-white"
            >
              <Phone size={14} />
              {talkSales}
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}