{% extends "base.html" %}

{% block content %}
<div class="jumbotron bg-light p-5 rounded-lg mb-4">
    <div class="container">
        <h1 class="display-4">Welcome to CivicScope</h1>
        <p class="lead">Your platform for raising concerns, driving change, and building better communities together.</p>
        <hr class="my-4">
        <p>Submit petitions, support causes you care about, and track their progress through our transparent system.</p>
        {% if not current_user.is_authenticated %}
        <a class="btn btn-primary btn-lg me-2" href="{{ url_for('register') }}" role="button">Get Started</a>
        <a class="btn btn-outline-primary btn-lg" href="{{ url_for('login') }}" role="button">Login</a>
        {% else %}
        <a class="btn btn-primary btn-lg me-2" href="{{ url_for('submit_petition') }}" role="button">Submit a Petition</a>
        <a class="btn btn-outline-primary btn-lg" href="{{ url_for('browse_petitions') }}" role="button">Browse Petitions</a>
        {% endif %}
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-microphone-alt fa-3x text-primary mb-3"></i>
                <h3>Voice or Text Petitions</h3>
                <p>Submit your concerns through text or voice recordings that we convert to text automatically.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-users fa-3x text-primary mb-3"></i>
                <h3>Community Support</h3>
                <p>Show support for petitions in your region through upvotes and comments to prioritize important issues.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-chart-line fa-3x text-primary mb-3"></i>
                <h3>Transparent Tracking</h3>
                <p>Monitor the progress of your petitions and hold officials accountable with our status tracking system.</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <h2 class="mb-3">Recent Petitions</h2>
        <div class="list-group">
            {% for petition in recent_petitions %}
            <a href="{{ url_for('petition_detail', petition_id=petition.id) }}" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{ petition.title }}</h5>
                    <small class="text-muted">{{ petition.created_at.strftime('%Y-%m-%d') }}</small>
                </div>
                <p class="mb-1">{{ petition.description[:100] }}{% if petition.description|length > 100 %}...{% endif %}</p>
                <small class="text-muted">Category: {{ petition.category }} | Location: {{ petition.location }} | Status: {{ petition.status }}</small>
            </a>
            {% else %}
            <div class="list-group-item">
                <p class="mb-0">No petitions yet. Be the first to <a href="{{ url_for('submit_petition') }}">submit one</a>!</p>
            </div>
            {% endfor %}
        </div>
        <div class="mt-3 text-center">
            <a href="{{ url_for('browse_petitions') }}" class="btn btn-outline-primary">View All Petitions</a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Fetch recent petitions via API
    fetch('/api/petitions?per_page=5')
        .then(response => response.json())
        .then(data => {
            // This would be handled by a frontend framework in a real application
            console.log('Recent petitions:', data);
        });
</script>
{% endblock %}