@extends('layouts.app')
@section('content')
{{-- ═══ HERO ═══ --}}
<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">
{{ __('site.faqs_badge') }}
</span>
<h1 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-4">
{{ __('site.faqs_heading') }}
</h1>
<p class="text-white/60 text-lg max-w-xl mx-auto">
{{ __('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>
{{-- ═══ CATEGORY TABS + ACCORDION ═══ --}}
<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'],
];
@endphp
@foreach($categories as $key => $cat)
@if(isset($faqs[$key]) && $faqs[$key]->count())
<div class="mb-10 reveal-on-scroll opacity-0 translate-y-6 transition-all duration-500">
{{-- category heading --}}
<div class="flex items-center gap-3 mb-5">
<div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl
@if($key === 'wholesale') bg-[#E6F4F6]
@elseif($key === 'nepal_export') bg-amber-50
@elseif($key === 'products') bg-green-50
@else bg-gray-100 @endif">
{{ $cat['emoji'] }}
</div>
<h2 class="text-xl font-bold text-[#1A2332]">{{ $cat['label'] }}</h2>
<span class="ml-auto text-xs font-semibold
@if($key === 'wholesale') bg-[#E6F4F6] text-[#0D7B8A]
@elseif($key === 'nepal_export') bg-amber-50 text-[#C47E0A]
@elseif($key === 'products') bg-green-50 text-green-700
@else bg-gray-100 text-gray-500 @endif
px-3 py-1 rounded-full">
{{ $faqs[$key]->count() }} {{ $faqs[$key]->count() === 1 ? 'question' : 'questions' }}
</span>
</div>
{{-- accordion items --}}
<div class="space-y-3">
@foreach($faqs[$key] as $i => $faq)
<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">
{{ $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]">
{!! $faq->getTranslation('answer', $lang) ?: $faq->answer !!}
</div>
</div>
</div>
@endforeach
</div>
</div>
@endif
@endforeach
{{-- empty state --}}
@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>
@endif
{{-- ─── Still have questions CTA ─── --}}
<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">{{ __('site.faqs_still_question') }}</h3>
<p class="text-white/70 mb-8 max-w-md mx-auto">
{{ __('site.faqs_still_sub') }}
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="{{ 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">
{{ __('site.btn_contact_us') }}
</a>
<a href="{{ 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">
{{ __('site.btn_whatsapp') }}
</a>
</div>
</div>
</div>
</section>
@endsection
@push('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>
@endpush