@page "/faq"

<div class="max-w-4xl mx-auto py-24 px-8 animate-fade">
    <div class="text-center mb-20">
        <h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Support Center</h2>
        <h1 class="text-6xl font-black tracking-tighter text-main mb-8 uppercase">Common Questions</h1>
        <p class="text-xl text-muted max-w-2xl mx-auto">
            Everything you need to know about LibraryLuxe, our membership plans, and our community.
        </p>
    </div>

    <div class="space-y-6">
        <!-- Category: General -->
        <div class="mb-12">
            <h3 class="text-xs font-black text-muted uppercase tracking-[0.2em] mb-8 border-b border-border pb-4">General Information</h3>
            <div class="space-y-4">
                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
                        <span class="text-lg font-bold text-main">What is LibraryLuxe?</span>
                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
                            <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="M19 9l-7 7-7-7"></path></svg>
                        </div>
                    </summary>
                    <div class="px-8 pb-8 text-muted leading-relaxed">
                        LibraryLuxe is a next-generation library management ecosystem designed to bridge the gap between physical books and digital convenience. We offer a reward-based reading system, smart notifications, and a global community for book lovers.
                    </div>
                </details>
                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
                        <span class="text-lg font-bold text-main">Is there a mobile app?</span>
                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
                            <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="M19 9l-7 7-7-7"></path></svg>
                        </div>
                    </summary>
                    <div class="px-8 pb-8 text-muted leading-relaxed">
                        Yes! Our mobile app is available for both iOS and Android. It features offline reading, instant barcode scanning for borrowing, and real-time alerts.
                    </div>
                </details>
            </div>
        </div>

        <!-- Category: Membership -->
        <div class="mb-12">
            <h3 class="text-xs font-black text-muted uppercase tracking-[0.2em] mb-8 border-b border-border pb-4">Membership & Billing</h3>
            <div class="space-y-4">
                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
                        <span class="text-lg font-bold text-main">Can I cancel my membership anytime?</span>
                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
                            <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="M19 9l-7 7-7-7"></path></svg>
                        </div>
                    </summary>
                    <div class="px-8 pb-8 text-muted leading-relaxed">
                        Absolutely. We don't believe in locking you down. You can cancel your subscription from your account settings at any time. You'll retain access until the end of your current billing period.
                    </div>
                </details>
                <details class="group bg-card border border-border rounded-3xl overflow-hidden transition-all hover:border-primary/30">
                    <summary class="flex items-center justify-between p-8 cursor-pointer list-none">
                        <span class="text-lg font-bold text-main">How do loyalty points work?</span>
                        <div class="w-8 h-8 rounded-full bg-body border border-border flex items-center justify-center group-open:rotate-180 transition-transform">
                            <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="M19 9l-7 7-7-7"></path></svg>
                        </div>
                    </summary>
                    <div class="px-8 pb-8 text-muted leading-relaxed">
                        You earn points for every book you return on time, every review you write, and every milestone you hit. These points can be used to pay for your membership, enter exclusive giveaways, or buy digital gift cards.
                    </div>
                </details>
            </div>
        </div>
    </div>

    <!-- Contact CTA -->
    <div class="mt-20 p-12 bg-primary/5 rounded-[3rem] border border-primary/10 text-center">
        <h4 class="text-2xl font-black text-main mb-4 uppercase tracking-tight">Still have questions?</h4>
        <p class="text-muted mb-8">If you couldn't find what you were looking for, our team is ready to help.</p>
        <a href="/contact" class="inline-block bg-primary text-white px-10 py-4 rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Contact Support</a>
    </div>
</div>