{{-- This component demonstrates state management with Alpine.js for the tabbed interface --}}
<section id="experience" class="py-20 bg-light-card dark:bg-dark-card" x-data="{ activeTab: 'education' }">
    <div class="container mx-auto px-6">
        <!-- Tab Navigation -->
        <div class="flex flex-wrap justify-center border-b border-gray-200 dark:border-gray-700 mb-12">
            <button @click="activeTab = 'education'" :class="{ 'border-light-primary text-light-primary dark:border-dark-primary dark:text-dark-primary': activeTab === 'education' }" class="px-6 py-3 font-semibold border-b-2 border-transparent hover:text-light-primary dark:hover:text-dark-primary transition">
                Education
            </button>
            <button @click="activeTab = 'professional'" :class="{ 'border-light-primary text-light-primary dark:border-dark-primary dark:text-dark-primary': activeTab === 'professional' }" class="px-6 py-3 font-semibold border-b-2 border-transparent hover:text-light-primary dark:hover:text-dark-primary transition">
                Professional Skills
            </button>
            {{-- Add other tabs similarly --}}
        </div>

        <!-- Tab Content -->
        <div>
            <!-- Education Content -->
            <div x-show="activeTab === 'education'" x-transition>
                <h3 class="text-3xl font-bold text-center text-light-headings dark:text-dark-headings mb-8">Education Experience</h3>
                {{-- Add the education cards here --}}
            </div>

            <!-- Professional Skills Content -->
            <div x-show="activeTab === 'professional'" x-transition>
                <h3 class="text-3xl font-bold text-center text-light-headings dark:text-dark-headings mb-8">Professional Skills</h3>
                {{-- Add the skills content here --}}
            </div>
        </div>
    </div>
</section>