import { CheckCircle2 } from "lucide-react";

export function BenefitsGridSection() {
  return (
    <section className="relative overflow-hidden bg-white px-[20px] pb-[60px] md:pb-[100px]">
      <div className="mx-auto max-w-[1260px]">
        
        <div className="grid grid-cols-1 gap-[30px] md:grid-cols-3">
          
          {/* Card 1 */}
          <div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
            <h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
              AI-Powered Marketing & Personalization
            </h4>
            <ul className="flex flex-col gap-[15px] mt-[10px]">
              <li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
                Hyper-personalized recommendations
              </li>
              <li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
                AI-driven ad targeting & optimization
              </li>
            </ul>
          </div>

          {/* Card 2 */}
          <div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
            <h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
              Seamless AI integration for your business success
            </h4>
            <p className="text-[16px] leading-[1.6] text-aiero-text-muted mt-[10px]">
              Seamless integration with existing systems and platforms & Scalable and flexible architecture
            </p>
          </div>

          {/* Card 3 (OpenAI Logo) */}
          <div className="flex items-center justify-center rounded-[25px] border border-aiero-card-border bg-[#F8F9FA] p-[40px] transition-transform duration-300 hover:-translate-y-2">
            <img 
              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/openai-logo-1.png" 
              alt="OpenAI Logo" 
              className="w-[180px] h-auto object-contain"
            />
          </div>

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