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

export function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-[var(--blue-50)] via-white to-[var(--blue-100)] py-16 md:py-24 lg:py-32">
      <div className="container mx-auto px-4 md:px-6">
        <div className="mx-auto max-w-4xl text-center">
          <h1 className="text-balance text-4xl font-bold tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
            Get more calls and walk-ins — with a pharmacy website{" "}
            <span className="text-[var(--blue-500)]">built for you by a pharmacist.</span>
          </h1>
          <p className="mt-6 text-pretty text-lg leading-relaxed text-gray-600 md:text-xl">
            You don't have to lift a finger. We'll handle everything — so more patients can find you and visit your
            pharmacy, without adding to your workload.
          </p>

          <div className="mt-8 flex justify-center">
            <Button size="lg" className="gap-2 bg-green-600 text-lg text-white hover:bg-green-700" asChild>
              <a href="https://buy.stripe.com/aFa7sL0Qw3GH2PI2kQ8k806" target="_blank" rel="noopener noreferrer">
                Start My Website — £540/year
              </a>
            </Button>
          </div>
        </div>

        <div className="mx-auto mt-10 max-w-3xl">
          <div className="rounded-xl bg-gradient-to-br from-[var(--blue-50)] to-[var(--blue-100)] p-8 md:p-12">
            <div className="flex flex-col items-center text-center">
              <div className="mb-6">
                <div className="relative mx-auto h-48 w-48 overflow-hidden rounded-full border-8 border-white shadow-xl">
                  <img
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bIzXWtRNJvhA9SdrZ2NSk_8f0a07fac0ad4209918d2a5a63f16b09-NcS8vLoVgSfAEVbvClrbyixqsk49sY.jpg"
                    alt="Jignesh - GPhC-registered pharmacist"
                    className="h-full w-full object-cover"
                  />
                </div>
                <p className="mt-3 text-sm font-semibold text-[var(--blue-600)]">GPhC-registered pharmacist</p>
              </div>

              <div className="space-y-6">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 md:text-3xl">
                    I'm Jignesh, a community pharmacist who gets it.
                  </h2>
                  <p className="mt-3 text-lg leading-relaxed text-gray-700">
                    I spent 20 years doing what you do —flu jabs, BP checks, EPS, private services, the lot.
                  </p>
                </div>

                <div className="rounded-lg bg-white p-6 shadow-md">
                  <p className="text-lg font-bold leading-relaxed text-gray-900 md:text-xl">
                    Every pharmacy owner I've spoken to says the same thing about websites:
                    <br />
                    <span className="mt-1 block">"I just want something simple that works."</span>
                  </p>
                </div>

                <div className="space-y-4 text-left">
                  <p className="text-lg font-medium text-gray-900">That's exactly why I built Pharmapresence.</p>

                  <div className="space-y-3">
                    <p className="font-medium text-gray-900">I was tired of seeing pharmacy owners:</p>
                    <ul className="space-y-2 text-gray-900">
                      <li className="flex items-start gap-2">
                        <span className="mt-1 text-destructive">✗</span>
                        <span>Paying £3,000+ for websites that don't bring in patients</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="mt-1 text-destructive">✗</span>
                        <span>Dealing with designers who think pharmacy is like any other business</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="mt-1 text-destructive">✗</span>
                        <span>Missing out on patients simply because they can't be found online</span>
                      </li>
                    </ul>
                  </div>

                  <div className="border-t border-[var(--blue-200)] pt-4">
                    <p className="text-gray-900">
                      Now I help independent pharmacies get found, get bookings, and grow their services — without the
                      tech headache.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-8 flex justify-center">
            {/* Mobile version - clickable WhatsApp button */}
            <Button size="lg" className="gap-2 bg-blue-600 text-lg text-white hover:bg-blue-700 md:hidden" asChild>
              <a href="https://wa.me/447414470433" target="_blank" rel="noopener noreferrer">
                Message me on WhatsApp
              </a>
            </Button>

            <Button
              size="lg"
              className="hidden gap-2 bg-blue-600 text-lg text-white md:inline-flex cursor-default hover:bg-blue-600"
            >
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
              </svg>
              Message me on 07414 470 433
            </Button>
          </div>
          <p className="mt-4 text-center text-sm text-[var(--blue-600)]">
            I'll show you examples & answer your questions
          </p>
        </div>
      </div>
    </section>
  )
}
