import Link from "next/link"
import Image from "next/image"
import { PublicSurface } from "@/components/public-surface"

const services = [
  {
    title: "Vending Machines",
    items: [
      {
        name: "Machines for Sale",
        href: "/vending-machines/machines-for-sale",
      },
      { name: "Machines We Use", href: "/vending-machines/machines-we-use" },
      { name: "Service Areas", href: "/service-areas" },
      { name: "Free Placement", href: "/#request-machine" },
    ],
    image: "/images/vending-bay-2-scaled.webp",
  },
  {
    title: "Services",
    items: [
      { name: "Vending Machine Moves", href: "/services/moving" },
      { name: "Repairs & Maintenance", href: "/services/repairs" },
      { name: "Replacement Parts", href: "/services/parts" },
      { name: "Vending Machine Manuals", href: "/manuals" },
    ],
    image: "/vending-machine-repair-service.jpg",
  },
  {
    title: "Product Options",
    items: [
      {
        name: "Healthy Vending Options",
        href: "/food-and-beverage/healthy-options",
      },
      {
        name: "Traditional Favorites",
        href: "/food-and-beverage/traditional-options",
      },
      { name: "Supplier Overview", href: "/food-and-beverage/suppliers" },
      { name: "Contact About Your Mix", href: "/contact-us#contact-form" },
    ],
    image: "/variety-of-drinks-and-snacks.jpg",
  },
  {
    title: "Next Steps & Resources",
    items: [
      { name: "Service Areas", href: "/service-areas" },
      { name: "Talk to Our Team", href: "/contact-us#contact-form" },
      { name: "Request Service", href: "/services/repairs#request-service" },
      { name: "Order Parts", href: "/services/parts#how-to-order" },
    ],
    image: "/variety-of-drinks-and-snacks.jpg",
  },
]

export function ServicesSection() {
  return (
    <section id="services" className="py-20 md:py-28 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12 md:mb-16">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
            Explore
          </p>
          <h2 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl text-balance">
            Our services and products
          </h2>
          <p className="mx-auto mt-3 max-w-2xl text-lg text-muted-foreground text-pretty leading-relaxed">
            From free placement to repairs, manuals, and product mix planning,
            this is where to find the machines, service pages, and next steps
            your location may need.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {services.map((service) => (
            <PublicSurface
              key={service.title}
              className="overflow-hidden p-0 transition-all hover:-translate-y-0.5 hover:shadow-[0_26px_65px_rgba(0,0,0,0.12)]"
            >
              <div className="relative aspect-[4/3] bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.16),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.75),rgba(255,255,255,0.96))]">
                <Image
                  src={service.image || "/placeholder.svg"}
                  alt={service.title}
                  fill
                  className="object-cover"
                />
              </div>
              <div className="p-5 md:p-6">
                <h3 className="text-xl font-semibold mb-4">{service.title}</h3>
                <ul className="space-y-2">
                  {service.items.map((item) => (
                    <li key={item.name}>
                      <Link
                        href={item.href}
                        className="flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-primary hover:underline"
                      >
                        <span className="h-1.5 w-1.5 rounded-full bg-primary/70" />
                        {item.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </PublicSurface>
          ))}
        </div>
      </div>
    </section>
  )
}