{% 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">Per typical creator, monthly. These are platform-wide budget allocations, not per-account accounting. Hover a segment for details.</p>

            {# Basic — $16 = 0.76 + 0.40 + 5.00 + 6.00 + 2.00 + 1.84. Sub-amounts hardcoded; see launchplan §4.5.1 for the planned [cost_allocation] toml section. #}
            <div class="cost-row">
                <div class="cost-row-label"><strong>Basic</strong>${{ tier_prices.basic_std }}/mo</div>
                <div class="cost-bar" role="img" aria-label="Basic tier ${{ tier_prices.basic_std }}/mo allocation: Stripe $0.76, Storage $0.40, Support $5.00, Engineering $6.00, Reserves $2.00, Earn-back $1.84">
                    <div class="cost-bar-seg cost-bar-seg-stripe"      style="flex: 76"  title="Stripe processing: $0.76. Stripe's fee on your monthly subscription.">$0.76</div>
                    <div class="cost-bar-seg cost-bar-seg-storage"     style="flex: 40"  title="Storage: $0.40. Object storage at your tier's typical fill, on Hetzner.">$0.40</div>
                    <div class="cost-bar-seg cost-bar-seg-support"     style="flex: 500" title="Human support time: $5.00. Identity recovery, billing disputes, moderation, abuse, and legal — the work that can't be automated.">$5.00</div>
                    <div class="cost-bar-seg cost-bar-seg-engineering" style="flex: 600" title="Product engineering: $6.00. Bug fixes and ongoing product work. We treat fixing bugs as part of building the product, not as an ongoing support drag.">$6.00</div>
                    <div class="cost-bar-seg cost-bar-seg-reserves"    style="flex: 200" title="Reserves: $2.00. Held against a bad month so a single incident doesn't force a price change or a shutdown.">$2.00</div>
                    <div class="cost-bar-seg cost-bar-seg-earnback"    style="flex: 184" title="Earn-back surplus: $1.84. Earmarked to return to creators as earn-back credit (committed by 2027-01-01).">$1.84</div>
                </div>
            </div>

            {# Small Files — $24 = 1.00 + 0.60 + 5.00 + 6.00 + 2.00 + 9.40 #}
            <div class="cost-row">
                <div class="cost-row-label"><strong>Small Files</strong>${{ tier_prices.small_files_std }}/mo</div>
                <div class="cost-bar" role="img" aria-label="Small Files tier ${{ tier_prices.small_files_std }}/mo allocation: Stripe $1.00, Storage $0.60, Support $5.00, Engineering $6.00, Reserves $2.00, Earn-back $9.40">
                    <div class="cost-bar-seg cost-bar-seg-stripe"      style="flex: 100" title="Stripe processing: $1.00.">$1.00</div>
                    <div class="cost-bar-seg cost-bar-seg-storage"     style="flex: 60"  title="Storage: $0.60. Object storage at your tier's typical fill.">$0.60</div>
                    <div class="cost-bar-seg cost-bar-seg-support"     style="flex: 500" title="Human support time: $5.00.">$5.00</div>
                    <div class="cost-bar-seg cost-bar-seg-engineering" style="flex: 600" title="Product engineering: $6.00.">$6.00</div>
                    <div class="cost-bar-seg cost-bar-seg-reserves"    style="flex: 200" title="Reserves: $2.00.">$2.00</div>
                    <div class="cost-bar-seg cost-bar-seg-earnback"    style="flex: 940" title="Earn-back surplus: $9.40.">$9.40</div>
                </div>
            </div>

            {# Big Files — $36 = 1.34 + 0.90 + 5.00 + 6.00 + 2.00 + 20.76 #}
            <div class="cost-row">
                <div class="cost-row-label"><strong>Big Files</strong>${{ tier_prices.big_files_std }}/mo</div>
                <div class="cost-bar" role="img" aria-label="Big Files tier ${{ tier_prices.big_files_std }}/mo allocation: Stripe $1.34, Storage $0.90, Support $5.00, Engineering $6.00, Reserves $2.00, Earn-back $20.76">
                    <div class="cost-bar-seg cost-bar-seg-stripe"      style="flex: 134"  title="Stripe processing: $1.34.">$1.34</div>
                    <div class="cost-bar-seg cost-bar-seg-storage"     style="flex: 90"   title="Storage: $0.90.">$0.90</div>
                    <div class="cost-bar-seg cost-bar-seg-support"     style="flex: 500"  title="Human support time: $5.00.">$5.00</div>
                    <div class="cost-bar-seg cost-bar-seg-engineering" style="flex: 600"  title="Product engineering: $6.00.">$6.00</div>
                    <div class="cost-bar-seg cost-bar-seg-reserves"    style="flex: 200"  title="Reserves: $2.00.">$2.00</div>
                    <div class="cost-bar-seg cost-bar-seg-earnback"    style="flex: 2076" title="Earn-back surplus: $20.76.">$20.76</div>
                </div>
            </div>

            {# Everything — $60 = 2.04 + 1.50 + 5.00 + 6.00 + 2.00 + 43.46 #}
            <div class="cost-row">
                <div class="cost-row-label"><strong>Everything</strong>${{ tier_prices.everything_std }}/mo</div>
                <div class="cost-bar" role="img" aria-label="Everything tier ${{ tier_prices.everything_std }}/mo allocation: Stripe $2.04, Storage $1.50, Support $5.00, Engineering $6.00, Reserves $2.00, Earn-back $43.46">
                    <div class="cost-bar-seg cost-bar-seg-stripe"      style="flex: 204"  title="Stripe processing: $2.04.">$2.04</div>
                    <div class="cost-bar-seg cost-bar-seg-storage"     style="flex: 150"  title="Storage: $1.50.">$1.50</div>
                    <div class="cost-bar-seg cost-bar-seg-support"     style="flex: 500"  title="Human support time: $5.00.">$5.00</div>
                    <div class="cost-bar-seg cost-bar-seg-engineering" style="flex: 600"  title="Product engineering: $6.00.">$6.00</div>
                    <div class="cost-bar-seg cost-bar-seg-reserves"    style="flex: 200"  title="Reserves: $2.00.">$2.00</div>
                    <div class="cost-bar-seg cost-bar-seg-earnback"    style="flex: 4346" title="Earn-back surplus: $43.46.">$43.46</div>
                </div>
            </div>

            <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 surplus</span>
            </div>

            <p class="pricing-disclaimer">Founder-rate creators pay exactly 50% of the standard tier; that subsidy is absorbed by the standard cohort and platform reserves, so the breakdown above applies to standard rates.</p>
        </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>

    <footer>
        <p>&copy; 2026 Make Creative</p>
    </footer>
{% 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 %}