{% extends "base.html" %}

{% block title %}Pricing Calculator - Makenot.work{% endblock %}

{% block body_attrs %} class="centered-page"{% endblock %}

{% block content %}
    <div class="landing-hero pricing-page">
        <h1 class="page-title">Pricing Calculator<span class="dot">.</span></h1>
        <p class="tagline">See what you keep on every sale<span class="dot">.</span></p>

        {# The calculator recomputes server-side: on revenue/tier change HTMX
           GETs /pricing/compare and swaps #comparison-panel. No fee math runs
           in the browser — it all lives in `pricing_comparison.rs`, sourced
           from `assumptions.toml`. The inputs sit outside the swap target so
           focus and the typed value survive each recompute. #}
        <div id="pricing-calculator"
             hx-get="/pricing/compare"
             hx-trigger="input changed delay:300ms from:#revenue, change from:input[name='tier']"
             hx-include="#revenue, input[name='tier']:checked"
             hx-target="#comparison-panel"
             hx-swap="innerHTML">

            <div class="tier-section">
                <h2 class="section-label">Monthly revenue</h2>
                <div class="pricing-input-wrap">
                    <span class="pricing-currency">$</span>
                    <input type="number" id="revenue" name="revenue" class="pricing-input" value="1000" min="0" max="999999" step="50" aria-label="Monthly revenue in dollars">
                    <span class="pricing-period">/mo</span>
                </div>
            </div>

            <div class="tier-section">
                <h2 class="section-label">Your content tier</h2>
                <p class="tier-intro">Every tier is the complete platform: profile, project pages, forum, discovery, memberships, analytics, full data export. The tier picks the file-size envelope, not the feature set.</p>
                <div class="tier-selector" role="radiogroup" aria-label="Content tier">
                    <label class="tier-card tier-option">
                        <input type="radio" name="tier" value="{{ tier_prices.basic_std }}" checked>
                        <div class="tier-name">Basic</div>
                        <div class="tier-price">${{ tier_prices.basic_std }}/mo</div>
                        <div class="tier-desc">{{ tier_prices.basic_per_file }}/file, {{ tier_prices.basic_total }} total. Fits text, blogs, newsletters.</div>
                    </label>
                    <label class="tier-card tier-option">
                        <input type="radio" name="tier" value="{{ tier_prices.small_files_std }}">
                        <div class="tier-name">Small Files</div>
                        <div class="tier-price">${{ tier_prices.small_files_std }}/mo</div>
                        <div class="tier-desc">{{ tier_prices.small_files_per_file }}/file, {{ tier_prices.small_files_total }} total. Fits audio, plugins, binaries.</div>
                    </label>
                    <label class="tier-card tier-option">
                        <input type="radio" name="tier" value="{{ tier_prices.big_files_std }}">
                        <div class="tier-name">Big Files</div>
                        <div class="tier-price">${{ tier_prices.big_files_std }}/mo</div>
                        <div class="tier-desc">{{ tier_prices.big_files_per_file }}/file, {{ tier_prices.big_files_total }} total. Fits video, games, large software.</div>
                    </label>
                    <label class="tier-card tier-option">
                        <input type="radio" name="tier" value="{{ tier_prices.everything_std }}">
                        <div class="tier-name">Everything</div>
                        <div class="tier-price">${{ tier_prices.everything_std }}/mo</div>
                        <div class="tier-desc">Big Files envelope plus first access to high-cost features as they ship.</div>
                    </label>
                </div>
            </div>

            <div id="comparison-panel">
                {% include "partials/pricing_comparison.html" %}
            </div>
        </div>

        <div class="landing-cta">
            <a class="btn-primary btn--large" href="/join">Join the Alpha</a>
        </div>

        <div class="secondary-links">
            <a href="/">Home</a>
            <a href="/discover">Browse as guest</a>
        </div>
    </div>
{% endblock %}