import Image from "next/image"

export function VisualExamples() {
  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-4 text-center text-3xl font-bold text-foreground md:text-4xl">
            See What Your Pharmacy Website Could Look Like
          </h2>
          <p className="mb-12 text-center text-lg text-muted-foreground">
            Modern, mobile-friendly and built to make patients choose you over chain pharmacies.
          </p>

          {/* Mobile layout - vertical stack order: Desktop, Service, Mobile */}
          <div className="flex flex-col gap-8 md:hidden">
            <div className="overflow-hidden rounded-xl border border-border bg-card shadow-lg">
              <div className="aspect-[4/3] bg-muted">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/desktop%20screenshot1-07XsM9xpNBKTnL8KvIj6yJI0Gx42g7.png"
                  alt="Example pharmacy website - Desktop view"
                  width={800}
                  height={600}
                  className="h-full w-full object-cover object-[20%_center]"
                />
              </div>
              <div className="p-4">
                <p className="text-center text-sm font-medium text-card-foreground">Desktop View</p>
              </div>
            </div>

            <div className="overflow-hidden rounded-xl border border-border bg-card shadow-lg">
              <div className="aspect-[4/3] bg-muted">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/desktoptravelclinic-nt5wZLz7oJ6wkI2lipx4L4VAmoHaVs.png"
                  alt="Example pharmacy website - Service page"
                  width={800}
                  height={600}
                  className="h-full w-full object-cover object-[15%_center]"
                />
              </div>
              <div className="p-4">
                <p className="text-center text-sm font-medium text-card-foreground">Service Page Example</p>
              </div>
            </div>

            <div className="flex justify-center">
              <div className="w-full max-w-sm overflow-hidden rounded-xl border border-border bg-card shadow-lg">
                <div className="aspect-[9/16] bg-muted">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_20251031_132848_Chrome-U22rSKVHgD9ZMCtmTN2Q5642V4ANVT.jpg"
                    alt="Example pharmacy website - Mobile view"
                    width={450}
                    height={800}
                    className="h-full w-full object-cover object-[center_10%]"
                  />
                </div>
                <div className="p-4">
                  <p className="text-center text-sm font-medium text-card-foreground">Mobile View</p>
                </div>
              </div>
            </div>
          </div>

          {/* Desktop layout - vertical stack order: Desktop, Service, Mobile */}
          <div className="hidden md:block space-y-8">
            <div className="overflow-hidden rounded-xl border border-border bg-card shadow-lg">
              <div className="aspect-[16/9] bg-muted">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/desktop%20screenshot1-07XsM9xpNBKTnL8KvIj6yJI0Gx42g7.png"
                  alt="Example pharmacy website - Desktop view"
                  width={1200}
                  height={675}
                  className="h-full w-full object-cover object-[20%_center]"
                />
              </div>
              <div className="p-4">
                <p className="text-center text-sm font-medium text-card-foreground">Desktop View</p>
              </div>
            </div>

            <div className="overflow-hidden rounded-xl border border-border bg-card shadow-lg">
              <div className="aspect-[16/9] bg-muted">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/desktoptravelclinic-nt5wZLz7oJ6wkI2lipx4L4VAmoHaVs.png"
                  alt="Example pharmacy website - Service page"
                  width={1200}
                  height={675}
                  className="h-full w-full object-cover object-[15%_center]"
                />
              </div>
              <div className="p-4">
                <p className="text-center text-sm font-medium text-card-foreground">Service Page Example</p>
              </div>
            </div>

            <div className="flex justify-center">
              <div className="w-full max-w-xs overflow-hidden rounded-xl border border-border bg-card shadow-lg">
                <div className="bg-muted">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot_20251031_132848_Chrome-U22rSKVHgD9ZMCtmTN2Q5642V4ANVT.jpg"
                    alt="Example pharmacy website - Mobile view"
                    width={375}
                    height={812}
                    className="w-full h-auto object-contain"
                  />
                </div>
                <div className="p-4">
                  <p className="text-center text-sm font-medium text-card-foreground">Mobile View</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
