import Image from "next/image"
import { PublicPageHeader, PublicSurface } from "@/components/public-surface"

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">
        <PublicPageHeader
          align="center"
          eyebrow="Product Mix"
          title="What we keep stocked and ready to tailor for your location."
          description="From traditional favorites to healthier options, we can tailor the product mix so the machine feels right for the people using your space."
          className="mb-12"
        />

        <div className="mx-auto grid max-w-7xl gap-6 md:grid-cols-2 lg:grid-cols-4">
          {products.map((product) => (
            <PublicSurface
              key={product.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-square overflow-hidden bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.14),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))]">
                <Image
                  src={product.image || "/placeholder.svg"}
                  alt={product.alt}
                  fill
                  className="object-cover transition-transform duration-300 hover:scale-105"
                />
              </div>
              <div className="p-5 md:p-6">
                <h3 className="text-xl font-semibold mb-2">{product.title}</h3>
                <p className="text-sm leading-relaxed text-muted-foreground">
                  {product.description}
                </p>
              </div>
            </PublicSurface>
          ))}
        </div>
      </div>
    </section>
  )
}