import { MapPin } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import {
  PublicInset,
  PublicPageHeader,
  PublicSection,
  PublicSurface,
} from "@/components/public-surface"
import {
  businessConfig,
  serviceAreas as serviceAreasConfig,
} from "@/lib/seo-config"
import { getAllLocations } from "@/lib/location-data"

export function ServiceAreasSection() {
  const locations = getAllLocations()

  // Build structured data for service areas
  const serviceAreaStructuredData = {
    "@context": "https://schema.org",
    "@type": "Service",
    serviceType: "Vending Machine Services",
    provider: {
      "@type": "Organization",
      name: businessConfig.name,
      url: businessConfig.website,
    },
    areaServed: serviceAreasConfig.map((area) => ({
      "@type": "City",
      name: area.city,
      addressRegion: area.state,
      addressCountry: area.country,
    })),
  }

  return (
    <PublicSection id="service-areas">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(serviceAreaStructuredData),
        }}
      />
      <PublicPageHeader
        align="center"
        className="mb-12"
        eyebrow="Service Coverage"
        title="Service Areas in Utah"
        description="Proudly serving businesses across Davis, Salt Lake, and Utah Counties."
      />

      <PublicSurface className="grid items-center gap-6 p-5 md:p-7 lg:grid-cols-[1.05fr_0.95fr]">
        <div className="order-2 lg:order-1 relative overflow-hidden rounded-[1.5rem] border border-border/60 bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))]">
          <div className="relative aspect-[926/1024]">
            <Image
              src="/images/rocky-mountain-vending-service-area-926x1024.webp"
              alt="Rocky Mountain Vending service area map covering Salt Lake City, Ogden, Provo and surrounding Utah cities"
              fill
              className="object-cover"
            />
          </div>
        </div>

        <div className="order-1 lg:order-2">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
              <MapPin className="h-5 w-5" />
            </div>
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
                City Coverage
              </p>
              <h3 className="text-2xl font-semibold tracking-tight text-balance">
                Cities We Serve
              </h3>
            </div>
          </div>
          <div className="mt-6 grid grid-cols-2 gap-3">
            {locations.map((location) => (
              <Link
                key={location.slug}
                href={`/vending-machines-${location.slug}`}
                className="group flex min-h-11 items-center gap-2 rounded-full border border-border/60 bg-white px-4 text-sm font-medium text-foreground transition hover:border-primary/35 hover:text-primary"
              >
                <div className="h-2 w-2 rounded-full bg-primary/70 flex-shrink-0 transition group-hover:scale-110" />
                <span className="transition-colors">{location.city}</span>
              </Link>
            ))}
          </div>
          <PublicInset className="mt-6">
            <p className="text-sm leading-relaxed text-muted-foreground">
              Don't see your city? Give us a call at{" "}
              <a
                href="tel:+14352339668"
                className="font-semibold text-foreground underline decoration-primary/35 underline-offset-4 hover:decoration-primary"
              >
                (435) 233-9668
              </a>{" "}
              to check if we can serve your location!
            </p>
            <div className="mt-4 flex flex-col gap-3 sm:flex-row">
              <Link
                href="/service-areas"
                className="inline-flex min-h-11 items-center justify-center gap-2 rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
              >
                View All Service Areas →
              </Link>
              <Link
                href="/contact-us#contact-form"
                className="inline-flex min-h-11 items-center justify-center gap-2 rounded-full border border-border bg-white px-5 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
              >
                Ask about your location
              </Link>
            </div>
          </PublicInset>
        </div>
      </PublicSurface>
    </PublicSection>
  )
}