<?php
/**
 * FAQs Page
 * Path: faqs.php
 */
include_once 'header.php';

$faqs = get_faqs();
$site_phone = get_site_setting('site_phone');
?>

<section class="relative bg-gradient-to-r from-slate-950 to-blue-900 text-white py-14 md:py-20">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <nav class="text-xs text-sky-400 font-bold uppercase mb-3">
            <a href="index.php" class="hover:text-white">Home</a> <span class="mx-2">/</span> FAQs
        </nav>
        <h1 class="text-3xl md:text-5xl font-black uppercase">Frequently Asked Questions</h1>
        <div class="w-16 h-1 bg-secondary mx-auto mt-4"></div>
        <p class="text-gray-300 text-sm max-w-lg mx-auto mt-4">Elevator, Generator, Transformer ও Solar সম্পর্কিত সাধারণ প্রশ্নের উত্তর</p>
    </div>
</section>

<section class="py-16 md:py-24 bg-gray-50">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">

        <?php if (empty($faqs)): ?>
        <div class="text-center py-16 text-gray-400">
            <i class="fa-solid fa-circle-question text-4xl mb-4 block opacity-30"></i>
            <p>কোনো FAQ পাওয়া যায়নি।</p>
        </div>
        <?php else: ?>
        <div class="space-y-3" id="faq-list">
            <?php foreach ($faqs as $i => $faq): ?>
            <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                <button type="button" class="faq-btn w-full text-left p-5 md:p-6 flex justify-between items-center gap-4 focus:outline-none group"
                    data-target="faq-<?php echo $i; ?>" aria-expanded="false">
                    <span class="font-bold text-gray-900 text-sm md:text-base leading-snug pr-2 group-hover:text-primary transition-colors">
                        <?php echo htmlspecialchars($faq['question']); ?>
                    </span>
                    <span class="faq-icon w-9 h-9 rounded-full bg-gray-50 group-hover:bg-primary group-hover:text-white text-primary flex items-center justify-center flex-shrink-0 transition-all text-sm">
                        <i class="fa-solid fa-plus"></i>
                    </span>
                </button>
                <div id="faq-<?php echo $i; ?>" class="faq-panel hidden px-5 md:px-6 pb-5 md:pb-6 border-t border-gray-50">
                    <p class="text-sm text-gray-600 leading-relaxed pt-4"><?php echo htmlspecialchars($faq['answer']); ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <!-- Still have questions -->
        <div class="mt-12 bg-primary rounded-2xl p-8 text-white text-center space-y-4">
            <h3 class="text-xl font-black uppercase">Still Have Questions?</h3>
            <p class="text-gray-300 text-sm">আমাদের ইঞ্জিনিয়ারিং টিম সরাসরি সাহায্য করতে প্রস্তুত</p>
            <div class="flex flex-col sm:flex-row gap-3 justify-center pt-2">
                <a href="tel:<?php echo htmlspecialchars($site_phone); ?>" class="bg-white text-primary hover:bg-secondary hover:text-white px-6 py-3 rounded-xl font-bold text-sm transition-all">
                    <i class="fa-solid fa-phone mr-2"></i> Call Now
                </a>
                <a href="contact.php" class="border border-white/30 hover:bg-white/10 px-6 py-3 rounded-xl font-bold text-sm transition-all">Contact Us</a>
            </div>
        </div>
    </div>
</section>

<script>
document.querySelectorAll('.faq-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const panel = document.getElementById(btn.dataset.target);
        const icon  = btn.querySelector('.faq-icon');
        const isOpen = !panel.classList.contains('hidden');

        document.querySelectorAll('.faq-panel').forEach(p => p.classList.add('hidden'));
        document.querySelectorAll('.faq-icon').forEach(ic => {
            ic.innerHTML = '<i class="fa-solid fa-plus"></i>';
            ic.classList.remove('bg-primary', 'text-white');
            ic.classList.add('bg-gray-50', 'text-primary');
        });

        if (!isOpen) {
            panel.classList.remove('hidden');
            icon.innerHTML = '<i class="fa-solid fa-minus"></i>';
            icon.classList.add('bg-primary', 'text-white');
            icon.classList.remove('bg-gray-50', 'text-primary');
        }
    });
});
</script>

<?php include_once 'footer.php'; ?>
