"use client";
import { Container } from "@/components/container";
import { Card } from "@/components/ui/card";
import { CheckCircle2 } from "lucide-react";

export function TargetAudience() {
  const audience = [
    "تريدين دخلاً إضافياً أو أساسياً",
    "مبتدئة ولا تعرفين من أين تبدأين",
    "لديكِ مشروع وتريدين تطويره",
    "تريدين العمل من المنزل",
    "تريدين دخول عالم الذكاء الاصطناعي بسهولة"
  ];

  return (
    <section className="py-20">
      <Container>
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl md:text-5xl font-bold text-center mb-4">
            <span className="text-gray-900">هل هذا الكورس</span>
            <br />
            <span className="golden-text">مناسب لك؟</span>
          </h2>

          <Card className="mt-12 p-8 md:p-12 bg-white border-2 border-amber-200 golden-shadow">
            <p className="text-xl font-semibold text-gray-900 mb-8 text-center">
              هذا الكورس مناسب لكِ إذا كنتِ:
            </p>

            <div className="space-y-4">
              {audience.map((item, index) => (
                <div 
                  key={index}
                  className="flex items-start gap-4 p-4 bg-amber-50 rounded-lg hover:bg-amber-100 transition-colors"
                >
                  <CheckCircle2 className="w-6 h-6 text-amber-600 flex-shrink-0 mt-1" />
                  <p className="text-lg text-gray-800 font-medium">{item}</p>
                </div>
              ))}
            </div>

            <div className="mt-10 p-6 golden-gradient rounded-xl text-center">
              <p className="text-white text-xl font-bold">
                ✨ إذا كانت إحدى هذه النقاط تنطبق عليك، فهذا الكورس صُمم خصيصاً لك!
              </p>
            </div>
          </Card>
        </div>
      </Container>
    </section>
  );
}