{# Fee calculator results, server-rendered, swapped into /pricing via HTMX
   from GET /pricing/compare as the dials change. Every value here is
   preformatted in `fee_calculator::Outcome`, including the bar's segment
   widths; this template does no arithmetic. The math lives in Rust, sourced
   from `docs/business/assumptions.toml`, and is pinned by
   `fee_calculator::tests`.

   The other platform is never named, here or anywhere else. Its fees are the
   two dials above, so there is nothing to keep current. #}
<div class="tier-section" id="results">
    <div class="calc-verdict {{ outcome.verdict.css_class() }}">{{ outcome.headline }}</div>

    <table class="data-table calc-table" aria-label="Monthly take-home comparison">
        <thead>
            <tr>
                <th>Monthly</th>
                <th>Here</th>
                <th>The other platform</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">You sell</th>
                <td colspan="2" class="calc-gross">{{ outcome.gross }}</td>
            </tr>
            <tr class="calc-keep-row">
                <th scope="row">You keep</th>
                <td>{{ outcome.mnw_keep }}</td>
                <td>{{ outcome.other_keep }}</td>
            </tr>
            <tr>
                <th scope="row">Total fees</th>
                <td>{{ outcome.mnw_rate }}</td>
                <td>{{ outcome.other_rate }}</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="tier-section">
    <h2 class="section-label">Where each one wins</h2>

    {# Two segments tiling one bar, widths already computed as percentages.
       The left segment is the volume range where the other platform costs
       less; either segment can be the full width. #}
    <div class="calc-scale">
        <div class="calc-bar" role="img" aria-label="{{ outcome.headline }}">
            <div class="calc-bar-seg calc-bar-seg--other" style="width: {{ outcome.scale.other_pct_width }}%"></div>
            <div class="calc-bar-seg calc-bar-seg--mnw" style="width: {{ outcome.scale.mnw_pct_width }}%"></div>
            <div class="calc-marker" style="left: {{ outcome.scale.marker_pct }}%"></div>
            {% if outcome.scale.has_crossover %}
            <div class="calc-crossover" style="left: {{ outcome.scale.crossover_pct }}%" aria-hidden="true"></div>
            {% endif %}
        </div>
        <div class="calc-axis">
            <span>0 sales</span>
            {% match outcome.scale.crossover_label %}
            {% when Some with (label) %}
            <span class="calc-axis-crossover">crossover at {{ label }}</span>
            {% when None %}
            {% endmatch %}
            <span>{{ outcome.scale.max_label }}</span>
        </div>
        <div class="calc-legend">
            <span class="calc-legend-item calc-legend-item--other">the other platform costs less</span>
            <span class="calc-legend-item calc-legend-item--mnw">we cost less</span>
        </div>
    </div>

    {% match outcome.crossover_note %}
    {% when Some with (note) %}
    <p class="calc-note">{{ note }}</p>
    {% when None %}
    {% endmatch %}

    <p class="pricing-disclaimer">Our side of this uses the payment processor's published US card rates. Yours is whatever you type in, so check it against a real payout rather than a pricing page: some platforms quote their cut before processing and some after.</p>
    <p class="pricing-disclaimer"><strong>Selling small-ticket items?</strong> Payment processors charge a fixed fee per sale (~$0.30) that hits harder on $1-5 items. That is an industry-wide constraint and it applies wherever you sell. Bundling items into collections lets fans buy in groups at a single transaction cost instead of paying per-item processing.</p>
</div>