"use client"

import Image from "next/image"
import Link from "next/link"
import { ShoppingCart } from "lucide-react"
import { Button } from "@/components/ui/button"

interface CourseProduct {
  id: string
  name: string
  nameUrdu?: string
  price: number
  originalPrice?: number
  image: string
  slug: string
}

const courseProducts: CourseProduct[] = [
  {
    id: "ab-slim",
    name: "AB Slim",
    nameUrdu: "اے بی سلم",
    price: 3500,
    originalPrice: 4500,
    image: "/ab-slim-weight-loss-capsules-bottle-premium.jpg",
    slug: "ab-slim",
  },
  {
    id: "maca",
    name: "Maca",
    nameUrdu: "ماکا",
    price: 4000,
    originalPrice: 5000,
    image: "/maca-root-capsules-energy-supplement-bottle.jpg",
    slug: "maca",
  },
  {
    id: "vega-xl",
    name: "Vega XL",
    nameUrdu: "ویگا ایکس ایل",
    price: 4500,
    originalPrice: 5500,
    image: "/vega-xl-mens-health-capsules-premium-box.jpg",
    slug: "vega-xl",
  },
  {
    id: "wega-fem",
    name: "Wega Fem",
    nameUrdu: "ویگا فیم",
    price: 3800,
    originalPrice: 4800,
    image: "/womens-health-wellness-capsules-pink-bottle.jpg",
    slug: "wega-fem",
  },
  {
    id: "vega-musli",
    name: "Vega Musli",
    nameUrdu: "ویگا مصلی",
    price: 4200,
    originalPrice: 5200,
    image: "/musli-power-capsules-herbal-supplement-bottle.jpg",
    slug: "vega-musli",
  },
  {
    id: "viga-power",
    name: "Viga Power",
    nameUrdu: "ویگا پاور",
    price: 3900,
    originalPrice: 4900,
    image: "/power-energy-capsules-mens-health-premium.jpg",
    slug: "viga-power",
  },
  {
    id: "maxman",
    name: "Maxman",
    nameUrdu: "میکس مین",
    price: 5000,
    originalPrice: 6500,
    image: "/maxman-capsules-premium-mens-supplement-box.jpg",
    slug: "maxman",
  },
  {
    id: "vimax",
    name: "Vimax",
    nameUrdu: "وائمیکس",
    price: 5500,
    originalPrice: 7000,
    image: "/vimax-capsules-premium-bottle-mens-health.jpg",
    slug: "vimax",
  },
  {
    id: "courses",
    name: "Courses",
    nameUrdu: "کورسز",
    price: 8000,
    originalPrice: 12000,
    image: "/health-wellness-course-bundle-multiple-capsule-bot.jpg",
    slug: "courses",
  },
  {
    id: "kendriya",
    name: "Kendriya",
    nameUrdu: "کندریا",
    price: 4500,
    originalPrice: 5500,
    image: "/kendriya-herbal-capsules-ayurvedic-supplement-bott.jpg",
    slug: "kendriya",
  },
]

export function FeaturedCourses() {
  return (
    <section className="py-12 bg-gradient-to-b from-muted/50 to-background">
      <div className="container mx-auto px-4">
        <div className="text-center mb-10">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-3">Premium Health Products</h2>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            100% Original Products | Fast Delivery in Peshawar & All Pakistan
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-6">
          {courseProducts.map((product) => (
            <Link key={product.id} href={`/product/${product.slug}`} className="group">
              <div className="bg-card rounded-2xl overflow-hidden border border-border shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                {/* Image Container */}
                <div className="relative aspect-square bg-muted/30 overflow-hidden">
                  <Image
                    src={product.image || "/placeholder.svg"}
                    alt={product.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  {product.originalPrice && (
                    <div className="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
                      {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF
                    </div>
                  )}
                </div>

                {/* Content */}
                <div className="p-4">
                  <h3 className="font-bold text-foreground text-base md:text-lg mb-1 group-hover:text-primary transition-colors">
                    {product.name}
                  </h3>
                  {product.nameUrdu && (
                    <p className="text-muted-foreground text-sm mb-2 font-urdu" dir="rtl">
                      {product.nameUrdu}
                    </p>
                  )}

                  {/* Price */}
                  <div className="flex items-center gap-2 mb-3">
                    <span className="text-primary font-bold text-lg">Rs. {product.price.toLocaleString()}</span>
                    {product.originalPrice && (
                      <span className="text-muted-foreground text-sm line-through">
                        Rs. {product.originalPrice.toLocaleString()}
                      </span>
                    )}
                  </div>

                  {/* Button */}
                  <Button size="sm" className="w-full bg-primary hover:bg-primary/90 text-primary-foreground gap-2">
                    <ShoppingCart className="h-4 w-4" />
                    Add to Cart
                  </Button>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}
