import Image from "next/image";

export default function ServicesDetailOverview() {
    return (
        <section className="bg-background-light py-20 px-4 md:px-10 lg:px-40 flex justify-center border-t border-neutral-light">
            <div className="max-w-[1200px] w-full flex flex-col md:flex-row gap-12 lg:gap-20">
                <div className="flex-1 flex flex-col justify-center gap-6">
                    <h2 className="text-3xl font-bold text-charcoal tracking-tight">Comprehensive Development Ecosystem</h2>
                    <div className="flex gap-6">
                        <div className="w-1 bg-gradient-to-b from-services-primary to-transparent rounded-full flex-shrink-0"></div>
                        <div className="flex flex-col gap-4">
                            <p className="text-slate-custom text-lg leading-relaxed">
                                We specialize in end-to-end software product engineering, helping you build scalable, secure, and user-centric digital solutions. Our team integrates seamlessly with your business processes to deliver software that solves real-world challenges.
                            </p>
                            <p className="text-slate-custom text-base leading-relaxed">
                                From initial concept and feasibility analysis to deployment and ongoing maintenance, our holistic approach ensures your technology investment yields maximum ROI.
                            </p>
                        </div>
                    </div>
                    <div className="flex items-center gap-8 mt-4">
                        <div className="flex flex-col">
                            <span className="text-3xl font-bold text-charcoal">10+</span>
                            <span className="text-sm text-slate-custom">Years Experience</span>
                        </div>
                        <div className="w-px h-10 bg-neutral-light"></div>
                        <div className="flex flex-col">
                            <span className="text-3xl font-bold text-charcoal">250+</span>
                            <span className="text-sm text-slate-custom">Projects Delivered</span>
                        </div>
                    </div>
                </div>
                <div className="flex-1 relative group">
                    <div className="w-full h-full min-h-[400px] rounded-xl overflow-hidden shadow-xl relative">
                        <Image
                            src="/images/services/cloud.png"
                            alt="Cloud Solutions and Scalable Infrastructure"
                            fill
                            className="object-cover transition-transform duration-700 group-hover:scale-105"
                            sizes="(max-width: 1024px) 100vw, 50vw"
                        />
                        <div className="absolute inset-0 bg-services-primary/20 group-hover:bg-transparent transition-colors duration-500"></div>
                    </div>
                    {/* Floating card */}
                    <div className="absolute -bottom-6 -left-6 md:-left-12 bg-white p-6 rounded-lg shadow-xl border-l-4 border-services-primary max-w-[240px]">
                        <div className="flex items-center gap-3 mb-2">
                            <span className="material-symbols-outlined text-services-primary">verified_user</span>
                            <span className="font-bold text-sm text-charcoal">Security First</span>
                        </div>
                        <p className="text-xs text-slate-custom">ISO 27001 certified development practices ensuring your data remains protected.</p>
                    </div>
                </div>
            </div>
        </section>
    );
}
