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

import DemoButton from "@/components/demo/DemoButton";
import type { BlogPageCopy } from "@/data/blogs.data";
import type { Dictionary } from "@/lib/i18n";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

export default function BlogsFinalCTA({ copy, dictionary, locale }: { copy: BlogPageCopy; dictionary: Dictionary; locale: Locale }) {
  return (
    <section className="mx-auto max-w-[1360px] px-6 py-5 xl:px-8">
      <div className="rounded-[24px] border border-[#e3e7f4] bg-white p-7 text-center shadow-[0_14px_32px_rgba(51,66,116,0.07)]">
        <h2 className="text-2xl font-extrabold tracking-[-0.045em] text-[#172142]">{copy.ctaTitle}</h2>
        <p className="mx-auto mt-2 max-w-[680px] text-[13px] leading-6 text-[#748099]">{copy.ctaDescription}</p>
        <div className="mt-5 flex flex-wrap justify-center gap-3">
          <DemoButton locale={locale} label={dictionary.common.bookDemo} className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-[#5264ee] to-[#7756eb] px-5 py-3 text-[12px] font-bold text-white shadow-lg" />
          <Link href={localizedPath(locale, "/products")} className="inline-flex items-center gap-2 rounded-lg border border-[#cfd4ff] bg-white px-5 py-3 text-[12px] font-bold text-[#5964dc]">{copy.exploreProducts}<ArrowRight size={14} /></Link>
        </div>
      </div>
    </section>
  );
}