<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
    {products.map((p) => {
        const hasDiscount = typeof p.discountedPrice === "number" && p.discountedPrice < p.price;
        const discountPct = hasDiscount
        ? Math.round(((p.price - (p.discountedPrice as number)) / p.price) * 100)
        : 0;
        
        return (
        <article key={p.id} className="group rounded-xl border p-3 hover:shadow-sm">
            <div className="relative overflow-hidden rounded-lg">
            <Image
                src={p.image}
                alt={p.title}
                width={320}
                height={320}
                className="h-40 w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
            />
            {hasDiscount && (
                <span className="absolute left-2 top-2 rounded-md bg-emerald-600 px-2 py-1 text-xs font-semibold text-white">
                -{discountPct}%
                </span>
            )}
            </div>
        </article>
        );
    })}
    </div>