import Link from "next/link";
import { FiArrowUpRight } from "react-icons/fi";
import { GiSpray } from "react-icons/gi";
import { getProducts } from "@/app/lib/api";

export default async function HeroFeatures() {
    const products = await getProducts();
    return (
        <section className="relative lg:-mt-24 mt-6 z-10">
            <div className="container">
                <div className="grid lg:grid-cols-12 rounded-2xl overflow-hidden shadow-xl">

                    {/* CARD 1 */}
                    <div className="bg-[#6112a0] text-white p-10 lg:col-span-3">
                        <p className="text-xl font-semibold mb-4">
                            Industrial Grade Coatings
                        </p>

                        <p className="text-gray-300 mb-6">
                            High-performance spray paints engineered for durability,
                            corrosion resistance, and long-lasting protection.
                        </p>

                        <Link href="/" className="flex items-center gap-2 font-semibold text-yellow-400">
                            Explore Products <FiArrowUpRight />
                        </Link>
                    </div>

                    {/* CARD 2 */}
                    <div className="bg-amber-500 p-10 lg:col-span-3">
                        <p className="text-xl font-semibold mb-4">
                            Advanced Spray Technology
                        </p>

                        <p className="text-gray-900 mb-6">
                            Designed for precision coating, smooth finish, and superior adhesion
                            on metals, plastics, and specialized industrial surfaces.
                        </p>

                        <Link href="/" className="flex items-center gap-2 font-semibold">
                            Discover More <FiArrowUpRight />
                        </Link>
                    </div>

                    {/* CARD 3 (MAIN PRODUCTS) */}
                    <div className="bg-white lg:p-10 p-6 lg:col-span-6">
                        <p className="text-xl font-semibold mb-6">
                            Our Key Products
                        </p>

                        <div className="grid lg:grid-cols-2 gap-4 text-sm">
                            {
                                products?.slice(0, 6).map((product, index) => (
                                    <Link href={'/'} key={index} className="border p-3 rounded hover:bg-amber-500 hover:text-white transition-all duration-300 group">
                                        <GiSpray className="inline mr-2 group-hover:animate-bounce" />
                                        {product.name}
                                    </Link>
                                ))
                            }
                        </div>
                    </div>

                </div>
            </div>
        </section>
    );
}