import Image from "next/image";

export default function ServicesSecurity() {
    return (
        <section className="py-24 bg-light-bg relative overflow-hidden">
            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 flex flex-col gap-24 relative z-10">
                <div className="flex flex-col lg:flex-row-reverse items-center gap-16">
                    <div className="w-full lg:w-1/2 gsap-fade-up">
                        <div className="relative rounded-2xl overflow-hidden shadow-xl aspect-[4/3] group border border-gray-100">
                            <Image
                                src="/images/services/cybersecurity.png"
                                alt="Data analytics dashboard on a tablet"
                                fill
                                className="object-cover transition-transform duration-700 group-hover:scale-105"
                            />
                            <div className="absolute inset-0 bg-primary/5 mix-blend-multiply z-10 pointer-events-none transition-opacity duration-500 group-hover:opacity-0"></div>
                        </div>
                    </div>
                    <div className="w-full lg:w-1/2 gsap-fade-up" style={{ animationDelay: '0.2s' }}>
                        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white border border-gray-100 shadow-sm mb-6">
                            <span className="text-xs font-bold uppercase tracking-widest text-primary">Security</span>
                        </div>
                        <h2 className="text-3xl lg:text-5xl font-bold text-text-main mb-6 leading-tight">Advanced <br /><span className="text-primary">Cybersecurity</span></h2>
                        <p className="text-text-muted text-lg mb-8 leading-relaxed">
                            In an era of increasing digital threats, our cybersecurity services ensure your business continuity. We implement multi-layered defense strategies.
                        </p>
                        <ul className="space-y-5">
                            <li className="flex items-start gap-4">
                                <div className="mt-1 size-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                                    <span className="material-symbols-outlined text-primary text-base flex-shrink-0">shield</span>
                                </div>
                                <span className="text-text-main font-bold text-lg mt-0.5">24/7 Threat Monitoring & Response</span>
                            </li>
                            <li className="flex items-start gap-4">
                                <div className="mt-1 size-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                                    <span className="material-symbols-outlined text-primary text-base flex-shrink-0">verified_user</span>
                                </div>
                                <span className="text-text-main font-bold text-lg mt-0.5">Compliance Audits (GDPR, HIPAA, SOC2)</span>
                            </li>
                            <li className="flex items-start gap-4">
                                <div className="mt-1 size-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                                    <span className="material-symbols-outlined text-primary text-base flex-shrink-0">bug_report</span>
                                </div>
                                <span className="text-text-main font-bold text-lg mt-0.5">Penetration Testing & Vulnerability Assessment</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    );
}
