{% extends "base.html" %}

{% block title %}Fan+ - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page fan-plus-page"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <h1 class="page-title">Fan+</h1>

        {% if just_subscribed %}
        <div class="success-banner">
            You're now a Fan+ member. Welcome.
        </div>
        {% endif %}

        {% if is_subscribed %}
        <div class="status-box">
            <p><strong>Your Fan+ membership is active.</strong></p>
            {% if let Some(end) = period_end %}
            <p>Current period ends: {{ end }}</p>
            {% endif %}
            <p>You'll receive a $5 credit code each billing cycle via email.</p>
        </div>
        {% else %}
        <div class="page-intro">
            Support the platform and get something back every month.
        </div>

        <div class="fan-plus-section">
            <h2 class="section-header">What you get</h2>
            <ul>
                <li><strong>$5 monthly credit</strong>: a promo code delivered by email, usable toward any purchase on the platform</li>
                <li><strong>+ badge</strong>: displayed next to your name in social contexts</li>
                <li><strong>Platform polls</strong>: vote on feature priorities and platform direction</li>
                <li><strong>Dev community access</strong>: join the conversation about how Makenotwork is built</li>
            </ul>
        </div>

        <div class="price-callout">$8/month</div>

        <div class="fan-plus-section">
            <p>
                Makenotwork is built on 0% platform fees. Fan+ is how you directly
                support the platform's development and operations, while getting real
                value back each month.
            </p>
        </div>

            {% if session_user.is_some() %}
        <div class="subscribe-form">
            <form method="post" action="/stripe/fan-plus">
                {% if let Some(token) = csrf_token %}
                <input type="hidden" name="_csrf" value="{{ token }}">
                {% endif %}
                <button type="submit" class="subscribe-btn" data-loading-text="Redirecting to Stripe...">Join Fan+</button>
            </form>
        </div>
            {% else %}
        <p class="login-link"><a href="/login">Log in</a> to join.</p>
            {% endif %}
        {% endif %}
    </div>
{% endblock %}