import { Button } from "@/components/ui/button"
import { MessageCircle } from "lucide-react"

export function FinalCTA() {
  return (
    <section className="bg-gray-50 py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="mb-8 text-4xl font-extrabold text-gray-900 md:text-5xl">Your Next Step</h2>

          <p className="mb-4 text-xl leading-relaxed text-gray-700 md:text-2xl">
            Your pharmacy website — built for you, managed for you, and ready to help more patients find you.
          </p>

          <p className="mb-6 text-xl font-semibold text-gray-900 md:text-2xl">No tech, no hassle, no wasted time.</p>

          <p className="mb-10 text-lg text-gray-700 md:text-xl">
            I personally build each site, so I only take on a few pharmacies each month —{" "}
            <span className="font-semibold text-blue-600">secure yours today.</span>
          </p>

          <div className="space-y-4">
            <Button
              size="lg"
              className="w-full bg-green-600 hover:bg-green-700 text-white text-lg font-bold py-6 md:w-auto md:px-12"
              asChild
            >
              <a href="https://buy.stripe.com/aFa7sL0Qw3GH2PI2kQ8k806" target="_blank" rel="noopener noreferrer">
                Start My Pharmacy Website — £540/year
              </a>
            </Button>

            <Button
              variant="outline"
              size="lg"
              className="w-full gap-2 border-2 border-gray-300 bg-white text-gray-900 text-lg font-semibold py-6 hover:bg-gray-50 md:hidden md:w-auto md:px-12"
              asChild
            >
              <a href="https://wa.me/447414470433" target="_blank" rel="noopener noreferrer">
                <MessageCircle className="h-5 w-5" />
                Message me on WhatsApp
              </a>
            </Button>

            <p className="mt-6 text-base text-gray-600 md:text-lg">
              Or message me on WhatsApp at <span className="font-bold text-gray-900">07414 470 433</span> — I'll show
              you examples and answer any questions.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}
