import { useTranslations } from "next-intl";

import { Link } from "@/i18n/navigation";

export default function DesignCta() {
  const t = useTranslations("DesignDevelopmentPage.cta");

  return (
    <section className="bg-background px-6 py-[76px] text-center lg:py-[110px]">
      <div className="reveal mx-auto max-w-[680px] border border-foreground p-[48px_28px] lg:p-[64px_56px]">
        <h2 className="font-display text-[28px] font-normal leading-[1.2] text-foreground lg:text-[34px]">
          {t("title")}
        </h2>
        <p className="mx-auto mt-[18px] mb-8 max-w-[460px] text-[15.5px] leading-[1.7] text-on-surface-variant">
          {t("body")}
        </p>
        <Link
          href="/contact-us"
          className="inline-block bg-foreground px-12 py-[18px] text-[11px] font-semibold uppercase tracking-[0.2em] text-background transition-colors hover:bg-gold hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gold"
        >
          {t("button")}
        </Link>
      </div>
    </section>
  );
}