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

        <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" 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 is-selected">
                    <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 class="tier-section" id="results">
            <h2 class="section-label">You keep</h2>
            <div class="mnw-summary">
                <div class="mnw-keep" id="mnw-keep">$943.00</div>
                <div class="mnw-detail" id="mnw-detail">of every $1,000 after processing fees (~3%) and ${{ tier_prices.basic_std }}/mo membership</div>
            </div>
        </div>

        <div class="tier-section">
            <h2 class="section-label">Platform comparison</h2>
            <table class="data-table" id="comparison-table" aria-label="Platform fee comparison">
                <thead>
                    <tr>
                        <th>Platform</th>
                        <th>Fee structure</th>
                        <th>You keep</th>
                        <th>vs MNW</th>
                    </tr>
                </thead>
                <tbody id="comparison-body">
                </tbody>
            </table>
            <p class="pricing-disclaimer">Fee structures sourced from each platform's public pricing page. Actual fees may vary by plan, region, or payment method. Verify on each platform's site before making decisions.</p>
        <p class="pricing-disclaimer"><strong>Selling small-ticket items?</strong> Payment processors charge a fixed fee per transaction (~$0.30) that hits harder on $1-5 sales. This is an industry-wide constraint, not specific to any platform. Bundling items into collections lets your fans buy in groups at a single transaction cost instead of paying per-item processing fees.</p>
        </div>

        <div class="tier-section hidden" id="breakeven-section">
            <div class="breakeven-note" id="breakeven-note"></div>
        </div>

        <div class="tier-section cost-allocation" id="cost-allocation">
            <h2 class="section-label">Where your tier fee goes</h2>
            <p class="cost-allocation-intro">You're paying for a platform built to be fair and built to last. Here's where each monthly fee goes, averaged across creators on that tier. Hover any segment for detail.</p>
            <p class="cost-allocation-founder-note">Founder-rate creators pay exactly 50% of the standard tier. Per-creator fixed costs (Support, Engineering, Storage, Stripe) stay the same; the discount comes out of Earn-back and Reserves. The shape is unchanged, the totals halve.</p>

            {# Every dollar here round-trips through `cost_allocation.*` in
               `docs/business/assumptions.toml`. Tests in `tier_prices::tests`
               pin the per-segment values; tooltip copy lives in the Rust
               builder. #}
            {% for row in cost_allocation.rows %}
            <div class="cost-row">
                <div class="cost-row-label"><strong>{{ row.tier_label }}</strong>${{ row.tier_price }}/mo</div>
                <div class="cost-bar" role="img" aria-label="{{ row.aria_label }}">
                    {% for seg in row.segments %}
                    <div class="cost-bar-seg cost-bar-seg-{{ seg.kind }}" style="flex: {{ seg.cents }}" title="{{ seg.tooltip }}">{{ seg.amount }}</div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}

            <div class="cost-legend" aria-hidden="true">
                <span class="cost-legend-item"><span class="cost-legend-swatch cost-bar-seg-stripe"></span>Stripe processing</span>
                <span class="cost-legend-item"><span class="cost-legend-swatch cost-bar-seg-storage"></span>Storage (typical fill)</span>
                <span class="cost-legend-item"><span class="cost-legend-swatch cost-bar-seg-support"></span>Human support time</span>
                <span class="cost-legend-item"><span class="cost-legend-swatch cost-bar-seg-engineering"></span>Product engineering</span>
                <span class="cost-legend-item"><span class="cost-legend-swatch cost-bar-seg-reserves"></span>Reserves</span>
                <span class="cost-legend-item"><span class="cost-legend-swatch cost-bar-seg-earnback"></span>Earn-back (returned to creators)</span>
            </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 %}

