import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle2 } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { PublicSection, PublicSurface } from "@/components/public-surface"

export function HeroSection() {
  return (
    <PublicSection
      tone="warm"
      className="relative overflow-hidden"
      containerClassName="relative"
    >
      <div className="grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
        {/* Left Content */}
        <div className="flex flex-col gap-6">
          <Badge
            variant="outline"
            className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-xs font-medium w-fit"
          >
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
            </span>
            Serving Utah Businesses Since 2019
          </Badge>

          <h1 className="text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-6xl">
            Free Vending Machine Placement for Utah Businesses
          </h1>

          <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
            If your breakroom, waiting area, or staff space needs a better
            snack-and-drink option, we can review the location, place the right
            machine, keep it stocked, and handle service after installation.
          </p>

          <div className="flex flex-col gap-3">
            <div className="flex items-center gap-2 text-foreground">
              <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
              <span className="font-semibold">
                Free placement for qualifying business locations
              </span>
            </div>
            <div className="flex items-center gap-2 text-foreground">
              <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
              <span>
                We review the location, then handle stocking and service
              </span>
            </div>
            <div className="flex items-center gap-2 text-foreground">
              <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
              <span>
                Snack, beverage, and combo machines with cashless payment
              </span>
            </div>
            <div className="flex items-center gap-2 text-foreground">
              <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
              <span>Traditional favorites and healthier product options</span>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 pt-4">
            <Button
              asChild
              size="lg"
              className="bg-primary hover:bg-primary/90 text-lg h-14 px-8"
            >
              <Link href="#request-machine">
                See If Your Location Qualifies
              </Link>
            </Button>
            <Button
              asChild
              size="lg"
              variant="outline"
              className="text-lg h-14 bg-transparent"
            >
              <Link href="#how-it-works">See How It Works</Link>
            </Button>
          </div>

          <p className="text-sm text-muted-foreground pt-2">
            Serving Davis, Salt Lake, and Utah counties
          </p>
        </div>

        <div className="relative">
          <div className="relative aspect-[0.94] overflow-hidden rounded-[2rem] border border-border/70 bg-muted shadow-[var(--public-surface-shadow)]">
            <Image
              src="/images/vending-bay-2-scaled.webp"
              alt="Modern vending machines installed at Utah business"
              fill
              className="object-cover"
              priority
            />
          </div>

          <PublicSurface className="absolute bottom-4 left-4 right-4 p-5 backdrop-blur-sm md:bottom-6 md:left-auto md:right-6 md:w-64">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <div className="text-3xl font-bold text-primary">3</div>
                <div className="text-xs text-muted-foreground">
                  Counties Served
                </div>
              </div>
              <div>
                <div className="text-3xl font-bold text-primary">6+</div>
                <div className="text-xs text-muted-foreground">
                  Years in Business
                </div>
              </div>
            </div>
          </PublicSurface>
        </div>
      </div>
    </PublicSection>
  )
}
