import {
  FaArrowRight,
  FaClock,
  FaTruck,
  FaSprayCan,
} from "react-icons/fa";
import Link from "next/link";

export default function WhyChoose() {
  return (
    <section className="py-20 bg-[#f8f9fb]">
      <div className="container mx-auto px-4 grid lg:grid-cols-2 gap-16 items-center">

        {/* LEFT CONTENT */}
        <div>

          <p className="text-amber-500 font-semibold uppercase tracking-widest mb-3">
            Why Choose Us
          </p>

          <p className="text-3xl lg:text-5xl font-bold mb-6 leading-tight">
            Premium Quality{" "}
            <span className="text-amber-500">Spray Paint Solutions</span>
          </p>

          <p className="text-gray-600 mb-8 leading-relaxed">
            We provide high-performance automotive spray paints designed for
            smooth finish, strong adhesion, and long-lasting durability. Our
            coatings are trusted for restoring, protecting, and enhancing vehicle
            surfaces with professional-grade results.
          </p>

          <Link href={'/'} className="bg-amber-500 w-fit text-white px-6 py-3 rounded-full flex items-center gap-2 hover:bg-amber-600 transition">
            Explore Products <FaArrowRight />
          </Link>

        </div>

        {/* RIGHT CARDS */}
        <div className="relative">

          <div className="space-y-6">

            {/* CARD 1 */}
            <div className="bg-white p-6 rounded-xl shadow-md flex items-start gap-4 hover:shadow-xl transition transform hover:-translate-y-1">

              <div className="bg-amber-100 text-amber-500 p-4 rounded-lg">
                <FaSprayCan size={20} />
              </div>

              <div>
                <p className="font-semibold text-lg mb-1">
                  Smooth & Professional Finish
                </p>
                <p className="text-gray-600 text-sm">
                  Achieve a uniform, glossy, and factory-like finish with our
                  advanced spray paint technology.
                </p>
              </div>

            </div>

            {/* CARD 2 */}
            <div className="bg-white p-6 rounded-xl shadow-md flex items-start gap-4 lg:ml-10 hover:shadow-xl transition transform hover:-translate-y-1">

              <div className="bg-amber-100 text-amber-500 p-4 rounded-lg">
                <FaClock size={20} />
              </div>

              <div>
                <p className="font-semibold text-lg mb-1">
                  Quick Dry & Easy Application
                </p>
                <p className="text-gray-600 text-sm">
                  Fast-drying formulas reduce downtime and allow efficient
                  application for workshops and DIY users.
                </p>
              </div>

            </div>

            {/* CARD 3 */}
            <div className="bg-white p-6 rounded-xl shadow-md flex items-start gap-4 hover:shadow-xl transition transform hover:-translate-y-1">

              <div className="bg-amber-100 text-amber-500 p-4 rounded-lg">
                <FaTruck size={20} />
              </div>

              <div>
                <p className="font-semibold text-lg mb-1">
                  Reliable Supply & Delivery
                </p>
                <p className="text-gray-600 text-sm">
                  Consistent product availability and timely delivery to keep
                  your automotive projects running smoothly.
                </p>
              </div>

            </div>

          </div>

          {/* DECORATION */}
          {/* <div className="hidden lg:block absolute -top-10 -right-10 w-32 h-32 bg-amber-100 rounded-full opacity-40"></div> */}

        </div>

      </div>
    </section>
  );
}