export default function StrategicThinking() {
    return (
        <section className="py-28 section-dark-surface relative overflow-hidden">
            {/* Subtle glow */}
            <div className="glow-orb w-72 h-72 -top-20 -left-20 opacity-20" />
            <div className="glow-orb w-48 h-48 bottom-0 right-10 opacity-15" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative">
                <div className="text-center mb-14 gsap-fade-up">
                    <span className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3 block">Why Choose Us</span>
                    <h2 className="text-3xl md:text-5xl font-bold text-text-light">
                        Our <span className="gradient-text">Approach</span>
                    </h2>
                </div>
                <div className="grid lg:grid-cols-3 gap-8 gsap-stagger">
                    <div className="card-glass-dark p-8 rounded-2xl card-hover-lift group flex flex-col gap-4">
                        <div className="size-14 bg-primary/15 rounded-xl flex items-center justify-center text-primary-light group-hover:bg-primary group-hover:text-white transition-colors duration-300 shadow-sm">
                            <span className="material-symbols-outlined text-3xl">psychology</span>
                        </div>
                        <h3 className="text-2xl font-bold text-text-light">Strategic Thinking</h3>
                        <p className="text-text-light-muted leading-relaxed">We don&apos;t just build; we plan. Every project starts with a deep dive into your business goals.</p>
                        <ul className="space-y-3 mt-2">
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Market Analysis</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Competitor Research</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Roadmap Planning</li>
                        </ul>
                    </div>
                    <div className="card-glass-dark p-8 rounded-2xl card-hover-lift group flex flex-col gap-4">
                        <div className="size-14 bg-primary/15 rounded-xl flex items-center justify-center text-primary-light group-hover:bg-primary group-hover:text-white transition-colors duration-300 shadow-sm">
                            <span className="material-symbols-outlined text-3xl">construction</span>
                        </div>
                        <h3 className="text-2xl font-bold text-text-light">Technical Excellence</h3>
                        <p className="text-text-light-muted leading-relaxed">Our team stays ahead of the curve, mastering the latest technologies to give you an edge.</p>
                        <ul className="space-y-3 mt-2">
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Clean Code</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Performance Optimization</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Secure Architecture</li>
                        </ul>
                    </div>
                    <div className="card-glass-dark p-8 rounded-2xl card-hover-lift group flex flex-col gap-4">
                        <div className="size-14 bg-primary/15 rounded-xl flex items-center justify-center text-primary-light group-hover:bg-primary group-hover:text-white transition-colors duration-300 shadow-sm">
                            <span className="material-symbols-outlined text-3xl">handshake</span>
                        </div>
                        <h3 className="text-2xl font-bold text-text-light">Dedicated Partnership</h3>
                        <p className="text-text-light-muted leading-relaxed">We view ourselves as an extension of your team, committed to your long-term success.</p>
                        <ul className="space-y-3 mt-2">
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Ongoing Support</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Transparent Communication</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">radio_button_checked</span> Goal Alignment</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    );
}
