import Image from 'next/image';

export default function ServicesEnterprise() {
    return (
        <section className="py-24 section-dark relative border-y border-white/5 overflow-hidden">
            {/* Background Glow */}
            <div className="absolute top-1/2 right-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/3 pointer-events-none" />

            <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 items-center gap-16">
                    <div className="w-full lg:w-1/2 gsap-fade-up">
                        <div className="aspect-video relative rounded-2xl overflow-hidden group shadow-2xl border border-white/10">
                            <Image
                                src="/img/illustrations/service_enterprise_new.png"
                                alt="Modern Enterprise Cloud Infrastructure Illustration"
                                fill
                                className="object-cover transition-transform duration-700 group-hover:scale-105"
                                sizes="(max-width: 1024px) 100vw, 50vw"
                            />
                            <div className="absolute inset-0 bg-gradient-to-tr from-charcoal/40 to-transparent mix-blend-multiply opacity-50 group-hover:opacity-0 transition-opacity duration-500"></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-3 py-1 rounded-full bg-white/5 border border-white/10 w-fit backdrop-blur-sm mb-4">
                            <span className="text-xs font-bold uppercase tracking-widest text-primary">Development</span>
                        </div>
                        <h2 className="text-3xl lg:text-5xl font-bold text-white mb-6 leading-tight">Enterprise Software <br /><span className="text-primary">Solutions</span></h2>
                        <p className="text-text-muted text-lg mb-8 leading-relaxed">
                            We build software that grows with you. Our engineering team specializes in creating secure, scalable enterprise applications that streamline operations.
                        </p>
                        <ul className="space-y-4">
                            <li className="flex items-start gap-4">
                                <div className="mt-1 size-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                                    <span className="material-symbols-outlined text-primary text-sm flex-shrink-0">check</span>
                                </div>
                                <span className="text-white font-medium text-lg">Custom API Integration & Development</span>
                            </li>
                            <li className="flex items-start gap-4">
                                <div className="mt-1 size-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                                    <span className="material-symbols-outlined text-primary text-sm flex-shrink-0">check</span>
                                </div>
                                <span className="text-white font-medium text-lg">Legacy System Modernization</span>
                            </li>
                            <li className="flex items-start gap-4">
                                <div className="mt-1 size-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                                    <span className="material-symbols-outlined text-primary text-sm flex-shrink-0">check</span>
                                </div>
                                <span className="text-white font-medium text-lg">Cross-Platform Mobile Applications</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    );
}
