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

import { cn } from "@/lib/utils";

import { buttonVariants } from "../button";

export function DemoCTA() {
  return (
    <section
      aria-labelledby="demo-cta-heading"
      className="w-full bg-white px-6 py-5 sm:px-10"
    >
      <div className="relative mx-auto w-full max-w-7xl overflow-hidden rounded-3xl bg-gradient-to-br from-green-700 to-green-950 px-7 py-10 text-white shadow-xl shadow-green-950/15 sm:px-10 sm:py-12 lg:px-14 lg:py-14">
        <div className="relative flex flex-col items-start gap-8 md:flex-row md:items-center md:justify-between md:gap-12">
          <div className="max-w-2xl">
            <h2
              id="demo-cta-heading"
              className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl"
            >
              Ready to Take Control?
            </h2>
            <p className="mt-4 text-base leading-relaxed text-green-50 sm:text-lg">
              Experience the power and simplicity of the TIAR CMS. Schedule a
              personalized, no-obligation demo with one of our platform experts
              today.
            </p>
          </div>

          <Link
            href="/book-demo"
            className={cn(
              buttonVariants({ size: "lg" }),
              "group h-12 w-full gap-2 bg-white px-6 text-green-700 shadow-lg shadow-green-950/20 hover:bg-green-50 sm:w-auto",
            )}
          >
            Book a Free Demo
            <ArrowRight
              aria-hidden="true"
              className="size-4 transition-transform group-hover:translate-x-1"
            />
          </Link>
        </div>
      </div>
    </section>
  );
}