export default function ServicesDetailFeatures() {
    return (
        <section className="bg-white py-20 px-4 md:px-10 lg:px-40 flex justify-center">
            <div className="max-w-[1200px] w-full flex flex-col gap-12">
                <div className="text-center max-w-2xl mx-auto">
                    <h2 className="text-3xl md:text-4xl font-bold text-charcoal mb-4">Core Capabilities</h2>
                    <p className="text-slate-custom">Delivering excellence through a robust suite of specialized development services designed for modern enterprises.</p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {/* Card 1 */}
                    <div className="group p-8 rounded-xl bg-white border border-neutral-light shadow-sm hover:shadow-lg transition-all border-t-4 border-t-services-primary hover:-translate-y-1">
                        <div className="size-12 rounded-lg bg-background-light flex items-center justify-center text-services-primary mb-6 group-hover:bg-services-primary group-hover:text-charcoal transition-colors">
                            <span className="material-symbols-outlined text-3xl">code_blocks</span>
                        </div>
                        <h3 className="text-xl font-bold text-charcoal mb-3">Custom Web Apps</h3>
                        <p className="text-slate-custom leading-relaxed">Scalable, secure, and high-performance web applications tailored to your specific business workflows.</p>
                    </div>
                    {/* Card 2 */}
                    <div className="group p-8 rounded-xl bg-white border border-neutral-light shadow-sm hover:shadow-lg transition-all border-t-4 border-t-services-primary hover:-translate-y-1">
                        <div className="size-12 rounded-lg bg-background-light flex items-center justify-center text-services-primary mb-6 group-hover:bg-services-primary group-hover:text-charcoal transition-colors">
                            <span className="material-symbols-outlined text-3xl">smartphone</span>
                        </div>
                        <h3 className="text-xl font-bold text-charcoal mb-3">Mobile Development</h3>
                        <p className="text-slate-custom leading-relaxed">Native and cross-platform mobile solutions that deliver seamless experiences on iOS and Android devices.</p>
                    </div>
                    {/* Card 3 */}
                    <div className="group p-8 rounded-xl bg-white border border-neutral-light shadow-sm hover:shadow-lg transition-all border-t-4 border-t-services-primary hover:-translate-y-1">
                        <div className="size-12 rounded-lg bg-background-light flex items-center justify-center text-services-primary mb-6 group-hover:bg-services-primary group-hover:text-charcoal transition-colors">
                            <span className="material-symbols-outlined text-3xl">cloud_done</span>
                        </div>
                        <h3 className="text-xl font-bold text-charcoal mb-3">Cloud Migration</h3>
                        <p className="text-slate-custom leading-relaxed">Securely migrate legacy systems to the cloud, optimizing for performance, cost, and scalability.</p>
                    </div>
                    {/* Card 4 */}
                    <div className="group p-8 rounded-xl bg-white border border-neutral-light shadow-sm hover:shadow-lg transition-all border-t-4 border-t-services-primary hover:-translate-y-1">
                        <div className="size-12 rounded-lg bg-background-light flex items-center justify-center text-services-primary mb-6 group-hover:bg-services-primary group-hover:text-charcoal transition-colors">
                            <span className="material-symbols-outlined text-3xl">api</span>
                        </div>
                        <h3 className="text-xl font-bold text-charcoal mb-3">API Integration</h3>
                        <p className="text-slate-custom leading-relaxed">Robust API development and third-party integrations to connect your disparate software systems.</p>
                    </div>
                    {/* Card 5 */}
                    <div className="group p-8 rounded-xl bg-white border border-neutral-light shadow-sm hover:shadow-lg transition-all border-t-4 border-t-services-primary hover:-translate-y-1">
                        <div className="size-12 rounded-lg bg-background-light flex items-center justify-center text-services-primary mb-6 group-hover:bg-services-primary group-hover:text-charcoal transition-colors">
                            <span className="material-symbols-outlined text-3xl">dataset</span>
                        </div>
                        <h3 className="text-xl font-bold text-charcoal mb-3">Big Data & Analytics</h3>
                        <p className="text-slate-custom leading-relaxed">Transform raw data into actionable insights with custom analytics dashboards and reporting tools.</p>
                    </div>
                    {/* Card 6 */}
                    <div className="group p-8 rounded-xl bg-white border border-neutral-light shadow-sm hover:shadow-lg transition-all border-t-4 border-t-services-primary hover:-translate-y-1">
                        <div className="size-12 rounded-lg bg-background-light flex items-center justify-center text-services-primary mb-6 group-hover:bg-services-primary group-hover:text-charcoal transition-colors">
                            <span className="material-symbols-outlined text-3xl">precision_manufacturing</span>
                        </div>
                        <h3 className="text-xl font-bold text-charcoal mb-3">DevOps & QA</h3>
                        <p className="text-slate-custom leading-relaxed">Continuous integration and deployment pipelines coupled with rigorous automated testing.</p>
                    </div>
                </div>
            </div>
        </section>
    );
}
