"use client";

import { useTranslations } from "next-intl";
import Link from "next/link";
import { Check } from "lucide-react";

export default function TrialCallout() {
  const t = useTranslations("trialCallout");

  return (
    <section className="bg-[#F5F5F5] pb-12">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-5 rounded-[20px] bg-[#3B9EC9] px-6 py-6 sm:px-8 lg:px-10">
          <div className="flex items-start gap-3 text-center sm:text-left">
            <span className="hidden sm:flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/15">
              <Check className="h-5 w-5 text-white" strokeWidth={3} aria-hidden="true" />
            </span>
            <div>
              <p className="text-lg sm:text-xl font-bold text-white">{t("headline")}</p>
              <p className="mt-1 text-sm text-white/90">{t("subtext")}</p>
            </div>
          </div>
          <Link
            href="/signup"
            className="shrink-0 whitespace-nowrap rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-[#3B9EC9] shadow-sm transition hover:bg-gray-50"
          >
            {t("cta")}
          </Link>
        </div>
      </div>
    </section>
  );
}