{% block scripts %}
<script>
(function() {
    'use strict';

    var STRIPE_PERCENT = 0.029;
    var STRIPE_FIXED = 0.30;

    // Average transactions per month at a given revenue level.
    // Assumes ~$25 average transaction for simplicity.
    function estimateTransactions(revenue) {
        if (revenue <= 0) return 0;
        return Math.max(1, Math.round(revenue / 25));
    }

    function stripeNet(revenue) {
        if (revenue <= 0) return 0;
        var txns = estimateTransactions(revenue);
        return revenue - (revenue * STRIPE_PERCENT) - (txns * STRIPE_FIXED);
    }

    var competitors = [
        {
            name: 'Patreon',
            url: 'https://www.patreon.com/pricing',
            fee: '10% + ~3% + $0.30',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var txns = estimateTransactions(rev);
                var afterPlatform = rev * 0.90;
                return afterPlatform - (afterPlatform * STRIPE_PERCENT) - (txns * STRIPE_FIXED);
            }
        },
        {
            name: 'Gumroad',
            url: 'https://gumroad.com/pricing',
            fee: '10% + $0.50/tx + ~3%',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var txns = estimateTransactions(rev);
                var afterPlatform = rev * 0.90 - (txns * 0.50);
                return afterPlatform - (afterPlatform * STRIPE_PERCENT);
            }
        },
        {
            name: 'Bandcamp',
            url: 'https://bandcamp.com/pricing',
            fee: '15% (10% after $5k) + ~3%',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var rate = rev > 5000 ? 0.10 : 0.15;
                var afterPlatform = rev * (1 - rate);
                return afterPlatform - (afterPlatform * STRIPE_PERCENT);
            }
        },
        {
            name: 'Ko-fi Free',
            url: 'https://ko-fi.com/pricing',
            fee: '0% tips, 5% shop/memberships + ~3%',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var afterPlatform = rev * 0.95;
                return afterPlatform - (afterPlatform * STRIPE_PERCENT);
            }
        },
        {
            name: 'Ko-fi Gold',
            url: 'https://ko-fi.com/pricing',
            fee: '$12/mo + 0% + ~3%',
            calc: function(rev) {
                if (rev <= 0) return -12;
                return stripeNet(rev) - 12;
            }
        },
        {
            name: 'Itch.io',
            url: 'https://itch.io/docs/creators/faq',
            fee: '10% default + ~3%',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var afterPlatform = rev * 0.90;
                return afterPlatform - (afterPlatform * STRIPE_PERCENT);
            }
        },
        {
            name: 'Lemon Squeezy',
            url: 'https://www.lemonsqueezy.com/pricing',
            fee: '5% + $0.50/tx (incl. processing)',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var txns = estimateTransactions(rev);
                return rev * 0.95 - (txns * 0.50);
            }
        },
        {
            name: 'Buy Me a Coffee',
            url: 'https://www.buymeacoffee.com/about',
            fee: '5% + ~3%',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var afterPlatform = rev * 0.95;
                return afterPlatform - (afterPlatform * STRIPE_PERCENT);
            }
        },
        {
            name: 'Substack',
            url: 'https://substack.com/going-paid',
            fee: '10% on paid subs',
            calc: function(rev) {
                if (rev <= 0) return 0;
                var afterPlatform = rev * 0.90;
                return afterPlatform - (afterPlatform * STRIPE_PERCENT);
            }
        }
    ];

    function fmt(n) {
        return '$' + n.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

    function fmtWhole(n) {
        return '$' + Math.round(n).toLocaleString();
    }

    function update() {
        var revenueInput = document.getElementById('revenue');
        var revenue = parseFloat(revenueInput.value) || 0;

        var tierRadios = document.querySelectorAll('input[name="tier"]');
        // Default falls back to the Basic-tier radio value; templates render the canonical price.
        var tierCost = {{ tier_prices.basic_std }};
        for (var i = 0; i < tierRadios.length; i++) {
            if (tierRadios[i].checked) {
                tierCost = parseInt(tierRadios[i].value, 10);
                break;
            }
        }

        // MNW net: revenue minus processing fees minus monthly membership
        var mnwNet = stripeNet(revenue) - tierCost;
        if (revenue <= 0) mnwNet = -tierCost;

        document.getElementById('mnw-keep').textContent = fmt(Math.max(0, mnwNet));
        document.getElementById('mnw-detail').textContent =
            'of every ' + fmtWhole(revenue) + ' after processing fees (~3%) and ' + fmt(tierCost) + '/mo membership';

        // Build comparison rows sorted by net (descending)
        var rows = [];
        rows.push({
            name: 'Makenot.work',
            fee: fmt(tierCost) + '/mo flat + ~3% processing',
            net: mnwNet,
            isMnw: true
        });

        for (var j = 0; j < competitors.length; j++) {
            var c = competitors[j];
            rows.push({
                name: c.name,
                url: c.url,
                fee: c.fee,
                net: c.calc(revenue),
                isMnw: false
            });
        }

        rows.sort(function(a, b) { return b.net - a.net; });

        var tbody = document.getElementById('comparison-body');
        tbody.innerHTML = '';

        var breakevenMessages = [];

        for (var k = 0; k < rows.length; k++) {
            var row = rows[k];
            var tr = document.createElement('tr');
            if (row.isMnw) tr.className = 'highlight';

            var tdName = document.createElement('td');
            if (row.isMnw) {
                tdName.textContent = row.name;
                tdName.style.fontWeight = '600';
            } else {
                var link = document.createElement('a');
                link.href = row.url;
                link.textContent = row.name;
                link.target = '_blank';
                link.rel = 'noopener';
                tdName.appendChild(link);
            }
            tr.appendChild(tdName);

            var tdFee = document.createElement('td');
            tdFee.textContent = row.fee;
            tr.appendChild(tdFee);

            var tdKeep = document.createElement('td');
            tdKeep.textContent = revenue > 0 ? fmt(Math.max(0, row.net)) : '--';
            tr.appendChild(tdKeep);

            var tdDiff = document.createElement('td');
            if (row.isMnw) {
                tdDiff.textContent = '--';
            } else if (revenue > 0) {
                var diff = mnwNet - row.net;
                if (diff > 0.005) {
                    tdDiff.textContent = '+' + fmt(diff);
                    tdDiff.className = 'savings-negative';
                } else if (diff < -0.005) {
                    tdDiff.textContent = fmt(diff);
                    tdDiff.className = 'savings-positive';
                    breakevenMessages.push(row.name);
                } else {
                    tdDiff.textContent = '$0.00';
                }
            } else {
                tdDiff.textContent = '--';
            }
            tr.appendChild(tdDiff);

            tbody.appendChild(tr);
        }

        // Breakeven note
        var breakevenSection = document.getElementById('breakeven-section');
        var breakevenNote = document.getElementById('breakeven-note');
        if (breakevenMessages.length > 0 && revenue > 0) {
            breakevenSection.classList.remove('hidden');
            breakevenNote.textContent =
                'At ' + fmtWhole(revenue) + '/mo, some platforms with percentage-only fees cost less than MNW\'s flat rate. '
                + 'MNW becomes cheaper as your revenue grows.';
        } else {
            breakevenSection.classList.add('hidden');
        }
    }

    // Tier selector visual state. Listen on the radio inputs so keyboard
    // navigation (arrow keys within the radiogroup) updates the styling.
    var tierInputs = document.querySelectorAll('.tier-option input[type="radio"]');
    var tierLabels = document.querySelectorAll('.tier-option');
    for (var i = 0; i < tierInputs.length; i++) {
        tierInputs[i].addEventListener('change', function() {
            for (var j = 0; j < tierLabels.length; j++) {
                tierLabels[j].classList.remove('is-selected');
            }
            this.closest('.tier-option').classList.add('is-selected');
            update();
        });
    }

    document.getElementById('revenue').addEventListener('input', update);

    // Initial calculation
    update();
})();
</script>
{% endblock %}