import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { SectionHeading } from "../common/SectionHeading";
import { ProductCard } from "../shop/ProductCard";
import { getFeaturedProducts } from "@/content/products";

export function FeaturedProducts() {
  const featured = getFeaturedProducts(4);

  return (
    <section className="py-16 md:py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Nasz Asortyment"
          title="Polecane klimatyzatory z montażem"
          subtitle="Poznaj wybrane modele urządzeń chłodzących i grzewczych od wiodących marek. Zapewniamy kompleksowy montaż."
          align="center"
        />

        {/* Products Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
          {featured.map((product) => (
            <ProductCard key={product.slug} product={product} />
          ))}
        </div>

        {/* Catalog Link */}
        <div className="flex justify-center mt-12">
          <Link href="/sklep">
            <button className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 group">
              <span>Zobacz cały sklep</span>
              <ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
            </button>
          </Link>
        </div>
      </div>
    </section>
  );
}