<header>
    <h1 class="text-3xl font-extrabold text-slate-900">FAQs</h1>
    <p class="mt-3 max-w-6xl text-base text-slate-600">
        Frequently asked questions and answers
    </p>
</header>

<section class="my-5">
    <h2 class="border-b-2 border-primary pb-3 text-xl font-semibold text-slate-900">Common Questions</h2>

    <div class="mt-6 space-y-4">
        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>How do I earn rewards points?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>You can earn rewards points by completing training modules, making qualifying purchases, and participating in special promotions. Each completed training module earns you points that can be redeemed for prizes.</p>
            </div>
        </details>

        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>How do I redeem my rewards points?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>Navigate to the Rewards section in your dashboard and browse available prizes. Once you have enough points, click on the prize you want and follow the redemption process. Points will be deducted from your account upon redemption.</p>
            </div>
        </details>

        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>Do my rewards points expire?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>Rewards points are valid for 12 months from the date they are earned. You will receive notifications 30 days before your points are set to expire, giving you time to redeem them.</p>
            </div>
        </details>

        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>How do I update my profile information?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>Go to the Profile page and click the 'Edit Profile' button. You can update your personal information, contact details, and preferences. Remember to save your changes before leaving the page.</p>
            </div>
        </details>

        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>What should I do if I forgot my password?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>Click on the 'Forgot Password' link on the login page. Enter your registered email address, and we'll send you instructions to reset your password. Follow the link in the email to create a new password.</p>
            </div>
        </details>

        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>How can I track my order status?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>Visit the Orders page to view all your current and past orders. Each order shows its current status, tracking information, and estimated delivery date. You'll also receive email notifications when your order status changes.</p>
            </div>
        </details>

        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>Can I transfer my rewards points to another account?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>Rewards points are non-transferable and can only be used by the account holder who earned them. This policy helps maintain the integrity of our rewards program and ensures fair distribution of benefits.</p>
            </div>
        </details>

        <details class="group overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-5 text-lg font-semibold text-slate-900 transition-colors duration-200 [&::-webkit-details-marker]:hidden">
                <span>Who can I contact for technical support?</span>
                <span class="shrink-0 text-base text-primary transition duration-200 group-open:rotate-180">
                    <i class="fa-solid fa-chevron-down"></i>
                </span>
            </summary>
            <div class="border-t border-slate-200 bg-slate-50 px-5 py-5 text-base leading-7 text-slate-600">
                <p>For technical assistance, please visit our Contact page or email support@abgrewards.com. Our support team is available Monday through Friday, 9:00 AM to 5:00 PM. We typically respond within 24 hours.</p>
            </div>
        </details>
    </div>
</section>

<section class="my-5">
    <h2 class="text-2xl font-bold text-slate-900">Still have questions?</h2>
    <p class="mt-3 max-w-3xl text-base leading-7 text-slate-600">Can't find the answer you're looking for? Our support team is here to help.</p>
    <a href="/contact" class="mt-5 inline-flex items-center justify-center rounded-xl bg-primary px-6 py-4 text-base font-semibold text-white transition-colors duration-200 hover:bg-primary-strong">Contact Support</a>
</section>
