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

export function ProductShowcaseSection() {
  const products = [
    {
      title: "Traditional Snacks & Drinks",
      description: "Popular brands your employees know and love. From chips and candy to soda and energy drinks.",
      image: "/images/traditional-snacks-utah.webp",
      alt: "Traditional snacks including M&Ms, Oreos, Reeses in vending machine",
    },
    {
      title: "Healthy Options",
      description: "Nutritious choices for health-conscious customers. Protein bars, nuts, sparkling water, and more.",
      image: "/images/healthy-vending-utah.webp",
      alt: "Healthy vending options including protein bars and nutritious snacks",
    },
    {
      title: "Cold Beverages",
      description:
        "Refreshing drinks kept at perfect temperature. Soda, water, juice, sports drinks, and energy drinks.",
      image: "/images/img-1432.webp",
      alt: "Cold drinks vending machine with variety of beverages",
    },
    {
      title: "Specialty Products",
      description: "Local favorites and specialty items. We can customize your machine with what your team wants.",
      image: "/images/drink-and-snack-delivery-utah-scaled.webp",
      alt: "Specialty Bucked Up Energy drinks available for delivery",
    },
  ]

  return (
    <section className="py-16 md:py-24 bg-background">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 tracking-tight text-balance">What We Offer</h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
            From traditional favorites to healthy alternatives, we stock what your employees and customers want
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 max-w-7xl mx-auto">
          {products.map((product, index) => (
            <Card className="border-border/50 overflow-hidden hover:border-secondary/50 hover:shadow-lg transition-shadow transition-colors">
              <div className="aspect-square relative overflow-hidden">
                <Image
                  src={product.image || "/placeholder.svg"}
                  alt={product.alt}
                  fill
                  className="object-cover hover:scale-105 transition-transform duration-300"
                />
              </div>
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold mb-2">{product.title}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{product.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
