{% extends "base.html" %}

{% block title %}Citizen Science Platform - Wild Orchid Conservation{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Hero Section -->
    <div class="row bg-dark text-white py-5 mb-5">
        <div class="col-12 text-center">
            <h1 class="display-4 mb-3">🌍 Wild Orchid Conservation Platform</h1>
            <p class="lead">Join the global effort to understand and protect wild orchid populations through citizen science photography</p>
            <div class="mt-4">
                <a href="{{ url_for('citizen_science.view_projects') }}" class="btn btn-success btn-lg me-3">
                    <i data-feather="camera"></i> View Active Projects
                </a>
                <a href="#how-it-works" class="btn btn-outline-light btn-lg">
                    <i data-feather="help-circle"></i> How It Works
                </a>
            </div>
        </div>
    </div>

    <!-- Mission Statement -->
    <div class="row mb-5">
        <div class="col-lg-8 mx-auto text-center">
            <h2 class="mb-4">Our Conservation Mission</h2>
            <p class="lead text-muted">
                Through systematic documentation of wild orchid populations, we're building the world's most comprehensive 
                database of orchid genetic diversity and selection pressures in natural habitats. Your photographs become 
                powerful tools for conservation science.
            </p>
        </div>
    </div>

    <!-- Key Features -->
    <div class="row mb-5">
        <div class="col-12">
            <h3 class="text-center mb-5">Platform Capabilities</h3>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 border-success">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="zap" class="text-success" style="width: 48px; height: 48px;"></i>
                    </div>
                    <h5 class="card-title">AI-Powered Analysis</h5>
                    <p class="card-text">
                        Advanced computer vision extracts detailed trait data from your orchid photographs, 
                        identifying species, measuring characteristics, and assessing genetic variations.
                    </p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 border-info">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="database" class="text-info" style="width: 48px; height: 48px;"></i>
                    </div>
                    <h5 class="card-title">Encyclopedia of Life Integration</h5>
                    <p class="card-text">
                        Direct integration with EOL's TraitBank database (11+ million trait records) validates 
                        observations and contributes to global biodiversity knowledge.
                    </p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-4">
            <div class="card h-100 border-warning">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i data-feather="shield" class="text-warning" style="width: 48px; height: 48px;"></i>
                    </div>
                    <h5 class="card-title">Conservation Insights</h5>
                    <p class="card-text">
                        Population genetics analysis identifies selection pressures, genetic diversity patterns, 
                        and conservation priorities for endangered orchid populations.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Partner Organizations -->
    <div class="row mb-5">
        <div class="col-12">
            <h3 class="text-center mb-4">Partner Organizations</h3>
            <div class="row">
                {% for org_id, org_info in platform.partner_organizations.items() %}
                <div class="col-md-4 mb-3">
                    <div class="card border-light">
                        <div class="card-body">
                            <h6 class="card-title">{{ org_info.name }}</h6>
                            <p class="card-text small text-muted">
                                Specialties: {{ ', '.join(org_info.specialties) }}
                            </p>
                            <p class="card-text small">
                                <strong>Active Projects:</strong>
                                {% for project in org_info.active_projects %}
                                <span class="badge bg-secondary me-1">{{ project }}</span>
                                {% endfor %}
                            </p>
                            <a href="{{ url_for('citizen_science.generate_outreach', organization=org_id) }}" 
                               class="btn btn-sm btn-outline-primary">
                                Partnership Info
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Submission Categories -->
    <div class="row mb-5" id="how-it-works">
        <div class="col-12">
            <h3 class="text-center mb-4">Research Categories</h3>
            <div class="row">
                {% for category_id, category_info in platform.submission_categories.items() %}
                <div class="col-lg-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-primary text-white">
                            <h6 class="mb-0">{{ category_info.title }}</h6>
                        </div>
                        <div class="card-body">
                            <p class="card-text">{{ category_info.description }}</p>
                            <p class="small text-muted">
                                <strong>Analysis Focus:</strong> {{ category_info.analysis_focus }}
                            </p>
                            <div class="mt-3">
                                <h6 class="small text-uppercase text-muted">Required Data:</h6>
                                {% for requirement in category_info.required_data %}
                                <span class="badge bg-light text-dark me-1">{{ requirement }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- How to Participate -->
    <div class="row mb-5">
        <div class="col-lg-8 mx-auto">
            <div class="card bg-light">
                <div class="card-body">
                    <h4 class="card-title text-center mb-4">How to Participate</h4>
                    <div class="row">
                        <div class="col-md-3 text-center mb-3">
                            <div class="mb-2">
                                <i data-feather="search" class="text-primary" style="width: 32px; height: 32px;"></i>
                            </div>
                            <h6>1. Find Wild Orchids</h6>
                            <p class="small text-muted">Locate native orchid populations in their natural habitats</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <div class="mb-2">
                                <i data-feather="camera" class="text-success" style="width: 32px; height: 32px;"></i>
                            </div>
                            <h6>2. Document Carefully</h6>
                            <p class="small text-muted">Take high-quality photos with GPS data intact</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <div class="mb-2">
                                <i data-feather="upload" class="text-info" style="width: 32px; height: 32px;"></i>
                            </div>
                            <h6>3. Submit Data</h6>
                            <p class="small text-muted">Upload photos with habitat and observation details</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <div class="mb-2">
                                <i data-feather="bar-chart" class="text-warning" style="width: 32px; height: 32px;"></i>
                            </div>
                            <h6>4. View Analysis</h6>
                            <p class="small text-muted">Receive AI analysis results and conservation insights</p>
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <a href="{{ url_for('citizen_science.view_projects') }}" class="btn btn-primary">
                            Get Started
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scientific Impact -->
    <div class="row mb-5">
        <div class="col-lg-10 mx-auto">
            <div class="bg-success text-white p-4 rounded">
                <h4 class="text-center mb-4">Scientific Impact</h4>
                <div class="row text-center">
                    <div class="col-md-3 mb-3">
                        <h3>11M+</h3>
                        <p class="mb-0">Trait records in EOL TraitBank</p>
                    </div>
                    <div class="col-md-3 mb-3">
                        <h3>1.7M</h3>
                        <p class="mb-0">Taxa with genetic data</p>
                    </div>
                    <div class="col-md-3 mb-3">
                        <h3>330+</h3>
                        <p class="mb-0">Trait attributes analyzed</p>
                    </div>
                    <div class="col-md-3 mb-3">
                        <h3>Global</h3>
                        <p class="mb-0">Conservation impact</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="row">
        <div class="col-lg-8 mx-auto text-center">
            <h3 class="mb-3">Ready to Contribute to Orchid Conservation?</h3>
            <p class="lead text-muted mb-4">
                Every photograph you submit helps scientists understand how orchids adapt to environmental challenges 
                and guides conservation efforts worldwide.
            </p>
            <div>
                <a href="{{ url_for('citizen_science.view_projects') }}" class="btn btn-success btn-lg me-3">
                    <i data-feather="plus-circle"></i> Join a Project
                </a>
                <a href="mailto:research@orchidcontinuum.org" class="btn btn-outline-primary btn-lg">
                    <i data-feather="mail"></i> Contact Researchers
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Initialize Feather Icons -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof feather !== 'undefined') {
        feather.replace();
    }
});
</script>
{% endblock %}