@extends('website.layouts.app')

@section('content')
    @include('website.components.header')

    <main class="pt-20">
        <section class="bg-teal-deep text-white py-16 md:py-24 relative overflow-hidden">
            <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:14px_14px]"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
                <h1 class="text-4xl sm:text-5xl md:text-6xl font-heading font-bold mb-4 md:mb-6">Help Center</h1>
                <p class="text-base sm:text-xl text-teal-100 max-w-3xl mx-auto leading-relaxed">Find answers to common questions and get the support you need.</p>
            </div>
        </section>

        <section class="py-16 md:py-24 bg-cream">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-12">
                    <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer">
                        <div class="w-14 h-14 bg-teal-deep/10 rounded-xl flex items-center justify-center mb-6 text-teal-deep">
                            <i data-lucide="user" class="w-7 h-7"></i>
                        </div>
                        <h3 class="text-xl font-heading font-bold text-teal-deep mb-3">Account & Membership</h3>
                        <p class="text-gray-600 mb-4">Learn about account setup, membership plans, and managing your profile.</p>
                        <span class="text-amber-gold font-medium">View Articles →</span>
                    </div>

                    <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer">
                        <div class="w-14 h-14 bg-teal-deep/10 rounded-xl flex items-center justify-center mb-6 text-teal-deep">
                            <i data-lucide="credit-card" class="w-7 h-7"></i>
                        </div>
                        <h3 class="text-xl font-heading font-bold text-teal-deep mb-3">Payments & Billing</h3>
                        <p class="text-gray-600 mb-4">Information about payment methods, refunds, and billing inquiries.</p>
                        <span class="text-amber-gold font-medium">View Articles →</span>
                    </div>

                    <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer">
                        <div class="w-14 h-14 bg-teal-deep/10 rounded-xl flex items-center justify-center mb-6 text-teal-deep">
                            <i data-lucide="map-pin" class="w-7 h-7"></i>
                        </div>
                        <h3 class="text-xl font-heading font-bold text-teal-deep mb-3">Using Your Card</h3>
                        <p class="text-gray-600 mb-4">How to use your digital membership card at partner locations.</p>
                        <span class="text-amber-gold font-medium">View Articles →</span>
                    </div>

                    <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer">
                        <div class="w-14 h-14 bg-teal-deep/10 rounded-xl flex items-center justify-center mb-6 text-teal-deep">
                            <i data-lucide="building" class="w-7 h-7"></i>
                        </div>
                        <h3 class="text-xl font-heading font-bold text-teal-deep mb-3">Partner Information</h3>
                        <p class="text-gray-600 mb-4">Find partner locations, offers, and redemption details.</p>
                        <span class="text-amber-gold font-medium">View Articles →</span>
                    </div>

                    <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer">
                        <div class="w-14 h-14 bg-teal-deep/10 rounded-xl flex items-center justify-center mb-6 text-teal-deep">
                            <i data-lucide="shield" class="w-7 h-7"></i>
                        </div>
                        <h3 class="text-xl font-heading font-bold text-teal-deep mb-3">Privacy & Security</h3>
                        <p class="text-gray-600 mb-4">Understanding how we protect your data and account security.</p>
                        <span class="text-amber-gold font-medium">View Articles →</span>
                    </div>

                    <div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow cursor-pointer">
                        <div class="w-14 h-14 bg-teal-deep/10 rounded-xl flex items-center justify-center mb-6 text-teal-deep">
                            <i data-lucide="message-circle" class="w-7 h-7"></i>
                        </div>
                        <h3 class="text-xl font-heading font-bold text-teal-deep mb-3">Contact Support</h3>
                        <p class="text-gray-600 mb-4">Can't find what you're looking for? Reach out to our support team.</p>
                        <span class="text-amber-gold font-medium">Get Help →</span>
                    </div>
                </div>

                <div class="bg-white rounded-2xl p-8 md:p-12 shadow-lg border border-gray-100">
                    <div class="text-center mb-8">
                        <h2 class="text-3xl font-heading font-bold text-teal-deep mb-4">Frequently Asked Questions</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">Quick answers to the most common questions about SaveSmart.lk</p>
                    </div>

                    <div class="space-y-4">
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button type="button" class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left" aria-expanded="false">
                                <span class="font-bold text-teal-deep text-lg">How do I get my digital membership card?</span>
                                <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                            </button>
                            <div class="faq-content hidden overflow-hidden">
                                <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                    Once you complete your membership purchase and payment is confirmed, your digital membership card will be instantly available in your member dashboard. You can access it anytime by logging into your account.
                                </div>
                            </div>
                        </div>

                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button type="button" class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left" aria-expanded="false">
                                <span class="font-bold text-teal-deep text-lg">Where can I use my SaveSmart membership?</span>
                                <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                            </button>
                            <div class="faq-content hidden overflow-hidden">
                                <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                    You can use your SaveSmart membership at any of our partner locations across Sri Lanka. Visit our interactive map to find all participating businesses near you. Look for the SaveSmart logo at partner locations.
                                </div>
                            </div>
                        </div>

                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button type="button" class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left" aria-expanded="false">
                                <span class="font-bold text-teal-deep text-lg">What payment methods do you accept?</span>
                                <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                            </button>
                            <div class="faq-content hidden overflow-hidden">
                                <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                    We accept payments through PayHere, direct bank transfers, and other approved payment methods. All transactions are processed securely through authorized payment providers.
                                </div>
                            </div>
                        </div>

                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button type="button" class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left" aria-expanded="false">
                                <span class="font-bold text-teal-deep text-lg">Can I get a refund on my membership?</span>
                                <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                            </button>
                            <div class="faq-content hidden overflow-hidden">
                                <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                    Refund requests are accepted within three (3) calendar days from the payment date. Please review our Refund and Return Policy for detailed information about eligibility and the refund process.
                                </div>
                            </div>
                        </div>

                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <button type="button" class="faq-trigger w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors text-left" aria-expanded="false">
                                <span class="font-bold text-teal-deep text-lg">How do I contact customer support?</span>
                                <i data-lucide="chevron-down" class="faq-icon w-5 h-5 text-gray-400 transition-transform duration-300"></i>
                            </button>
                            <div class="faq-content hidden overflow-hidden">
                                <div class="p-6 pt-0 bg-white text-gray-600 leading-relaxed border-t border-gray-100">
                                    You can reach our customer support team via email at support@savesmart.lk or by phone at +94 70 630 2900. Our team is available during business hours to assist you with any questions or concerns.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 md:py-24 bg-white">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl font-heading font-bold text-teal-deep mb-4">Still Need Help?</h2>
                <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Our support team is here to assist you. Reach out to us and we'll get back to you as soon as possible.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('website.contact') }}" class="inline-flex items-center justify-center bg-amber-gold hover:bg-amber-dark text-white font-bold py-3.5 px-8 rounded-full shadow-lg hover:shadow-amber-gold/30 transition-all transform hover:-translate-y-0.5">
                        <i data-lucide="mail" class="w-5 h-5 mr-2"></i>
                        Contact Us
                    </a>
                    <a href="tel:+94706302900" class="inline-flex items-center justify-center bg-teal-deep hover:bg-teal-dark text-white font-bold py-3.5 px-8 rounded-full shadow-lg hover:shadow-teal-deep/30 transition-all transform hover:-translate-y-0.5">
                        <i data-lucide="phone" class="w-5 h-5 mr-2"></i>
                        Call Us
                    </a>
                </div>
            </div>
        </section>
    </main>

    @include('website.components.footer')
@endsection

@push('scripts')
<script>
    document.querySelectorAll('.faq-trigger').forEach(function (trigger) {
        trigger.addEventListener('click', function () {
            const content = trigger.nextElementSibling;
            const icon = trigger.querySelector('.faq-icon');
            const isOpen = trigger.getAttribute('aria-expanded') === 'true';

            trigger.setAttribute('aria-expanded', String(!isOpen));
            if (content) {
                content.classList.toggle('hidden', isOpen);
            }
            if (icon) {
                icon.classList.toggle('rotate-180', !isOpen);
            }
        });
    });
</script>
@endpush