import type { Metadata } from "next"
import Link from "next/link"
import { getAllLocations } from "@/lib/location-data"
import { businessConfig } from "@/lib/seo-config"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowRight, MapPin } from "lucide-react"

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.",
    },
  ]

  return (
    <div className="container mx-auto px-4 py-8 md:py-12">
      <header className="text-center mb-12 md:mb-16">
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
          Vending Machine Services by Location
        </h1>
        <p className="text-lg text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
          Rocky Mountain Vending provides comprehensive vending machine services
          across 20 service areas in Utah. Find services available in your city
          below.
        </p>
      </header>

      {/* Services Overview */}
      <section className="mb-16 max-w-4xl mx-auto">
        <h2 className="text-3xl font-bold mb-8 text-center tracking-tight text-balance">
          Our Services
        </h2>
        <div className="grid gap-6 md:grid-cols-2">
          {services.map((service, index) => (
            <Card key={index}>
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold mb-3">{service.title}</h3>
                <p className="text-muted-foreground">{service.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Salt Lake County */}
      <section className="mb-16">
        <div className="mb-8">
          <h2 className="text-3xl font-bold mb-2 tracking-tight text-balance">
            Salt Lake County
          </h2>
          <p className="text-muted-foreground">
            Serving 14 cities in Salt Lake County with reliable vending services
          </p>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {saltLakeCounty.map((location) => (
            <Card
              key={location.slug}
              className="h-full hover:border-secondary/50 transition-colors"
            >
              <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="text-xl font-semibold mb-1">
                      {location.city}
                    </h3>
                    <p className="text-sm text-muted-foreground flex items-center gap-1">
                      <MapPin className="h-4 w-4" />
                      {location.zipCode}
                    </p>
                  </div>
                </div>
                <div className="mb-4">
                  <p className="text-sm font-medium text-muted-foreground mb-2">
                    Services Available:
                  </p>
                  <ul className="text-sm text-muted-foreground space-y-1">
                    <li>• Vending Machine Sales</li>
                    <li>• Repair Services</li>
                    <li>• Healthy Options</li>
                    <li>• Maintenance</li>
                  </ul>
                </div>
                <Link href={`/vending-machines-${location.slug}`}>
                  <Button variant="outline" className="w-full group">
                    View Services
                    <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Davis County */}
      <section className="mb-16">
        <div className="mb-8">
          <h2 className="text-3xl font-bold mb-2 tracking-tight text-balance">
            Davis County
          </h2>
          <p className="text-muted-foreground">
            Supporting businesses from Ogden to Layton with reliable vending
            services
          </p>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {davisCounty.map((location) => (
            <Card
              key={location.slug}
              className="h-full hover:border-secondary/50 transition-colors"
            >
              <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="text-xl font-semibold mb-1">
                      {location.city}
                    </h3>
                    <p className="text-sm text-muted-foreground flex items-center gap-1">
                      <MapPin className="h-4 w-4" />
                      {location.zipCode}
                    </p>
                  </div>
                </div>
                <div className="mb-4">
                  <p className="text-sm font-medium text-muted-foreground mb-2">
                    Services Available:
                  </p>
                  <ul className="text-sm text-muted-foreground space-y-1">
                    <li>• Vending Machine Sales</li>
                    <li>• Repair Services</li>
                    <li>• Healthy Options</li>
                    <li>• Maintenance</li>
                  </ul>
                </div>
                <Link href={`/vending-machines-${location.slug}`}>
                  <Button variant="outline" className="w-full group">
                    View Services
                    <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Utah County */}
      <section className="mb-16">
        <div className="mb-8">
          <h2 className="text-3xl font-bold mb-2 tracking-tight text-balance">
            Utah County
          </h2>
          <p className="text-muted-foreground">
            Serving Provo and surrounding areas with quality vending services
          </p>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {utahCounty.map((location) => (
            <Card
              key={location.slug}
              className="h-full hover:border-secondary/50 transition-colors"
            >
              <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="text-xl font-semibold mb-1">
                      {location.city}
                    </h3>
                    <p className="text-sm text-muted-foreground flex items-center gap-1">
                      <MapPin className="h-4 w-4" />
                      {location.zipCode}
                    </p>
                  </div>
                </div>
                <div className="mb-4">
                  <p className="text-sm font-medium text-muted-foreground mb-2">
                    Services Available:
                  </p>
                  <ul className="text-sm text-muted-foreground space-y-1">
                    <li>• Vending Machine Sales</li>
                    <li>• Repair Services</li>
                    <li>• Healthy Options</li>
                    <li>• Maintenance</li>
                  </ul>
                </div>
                <Link href={`/vending-machines-${location.slug}`}>
                  <Button variant="outline" className="w-full group">
                    View Services
                    <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Call to Action */}
      <section className="max-w-4xl mx-auto text-center py-12 bg-muted/30 rounded-lg">
        <h2 className="text-3xl font-bold mb-4 tracking-tight text-balance">
          Ready to Get Started?
        </h2>
        <p className="text-lg text-muted-foreground mb-6 text-pretty leading-relaxed">
          All services are available across all 20 service areas. Contact us
          today to learn more about vending machine solutions for your business.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link href="/contact-us">
            <Button size="lg">Contact Us</Button>
          </Link>
          <Link href="/service-areas">
            <Button size="lg" variant="outline">
              View All Service Areas
            </Button>
          </Link>
        </div>
      </section>
    </div>
  )
}