Interactive Curriculum Accordion Section

<section class="md:px-6 pt-12 pr-4 pb-12 pl-4">
        <div class="bg-[#18181B] text-white rounded-[2.5rem] p-8 lg:p-20 relative overflow-hidden">
            <div class="max-w-6xl mx-auto relative z-10">
                <div class="flex flex-col md:flex-row justify-between items-start mb-16">
                    <div class="max-w-xl">
                        <span class="text-[#9EF0A0] text-sm font-medium tracking-wide uppercase mb-4 block">— 12 Week Intensive</span>
                        <h2 class="text-4xl lg:text-5xl text-white font-medium tracking-tight">Curriculum Excellence.</h2>
                    </div>
                    <div class="mt-6 md:mt-0 max-w-xs text-[#A1A1AA] text-lg font-light">
                        Our curriculum evolves with the industry. Master the tools top tech companies use today.
                        <a href="#" class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 bg-white text-[#18181B] rounded-full text-sm font-medium hover:bg-[#E4E9E5]">
                            Download Guide
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:download-square-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".5" class=""></path><path fill="currentColor" d="M12.75 7a.75.75 0 0 0-1.5 0v5.19l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72zM8 16.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5z" class=""></path></svg>
                        </a>
                    </div>
                </div>

                <!-- Interactive Accordion List -->
                <div class="flex flex-col border-t border-white/10" id="curriculum-list">
                    <!-- Javascript logic handles clicking -->
                    
                    <!-- Item 1 -->
                    <div class="group border-b border-white/10 transition-all duration-300" onclick="toggleCurriculum(0)">
                        <div class="py-8 flex flex-col cursor-pointer">
                            <div class="flex justify-between items-center">
                                <h3 class="text-2xl text-white font-medium tracking-tight group-hover:text-[#9EF0A0] transition-colors" id="title-0">Foundations of Computer Science</h3>
                                <div class="rounded-full bg-white/5 p-3 group-hover:bg-[#9EF0A0] group-hover:text-[#18181B] transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" id="icon-0" data-icon="solar:add-circle-bold-duotone" class="iconify text-2xl transform transition-transform duration-300 iconify--solar"><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path><path fill="currentColor" d="M12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z" class=""></path></svg>
                                </div>
                            </div>
                            <div class="h-0 overflow-hidden transition-all duration-500 ease-in-out opacity-0" id="desc-0">
                                <p class="text-[#A1A1AA] max-w-2xl text-lg font-light pt-4">
                                    Deep dive into algorithms, data structures, and big O notation. Learn how computers actually work before writing your first line of production code.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Item 2 (Active by Default) -->
                    <div class="group border-b border-white/10 transition-all duration-300" onclick="toggleCurriculum(1)">
                        <div class="py-8 flex flex-col cursor-pointer">
                            <div class="flex justify-between items-center">
                                <h3 class="text-2xl text-[#9EF0A0] font-medium tracking-tight" id="title-1">Full Stack Development</h3>
                                <div class="rounded-full bg-[#9EF0A0] text-[#18181B] p-3 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" id="icon-1" data-icon="solar:add-circle-bold-duotone" class="iconify text-2xl transform rotate-45 iconify--solar"><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path><path fill="currentColor" d="M12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z" class=""></path></svg>
                                </div>
                            </div>
                            <div class="h-auto overflow-hidden transition-all duration-500 ease-in-out opacity-100" id="desc-1">
                                <p class="text-[#A1A1AA] max-w-2xl text-lg font-light pt-4">
                                    Build dynamic applications using React, Node.js, PostgreSQL, and Modern Cloud Infrastructure. Create real-world projects that scale.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Item 3 -->
                    <div class="group border-b border-white/10 transition-all duration-300" onclick="toggleCurriculum(2)">
                        <div class="py-8 flex flex-col cursor-pointer">
                            <div class="flex justify-between items-center">
                                <h3 class="text-2xl text-white font-medium tracking-tight group-hover:text-[#9EF0A0] transition-colors" id="title-2">System Design &amp; Architecture</h3>
                                <div class="rounded-full bg-white/5 p-3 group-hover:bg-[#9EF0A0] group-hover:text-[#18181B] transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" id="icon-2" data-icon="solar:add-circle-bold-duotone" class="iconify text-2xl transform transition-transform duration-300 iconify--solar"><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path><path fill="currentColor" d="M12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z" class=""></path></svg>
                                </div>
                            </div>
                            <div class="h-0 overflow-hidden transition-all duration-500 ease-in-out opacity-0" id="desc-2">
                                <p class="text-[#A1A1AA] max-w-2xl text-lg font-light pt-4">
                                    Understand microservices, load balancing, and database shading. Design systems that can handle millions of concurrent users.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Item 4 -->
                    <div class="group border-b border-white/10 transition-all duration-300" onclick="toggleCurriculum(3)">
                        <div class="py-8 flex flex-col cursor-pointer">
                            <div class="flex justify-between items-center">
                                <h3 class="text-2xl text-white font-medium tracking-tight group-hover:text-[#9EF0A0] transition-colors" id="title-3">Career Strategy &amp; Negotiation</h3>
                                <div class="rounded-full bg-white/5 p-3 group-hover:bg-[#9EF0A0] group-hover:text-[#18181B] transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" id="icon-3" data-icon="solar:add-circle-bold-duotone" class="iconify text-2xl transform transition-transform duration-300 iconify--solar"><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path><path fill="currentColor" d="M12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25z" class=""></path></svg>
                                </div>
                            </div>
                            <div class="h-0 overflow-hidden transition-all duration-500 ease-in-out opacity-0" id="desc-3">
                                <p class="text-[#A1A1AA] max-w-2xl text-lg font-light pt-4">
                                    Technical skills get you the interview; soft skills get you the job. We teach you how to negotiate your salary and navigate the hiring process.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>