{% extends "base.html" %}

{% block title %}Community - SmartTools{% endblock %}

{% block meta_description %}Connect with the SmartTools community, share tools, and collaborate on new ideas.{% 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">Community</h1>
            <p class="mt-4 text-lg text-gray-600">
                Collaboration over competition. Share tools, ask questions, and build together.
            </p>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Community hubs -->
        <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">Discussions</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Ask for help, share feedback, and discover best practices.
                </p>
                <a href="#" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800">
                    Coming soon
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>

            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-900">Contributor Spotlight</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Celebrate creators who publish tools and help others succeed.
                </p>
                <a href="#" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800">
                    Coming soon
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>

            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-900">Project Showcase</h2>
                <p class="mt-2 text-sm text-gray-600">
                    See how teams use SmartTools in real projects and workflows.
                </p>
                <a href="#" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800">
                    Coming soon
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        </section>

        <!-- Calls to action -->
        <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">
                Want to contribute tools, documentation, or tutorials? We’d love to hear from you.
            </p>
            <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="{{ url_for('web.docs', path='contributing') }}"
                   class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                    Contribution Guide
                </a>
                <a href="{{ url_for('web.tools') }}"
                   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">
                    Browse Tools
                </a>
            </div>
        </section>
    </div>
</div>
{% endblock %}