{% 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">
            You sell in the currency your Stripe account settles in, and we read it from the account rather than asking you to pick. We support USD, CAD, GBP, AUD, NZD and EUR. Your Stripe account needs to be in a <a href="https://stripe.com/global" target="_blank" rel="noopener">supported country</a> and settle in one of those six. 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>