{% extends "base.html" %}

{% block title %}Pricing Calculator - Makenotwork{% 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 any dial change HTMX GETs
           /pricing/compare and swaps #results-panel. No fee math runs in the
           browser. It all lives in `fee_calculator.rs`, sourced from
           `assumptions.toml`. The dials sit outside the swap target so focus
           and the typed value survive each recompute.

           The right-hand column is the visitor's own description of wherever
           else they sell. We do not name it, hold a table of rates for it, or
           pretend to know what it charges. #}
        <div id="pricing-calculator"
             hx-get="/pricing/compare"
             hx-trigger="input changed delay:300ms from:#item_price,
                         input changed delay:300ms from:#sales,
                         input changed delay:300ms from:#other_pct,
                         input changed delay:300ms from:#other_per_sale,
                         change from:input[name='tier']"
             hx-include="#item_price, #sales, #other_pct, #other_per_sale, input[name='tier']:checked"
             hx-target="#results-panel"
             hx-swap="innerHTML">

            <div class="tier-section">
                <h2 class="section-label">What you sell</h2>
                <div class="calc-dials">
                    <label class="calc-dial">
                        <span class="calc-dial-label">Price per item</span>
                        <span class="pricing-input-wrap">
                            <span class="pricing-currency">$</span>
                            <input type="number" id="item_price" name="item_price" class="pricing-input"
                                   value="{{ inputs.item_price }}" min="0" max="10000" step="1"
                                   aria-label="Price per item in dollars">
                        </span>
                    </label>
                    <label class="calc-dial">
                        <span class="calc-dial-label">Sales per month</span>
                        <span class="pricing-input-wrap">
                            <input type="number" id="sales" name="sales" class="pricing-input"
                                   value="{{ inputs.sales_per_month }}" min="0" max="100000" step="1"
                                   aria-label="Sales per month">
                            <span class="pricing-period">/mo</span>
                        </span>
                    </label>
                </div>
            </div>

            {# Founder disclosure. Same wording as the landing tagline
               (index.html), because it is the same offer and a second phrasing
               for it would read as a second offer. Both this and the toggle
               below are gated: with the window shut the page is what it was
               before either existed. #}
            {% if founder_window_open %}
            <p class="founder-tagline">
                <span class="founder-tagline-mark">Founder pricing open</span>
                <span class="founder-tagline-detail">Half off creator tiers, <strong>locked for life</strong>. The calculator is using founder prices.</span>
            </p>
            {% endif %}

            <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>

                {# The radio `value` is what hx-include sends, so it is the price
                   the server computes on. While the window is open it opens on
                   the founder price: a visitor who can buy at half price should
                   not be shown their outcome at a price they will not pay.
                   <mnw-price-mode> swaps between the two data-price-* values in
                   the DOM and re-fires the existing recompute. Without JS the
                   toggle is absent and the founder price stands, which is the
                   right default rather than a broken one. #}
                <mnw-price-mode>
                {% if founder_window_open %}
                <div class="price-mode" role="radiogroup" aria-label="Calculate with">
                    <label class="price-mode-option">
                        <input type="radio" name="price-mode" value="founder" checked>
                        <span>Founder price</span>
                    </label>
                    <label class="price-mode-option">
                        <input type="radio" name="price-mode" value="list">
                        <span>List price</span>
                    </label>
                </div>
                {% endif %}

                <div class="tier-selector" role="radiogroup" aria-label="Content tier">
                    <label class="card--bordered tier-card tier-option">
                        <input type="radio" name="tier" value="{% if founder_window_open %}{{ tier_prices.basic_founder }}{% else %}{{ tier_prices.basic_std }}{% endif %}" data-price-std="{{ tier_prices.basic_std }}" data-price-founder="{{ tier_prices.basic_founder }}" checked>
                        <div class="tier-name">Basic</div>
                        <div class="tier-price" data-price-display>${% if founder_window_open %}{{ tier_prices.basic_founder }}{% else %}{{ tier_prices.basic_std }}{% endif %}/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="card--bordered tier-card tier-option">
                        <input type="radio" name="tier" value="{% if founder_window_open %}{{ tier_prices.small_files_founder }}{% else %}{{ tier_prices.small_files_std }}{% endif %}" data-price-std="{{ tier_prices.small_files_std }}" data-price-founder="{{ tier_prices.small_files_founder }}">
                        <div class="tier-name">Small Files</div>
                        <div class="tier-price" data-price-display>${% if founder_window_open %}{{ tier_prices.small_files_founder }}{% else %}{{ tier_prices.small_files_std }}{% endif %}/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="card--bordered tier-card tier-option">
                        <input type="radio" name="tier" value="{% if founder_window_open %}{{ tier_prices.big_files_founder }}{% else %}{{ tier_prices.big_files_std }}{% endif %}" data-price-std="{{ tier_prices.big_files_std }}" data-price-founder="{{ tier_prices.big_files_founder }}">
                        <div class="tier-name">Big Files</div>
                        <div class="tier-price" data-price-display>${% if founder_window_open %}{{ tier_prices.big_files_founder }}{% else %}{{ tier_prices.big_files_std }}{% endif %}/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="card--bordered tier-card tier-option">
                        <input type="radio" name="tier" value="{% if founder_window_open %}{{ tier_prices.everything_founder }}{% else %}{{ tier_prices.everything_std }}{% endif %}" data-price-std="{{ tier_prices.everything_std }}" data-price-founder="{{ tier_prices.everything_founder }}">
                        <div class="tier-name">Everything</div>
                        <div class="tier-price" data-price-display>${% if founder_window_open %}{{ tier_prices.everything_founder }}{% else %}{{ tier_prices.everything_std }}{% endif %}/mo</div>
                        <div class="tier-desc">Big Files envelope plus first access to high-cost features as they ship.</div>
                    </label>
                </div>
                </mnw-price-mode>
            </div>

            <div class="tier-section">
                <h2 class="section-label">Wherever else you sell</h2>
                <p class="tier-intro">Fill in what the other platform takes. Use its total deduction, its own cut plus any payment processing it adds, which is the figure you can read off a payout. We hold no rates for anyone but ourselves, so nothing here can go stale or be picked to flatter us.</p>
                <div class="calc-dials">
                    <label class="calc-dial">
                        <span class="calc-dial-label">Their cut</span>
                        <span class="pricing-input-wrap">
                            <input type="number" id="other_pct" name="other_pct" class="pricing-input"
                                   value="{{ other_pct_display }}" min="0" max="90" step="0.1"
                                   aria-label="Other platform percentage cut">
                            <span class="pricing-period">%</span>
                        </span>
                    </label>
                    <label class="calc-dial">
                        <span class="calc-dial-label">Their fee per sale</span>
                        <span class="pricing-input-wrap">
                            <span class="pricing-currency">$</span>
                            <input type="number" id="other_per_sale" name="other_per_sale" class="pricing-input"
                                   value="{{ other_per_sale_display }}" min="0" max="100" step="0.05"
                                   aria-label="Other platform flat fee per sale in dollars">
                        </span>
                    </label>
                </div>
            </div>

            <div id="results-panel">
                {% include "partials/fee_calculator.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 %}