{% extends "base.html" %}

{% block title %}Support CmdForge{% endblock %}

{% block meta_description %}Support the open-source CmdForge project with Bitcoin, PayPal, tools, code, or feedback.{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Hero -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
            <h1 class="text-3xl font-bold text-gray-900">Support CmdForge</h1>
            <p class="mt-4 text-lg text-gray-600">
                Help keep an independent, open-source toolkit growing. Every contribution supports hosting,
                maintenance, documentation, and the next generation of tools.
            </p>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {% if donations.enabled %}
        <section class="mb-12" aria-labelledby="financial-support-heading">
            <div class="text-center mb-8">
                <h2 id="financial-support-heading" class="text-2xl font-bold text-gray-900">Make a Contribution</h2>
                <p class="mt-3 text-gray-600">
                    Choose the method that works for you. Donations are voluntary and do not unlock product features.
                </p>
            </div>
            <div class="grid grid-cols-1 {% if donations.bitcoin_address and donations.paypal_url %}md:grid-cols-2{% endif %} gap-6 max-w-4xl mx-auto">
                {% if donations.bitcoin_address %}
                <article class="bg-white rounded-xl border border-amber-200 p-7 shadow-sm">
                    <div class="flex items-center gap-3">
                        <div class="w-11 h-11 bg-amber-100 rounded-full flex items-center justify-center text-amber-700 font-bold text-xl">&#8383;</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900">Bitcoin</h3>
                            <p class="text-sm text-gray-500">Send BTC directly to the project wallet.</p>
                        </div>
                    </div>
                    <label for="bitcoin-address" class="block mt-6 text-sm font-medium text-gray-700">Bitcoin address</label>
                    <div class="mt-2 flex flex-col sm:flex-row gap-2">
                        <code id="bitcoin-address" class="min-w-0 flex-1 px-3 py-3 bg-gray-50 border border-gray-200 rounded-md text-xs text-gray-800 break-all select-all">{{ donations.bitcoin_address }}</code>
                        <button type="button" id="copy-bitcoin-address"
                                class="px-4 py-2 text-sm font-medium text-amber-800 border border-amber-300 rounded-md hover:bg-amber-50"
                                data-address="{{ donations.bitcoin_address }}">
                            Copy
                        </button>
                    </div>
                    <p id="copy-bitcoin-status" class="mt-2 text-sm text-green-700 min-h-5" role="status" aria-live="polite"></p>
                    <a href="{{ donations.bitcoin_uri }}"
                       class="mt-2 inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-white bg-amber-600 rounded-md hover:bg-amber-700">
                        Open Bitcoin Wallet
                    </a>
                    <p class="mt-3 text-xs text-gray-500">Always verify the full address in your wallet before sending.</p>
                </article>
                {% endif %}

                {% if donations.paypal_url %}
                <article class="bg-white rounded-xl border border-blue-200 p-7 shadow-sm flex flex-col">
                    <div class="flex items-center gap-3">
                        <div class="w-11 h-11 bg-blue-100 rounded-full flex items-center justify-center text-blue-700 font-bold text-xl">P</div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900">PayPal</h3>
                            <p class="text-sm text-gray-500">Contribute with PayPal or a supported card.</p>
                        </div>
                    </div>
                    <p class="mt-6 text-gray-600 flex-1">
                        PayPal handles the payment securely on its own website. CmdForge never receives your payment credentials.
                    </p>
                    <a href="{{ donations.paypal_url }}" target="_blank" rel="noopener noreferrer"
                       class="mt-6 inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
                        Donate with PayPal
                    </a>
                </article>
                {% endif %}
            </div>
        </section>
        {% endif %}

        <!-- Ways to help -->
        <div class="text-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900">Other Ways to Help</h2>
            <p class="mt-3 text-gray-600">Money is never the only way to make a meaningful contribution.</p>
        </div>
        <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
                    </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-900">Build Tools</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Create and publish useful tools to the registry. A growing library helps everyone.
                </p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/>
                    </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-900">Spread the Word</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Tell a friend or colleague who might find CmdForge useful.
                </p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                    </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-900">Give Feedback</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Report bugs, suggest features, or just share what you're building with it.
                </p>
            </div>
        </section>

        <!-- Main CTA -->
        <section class="bg-white rounded-lg border border-gray-200 p-8 text-center">
            <h2 class="text-2xl font-bold text-gray-900">Get Involved</h2>
            <p class="mt-3 text-gray-600 max-w-2xl mx-auto">
                CmdForge is open source. The code, docs, and registry are all open for contributions.
            </p>
            <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="https://gitea.brrd.tech/rob/CmdForge"
                   target="_blank" rel="noopener"
                   class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                    View on Gitea
                </a>
                <a href="{{ url_for('web.docs', path='publishing') }}"
                   class="inline-flex items-center px-6 py-3 text-sm font-medium text-indigo-600 border border-indigo-600 rounded-md hover:bg-indigo-50">
                    Publish a Tool
                </a>
            </div>
        </section>

        <!-- Thank you -->
        <section class="mt-12 text-center">
            <p class="text-gray-500">
                Thanks for using CmdForge!
            </p>
        </section>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
{% if donations.bitcoin_address %}
<script>
document.getElementById('copy-bitcoin-address')?.addEventListener('click', async function () {
    const status = document.getElementById('copy-bitcoin-status');
    try {
        await navigator.clipboard.writeText(this.dataset.address);
        status.textContent = 'Address copied.';
        this.textContent = 'Copied';
    } catch (error) {
        status.textContent = 'Select the address above and copy it manually.';
    }
});
</script>
{% endif %}
{% endblock %}