import Image from "next/image";

export default function AboutLeaders() {
    return (
        <section className="py-24 section-dark relative overflow-hidden">
            {/* Subtle glow */}
            <div className="glow-orb w-64 h-64 top-0 right-0 opacity-30" />

            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-16">
                    <h2 className="text-3xl lg:text-4xl font-black text-text-light mb-4">Meet Our Leaders</h2>
                    <p className="text-text-light-muted max-w-2xl mx-auto">The talented individuals driving our vision forward.</p>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <div className="group relative bg-dark-surface rounded-xl overflow-hidden cursor-pointer border border-border-dark hover:border-primary/30 transition-colors duration-300">
                        <div className="aspect-[3/4] overflow-hidden rounded-t-xl bg-dark-card mb-4 relative">
                            <Image
                                src="/images/team/sarah-jenkins.png"
                                alt="Sarah Jenkins, CEO of Aasi Tech, smiling professionally"
                                fill
                                className="object-cover filter grayscale group-hover:grayscale-0 transition-all duration-500 transform group-hover:scale-105"
                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                            />
                            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-3 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
                                <a className="w-8 h-8 rounded-full bg-dark-surface text-primary-light hover:bg-primary hover:text-white flex items-center justify-center shadow-lg transition-colors" href="#">
                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
                                </a>
                                <a className="w-8 h-8 rounded-full bg-dark-surface text-primary-light hover:bg-primary hover:text-white flex items-center justify-center shadow-lg transition-colors" href="#">
                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
                                </a>
                            </div>
                        </div>
                        <div className="px-4 pb-4 border-b-2 border-transparent group-hover:border-primary-light transition-colors duration-300">
                            <h3 className="text-xl font-bold text-text-light">Sarah Jenkins</h3>
                            <p className="text-primary-light font-medium text-sm mt-1">CEO & Founder</p>
                        </div>
                    </div>
                    <div className="group relative bg-dark-surface rounded-xl overflow-hidden cursor-pointer border border-border-dark hover:border-primary/30 transition-colors duration-300">
                        <div className="aspect-[3/4] overflow-hidden rounded-t-xl bg-dark-card mb-4 relative">
                            <Image
                                src="/images/team/david-chen.png"
                                alt="David Chen, CTO, looking focused and professional"
                                fill
                                className="object-cover filter grayscale group-hover:grayscale-0 transition-all duration-500 transform group-hover:scale-105"
                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                            />
                            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-3 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
                                <a className="w-8 h-8 rounded-full bg-dark-surface text-primary-light hover:bg-primary hover:text-white flex items-center justify-center shadow-lg transition-colors" href="#">
                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
                                </a>
                            </div>
                        </div>
                        <div className="px-4 pb-4 border-b-2 border-transparent group-hover:border-primary-light transition-colors duration-300">
                            <h3 className="text-xl font-bold text-text-light">David Chen</h3>
                            <p className="text-primary-light font-medium text-sm mt-1">CTO</p>
                        </div>
                    </div>
                    <div className="group relative bg-dark-surface rounded-xl overflow-hidden cursor-pointer border border-border-dark hover:border-primary/30 transition-colors duration-300">
                        <div className="aspect-[3/4] overflow-hidden rounded-t-xl bg-dark-card mb-4 relative">
                            <Image
                                src="/images/team/maria-rodriguez.png"
                                alt="Maria Rodriguez, Head of Design, smiling warm and creatively"
                                fill
                                className="object-cover filter grayscale group-hover:grayscale-0 transition-all duration-500 transform group-hover:scale-105"
                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                            />
                            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-3 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
                                <a className="w-8 h-8 rounded-full bg-dark-surface text-primary-light hover:bg-primary hover:text-white flex items-center justify-center shadow-lg transition-colors" href="#">
                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
                                </a>
                            </div>
                        </div>
                        <div className="px-4 pb-4 border-b-2 border-transparent group-hover:border-primary-light transition-colors duration-300">
                            <h3 className="text-xl font-bold text-text-light">Maria Rodriguez</h3>
                            <p className="text-primary-light font-medium text-sm mt-1">Head of Design</p>
                        </div>
                    </div>
                    <div className="group relative bg-dark-surface rounded-xl overflow-hidden cursor-pointer border border-border-dark hover:border-primary/30 transition-colors duration-300">
                        <div className="aspect-[3/4] overflow-hidden rounded-t-xl bg-dark-card mb-4 relative">
                            <Image
                                src="/images/team/james-wilson.png"
                                alt="James Wilson, Lead Developer, confident and approachable"
                                fill
                                className="object-cover filter grayscale group-hover:grayscale-0 transition-all duration-500 transform group-hover:scale-105"
                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                            />
                            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-3 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
                                <a className="w-8 h-8 rounded-full bg-dark-surface text-primary-light hover:bg-primary hover:text-white flex items-center justify-center shadow-lg transition-colors" href="#">
                                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
                                </a>
                            </div>
                        </div>
                        <div className="px-4 pb-4 border-b-2 border-transparent group-hover:border-primary-light transition-colors duration-300">
                            <h3 className="text-xl font-bold text-text-light">James Wilson</h3>
                            <p className="text-primary-light font-medium text-sm mt-1">Lead Developer</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
