import { MapPin } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { getServiceAreaCities, serviceAreas as serviceAreasConfig } from "@/lib/seo-config"
import { getAllLocations } from "@/lib/location-data"

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

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

  return (
    <section id="service-areas" className="py-16 md:py-24 bg-background">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceAreaStructuredData) }}
      />
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <div className="inline-flex items-center justify-center gap-2 mb-4">
            <MapPin className="h-6 w-6 text-secondary" />
            <h2 className="text-3xl md:text-4xl font-bold">Service Areas in Utah</h2>
          </div>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Proudly serving businesses across Davis, Salt Lake, and Utah Counties
          </p>
        </div>

        <div className="grid gap-8 lg:grid-cols-2 items-center max-w-6xl mx-auto">
          <div className="order-2 lg:order-1 relative aspect-[926/1024] rounded-lg shadow-lg overflow-hidden">
            <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 className="order-1 lg:order-2">
            <h3 className="text-2xl font-bold mb-6">Cities We Serve</h3>
            <div className="grid grid-cols-2 gap-3">
              {locations.map((location) => (
                <Link
                  key={location.slug}
                  href={`/vending-machines-${location.slug}`}
                  className="flex items-center gap-2 group"
                >
                  <div className="h-2 w-2 rounded-full bg-secondary flex-shrink-0" />
                  <span className="text-foreground group-hover:text-secondary transition-colors">
                    {location.city}
                  </span>
                </Link>
              ))}
            </div>
            <div className="mt-6 space-y-3">
              <p className="text-muted-foreground">
                Don't see your city? Give us a call at{" "}
                <a href="tel:+14352339668" className="text-secondary font-semibold hover:underline">
                  (435) 233-9668
                </a>{" "}
                to check if we can serve your location!
              </p>
              <Link
                href="/service-areas"
                className="inline-flex items-center gap-2 text-secondary hover:underline font-medium"
              >
                View All Service Areas →
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}