"use client"

import Link from "next/link"
import Image from "next/image"
import { ArrowRight } from "lucide-react"

const collectionItems = [
  {
    id: 1,
    title: "Timing Courses",
    description: "Complete wellness programs for lasting results",
    image: "/premium-timing-course-wellness-capsules-box-profes.jpg",
    link: "/category/timing-course",
    color: "from-emerald-500/20 to-teal-500/20",
  },
  {
    id: 2,
    title: "Power Courses",
    description: "Advanced formulas for peak performance",
    image: "/power-course-energy-capsules-premium-mens-health-b.jpg",
    link: "/category/multi-vitamin",
    color: "from-blue-500/20 to-indigo-500/20",
  },
  {
    id: 3,
    title: "Power Spray",
    description: "Fast-acting topical solutions",
    image: "/power-spray-bottle-mens-wellness-premium-product-w.jpg",
    link: "/category/timing-spray",
    color: "from-amber-500/20 to-orange-500/20",
  },
  {
    id: 4,
    title: "VIMAX Products",
    description: "Original premium quality supplements",
    image: "/vimax-capsules-premium-supplement-bottle-professio.jpg",
    link: "/category/vimax",
    color: "from-rose-500/20 to-pink-500/20",
  },
]

export function PremiumCollection() {
  return (
    <section className="py-12 bg-gradient-to-b from-background to-muted/50">
      <div className="container mx-auto px-4">
        {/* Section Header */}
        <div className="text-center mb-10">
          <span className="inline-block px-4 py-1.5 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
            Our Premium Collection
          </span>
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-foreground mb-3">
            Complete Range of Products
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Explore our carefully curated selection of premium health and wellness products
          </p>
        </div>

        {/* Product Grid */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
          {collectionItems.map((item) => (
            <Link
              key={item.id}
              href={item.link}
              className="group relative bg-card rounded-2xl overflow-hidden border border-border shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
            >
              {/* Background Gradient */}
              <div className={`absolute inset-0 bg-gradient-to-br ${item.color} opacity-50`} />

              {/* Image Container */}
              <div className="relative aspect-square p-4 flex items-center justify-center">
                <Image
                  src={item.image || "/placeholder.svg"}
                  alt={item.title}
                  width={200}
                  height={200}
                  className="object-contain w-full h-full max-w-[180px] group-hover:scale-105 transition-transform duration-300"
                />
              </div>

              {/* Content */}
              <div className="relative p-4 pt-0 text-center">
                <h3 className="font-semibold text-foreground text-base md:text-lg mb-1 group-hover:text-primary transition-colors">
                  {item.title}
                </h3>
                <p className="text-muted-foreground text-xs md:text-sm line-clamp-2 mb-3">{item.description}</p>
                <span className="inline-flex items-center gap-1 text-primary text-sm font-medium">
                  Shop Now
                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </span>
              </div>
            </Link>
          ))}
        </div>

        {/* View All Button */}
        <div className="text-center mt-8">
          <Link
            href="/products"
            className="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-primary-foreground px-6 py-3 rounded-full font-semibold transition-all hover:scale-105"
          >
            View All Products
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>
      </div>
    </section>
  )
}
