{% extends "base.html" %}

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

{% block meta_description %}Support CmdForge by contributing code, tools, 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">
                CmdForge is a passion project. The best way to support it is to use it and share what you build.
            </p>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Ways to help -->
        <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 %}