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"
        />
        <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>
        <div className="flex justify-center mt-12">
          <Link href="/sklep" 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" />
            
</Link>
        </div>
      </div>
    </section>
  );
}