import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import Image from "next/image"

const services = [
  {
    title: "Vending Machines",
    items: [
      { name: "Sales", href: "/vending-machines/machines-for-sale" },
      { name: "Machines We Use", href: "/vending-machines/machines-we-use" },
      { name: "Custom Solutions", href: "/services/service-areas" },
      { name: "Latest Technology", href: "/vending-machines/machines-we-use" },
    ],
    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: "Coca-Cola Products", href: "/services" },
      { name: "Pepsi Products", href: "/services" },
      { name: "Healthy Snacks", href: "/services" },
      { name: "Energy Drinks", href: "/services" },
    ],
    image: "/variety-of-drinks-and-snacks.jpg",
  },
  {
    title: "Support & Resources",
    items: [
      { name: "Service Areas", href: "/service-areas" },
      { name: "Contact Us", href: "/contact-us" },
      { 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">
          <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
            Our Services & Products
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
            From traditional vending machines to modern cashless solutions, we offer everything you need to keep your
            team refreshed and productive.
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {services.map((service, index) => (
            <Card key={index} className="border-border/50 overflow-hidden hover:border-secondary/50 transition-colors">
              <div className="aspect-video relative bg-muted">
                <Image
                  src={service.image || "/placeholder.svg"}
                  alt={service.title}
                  fill
                  className="object-cover"
                />
              </div>
              <CardContent className="pt-6">
                <h3 className="text-xl font-semibold mb-4">{service.title}</h3>
                <ul className="space-y-2">
                  {service.items.map((item, itemIndex) => (
                    <li key={itemIndex}>
                      <Link
                        href={item.href}
                        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary hover:underline transition-colors"
                      >
                        <div className="h-1.5 w-1.5 rounded-full bg-secondary" />
                        {item.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
