{% extends 'layouts/default.twig' %}

{% block content %}

    <div class="referralLanding">
        <div class="wrapper">

            <div class="referralHero">
                {% if error is defined and error %}
                    <div class="alert alertWarning">
                        <p>{{ error }}</p>
                    </div>
                {% endif %}

                <h1>Give {{ config('referrals.reward_amount')|currency_format }}, Get {{ config('referrals.reward_amount')|currency_format }}</h1>
                <p>
                    Refer a friend to {{ config('app.name') }} and you'll both receive a {{ config('referrals.reward_amount')|currency_format }} reward
                    when they place their first qualifying order of {{ config('referrals.min_qualifying_order')|currency_format }} or more.
                </p>

                {% if member is defined and member.id > 0 %}
                    <a href="/members/referrals" class="button">Start Referring</a>
                {% else %}
                    <a href="/members/login?redirect=/members/referrals" class="button">Login to Refer</a>
                    <p class="referralSubCta">
                        Don't have an account? <a href="/members/register?redirect=/members/referrals">Register here</a>
                    </p>
                {% endif %}
            </div>

            <div class="referralHowItWorks">
                <h2>How It Works</h2>

                <div class="referralSteps">
                    <div class="referralStep">
                        <span class="stepNumber">1</span>
                        <h3>Share Your Link</h3>
                        <p>Send your unique referral link to a friend via email, WhatsApp, or social media.</p>
                    </div>
                    <div class="referralStep">
                        <span class="stepNumber">2</span>
                        <h3>Friend Signs Up</h3>
                        <p>Your friend creates an account using your referral link.</p>
                    </div>
                    <div class="referralStep">
                        <span class="stepNumber">3</span>
                        <h3>You Both Get {{ config('referrals.reward_amount')|currency_format }}</h3>
                        <p>When they place their first order of {{ config('referrals.min_qualifying_order')|currency_format }}+, you both receive a {{ config('referrals.reward_amount')|currency_format }} reward coupon.</p>
                    </div>
                </div>
            </div>

            <div class="referralFaq">
                <h2>Frequently Asked Questions</h2>

                <div class="faqItem">
                    <div class="faqQuestion js-faq-toggle">How much can I earn?</div>
                    <div class="faqAnswer">
                        You earn {{ config('referrals.reward_amount')|currency_format }} for each friend who signs up and places a qualifying order of {{ config('referrals.min_qualifying_order')|currency_format }} or more.
                        You can refer up to {{ config('referrals.max_referrals_per_member') }} friends, earning a maximum of {{ (config('referrals.reward_amount') * config('referrals.max_referrals_per_member'))|currency_format }} in rewards.
                    </div>
                </div>

                <div class="faqItem">
                    <div class="faqQuestion js-faq-toggle">What counts as a qualifying order?</div>
                    <div class="faqAnswer">
                        A qualifying order is any order with a total of {{ config('referrals.min_qualifying_order')|currency_format }} or more that has been shipped.
                        The reward is issued once the order reaches "Shipped" status.
                    </div>
                </div>

                <div class="faqItem">
                    <div class="faqQuestion js-faq-toggle">How do I use my reward?</div>
                    <div class="faqAnswer">
                        Your {{ config('referrals.reward_amount')|currency_format }} reward is a coupon code that you can apply at checkout on your next order
                        of {{ config('referrals.coupon_min_spend')|currency_format }} or more. The code is valid for {{ config('referrals.coupon_expiry_days') }} days.
                    </div>
                </div>

                <div class="faqItem">
                    <div class="faqQuestion js-faq-toggle">How long does my referral link last?</div>
                    <div class="faqAnswer">
                        Your referral link is valid for {{ config('referrals.link_expiry_days') }} days. If it expires, you can always send a new invitation
                        from your referral dashboard.
                    </div>
                </div>

                <div class="faqItem">
                    <div class="faqQuestion js-faq-toggle">Can I refer someone who is already a member?</div>
                    <div class="faqAnswer">
                        The referral program is for new members only. If your friend already has an account,
                        they won't be eligible for the referral reward.
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.js-faq-toggle').forEach(function(question) {
                question.addEventListener('click', function() {
                    this.classList.toggle('active');
                    const answer = this.nextElementSibling;
                    answer.classList.toggle('active');
                });
            });
        });
    </script>

{% endblock %}
