<?php $__env->startSection('content'); ?>


<section class="relative bg-[#0B1F2B] overflow-hidden">
    <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(circle,#ffffff 1px,transparent 1px);background-size:28px 28px;"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <span class="inline-block bg-[#0D7B8A]/30 text-[#F4A922] text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-widest border border-[#0D7B8A]/50 mb-4">
            <?php echo e(__('site.faqs_badge')); ?>

        </span>
        <h1 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-4">
            <?php echo e(__('site.faqs_heading')); ?>

        </h1>
        <p class="text-white/60 text-lg max-w-xl mx-auto">
            <?php echo e(__('site.faqs_sub')); ?>

        </p>
    </div>
    <div class="relative h-12 -mb-1">
        <svg viewBox="0 0 1440 48" fill="none" preserveAspectRatio="none" class="absolute bottom-0 w-full h-full">
            <path d="M0,48 C360,0 1080,0 1440,48 L1440,48 L0,48 Z" fill="#F5F7FA"/>
        </svg>
    </div>
</section>


<section class="bg-[#F5F7FA] py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

        <?php
        $categories = [
            'general'       => ['label' => 'General',        'emoji' => '❓', 'color' => 'gray'],
            'wholesale'     => ['label' => 'Wholesale',      'emoji' => '📦', 'color' => 'primary'],
            'nepal_export'  => ['label' => 'Nepal Export',   'emoji' => '🇳🇵', 'color' => 'accent'],
            'products'      => ['label' => 'Products',       'emoji' => '💊', 'color' => 'green'],
            'other'         => ['label' => 'Other',          'emoji' => '💬', 'color' => 'gray'],
        ];
        ?>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($faqs[$key]) && $faqs[$key]->count()): ?>
            <div class="mb-10 reveal-on-scroll opacity-0 translate-y-6 transition-all duration-500">

                
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl
                        <?php if($key === 'wholesale'): ?> bg-[#E6F4F6]
                        <?php elseif($key === 'nepal_export'): ?> bg-amber-50
                        <?php elseif($key === 'products'): ?> bg-green-50
                        <?php else: ?> bg-gray-100 <?php endif; ?>">
                        <?php echo e($cat['emoji']); ?>

                    </div>
                    <h2 class="text-xl font-bold text-[#1A2332]"><?php echo e($cat['label']); ?></h2>
                    <span class="ml-auto text-xs font-semibold
                        <?php if($key === 'wholesale'): ?> bg-[#E6F4F6] text-[#0D7B8A]
                        <?php elseif($key === 'nepal_export'): ?> bg-amber-50 text-[#C47E0A]
                        <?php elseif($key === 'products'): ?> bg-green-50 text-green-700
                        <?php else: ?> bg-gray-100 text-gray-500 <?php endif; ?>
                        px-3 py-1 rounded-full">
                        <?php echo e($faqs[$key]->count()); ?> <?php echo e($faqs[$key]->count() === 1 ? 'question' : 'questions'); ?>

                    </span>
                </div>

                
                <div class="space-y-3">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $faqs[$key]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $faq): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div data-faq-item class="bg-white rounded-2xl shadow-sm border border-[#E2E8F0] overflow-hidden">
                        <button data-faq-trigger
                                class="w-full text-left px-6 py-5 flex items-center justify-between gap-4 hover:bg-[#F5F7FA] transition-colors">
                            <span class="font-semibold text-[#1A2332] leading-snug">
                                <?php echo e($faq->getTranslation('question', $lang) ?: $faq->question); ?>

                            </span>
                            <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-[#E6F4F6] flex items-center justify-center transition-colors duration-200" data-faq-badge>
                                <svg data-faq-icon class="w-4 h-4 text-[#0D7B8A] transition-transform duration-200"
                                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </span>
                        </button>
                        <div data-faq-content class="hidden border-t border-[#E2E8F0]">
                            <div class="px-6 py-5 text-[#5A6A7A] leading-relaxed prose prose-sm max-w-none
                                        prose-a:text-[#0D7B8A] prose-strong:text-[#1A2332]
                                        prose-ul:text-[#5A6A7A] prose-ol:text-[#5A6A7A]">
                                <?php echo $faq->getTranslation('answer', $lang) ?: $faq->answer; ?>

                            </div>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </div>
            </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(collect($faqs)->every(fn($group) => !$group || $group->isEmpty())): ?>
        <div class="text-center py-20">
            <div class="w-20 h-20 bg-[#E6F4F6] rounded-full flex items-center justify-center mx-auto mb-5">
                <svg class="w-10 h-10 text-[#0D7B8A]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-[#1A2332] mb-2">No FAQs yet</h3>
            <p class="text-[#5A6A7A]">Check back soon or contact us directly with your question.</p>
        </div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        
        <div class="mt-16 bg-gradient-to-br from-[#0D7B8A] to-[#0A5C67] rounded-3xl p-10 text-center text-white">
            <div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-5">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                </svg>
            </div>
            <h3 class="text-2xl font-bold mb-2"><?php echo e(__('site.faqs_still_question')); ?></h3>
            <p class="text-white/70 mb-8 max-w-md mx-auto">
                <?php echo e(__('site.faqs_still_sub')); ?>

            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="<?php echo e(lang_url('/contact')); ?>"
                   class="inline-block bg-[#F4A922] text-[#1A2332] font-bold px-8 py-3 rounded-xl hover:bg-[#C47E0A] hover:text-white transition-colors">
                    <?php echo e(__('site.btn_contact_us')); ?>

                </a>
                <a href="<?php echo e(whatsapp_url()); ?>" target="_blank" rel="noopener"
                   class="inline-block bg-white/15 border border-white/30 text-white font-bold px-8 py-3 rounded-xl hover:bg-white/25 transition-colors">
                    <?php echo e(__('site.btn_whatsapp')); ?>

                </a>
            </div>
        </div>

    </div>
</section>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
// ─── FAQ Accordion ───────────────────────────────────────────────
document.querySelectorAll('[data-faq-trigger]').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var item    = btn.closest('[data-faq-item]');
        var content = item.querySelector('[data-faq-content]');
        var icon    = item.querySelector('[data-faq-icon]');
        var badge   = item.querySelector('[data-faq-badge]');
        var isOpen  = !content.classList.contains('hidden');

        // Close all open items
        document.querySelectorAll('[data-faq-content]').forEach(function(el) {
            el.classList.add('hidden');
        });
        document.querySelectorAll('[data-faq-icon]').forEach(function(el) {
            el.style.transform = 'rotate(0deg)';
        });
        document.querySelectorAll('[data-faq-badge]').forEach(function(el) {
            el.classList.remove('bg-[#0D7B8A]');
            el.classList.add('bg-[#E6F4F6]');
        });
        document.querySelectorAll('[data-faq-trigger]').forEach(function(el) {
            el.classList.remove('bg-[#F5F7FA]');
        });

        // Open this item if it was closed
        if (!isOpen) {
            content.classList.remove('hidden');
            icon.style.transform = 'rotate(180deg)';
            badge.classList.remove('bg-[#E6F4F6]');
            badge.classList.add('bg-[#0D7B8A]');
            icon.classList.remove('text-[#0D7B8A]');
            icon.classList.add('text-white');
        }
    });
});

// ─── Scroll reveal ────────────────────────────────────────────────
(function() {
    var els = document.querySelectorAll('.reveal-on-scroll');
    if (!els.length) return;
    var io = new IntersectionObserver(function(entries) {
        entries.forEach(function(e) {
            if (e.isIntersecting) {
                e.target.classList.remove('opacity-0', 'translate-y-6');
                io.unobserve(e.target);
            }
        });
    }, { threshold: 0.1 });
    els.forEach(function(el) { io.observe(el); });
})();
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/stpnp/chandrasons.com/resources/views/pages/faqs.blade.php ENDPATH**/ ?>