import type { Metadata } from "next"
import Link from "next/link"
import { getAllLocations } from "@/lib/location-data"
import { businessConfig } from "@/lib/seo-config"
import { Breadcrumbs } from "@/components/breadcrumbs"
import { Button } from "@/components/ui/button"
import { ArrowRight, MapPin } from "lucide-react"
import {
  PublicInset,
  PublicPageHeader,
  PublicSectionHeader,
  PublicSurface,
} from "@/components/public-surface"

export const metadata: Metadata = {
  title: "Utah Service Areas | Rocky Mountain Vending",
  description:
    "Legacy service-area route for Rocky Mountain Vending. Use the main Utah service areas page for the canonical version.",
  keywords: [
    "vending machine services by location",
    "Utah service areas",
    "local vending services",
    "vending machine locations Utah",
  ],
  openGraph: {
    title: "Utah Service Areas | Rocky Mountain Vending",
    description:
      "Legacy service-area route for Rocky Mountain Vending. Use the main Utah service areas page for the canonical version.",
    url: `${businessConfig.website}/service-areas`,
    type: "website",
  },
  alternates: {
    canonical: `${businessConfig.website}/service-areas`,
  },
  robots: {
    index: false,
    follow: true,
  },
}

export default function ServiceAreasServicesPage() {
  const locations = getAllLocations()

  // Group locations by county for better organization
  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)
  )

  const services = [
    {
      title: "Vending Machine Sales",
      description:
        "Need a new machine? We've got options that fit your space and budget. Whether you run a school, office, or warehouse, we'll help you choose one that works.",
    },
    {
      title: "Vending Machine Repair",
      description:
        "Machines break down—it happens. When yours does, we fix it fast so you're not stuck with an empty snack spot.",
    },
    {
      title: "Healthy Snack and Beverage Options",
      description:
        "We stock machines with healthy choices like granola bars, fruit snacks, and sparkling water. Great for schools and gyms that want better options.",
    },
    {
      title: "Maintenance Services",
      description:
        "Regular checkups keep machines working right. We handle restocking, cleaning, and small fixes so you don't have to think about it.",
    },
  ]

  const counties = [
    {
      title: "Salt Lake County",
      description:
        "Serving 14 cities in Salt Lake County with reliable vending services.",
      locations: saltLakeCounty,
    },
    {
      title: "Davis County",
      description:
        "Supporting businesses from Ogden to Layton with reliable vending services.",
      locations: davisCounty,
    },
    {
      title: "Utah County",
      description:
        "Serving Provo and surrounding areas with quality vending services.",
      locations: utahCounty,
    },
  ]

  return (
    <div className="public-page">
      <Breadcrumbs
        className="mb-6"
        items={[
          { label: "Services", href: "/services" },
          { label: "By Location", href: "/services/service-areas" },
        ]}
      />

      <PublicPageHeader
        align="center"
        eyebrow="Services by Location"
        title="See how service support connects to the cities we cover."
        description="Use this route to browse service coverage from the Services family view, then jump into the main service-area experience when you want the full location-by-location directory."
        className="mb-10 md:mb-14"
      />
      <section className="mx-auto mb-12 max-w-5xl">
        <PublicSurface className="p-5 md:p-7">
          <PublicSectionHeader
            eyebrow="Service Overview"
            title="Our services"
            description="Every city we cover can be supported with the same core vending services, tailored to the way the location actually operates."
            className="mb-6"
          />
          <div className="grid gap-4 md:grid-cols-2">
            {services.map((service, index) => (
              <PublicInset key={index} className="h-full">
                <h3 className="text-xl font-semibold mb-3">{service.title}</h3>
                <p className="text-muted-foreground leading-7">
                  {service.description}
                </p>
              </PublicInset>
            ))}
          </div>
        </PublicSurface>
      </section>

      <div className="space-y-10 md:space-y-12">
        {counties.map((county) => (
          <section key={county.title} className="mx-auto max-w-6xl">
            <div className="mb-6">
              <PublicSectionHeader
                eyebrow="Coverage"
                title={county.title}
                description={county.description}
              />
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {county.locations.map((location) => (
                <PublicSurface
                  key={location.slug}
                  className="flex h-full flex-col p-5"
                >
                  <div className="mb-4">
                    <h3 className="text-xl font-semibold mb-1">
                      {location.city}
                    </h3>
                    <p className="text-sm text-muted-foreground flex items-center gap-1.5">
                      <MapPin className="h-4 w-4 text-primary" />
                      {location.zipCode}
                    </p>
                  </div>

                  <div className="mb-5">
                    <p className="text-sm font-medium text-foreground mb-2">
                      Services Available
                    </p>
                    <ul className="space-y-2 text-sm text-muted-foreground">
                      <li>Vending machine sales</li>
                      <li>Repair services</li>
                      <li>Healthy snack and beverage options</li>
                      <li>Maintenance and restocking</li>
                    </ul>
                  </div>

                  <Link
                    href={`/vending-machines-${location.slug}`}
                    className="mt-auto"
                  >
                    <Button
                      variant="outline"
                      className="h-11 w-full rounded-full group"
                    >
                      View Services
                      <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Button>
                  </Link>
                </PublicSurface>
              ))}
            </div>
          </section>
        ))}
      </div>

      <section className="mx-auto mt-12 max-w-4xl">
        <PublicSurface className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-balance">
            Ready to get started?
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-lg leading-8 text-muted-foreground">
            All services are available across our coverage area. Reach out and
            we&apos;ll help you figure out the right next step for your
            location.
          </p>
          <div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
            <Link href="/contact-us">
              <Button size="lg" className="min-h-11 rounded-full">
                Contact Us
              </Button>
            </Link>
            <Link href="/service-areas">
              <Button
                size="lg"
                variant="outline"
                className="min-h-11 rounded-full"
              >
                View All Service Areas
              </Button>
            </Link>
          </div>
          <PublicInset className="mx-auto mt-6 max-w-2xl text-left sm:text-center">
            <p className="text-sm leading-6 text-muted-foreground">
              This route stays available to keep the Services family connected,
              but the primary service-area experience lives on the main{" "}
              <Link
                href="/service-areas"
                className="font-medium text-foreground underline decoration-primary/35 underline-offset-4 hover:decoration-primary"
              >
                Utah service areas page
              </Link>
              .
            </p>
          </PublicInset>
        </PublicSurface>
      </section>
    </div>
  )
}