@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">Frequently Asked Questions</h1>
                <p class="text-base sm:text-xl text-teal-100 max-w-3xl mx-auto leading-relaxed">Find answers to common questions about SaveSmart.lk</p>
            </div>
        </section>

        <section class="py-16 md:py-24 bg-cream">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="bg-white rounded-2xl p-8 md:p-12 shadow-lg border border-gray-100">
                    <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">What is SaveSmart.lk?</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">
                                    SaveSmart.lk is Sri Lanka's premier digital membership platform that connects members with exclusive discounts and offers from partner businesses across the island. Our digital membership card replaces traditional plastic cards, making savings accessible, instant, and eco-friendly.
                                </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 sign up for a 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">
                                    Click on the "Register" button on our homepage, fill in your details, select your preferred membership plan (1 Month, 6 Month, or Annual), and complete the payment. Your digital membership card will be instantly available in your dashboard.
                                </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 are the membership plans and pricing?</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 offer three membership plans:
                                    <ul class="list-disc pl-6 mt-2 space-y-1">
                                        <li><strong>1 Month Membership:</strong> LKR 499.00</li>
                                        <li><strong>6 Month Membership:</strong> LKR 2,499.00</li>
                                        <li><strong>Annual Membership:</strong> LKR 4,999.00</li>
                                    </ul>
                                </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 access 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">
                                    After completing your membership purchase, log into your account and visit the "My Card" section in your dashboard. Your digital membership card with a unique QR code will be displayed there, ready to use at any partner location.
                                </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 find partner locations?</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 find all our partner locations by visiting the "Map" section on our website. Our interactive map shows all participating businesses across Sri Lanka, making it easy to discover where you can use your membership.
                                </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 redeem offers at partner locations?</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">
                                    Simply show your digital membership card with the QR code at the checkout counter of any partner location. The staff will scan your QR code to verify your membership and apply the applicable discount to your purchase.
                                </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. We do not store your card information on our servers.
                                </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 cancel 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">
                                    Memberships cannot be cancelled once activated. However, memberships are not automatically renewed. You can choose not to renew your membership when it expires. For refund requests within the first 3 days, please refer to our Refund Policy.
                                </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 is your refund policy?</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. Approved refunds may take 7-14 business days to process. Please review our detailed Refund and Return Policy for complete information about eligibility and conditions.
                                </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">Is my personal information secure?</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">
                                    Yes, we implement reasonable technical, administrative, and organizational measures to protect your personal information. We do not sell, rent, or trade your data to third parties. For detailed information, please review our Privacy Policy.
                                </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 share my membership with others?</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">
                                    No, memberships are strictly personal and non-transferable. Sharing your membership credentials or digital card with others is a violation of our Terms and Conditions and may result in immediate suspension or termination without refund.
                                </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 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 become a partner business?</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">
                                    If you're a business owner interested in partnering with SaveSmart, please visit our "Partner Registration" page or select "Partnership" in the contact form. Our team will review your application and get back to you with partnership details.
                                </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 if I have an issue with a partner's product or service?</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">
                                    SaveSmart acts as a facilitator connecting members with partner businesses. Any issues relating to products or services purchased from partners must be resolved directly with the respective partner business. We can assist with membership-related inquiries but cannot intervene in partner service disputes.
                                </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 Have Questions?</h2>
                <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Can't find the answer you're looking for? Our support team is here to help.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('website.help-center') }}" 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="help-circle" class="w-5 h-5 mr-2"></i>
                        Visit Help Center
                    </a>
                    <a href="{{ route('website.contact') }}" 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="mail" class="w-5 h-5 mr-2"></i>
                        Contact 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