{% extends "base.html" %}
{% set page_title = "The Orchid Continuum Project - Mission & Support" %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <section class="bg-light p-5 rounded-lg shadow-sm" style="border: 1px solid #e0e0e0;">
                <div class="text-center">
                    <!-- Official Orchid Continuum Logo -->
                    <div class="mb-4">
                        <img src="{{ url_for('static', filename='images/orchid_continuum_new_logo.png') }}" 
                             alt="Orchid Continuum Logo" 
                             style="max-width: 630px; height: auto;">
                    </div>
                    
                    
                    <div class="alert" style="background-color: #eee; border-left: 4px solid #5a0064; padding: 20px; margin: 30px auto; max-width: 800px; text-align: left;">
                        <strong style="color: #5a0064; font-size: 1.1em;">Mission Statement</strong><br><br>
                        <em style="color: #333; font-size: 1.05em; line-height: 1.6;">
                        "The Orchid Continuum exists to connect people, orchids, and knowledge through education, conservation, and community. We are an online orchid society dedicated to inspiring curiosity, supporting sustainable cultivation, preserving biodiversity, and fostering meaningful connections among orchid lovers worldwide."
                        </em>
                    </div>
                    
                    <div class="alert" style="background-color: #f0f8ff; border-left: 4px solid #007bff; padding: 20px; margin: 30px auto; max-width: 800px; text-align: left;">
                        <strong style="color: #007bff; font-size: 1.1em;">🌍 Vision Statement</strong><br><br>
                        <em style="color: #333; font-size: 1.05em; line-height: 1.6;">
                        "To become the world's leading online orchid society — a living continuum of knowledge and community — where every person, from beginner to botanist, can learn, share, and contribute to the conservation and appreciation of orchids."
                        </em>
                        <p class="mt-3 mb-0" style="color: #666; font-size: 0.95em;">
                        This emphasizes growth, global scope, and inclusivity — positioning The Orchid Continuum as the model for modern orchid societies.
                        </p>
                    </div>
                    
                    <!-- Support Button -->
                    <div class="mb-3">
                        <a href="#" class="btn btn-lg text-white fw-bold px-4 py-3" 
                           style="background: linear-gradient(135deg, #5a0064 0%, #790088 100%); border: none; border-radius: 8px;">
                            Support This Project 💜
                        </a>
                    </div>
                    
                    <p class="small text-muted">
                        Note: Donations are not currently tax-deductible. The Orchid Continuum is an independent initiative under development and is not yet affiliated with a 501(c)(3) nonprofit.
                    </p>
                    
                    <!-- Core Values Section -->
                    <div class="mt-5">
                        <h4 style="color: #7600a1; text-align: center; margin-bottom: 30px;">🌸 Core Values</h4>
                        <div class="row text-start">
                            <div class="col-lg-6 mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3" style="min-width: 40px;">
                                        <i data-feather="book-open" style="width: 24px; height: 24px; color: #8c1aff;"></i>
                                    </div>
                                    <div>
                                        <h6 style="color: #4a006d; margin-bottom: 8px;">1. Education</h6>
                                        <p class="small text-muted mb-0">We believe in accessible, accurate, and inspiring orchid knowledge that sparks curiosity at every level.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3" style="min-width: 40px;">
                                        <i data-feather="shield" style="width: 24px; height: 24px; color: #8c1aff;"></i>
                                    </div>
                                    <div>
                                        <h6 style="color: #4a006d; margin-bottom: 8px;">2. Conservation</h6>
                                        <p class="small text-muted mb-0">We are committed to supporting efforts that protect orchids, their habitats, and their pollinators worldwide.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3" style="min-width: 40px;">
                                        <i data-feather="users" style="width: 24px; height: 24px; color: #8c1aff;"></i>
                                    </div>
                                    <div>
                                        <h6 style="color: #4a006d; margin-bottom: 8px;">3. Community</h6>
                                        <p class="small text-muted mb-0">We foster a welcoming environment where members connect, share, and learn from one another.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3" style="min-width: 40px;">
                                        <i data-feather="zap" style="width: 24px; height: 24px; color: #8c1aff;"></i>
                                    </div>
                                    <div>
                                        <h6 style="color: #4a006d; margin-bottom: 8px;">4. Innovation</h6>
                                        <p class="small text-muted mb-0">We embrace digital tools and creative approaches to reimagine what an orchid society can be in the 21st century.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3" style="min-width: 40px;">
                                        <i data-feather="check-circle" style="width: 24px; height: 24px; color: #8c1aff;"></i>
                                    </div>
                                    <div>
                                        <h6 style="color: #4a006d; margin-bottom: 8px;">5. Integrity</h6>
                                        <p class="small text-muted mb-0">We honor accuracy, transparency, and ethical standards in every resource we share.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="me-3" style="min-width: 40px;">
                                        <i data-feather="palette" style="width: 24px; height: 24px; color: #8c1aff;"></i>
                                    </div>
                                    <div>
                                        <h6 style="color: #4a006d; margin-bottom: 8px;">6. Creativity</h6>
                                        <p class="small text-muted mb-0">We celebrate the beauty of orchids through art, stories, photography, and member contributions.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-4">
                                <div class="d-flex align-items-start justify-content-center">
                                    <div class="me-3" style="min-width: 40px;">
                                        <i data-feather="globe" style="width: 24px; height: 24px; color: #8c1aff;"></i>
                                    </div>
                                    <div style="max-width: 600px;">
                                        <h6 style="color: #4a006d; margin-bottom: 8px;">7. Global Connection</h6>
                                        <p class="small text-muted mb-0">We link local and international societies, growers, and conservation groups into one network of collaboration.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Current Features -->
                    <div class="mt-5">
                        <h4 style="color: #7600a1;">Platform Features</h4>
                        <div class="row text-start mt-3">
                            <div class="col-sm-6 mb-2">
                                <i data-feather="check" style="width: 16px; height: 16px; color: #28a745;" class="me-2"></i>
                                <small>AI-Enhanced Orchid Database</small>
                            </div>
                            <div class="col-sm-6 mb-2">
                                <i data-feather="check" style="width: 16px; height: 16px; color: #28a745;" class="me-2"></i>
                                <small>Advanced Comparison Tools</small>
                            </div>
                            <div class="col-sm-6 mb-2">
                                <i data-feather="check" style="width: 16px; height: 16px; color: #28a745;" class="me-2"></i>
                                <small>Research Citation System</small>
                            </div>
                            <div class="col-sm-6 mb-2">
                                <i data-feather="check" style="width: 16px; height: 16px; color: #28a745;" class="me-2"></i>
                                <small>Embeddable Web Widgets</small>
                            </div>
                            <div class="col-sm-6 mb-2">
                                <i data-feather="check" style="width: 16px; height: 16px; color: #28a745;" class="me-2"></i>
                                <small>Photo Metadata Analysis</small>
                            </div>
                            <div class="col-sm-6 mb-2">
                                <i data-feather="check" style="width: 16px; height: 16px; color: #28a745;" class="me-2"></i>
                                <small>Biodiversity Classification</small>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
{% endblock %}