"use client";
import { useApiQuery } from "@/hooks/api/useApiQuery";

interface BoldProduct {
  id: number;
  name: string;
  description: string;
  link: string;
  image: string;
}

export default function BoldProductsSection() {
  const { data } = useApiQuery<BoldProduct[]>("/api/bold", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });
  
  const products = data ?? [];

  return (
    <section
      id="bold-section"
      className="relative py-8 px-4 bg-[#030f18] overflow-hidden"
      aria-label="Bold products section"
    >
      {/* Gradient border that fades from left to right */}
      <div className="absolute bottom-0 left-0 w-[85%] h-[1px] bg-gradient-to-r from-[#B87333] to-transparent" />
      <div className="absolute top-0 right-0 w-[85%] h-[1px] bg-gradient-to-l from-[#B87333] to-transparent" />
      {/* Animated background elements */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute w-96 h-96 bg-[#B87333]/5 rounded-full blur-3xl -top-48 -left-48 animate-float" />
        <div className="absolute w-96 h-96 bg-[#B87333]/5 rounded-full blur-3xl -bottom-48 -right-48 animate-float2" />
      </div>

      <div className="relative z-10 w-full">
        <div className="overflow-hidden">
          {/* Mobile Disclaimer - Only shown on mobile */}
          <div className="md:hidden text-center mb-4 px-4">
            <p className="text-[#7A471B] text-sm font-medium">
              Featuring BOLD Products - Scroll horizontally to view more
            </p>
          </div>
          <div className="flex gap-6 overflow-x-auto px-8 pb-6 bold-scroll-container items-center whitespace-nowrap">
            {products.map((product) => (
              <a
                key={product.id}
                href={product.link}
                target="_blank"
                rel="noopener noreferrer"
                className="group relative min-w-[280px] max-w-[300px] h-64 rounded-md shadow-md bg-[#020c13] overflow-hidden flex-shrink-0 transform transition-all duration-300 cursor-pointer border border-[#B87333] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#B87333] hover:shadow-lg hover:shadow-[#B87333]/20 hover:border-[#A05A2C]"
                style={{
                  backgroundImage:
                    product.image && product.image !== "(unknown)"
                      ? `url(${product.image.replace("/uploads/", "/api/uploads/")})`
                      : "none",
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                }}
                aria-label={product.name}
              >
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent group-hover:from-black/70 group-hover:via-black/30 transition-all duration-300"></div>
                <div className="relative z-10 flex flex-col justify-end h-full p-6">
                  <div className="font-bold text-lg md:text-lg text-white truncate drop-shadow-lg pb-1">
                    {product.name}
                  </div>
                  <div className="text-gray-200 text-sm md:text-sm line-clamp-2 drop-shadow max-w-full mt-1">
                    {product.description}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
