export default function ServicesDetailBenefits() {
    return (
        <section className="bg-background-light py-20 px-4 md:px-10 lg:px-40 flex justify-center">
            <div className="max-w-[1200px] w-full grid md:grid-cols-3 gap-8">
                {/* Col 1 */}
                <div className="flex flex-col gap-4">
                    <div className="flex items-center gap-3">
                        <div className="size-6 rounded-full bg-services-primary/20 flex items-center justify-center text-primary-dark">
                            <span className="material-symbols-outlined text-sm font-bold">check</span>
                        </div>
                        <h3 className="text-lg font-bold text-charcoal">Rapid Time-to-Market</h3>
                    </div>
                    <p className="text-slate-custom text-sm leading-relaxed pl-9">
                        Our agile methodology ensures rapid prototyping and quicker releases, allowing you to seize market opportunities faster.
                    </p>
                </div>
                {/* Col 2 */}
                <div className="flex flex-col gap-4">
                    <div className="flex items-center gap-3">
                        <div className="size-6 rounded-full bg-services-primary/20 flex items-center justify-center text-primary-dark">
                            <span className="material-symbols-outlined text-sm font-bold">check</span>
                        </div>
                        <h3 className="text-lg font-bold text-charcoal">Cost Efficiency</h3>
                    </div>
                    <p className="text-slate-custom text-sm leading-relaxed pl-9">
                        Optimize development costs with our flexible engagement models and efficient resource allocation strategies.
                    </p>
                </div>
                {/* Col 3 */}
                <div className="flex flex-col gap-4">
                    <div className="flex items-center gap-3">
                        <div className="size-6 rounded-full bg-services-primary/20 flex items-center justify-center text-primary-dark">
                            <span className="material-symbols-outlined text-sm font-bold">check</span>
                        </div>
                        <h3 className="text-lg font-bold text-charcoal">Future-Proof Tech</h3>
                    </div>
                    <p className="text-slate-custom text-sm leading-relaxed pl-9">
                        We build with longevity in mind, using scalable architectures that grow with your business needs.
                    </p>
                </div>
            </div>
        </section>
    );
}
