"use client";

import { ArrowRight, PhoneCall } from "lucide-react";
import { Reveal } from "@/components/reveal";
import { Button } from "@/components/ui/button";

export function FinalCTA() {
  return (
    <section id="contact" className="relative overflow-hidden py-24 sm:py-32">
      <div className="container">
        <Reveal>
          <div className="relative overflow-hidden rounded-4xl bg-ink-950 px-6 py-16 text-center sm:px-16 sm:py-24">
            <div className="pointer-events-none absolute inset-0 bg-grid opacity-30" />
            <div className="pointer-events-none absolute left-1/2 top-1/2 h-[420px] w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-whatsapp/25 blur-3xl animate-blob" />

            <div className="relative mx-auto max-w-2xl">
              <h2 className="text-3xl font-bold tracking-tight text-white sm:text-5xl">
                Ready to transform your customer communication?
              </h2>
              <p className="mt-5 text-lg text-white/60">
                Join thousands of businesses sending faster, more personal conversations
                on the official WhatsApp Business API.
              </p>
              <div className="mt-9 flex flex-col items-center justify-center gap-4 sm:flex-row">
                <Button size="lg" className="btn-glow group">
                  Start Free
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </Button>
                <Button size="lg" variant="glass" className="text-white">
                  <PhoneCall className="h-4 w-4" />
                  Talk to Sales
                </Button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}