import type { Metadata } from "next"
import Link from "next/link"
import Image from "next/image"
import { getAllLocations } from "@/lib/location-data"
import { businessConfig } from "@/lib/seo-config"
import { MapPin, Phone, ArrowRight, Wrench, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"
import { PublicInset, PublicPageHeader, PublicSurface } from "@/components/public-surface"
import { GetFreeMachineCta } from "@/components/get-free-machine-cta"

export const metadata: Metadata = {
  title: "Service Areas | Vending Machines Across Utah | Rocky Mountain Vending",
  description:
    "Rocky Mountain Vending serves 20+ cities across Utah including Salt Lake City, Ogden, Provo, Sandy, and more. Free vending machine delivery and installation. View all service areas.",
  keywords: [
    "vending machines Utah",
    "Utah vending service areas",
    "vending machine supplier Utah",
    "Salt Lake County vending",
    "Davis County vending",
    "Utah County vending",
  ],
  openGraph: {
    title: "Service Areas | Vending Machines Across Utah",
    description:
      "Rocky Mountain Vending serves 20+ cities across Utah. Free vending machine delivery and installation. View all service areas.",
    url: `${businessConfig.website}/service-areas`,
    type: "website",
  },
  alternates: {
    canonical: `${businessConfig.website}/service-areas`,
  },
}

function LocationCard({
  city,
  zipCode,
  href,
  neighborhoods,
}: {
  city: string
  zipCode: string
  href: string
  neighborhoods: string[]
}) {
  return (
    <Link href={href} className="group block h-full">
      <PublicSurface className="h-full p-5 transition-all hover:-translate-y-0.5 hover:shadow-[0_26px_65px_rgba(0,0,0,0.12)] md:p-6">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1">
            <h3 className="text-xl font-semibold text-foreground transition-colors group-hover:text-primary">{city}</h3>
            <p className="text-sm text-muted-foreground">{zipCode}</p>
          </div>
          <div className="rounded-full border border-border/60 bg-background/90 p-2 text-muted-foreground transition-all group-hover:border-primary/30 group-hover:text-primary group-hover:translate-x-0.5">
            <ArrowRight className="h-4 w-4" />
          </div>
        </div>
        <PublicInset className="mt-5">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/75">Popular Areas</p>
          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{neighborhoods.slice(0, 2).join(", ")}</p>
        </PublicInset>
      </PublicSurface>
    </Link>
  )
}

export default function ServiceAreasPage() {
  const locations = getAllLocations()
  const state = "Utah"

  const saltLakeCounty = locations.filter((loc) =>
    [
      "salt-lake-city-utah",
      "sandy-utah",
      "draper-utah",
      "murray-utah",
      "midvale-utah",
      "south-salt-lake-utah",
      "west-valley-city-utah",
      "west-jordan-utah",
      "south-jordan-utah",
      "riverton-utah",
      "herriman-utah",
      "holladay-utah",
      "millcreek-utah",
      "cottonwood-heights-utah",
    ].includes(loc.slug),
  )

  const davisCounty = locations.filter((loc) =>
    ["ogden-utah", "layton-utah", "clearfield-utah", "syracuse-utah", "clinton-utah"].includes(loc.slug),
  )

  const utahCounty = locations.filter((loc) => ["provo-utah"].includes(loc.slug))

  return (
    <div className="container mx-auto px-4 py-10 md:py-14">
      <PublicPageHeader
        align="center"
        eyebrow="Service Coverage"
        title="Utah locations we serve with vending, repairs, parts, and machine support."
        description="Rocky Mountain Vending supports businesses and schools across Utah with free placement, dependable service, and fast local follow-up. Browse the cities we cover and reach out if your location is nearby but not listed yet."
      />

      <div className="mt-10 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
        <PublicSurface>
          <div className="relative aspect-[926/1024] overflow-hidden rounded-[1.5rem] bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.7),rgba(255,255,255,0.96))]">
            <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>
        </PublicSurface>

        <PublicSurface className="flex flex-col justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">Need Coverage Confirmation?</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance text-foreground">
              Don&apos;t see your city yet?
            </h2>
            <p className="mt-3 text-base leading-relaxed text-muted-foreground">
              We may still be able to help. If you&apos;re near one of these service zones, call or send us a request and we&apos;ll confirm the best next step.
            </p>
          </div>

          <div className="mt-6 space-y-4">
            <PublicInset>
              <a
                href={businessConfig.phoneUrl}
                className="flex items-center gap-3 text-base font-semibold text-foreground transition hover:text-primary"
              >
                <Phone className="h-5 w-5 text-primary" />
                {businessConfig.phone}
              </a>
              <p className="mt-2 text-sm text-muted-foreground">We&apos;ll confirm delivery range, support availability, and the best intake path for your location.</p>
            </PublicInset>
            <GetFreeMachineCta buttonLabel="Request a Free Machine" className="h-11 px-5" />
          </div>
        </PublicSurface>
      </div>

      <section className="mt-12">
        <PublicSurface>
          <div className="text-center">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">Core Services</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance md:text-4xl">Our vending machine services across {state}</h2>
            <p className="mx-auto mt-3 max-w-2xl text-base leading-relaxed text-muted-foreground">
              From free placement and machine sales to repairs, moving, and parts help, we keep one consistent service experience across every city we serve.
            </p>
          </div>

          <div className="mt-8 grid gap-5 md:grid-cols-3">
            {[
              {
                icon: Wrench,
                title: "Repairs",
                body: "Expert repair and maintenance for snack, beverage, food, and combo machines.",
                href: "/services/repairs",
                cta: "Learn more",
              },
              {
                icon: MapPin,
                title: "Parts",
                body: "Replacement parts, manuals, and support for major vending machine brands.",
                href: "/services/parts",
                cta: "Shop parts",
              },
              {
                icon: Clock,
                title: "Moving",
                body: "Professional machine moving for vending machines and related equipment across Utah.",
                href: "/services/moving",
                cta: "Moving services",
              },
            ].map((service) => (
              <PublicInset key={service.title} className="h-full p-5 text-center">
                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                  <service.icon className="h-6 w-6" />
                </div>
                <h3 className="mt-4 text-xl font-semibold">{service.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{service.body}</p>
                <Link href={service.href} className="mt-5 inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline">
                  {service.cta}
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </PublicInset>
            ))}
          </div>
        </PublicSurface>
      </section>

      <section className="mt-12 space-y-12">
        {[
          {
            title: "Salt Lake County",
            description: "Serving the heart of Utah's business district with comprehensive vending solutions.",
            items: saltLakeCounty,
          },
          {
            title: "Davis County",
            description: "Supporting businesses from Ogden to Layton with reliable vending service and repairs.",
            items: davisCounty,
          },
          {
            title: "Utah County",
            description: "Delivering quality vending solutions to Provo and surrounding areas.",
            items: utahCounty,
          },
        ].map((section) => (
          <div key={section.title} className="space-y-5">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">Coverage Area</p>
              <h2 className="mt-2 text-3xl font-semibold tracking-tight text-balance">{section.title}</h2>
              <p className="mt-2 max-w-3xl text-base leading-relaxed text-muted-foreground">{section.description}</p>
            </div>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {section.items.map((location) => (
                <LocationCard
                  key={location.slug}
                  city={location.city}
                  zipCode={location.zipCode}
                  href={`/vending-machines-${location.slug}`}
                  neighborhoods={location.neighborhoods}
                />
              ))}
            </div>
          </div>
        ))}
      </section>

      <section className="mt-12 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
        <PublicSurface>
          <h2 className="text-3xl font-semibold tracking-tight text-balance">Why businesses choose Rocky Mountain Vending</h2>
          <div className="mt-6 grid gap-5 md:grid-cols-2">
            {[
              ["FREE vending machines", "No upfront costs, hidden fees, or machine charges for qualifying businesses."],
              ["FREE delivery and installation", "Within range of our service areas, we handle setup and launch for you."],
              ["FREE maintenance and repairs", "We keep machines running smoothly so your team has fewer interruptions."],
              ["Healthy and traditional options", "We tailor product mix to the people using the machines every day."],
            ].map(([title, body]) => (
              <PublicInset key={title}>
                <h3 className="text-lg font-semibold text-foreground">{title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{body}</p>
              </PublicInset>
            ))}
          </div>
          <div className="mt-6">
            <GetFreeMachineCta buttonLabel="Get Your Free Machine" className="h-11 px-5" />
          </div>
        </PublicSurface>

        <PublicSurface>
          <h2 className="text-3xl font-semibold tracking-tight text-balance">What we support in every service area</h2>
          <div className="mt-6 space-y-4">
            {[
              ["For businesses", "Offices, warehouses, auto shops, and other workplaces that want reliable on-site vending."],
              ["For schools", "Healthy options for students and staff with a service plan that stays easy to manage."],
              ["For gyms and fitness spaces", "Protein bars, sports drinks, and post-workout options that match the location."],
            ].map(([title, body]) => (
              <PublicInset key={title}>
                <h3 className="text-lg font-semibold">{title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{body}</p>
              </PublicInset>
            ))}
          </div>
        </PublicSurface>
      </section>
    </div>
  )
}