{{-- <section id="faq" class="py-20 bg-gradient-to-br from-blue-50 via-white to-yellow-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header Section -->
        <div class="text-center mb-12">
            <div class="inline-block">
                <div class="flex justify-center mb-4">
                    <div class="w-16 h-1 bg-yellow-400 rounded-full"></div>
                </div>
                <span class="text-yellow-600 font-semibold text-sm uppercase tracking-wider">Pertanyaan Umum</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-bold mt-4 mb-4 bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
                Frequently Asked Questions
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                Temukan jawaban atas pertanyaan yang sering diajukan tentang homeschooling di ABA School
            </p>
        </div>

        <!-- FAQ Items (5 items saja) -->
        <div class="space-y-4">
            
            <!-- FAQ 1 -->
            <div class="faq-item bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                <button onclick="toggleFAQ(0)" class="faq-question w-full text-left p-5 md:p-6 font-semibold flex justify-between items-center group">
                    <span class="text-lg md:text-xl text-gray-800 group-hover:text-blue-700 transition-colors duration-300">
                        📖 Apa itu homeschooling?
                    </span>
                    <div class="faq-icon w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200 transition-all duration-300">
                        <svg class="w-5 h-5 text-blue-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </button>
                <div class="faq-content hidden px-5 pb-5 md:px-6 md:pb-6">
                    <div class="border-t-2 border-yellow-400 pt-4">
                        <p class="text-gray-600 leading-relaxed">
                            Homeschooling adalah sistem pendidikan formal yang dilakukan di rumah dengan kurikulum yang terstandarisasi, 
                            dimana orang tua berperan aktif dalam proses pembelajaran bersama tutor profesional. Di ABA School, 
                            kami menyediakan bimbingan dan materi pembelajaran yang lengkap sesuai dengan jenjang pendidikan.
                        </p>
                        <div class="mt-3 flex flex-wrap gap-2">
                            <span class="inline-block bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full">Fleksibel</span>
                            <span class="inline-block bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full">Personal</span>
                            <span class="inline-block bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full">Terakreditasi</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- FAQ 2 -->
            <div class="faq-item bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                <button onclick="toggleFAQ(1)" class="faq-question w-full text-left p-5 md:p-6 font-semibold flex justify-between items-center group">
                    <span class="text-lg md:text-xl text-gray-800 group-hover:text-blue-700 transition-colors duration-300">
                        📝 Bagaimana cara mendaftar di ABA School?
                    </span>
                    <div class="faq-icon w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200 transition-all duration-300">
                        <svg class="w-5 h-5 text-blue-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </button>
                <div class="faq-content hidden px-5 pb-5 md:px-6 md:pb-6">
                    <div class="border-t-2 border-yellow-400 pt-4">
                        <p class="text-gray-600 leading-relaxed mb-3">
                            Pendaftaran sangat mudah! Ikuti langkah-langkah berikut:
                        </p>
                        <ol class="list-decimal list-inside space-y-2 text-gray-600 ml-2">
                            <li>Klik tombol "Daftar Sekarang" di halaman ini</li>
                            <li>Isi formulir pendaftaran online</li>
                            <li>Tim kami akan menghubungi untuk jadwal konsultasi</li>
                            <li>Lakukan pembayaran biaya pendaftaran</li>
                            <li>Mulai belajar bersama ABA School!</li>
                        </ol>
                        <div class="mt-4">
                            <a href="#contact" class="inline-block bg-yellow-400 hover:bg-yellow-300 text-blue-900 font-semibold px-4 py-2 rounded-full text-sm transition-all duration-300">
                                Daftar Sekarang →
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- FAQ 3 -->
            <div class="faq-item bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                <button onclick="toggleFAQ(2)" class="faq-question w-full text-left p-5 md:p-6 font-semibold flex justify-between items-center group">
                    <span class="text-lg md:text-xl text-gray-800 group-hover:text-blue-700 transition-colors duration-300">
                        🎓 Apakah ijazah homeschooling diakui?
                    </span>
                    <div class="faq-icon w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200 transition-all duration-300">
                        <svg class="w-5 h-5 text-blue-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </button>
                <div class="faq-content hidden px-5 pb-5 md:px-6 md:pb-6">
                    <div class="border-t-2 border-yellow-400 pt-4">
                        <p class="text-gray-600 leading-relaxed">
                            Ya, ijazah homeschooling dari ABA School diakui secara resmi dan setara dengan ijazah sekolah formal. 
                            Kami terakreditasi oleh lembaga yang berwenang dan menggunakan kurikulum nasional yang telah disetujui. 
                            Lulusan kami dapat melanjutkan ke jenjang pendidikan yang lebih tinggi atau memasuki dunia kerja.
                        </p>
                        <div class="mt-3 p-3 bg-green-50 rounded-lg">
                            <p class="text-sm text-green-700">✓ Terakreditasi A</p>
                            <p class="text-sm text-green-700">✓ Diakui Kemendikbud</p>
                            <p class="text-sm text-green-700">✓ Setara dengan sekolah formal</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- FAQ 4 -->
            <div class="faq-item bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                <button onclick="toggleFAQ(3)" class="faq-question w-full text-left p-5 md:p-6 font-semibold flex justify-between items-center group">
                    <span class="text-lg md:text-xl text-gray-800 group-hover:text-blue-700 transition-colors duration-300">
                        💰 Berapa biaya homeschooling di ABA School?
                    </span>
                    <div class="faq-icon w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200 transition-all duration-300">
                        <svg class="w-5 h-5 text-blue-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </button>
                <div class="faq-content hidden px-5 pb-5 md:px-6 md:pb-6">
                    <div class="border-t-2 border-yellow-400 pt-4">
                        <p class="text-gray-600 leading-relaxed">
                            Biaya homeschooling di ABA School sangat terjangkau dan dapat disesuaikan dengan program yang dipilih. 
                            Kami menawarkan beberapa paket pembelajaran dengan sistem pembayaran yang fleksibel (bulanan atau per semester).
                        </p>
                        <div class="mt-3 grid grid-cols-2 gap-3">
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <p class="text-xs text-gray-500">Paket SD</p>
                                <p class="text-lg font-bold text-blue-700">Mulai Rp 500K/bulan</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <p class="text-xs text-gray-500">Paket SMP</p>
                                <p class="text-lg font-bold text-blue-700">Mulai Rp 600K/bulan</p>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">*Hubungi kami untuk info promo dan diskon</p>
                    </div>
                </div>
            </div>

            <!-- FAQ 5 -->
            <div class="faq-item bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                <button onclick="toggleFAQ(4)" class="faq-question w-full text-left p-5 md:p-6 font-semibold flex justify-between items-center group">
                    <span class="text-lg md:text-xl text-gray-800 group-hover:text-blue-700 transition-colors duration-300">
                        👩‍🏫 Siapa yang akan mengajar anak saya?
                    </span>
                    <div class="faq-icon w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200 transition-all duration-300">
                        <svg class="w-5 h-5 text-blue-600 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </button>
                <div class="faq-content hidden px-5 pb-5 md:px-6 md:pb-6">
                    <div class="border-t-2 border-yellow-400 pt-4">
                        <p class="text-gray-600 leading-relaxed">
                            Anak Anda akan dibimbing oleh tutor-tutor profesional yang berpengalaman di bidangnya. 
                            Setiap tutor telah melalui proses seleksi ketat dan pelatihan khusus untuk homeschooling. 
                            Kami juga menyediakan pendampingan orang tua agar dapat terlibat aktif dalam proses pembelajaran.
                        </p>
                        <div class="mt-3 flex items-center gap-3">
                            <div class="flex -space-x-2">
                                <div class="w-8 h-8 bg-blue-500 rounded-full border-2 border-white flex items-center justify-center text-white text-xs">S</div>
                                <div class="w-8 h-8 bg-yellow-500 rounded-full border-2 border-white flex items-center justify-center text-white text-xs">R</div>
                                <div class="w-8 h-8 bg-blue-400 rounded-full border-2 border-white flex items-center justify-center text-white text-xs">A</div>
                            </div>
                            <p class="text-sm text-gray-500">+ 20 tutor profesional lainnya</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Still Have Questions -->
        <div class="mt-12 text-center bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-8 text-white">
            <h3 class="text-2xl font-bold mb-2">Masih punya pertanyaan?</h3>
            <p class="mb-4 opacity-90">Hubungi tim kami untuk konsultasi lebih lanjut</p>
            <div class="flex flex-wrap gap-4 justify-center">
                <a href="#contact" class="inline-block bg-yellow-400 hover:bg-yellow-300 text-blue-900 font-semibold px-6 py-2 rounded-full transition-all duration-300 shadow-md hover:shadow-lg">
                    📞 Hubungi Kami
                </a>
                <a href="tel:+628121496464" class="inline-block bg-white/20 hover:bg-white/30 text-white font-semibold px-6 py-2 rounded-full transition-all duration-300 backdrop-blur-sm">
                    💬 Chat WhatsApp
                </a>
            </div>
        </div>

    </div>
</section>

<script>
function toggleFAQ(index) {
    const faqContents = document.querySelectorAll('.faq-content');
    const faqIcons = document.querySelectorAll('.faq-icon svg');
    const faqItems = document.querySelectorAll('.faq-item');
    
    // Toggle current FAQ
    if (faqContents[index].classList.contains('hidden')) {
        // Close all other FAQs first
        faqContents.forEach((content, i) => {
            if (i !== index && !content.classList.contains('hidden')) {
                content.classList.add('hidden');
                faqIcons[i].style.transform = 'rotate(0deg)';
                faqItems[i].classList.remove('ring-2', 'ring-yellow-400');
            }
        });
        
        // Open current FAQ
        faqContents[index].classList.remove('hidden');
        faqIcons[index].style.transform = 'rotate(180deg)';
        faqItems[index].classList.add('ring-2', 'ring-yellow-400');
    } else {
        // Close current FAQ
        faqContents[index].classList.add('hidden');
        faqIcons[index].style.transform = 'rotate(0deg)';
        faqItems[index].classList.remove('ring-2', 'ring-yellow-400');
    }
}

// Optional: Open first FAQ by default (uncomment if desired)
// setTimeout(() => {
//     toggleFAQ(0);
// }, 500);
</script>

<style>
/* FAQ Item Animations */
.faq-item {
    transition: all 0.3s ease;
}

.faq-question svg {
    transition: transform 0.3s ease;
}

.faq-content {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover effects */
.faq-item:hover {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 640px) {
    .faq-question span {
        font-size: 1rem;
    }
}
</style> --}}