import type { Metadata } from "next"
import Link from "next/link"
import {
  ArrowRight,
  BookOpenText,
  MapPin,
  MoveRight,
  Package,
  Wrench,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Breadcrumbs } from "@/components/breadcrumbs"
import {
  PublicInset,
  PublicPageHeader,
  PublicSectionHeader,
  PublicSurface,
} from "@/components/public-surface"
import {
  generateRegistryMetadata,
  generateRegistryStructuredData,
} from "@/lib/seo"

export async function generateMetadata(): Promise<Metadata> {
  return generateRegistryMetadata("services")
}

const serviceCards = [
  {
    title: "Repairs & Maintenance",
    body: "On-site repair help, troubleshooting, preventative service, and support for common machine issues across Utah.",
    href: "/services/repairs",
    cta: "View repairs",
    icon: Wrench,
  },
  {
    title: "Moving & Relocation",
    body: "Professional machine moving for in-building changes, relocations, and more complex access situations.",
    href: "/services/moving",
    cta: "View moving",
    icon: MoveRight,
  },
  {
    title: "Parts & Support",
    body: "Replacement parts, payment components, cooling parts, and support for the brands and systems we work with most.",
    href: "/services/parts",
    cta: "View parts",
    icon: Package,
  },
  {
    title: "Manuals & Documentation",
    body: "Browse manuals, service guides, and reference documentation without forcing the page to belong to only one menu family.",
    href: "/manuals",
    cta: "Browse manuals",
    icon: BookOpenText,
  },
  {
    title: "Coverage by Location",
    body: "See how service support connects to the cities and counties we cover across Utah.",
    href: "/services/service-areas",
    cta: "View service areas",
    icon: MapPin,
  },
]

export default function ServicesPage() {
  const structuredData = generateRegistryStructuredData("services")

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <div className="public-page">
        <Breadcrumbs
          className="mb-6"
          items={[{ label: "Services", href: "/services" }]}
        />

        <PublicPageHeader
          align="center"
          eyebrow="Service Family"
          title="Vending machine services that stay connected from install to ongoing support."
          description="Use this page as the hub for repairs, moving, parts, manuals, and service coverage so the Services family reads like one system instead of a collection of separate pages."
        >
          <PublicInset className="mx-auto inline-flex w-fit rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
            Repairs, moving, parts, manuals, and Utah coverage in one place.
          </PublicInset>
        </PublicPageHeader>

        <section className="mt-10">
          <PublicSurface className="p-5 md:p-7">
            <PublicSectionHeader
              eyebrow="Overview"
              title="How the services family fits together"
              description="Every page in this group should help a customer understand the next step quickly, whether they need a technician, a move, a part, a manual, or location-specific support."
              className="mb-6"
            />
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
              {serviceCards.map((service) => (
                <PublicInset key={service.title} className="flex h-full flex-col">
                  <div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <service.icon className="h-5 w-5" />
                  </div>
                  <h2 className="mt-4 text-xl font-semibold tracking-tight text-balance">
                    {service.title}
                  </h2>
                  <p className="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">
                    {service.body}
                  </p>
                  <Button
                    asChild
                    variant="outline"
                    className="mt-5 h-10 w-full rounded-full"
                  >
                    <Link href={service.href}>
                      {service.cta}
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                </PublicInset>
              ))}
            </div>
          </PublicSurface>
        </section>

        <section className="mt-12 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
          <PublicSurface>
            <PublicSectionHeader
              eyebrow="Common Paths"
              title="Where most people go next"
              description="The goal of this family is to make it obvious which page to visit next instead of making people guess between support, resources, or coverage."
            />
            <div className="mt-6 grid gap-4 md:grid-cols-2">
              {[
                [
                  "Need on-site help?",
                  "Start with repairs if a machine is down, payment is failing, or refrigeration is not working correctly.",
                ],
                [
                  "Need to move equipment?",
                  "Use the moving page for relocations, stair moves, access constraints, and pickup-to-placement planning.",
                ],
                [
                  "Need documentation?",
                  "Manuals stay neutral so customers can reach them from services or equipment pages without confusion.",
                ],
                [
                  "Need to confirm coverage?",
                  "Use the service-area pages to connect support needs back to your city and route coverage.",
                ],
              ].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>
          </PublicSurface>

          <PublicSurface className="flex flex-col justify-between">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
                Get Help
              </p>
              <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
                Need a technician, a quote, or a quick answer?
              </h2>
              <p className="mt-3 text-base leading-relaxed text-muted-foreground">
                Reach out if you need help narrowing down the right service page
                or if you already know you need repairs, moving support, parts,
                or placement guidance.
              </p>
            </div>
            <div className="mt-6 grid gap-3">
              <Button asChild size="lg" className="min-h-11 rounded-full">
                <Link href="/contact-us#contact-form">Talk to Our Team</Link>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="min-h-11 rounded-full"
              >
                <Link href="/services/repairs#request-service">
                  Request repair help
                </Link>
              </Button>
            </div>
          </PublicSurface>
        </section>
      </div>
    </>
  )
}