import { Award, Shield, CircleCheck, Trophy } from "lucide-react";


export default function CertificateSection({
  data,
}) {
  const certificateImageSrc =
    typeof data?.image?.src === "string" ? data.image.src.trim() : "";

  return (
    <section className="py-20 bg-gradient-to-br from-[#F6EFE9] to-white">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div data-static-border="true" data-certificate-card="true" className="p-10 rounded-3xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] border-4 border-[#D4AF37]">
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#D4AF37]/20 border border-[#D4AF37]/40 mb-4">
                <Shield className="w-4 h-4 text-[#D4AF37]" />
                <span className="text-sm font-bold text-[#E6D3B1]">
                  {data.badge}
                </span>
              </div>

              <h3 className="text-2xl md:text-3xl font-black text-[#E6D3B1] mb-4">
                {data.title}
              </h3>

              <p className="text-[#F6EFE9]/80 mb-6 leading-relaxed">
                {data.description}
              </p>

              <div className="space-y-3">
                {data.points.map((point) => (
                  <div key={point} className="flex items-center gap-3">
                    <CircleCheck className="w-5 h-5 text-[#D4AF37] flex-shrink-0" />
                    <span className="text-[#F6EFE9]/90">{point}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div data-static-border="true" data-certificate-image-card="true" className="aspect-[4/3] rounded-2xl bg-gradient-to-br from-white to-[#F6EFE9] border-4 border-[#D4AF37] p-8 flex items-center justify-center shadow-2xl">
                <div className="text-center max-w-md">
                  {certificateImageSrc ? (
                    <img
                      src={certificateImageSrc}
                      alt={data.image.alt}
                      className="mx-auto w-full max-h-[16rem] object-contain rounded-lg"
                    />
                  ) : (
                    <>
                      <Award className="w-20 h-20 text-[#D4AF37] mx-auto mb-4" />
                      <p className="text-xs font-black uppercase tracking-widest text-[#8B1C1C] mb-2">
                        {data.branding?.[0]}
                      </p>
                      <h4 className="text-xl sm:text-2xl font-black text-[#4A141E]">
                        {data.branding?.[1]}
                      </h4>
                      <p className="text-[#4A141E]/60 mt-3">
                        {data.branding?.[2]}
                      </p>
                    </>
                  )}
                </div>
              </div>

              <div className="absolute -top-4 -right-4 w-16 h-16 rounded-full bg-[#D4AF37] flex items-center justify-center border-4 border-white shadow-lg">
                <Trophy className="w-10 h-10 text-white" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}