import type React from "react"
import { Button } from "@/components/ui/button"
import { Clock } from "lucide-react"

export function Pricing() {
  return (
    <section id="pricing" className="bg-gray-900 text-white py-16 md:py-24">
      <div className="container mx-auto max-w-3xl px-6 text-center">
        <h2 className="text-3xl md:text-4xl font-extrabold text-white mb-6">Your Investment</h2>
        <p className="text-2xl text-gray-300 line-through mb-4">Total Value: £1,400+</p>
        <p className="text-5xl md:text-7xl font-extrabold text-white mb-4">
          £540<span className="text-3xl font-normal text-gray-300">/year</span>
        </p>
        <p className="text-2xl text-teal-400 font-semibold mb-6">(or £45/month)</p>
        <p className="text-xl text-gray-200 mb-10 max-w-md mx-auto">
          That's around <span className="text-white font-bold">£1.50 per day</span> to have a professional site built,
          hosted, and cared for. No tech, no hassle.
        </p>

        {/* Mobile version - Stripe link */}
        <Button
          size="lg"
          className="bg-teal-600 hover:bg-teal-700 text-white text-xl px-8 py-6 shadow-2xl md:hidden"
          asChild
        >
          <a href="https://buy.stripe.com/aFa7sL0Qw3GH2PI2kQ8k806" target="_blank" rel="noopener noreferrer">
            Get Your Pharmacy Website Now
            <svg
              className="w-6 h-6 inline-block ml-2"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="2"
              stroke="currentColor"
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        </Button>

        <Button
          size="lg"
          className="hidden md:inline-flex bg-teal-600 hover:bg-teal-700 text-white text-xl px-8 py-6 shadow-2xl"
          asChild
        >
          <a href="https://buy.stripe.com/aFa7sL0Qw3GH2PI2kQ8k806" target="_blank" rel="noopener noreferrer">
            Get Your Pharmacy Website Now
          </a>
        </Button>

        <div className="mt-10 text-teal-200 bg-teal-900 bg-opacity-50 border border-teal-700 p-4 rounded-lg max-w-lg mx-auto">
          <p className="font-semibold">
            <Clock className="w-6 h-6 inline-block mr-2 -mt-1" />
            Limited Availability
          </p>
          <p className="text-sm">
            Because I personally oversee each website, I open just <strong>one new project slot each week</strong>.
            Secure your spot to get your site live within 7 days.
          </p>
        </div>
      </div>
    </section>
  )
}

function Shield(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
    </svg>
  )
}
