export default function AboutCoreValues() {
    return (
        <section className="py-24 bg-white relative">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center max-w-3xl mx-auto mb-16">
                    <h2 className="text-3xl lg:text-4xl font-black text-text-main mb-4 tracking-tight">Our Core Values</h2>
                    <p className="text-text-secondary text-lg">The principles that guide our decisions and define our culture.</p>
                </div>
                <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <div className="group flex flex-col items-center text-center p-6 rounded-2xl hover:bg-background-subtle transition-colors duration-300">
                        <div className="w-16 h-16 flex items-center justify-center rounded-2xl bg-green-50 text-green-600 mb-6 group-hover:scale-110 transition-transform duration-300">
                            <span className="material-symbols-outlined text-3xl">verified_user</span>
                        </div>
                        <h3 className="text-xl font-bold text-text-main mb-3">Integrity First</h3>
                        <ul className="text-sm text-text-secondary space-y-2">
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Transparent dealings
                            </li>
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Honest communication
                            </li>
                        </ul>
                    </div>
                    <div className="group flex flex-col items-center text-center p-6 rounded-2xl hover:bg-background-subtle transition-colors duration-300">
                        <div className="w-16 h-16 flex items-center justify-center rounded-2xl bg-green-50 text-green-600 mb-6 group-hover:scale-110 transition-transform duration-300">
                            <span className="material-symbols-outlined text-3xl">lightbulb</span>
                        </div>
                        <h3 className="text-xl font-bold text-text-main mb-3">Innovation</h3>
                        <ul className="text-sm text-text-secondary space-y-2">
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Creative solutions
                            </li>
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Forward thinking
                            </li>
                        </ul>
                    </div>
                    <div className="group flex flex-col items-center text-center p-6 rounded-2xl hover:bg-background-subtle transition-colors duration-300">
                        <div className="w-16 h-16 flex items-center justify-center rounded-2xl bg-green-50 text-green-600 mb-6 group-hover:scale-110 transition-transform duration-300">
                            <span className="material-symbols-outlined text-3xl">groups</span>
                        </div>
                        <h3 className="text-xl font-bold text-text-main mb-3">Collaboration</h3>
                        <ul className="text-sm text-text-secondary space-y-2">
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Team synergy
                            </li>
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Client partnership
                            </li>
                        </ul>
                    </div>
                    <div className="group flex flex-col items-center text-center p-6 rounded-2xl hover:bg-background-subtle transition-colors duration-300">
                        <div className="w-16 h-16 flex items-center justify-center rounded-2xl bg-green-50 text-green-600 mb-6 group-hover:scale-110 transition-transform duration-300">
                            <span className="material-symbols-outlined text-3xl">trophy</span>
                        </div>
                        <h3 className="text-xl font-bold text-text-main mb-3">Excellence</h3>
                        <ul className="text-sm text-text-secondary space-y-2">
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Quality delivery
                            </li>
                            <li className="flex items-center justify-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
                                Continuous improvement
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    );
}
