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

const services = [
  {
    title: "Vending Machines",
    items: ["Sales", "Machines We Use", "Custom Solutions", "Latest Technology"],
    image: "/images/vending-bay-2-scaled.webp",
  },
  {
    title: "Services",
    items: ["Vending Machine Moves", "Repairs & Maintenance", "Restocking", "24/7 Support"],
    image: "/vending-machine-repair-service.jpg",
  },
  {
    title: "Product Options",
    items: ["Coca-Cola Products", "Pepsi Products", "Healthy Snacks", "Energy Drinks"],
    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">
            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-3">
          {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} className="flex items-center gap-2 text-sm text-muted-foreground">
                      <div className="h-1.5 w-1.5 rounded-full bg-secondary" />
                      {item}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}