interface CertificationsSectionProps {
    data: {
        title: string;
        items: string[];
    };
}

export default function CertificationsSection({ data }: CertificationsSectionProps) {
    return (
        <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="3cczmc2">
            <div className="max-w-5xl mx-auto" data-oid="yghb:oj">
                <div className="text-center mb-12" data-oid="_d8vhvs">
                    <h2
                        className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
                        data-oid="21wse-i"
                    >
                        {data.title}
                    </h2>
                </div>

                <div className="grid md:grid-cols-2 gap-6" data-oid="jr6gmpg">
                    {data.items.map((certification, index) => (
                        <div
                            key={index}
                            className="flex items-center p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow"
                            data-oid="nyq44rl"
                        >
                            <div
                                className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0"
                                data-oid="djc0hl0"
                            >
                                <svg
                                    className="w-6 h-6 text-green-600"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    data-oid="we9x9ea"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                        data-oid="_dfri_o"
                                    />
                                </svg>
                            </div>
                            <span
                                className="text-gray-900 font-light leading-relaxed"
                                data-oid="x4c2usp"
                            >
                                {certification}
                            </span>
                        </div>
                    ))}
                </div>

                {/* Additional certification badges */}
                <div className="mt-12 text-center" data-oid="cssyfkc">
                    <div className="flex flex-wrap justify-center gap-4" data-oid="h8e5xo:">
                        <div
                            className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium"
                            data-oid="klf4:.o"
                        >
                            🏆 Quality Certified
                        </div>
                        <div
                            className="bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium"
                            data-oid="0cpr:jv"
                        >
                            🔒 Security Verified
                        </div>
                        <div
                            className="bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium"
                            data-oid="tjnjk08"
                        >
                            🚀 Innovation Leader
                        </div>
                        <div
                            className="bg-orange-100 text-orange-800 px-4 py-2 rounded-full text-sm font-medium"
                            data-oid="nepx91x"
                        >
                            ⭐ Excellence Award
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}