import { Link } from "react-router-dom";
import { Star, Truck, ShieldCheck } from "lucide-react";
import { products } from "@/lib/data";

const StarRating = ({ rating }: { rating: number }) => {
  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          className={`w-4 h-4 ${
            star <= Math.floor(rating)
              ? "fill-[#f39c12] text-[#f39c12]"
              : "text-[#555]"
          }`}
        />
      ))}
    </div>
  );
};

const featuredProducts = products.slice(0, 6);

const ProductCards = () => {
  return (
    <section id="top-rated" className="py-20 lg:py-28 bg-[#222]">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-14">
          <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-3">
            Handpicked by Experts
          </p>
          <h2 className="font-playfair text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">
            Top Rated Grills 2024
          </h2>
          <div className="flex items-center justify-center gap-2 mb-4">
            <ShieldCheck className="w-5 h-5 text-[#d35400]" />
            <span className="font-inter text-[#b0b0b0] text-sm">
              All products backed by Official Manufacturer Warranty
            </span>
          </div>
          <div className="w-20 h-1 bg-[#d35400] mx-auto rounded-full" />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {featuredProducts.map((product) => (
            <Link
              key={product.id}
              to={`/products/${product.slug}`}
              className="group bg-[#2b2b2b] border border-[#444] rounded-lg overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_12px_40px_rgba(211,84,0,0.15)] hover:border-[#d35400]/50"
            >
              <div className="relative aspect-[4/3] overflow-hidden">
                <img
                  src={product.image}
                  alt={product.name}
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                  loading="lazy"
                />
                {product.badge && (
                  <span className="absolute top-3 left-3 bg-[#d35400] text-white font-oswald text-xs font-semibold uppercase tracking-wider px-3 py-1 rounded">
                    {product.badge}
                  </span>
                )}
                <div className="absolute inset-0 bg-[#1a1a1a]/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                  <span className="font-oswald bg-[#d35400] text-white text-sm font-semibold uppercase tracking-wider px-6 py-3 rounded transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                    View Details
                  </span>
                </div>
              </div>

              <div className="p-5">
                <p className="font-oswald text-xs text-[#d35400] uppercase tracking-widest mb-1">
                  {product.category}
                </p>
                <h3 className="font-playfair text-lg font-bold text-white mb-2 leading-tight group-hover:text-[#d35400] transition-colors">
                  {product.name}
                </h3>
                <div className="flex items-center gap-2 mb-3">
                  <StarRating rating={product.rating} />
                  <span className="font-inter text-sm text-[#b0b0b0]">
                    {product.rating} ({product.reviews})
                  </span>
                </div>
                {product.expertReview && (
                  <p className="font-inter text-xs text-[#888] italic mb-3 line-clamp-2">
                    {product.expertReview}
                  </p>
                )}
                <div className="flex items-baseline gap-2 mb-3">
                  <span className="font-oswald text-2xl font-bold text-white">
                    ${product.price.toLocaleString()}
                  </span>
                  {product.originalPrice && (
                    <span className="font-inter text-sm text-[#888] line-through">
                      ${product.originalPrice.toLocaleString()}
                    </span>
                  )}
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  {product.inStock && (
                    <span className="inline-flex items-center gap-1 text-[#27ae60] text-xs font-semibold">
                      <span className="w-2 h-2 bg-[#27ae60] rounded-full" />
                      In Stock
                    </span>
                  )}
                  {product.freeShipping && (
                    <span className="inline-flex items-center gap-1 text-[#d35400] border border-[#d35400] text-xs font-semibold px-2 py-0.5 rounded">
                      <Truck className="w-3 h-3" />
                      Free Shipping
                    </span>
                  )}
                </div>
              </div>
            </Link>
          ))}
        </div>

        <div className="text-center mt-12">
          <Link
            to="/products"
            className="font-oswald inline-flex items-center gap-2 border-2 border-[#d35400] text-[#d35400] hover:bg-[#d35400] hover:text-white text-base font-semibold uppercase tracking-wider px-10 py-4 rounded transition-all duration-300 !bg-transparent hover:!bg-[#d35400]"
          >
            View All Products
          </Link>
        </div>
      </div>
    </section>
  );
};

export default ProductCards;