@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen">

    {{-- Hero --}}
    <div class="relative bg-gradient-to-br from-emerald-700 via-emerald-600 to-emerald-500 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute -top-20 -right-20 w-72 h-72 bg-white rounded-full blur-3xl"></div>
            <div class="absolute -bottom-20 -left-20 w-96 h-96 bg-emerald-300 rounded-full blur-3xl"></div>
        </div>
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 relative">
            <div class="max-w-2xl">
                <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-white/15 backdrop-blur-sm rounded-full text-emerald-100 text-xs font-medium mb-5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
                    FAQ
                </div>
                <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">Frequently Asked Questions</h1>
                <p class="text-emerald-100 text-base sm:text-lg mt-3 max-w-xl">Find answers to common questions about our products and services.</p>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 60" fill="none" class="w-full h-auto">
                <path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" fill="#f9fafb"/>
            </svg>
        </div>
    </div>

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
        <div class="max-w-3xl mx-auto">

            {{-- Shopping & Orders --}}
            <div class="mb-10">
                <h2 class="text-lg sm:text-xl font-bold text-gray-900 flex items-center gap-2 mb-5">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
                    Shopping &amp; Orders
                </h2>
                <div class="space-y-3">
                    <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                        <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                            <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">How do I place an order?</span>
                            <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" 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"/></svg>
                        </button>
                        <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                            <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                                Browse our products, add items to your cart, and proceed to checkout. You'll need to create an account or sign in, provide shipping details, and complete payment to place your order.
                            </div>
                        </div>
                    </div>
                    <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                        <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                            <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">What payment methods do you accept?</span>
                            <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" 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"/></svg>
                        </button>
                        <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                            <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                                We accept major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Shipping & Delivery --}}
            <div class="mb-10">
                <h2 class="text-lg sm:text-xl font-bold text-gray-900 flex items-center gap-2 mb-5">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>
                    Shipping &amp; Delivery
                </h2>
                <div class="space-y-3">
                    <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                        <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                            <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">How long will my delivery take?</span>
                            <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" 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"/></svg>
                        </button>
                        <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                            <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                                Standard delivery takes 3-5 business days. Express shipping options are available at checkout for faster delivery.
                            </div>
                        </div>
                    </div>
                    <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                        <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                            <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">Do you ship internationally?</span>
                            <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" 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"/></svg>
                        </button>
                        <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                            <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                                Yes, we ship to most countries worldwide. Shipping costs and delivery times vary by location.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Returns & Refunds --}}
            <div class="mb-10">
                <h2 class="text-lg sm:text-xl font-bold text-gray-900 flex items-center gap-2 mb-5">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    Returns &amp; Refunds
                </h2>
                <div class="space-y-3">
                    <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                        <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                            <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">What is your return policy?</span>
                            <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" 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"/></svg>
                        </button>
                        <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                            <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                                We offer a 30-day return policy. Items must be unused and in original packaging. Contact our customer service to initiate a return.
                            </div>
                        </div>
                    </div>
                    <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                        <button onclick="toggleFaq(this)" class="w-full flex items-center justify-between px-5 sm:px-6 py-4 text-left transition-colors hover:bg-emerald-50/50">
                            <span class="text-sm sm:text-base font-medium text-gray-800 pr-4">How long do refunds take?</span>
                            <svg class="w-4 h-4 text-gray-400 shrink-0 transition-transform duration-200 faq-chevron" 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"/></svg>
                        </button>
                        <div class="faq-body max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
                            <div class="px-5 sm:px-6 pb-4 text-sm text-gray-600 leading-relaxed">
                                Refunds are processed within 3-5 business days after we receive your return. The amount will be credited back to your original payment method.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CTA --}}
            <div class="bg-gradient-to-br from-emerald-600 to-emerald-700 rounded-2xl p-6 sm:p-8 text-center shadow-sm">
                <div class="w-12 h-12 bg-white/15 rounded-xl flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
                </div>
                <h3 class="text-lg font-semibold text-white">Still have questions?</h3>
                <p class="text-emerald-100 text-sm mt-1 max-w-md mx-auto">We're here to help. Reach out to our support team and we'll get back to you promptly.</p>
                <a href="{{ route('contact') }}" class="inline-flex items-center gap-2 mt-4 px-6 py-3 bg-white text-emerald-700 text-sm font-semibold rounded-xl hover:bg-emerald-50 transition-all shadow-sm">
                    Contact Us
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
            </div>

        </div>
    </div>

</div>

<script>
function toggleFaq(btn) {
    var item = btn.closest('.faq-item');
    var body = item.querySelector('.faq-body');
    var chevron = item.querySelector('.faq-chevron');
    var isOpen = body.style.maxHeight && body.style.maxHeight !== '0px';

    document.querySelectorAll('.faq-item').forEach(function(el) {
        if (el !== item) {
            el.querySelector('.faq-body').style.maxHeight = '0';
            el.querySelector('.faq-chevron').classList.remove('rotate-180');
        }
    });

    if (isOpen) {
        body.style.maxHeight = '0';
        chevron.classList.remove('rotate-180');
    } else {
        body.style.maxHeight = body.scrollHeight + 'px';
        chevron.classList.add('rotate-180');
    }
}
</script>
@endsection