{% include "wizards/partials/step_nav.html" %}

<div class="wizard-step">
    <h2 class="subtitle-h2">Payment Setup</h2>
    <p class="step-description">Connect your Stripe account to receive payments from sales.</p>

    {% if stripe_connected %}
    <div class="info-box">
        Stripe is already connected. You're all set.
    </div>
    {% else %}
    <div class="stripe-connect-box">
        <p class="stripe-intro">
            Stripe is a payment processor that handles purchases securely. If you don't have a Stripe account, one will be created during setup. It takes about 5 minutes.
        </p>
        <div class="stripe-benefits">
            <div class="benefit-item">Direct deposits to your bank account</div>
            <div class="benefit-item">Automatic tax form generation</div>
            <div class="benefit-item">Real-time payout tracking</div>
        </div>

        <div class="stripe-connect-actions">
            <a href="/stripe/connect" class="btn-primary stripe-connect-cta">Connect with Stripe</a>
        </div>

        <p class="stripe-connect-note">
            You can connect Stripe anytime from your dashboard settings.
        </p>

        <p class="stripe-connect-note-secondary">
            Sales here are priced and charged in US dollars. Your Stripe account needs to be in a <a href="https://stripe.com/global" target="_blank" rel="noopener">supported country</a> and able to accept USD charges. Check both with Stripe before connecting.
        </p>
    </div>
    {% endif %}

    <div class="wizard-actions">
        <button type="button" class="btn-secondary"
                hx-get="/join/step/profile"
                hx-target="#wizard-step" hx-swap="innerHTML">Back</button>
        <button type="button" class="btn-primary"
                hx-get="/join/step/complete"
                hx-target="#wizard-step" hx-swap="innerHTML">{% if stripe_connected %}Continue{% else %}Skip{% endif %}</button>
    </div>
</div>