{% extends "base.html" %}

{% block title %}Support SmartTools - Donate{% endblock %}

{% block meta_description %}Support SmartTools development and help keep AI tools accessible for everyone.{% 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 SmartTools</h1>
            <p class="mt-4 text-lg text-gray-600">
                Your support keeps the registry running and funds new features for the community.
            </p>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Impact -->
        <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">
                <h2 class="text-lg font-semibold text-gray-900">Infrastructure</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Keep the registry fast, reliable, and available for everyone.
                </p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-900">Open Access</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Fund future hosting of shared AI models and public demos.
                </p>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-900">Community Growth</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Support tutorials, examples, and recognition for contributors.
                </p>
            </div>
        </section>

        <!-- Donation options -->
        <section class="bg-white rounded-lg border border-gray-200 p-8 text-center">
            <h2 class="text-2xl font-bold text-gray-900">Choose a Way to Contribute</h2>
            <p class="mt-3 text-gray-600">
                Placeholder links for donation providers. Replace with real endpoints when ready.
            </p>
            <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="#"
                   class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                    Donate via GitHub Sponsors
                </a>
                <a href="#"
                   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">
                    Donate via Ko-fi
                </a>
            </div>
        </section>

        <!-- Transparency -->
        <section class="mt-12 bg-gray-100 rounded-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900">How funds are used</h3>
            <ul class="mt-3 text-sm text-gray-600 space-y-2">
                <li>Registry hosting, backups, and monitoring</li>
                <li>Documentation, tutorials, and example projects</li>
                <li>Ongoing development and community support</li>
            </ul>
        </section>
    </div>
</div>
{% endblock %}