import { Button } from "@/components/ui/button"

export function HowItWorks() {
  return (
    <section className="py-16 md:py-24 bg-background">
      <div className="container mx-auto px-4 md:px-6">
        <div className="text-center mb-12 md:mb-16">
          <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">
            How It Works (Simple 3-Step Process)
          </h2>
          <p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
            Getting your pharmacy website is easier than you think
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 max-w-6xl mx-auto">
          {/* Step 1 */}
          <div className="bg-white rounded-xl shadow-lg p-8 text-center">
            <div className="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-br from-green-500 to-green-400 rounded-full flex items-center justify-center text-white text-3xl md:text-4xl font-extrabold mx-auto mb-6 shadow-lg">
              1
            </div>
            <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-4">You Get Started</h3>
            <p className="text-gray-600 leading-relaxed mb-4">
              Once you sign up, we'll email you the details we already have about your pharmacy — like your opening
              hours, address, and listed services.
            </p>
            <div className="text-left space-y-3 mt-6">
              <p className="font-semibold text-gray-900 text-sm">You just check they're correct and let us know:</p>
              <ul className="space-y-2 text-sm text-gray-700">
                <li className="flex items-start gap-2">
                  <span className="text-teal-600 font-bold mt-0.5">→</span>
                  <span>Which services you actually offer</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-teal-600 font-bold mt-0.5">→</span>
                  <span>The price (if you'd like prices shown)</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-teal-600 font-bold mt-0.5">→</span>
                  <span>Any photos or your logo you'd like added</span>
                </li>
              </ul>
              <p className="font-bold text-green-600 text-sm mt-4">That's it — no forms or setup needed.</p>
            </div>
          </div>

          {/* Step 2 */}
          <div className="bg-white rounded-xl shadow-lg p-8 text-center">
            <div className="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-br from-green-500 to-green-400 rounded-full flex items-center justify-center text-white text-3xl md:text-4xl font-extrabold mx-auto mb-6 shadow-lg">
              2
            </div>
            <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-4">We Build Everything For You</h3>
            <p className="text-gray-600 leading-relaxed mb-4">
              We'll handle the design, writing, hosting, and setup — using your confirmed details to create a
              professional website that shows your pharmacy at its best.
            </p>
            <p className="font-semibold text-gray-900 mt-6 text-sm">
              You'll get a private link to preview it and can request any changes before it goes live.
            </p>
          </div>

          {/* Step 3 */}
          <div className="bg-white rounded-xl shadow-lg p-8 text-center">
            <div className="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-br from-green-500 to-green-400 rounded-full flex items-center justify-center text-white text-3xl md:text-4xl font-extrabold mx-auto mb-6 shadow-lg">
              3
            </div>
            <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-4">You Go Live & Get Found</h3>
            <p className="text-gray-600 leading-relaxed mb-4">
              Once approved, we launch your site and keep it secure, backed up, and managed for you.
            </p>
            <p className="font-bold text-green-600 mt-6 text-sm">
              Patients can start finding you on Google, and you can request updates anytime.
            </p>
          </div>
        </div>

        <div className="text-center mt-12 md:mt-16">
          <Button
            asChild
            size="lg"
            className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold text-lg px-8 py-6 shadow-xl"
          >
            <a href="https://buy.stripe.com/aFa7sL0Qw3GH2PI2kQ8k806" target="_blank" rel="noopener noreferrer">
              Start My Website — £540/year
            </a>
          </Button>
        </div>
      </div>
    </section>
  )
}
