export default function ServicesDetailTechStack() {
    return (
        <section className="bg-white py-20 px-4 md:px-10 lg:px-40 border-y border-neutral-light">
            <div className="max-w-[1200px] w-full mx-auto">
                <h2 className="text-2xl font-bold text-charcoal mb-10 text-center">Technology Stack</h2>
                <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-items-center opacity-80">
                    {/* Tech 1 */}
                    <div className="flex flex-col items-center gap-2 group cursor-pointer">
                        <div className="h-12 w-12 bg-neutral-100 rounded-lg flex items-center justify-center text-slate-400 group-hover:text-services-primary group-hover:bg-services-primary/10 transition-colors">
                            <span className="material-symbols-outlined text-3xl">html</span>
                        </div>
                        <span className="text-xs font-bold text-slate-500 group-hover:text-charcoal transition-colors">HTML5</span>
                    </div>
                    {/* Tech 2 */}
                    <div className="flex flex-col items-center gap-2 group cursor-pointer">
                        <div className="h-12 w-12 bg-neutral-100 rounded-lg flex items-center justify-center text-slate-400 group-hover:text-services-primary group-hover:bg-services-primary/10 transition-colors">
                            <span className="material-symbols-outlined text-3xl">css</span>
                        </div>
                        <span className="text-xs font-bold text-slate-500 group-hover:text-charcoal transition-colors">CSS3</span>
                    </div>
                    {/* Tech 3 */}
                    <div className="flex flex-col items-center gap-2 group cursor-pointer">
                        <div className="h-12 w-12 bg-neutral-100 rounded-lg flex items-center justify-center text-slate-400 group-hover:text-services-primary group-hover:bg-services-primary/10 transition-colors">
                            <span className="material-symbols-outlined text-3xl">javascript</span>
                        </div>
                        <span className="text-xs font-bold text-slate-500 group-hover:text-charcoal transition-colors">JavaScript</span>
                    </div>
                    {/* Tech 4 */}
                    <div className="flex flex-col items-center gap-2 group cursor-pointer">
                        <div className="h-12 w-12 bg-neutral-100 rounded-lg flex items-center justify-center text-slate-400 group-hover:text-services-primary group-hover:bg-services-primary/10 transition-colors">
                            <span className="material-symbols-outlined text-3xl">php</span>
                        </div>
                        <span className="text-xs font-bold text-slate-500 group-hover:text-charcoal transition-colors">PHP</span>
                    </div>
                    {/* Tech 5 */}
                    <div className="flex flex-col items-center gap-2 group cursor-pointer">
                        <div className="h-12 w-12 bg-neutral-100 rounded-lg flex items-center justify-center text-slate-400 group-hover:text-services-primary group-hover:bg-services-primary/10 transition-colors">
                            <span className="material-symbols-outlined text-3xl">database</span>
                        </div>
                        <span className="text-xs font-bold text-slate-500 group-hover:text-charcoal transition-colors">SQL</span>
                    </div>
                    {/* Tech 6 */}
                    <div className="flex flex-col items-center gap-2 group cursor-pointer">
                        <div className="h-12 w-12 bg-neutral-100 rounded-lg flex items-center justify-center text-slate-400 group-hover:text-services-primary group-hover:bg-services-primary/10 transition-colors">
                            <span className="material-symbols-outlined text-3xl">cloud</span>
                        </div>
                        <span className="text-xs font-bold text-slate-500 group-hover:text-charcoal transition-colors">Cloud</span>
                    </div>
                </div>
            </div>
        </section>
    );
}
