{% extends "layout.html" %}
{% set page_title = "How the Orchid Continuum Works" %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12 text-center mb-5">
            <h1 class="display-4 text-light mb-3">
                <i data-feather="info" class="me-3"></i>
                How the Orchid Continuum Works
            </h1>
            <p class="lead text-muted">
                Your complete guide to using AI-powered orchid identification and analysis
            </p>
        </div>
    </div>
    
    <!-- Step-by-Step Process -->
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-light mb-4 text-center">Simple 3-Step Process</h2>
        </div>
    </div>
    
    <div class="row g-4 mb-5">
        <!-- Step 1 -->
        <div class="col-md-4">
            <div class="card bg-dark text-light h-100 border-primary">
                <div class="card-body text-center">
                    <div class="mb-4">
                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                             style="width: 80px; height: 80px;">
                            <span class="h2 mb-0">1</span>
                        </div>
                    </div>
                    <h4 class="card-title">Upload Your Orchid Photo</h4>
                    <p class="card-text">
                        Take a clear photo of your orchid flower, leaf, or entire plant. Our system accepts various angles and lighting conditions for best results.
                    </p>
                    <div class="text-muted small">
                        <strong>Tips:</strong> Clear focus, good lighting, close-up of flower preferred
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 2 -->
        <div class="col-md-4">
            <div class="card bg-dark text-light h-100 border-success">
                <div class="card-body text-center">
                    <div class="mb-4">
                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                             style="width: 80px; height: 80px;">
                            <span class="h2 mb-0">2</span>
                        </div>
                    </div>
                    <h4 class="card-title">AI Analysis & Identification</h4>
                    <p class="card-text">
                        Our advanced AI system analyzes your photo using computer vision and cross-references with multiple botanical databases for accurate identification.
                    </p>
                    <div class="text-muted small">
                        <strong>Sources:</strong> RHS, AOS, WorldPlants.de, Ecuagenera, Andy's Orchids
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3 -->
        <div class="col-md-4">
            <div class="card bg-dark text-light h-100 border-warning">
                <div class="card-body text-center">
                    <div class="mb-4">
                        <div class="bg-warning text-dark rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                             style="width: 80px; height: 80px;">
                            <span class="h2 mb-0">3</span>
                        </div>
                    </div>
                    <h4 class="card-title">Get Comprehensive Results</h4>
                    <p class="card-text">
                        Receive detailed identification results, care instructions, judging scores, parentage information, and contribution to the global database.
                    </p>
                    <div class="text-muted small">
                        <strong>Results:</strong> ID, care guide, judging analysis, botanical data
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- What You Get Section -->
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-light mb-4 text-center">What You Get From Each Analysis</h2>
        </div>
    </div>
    
    <div class="row g-4 mb-5">
        <div class="col-lg-6">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="search" class="me-2"></i>
                        Identification Results
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2"><i data-feather="check" class="me-2 text-success"></i>Scientific name and classification</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-success"></i>Common names and synonyms</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-success"></i>Confidence score (AI accuracy rating)</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-success"></i>Similar species and alternatives</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-success"></i>Parentage and breeding history</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-success"></i>Registration information (if applicable)</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="book-open" class="me-2"></i>
                        Care & Cultural Information
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2"><i data-feather="check" class="me-2 text-info"></i>Light requirements and preferences</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-info"></i>Temperature ranges (day/night)</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-info"></i>Watering and humidity needs</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-info"></i>Growing medium recommendations</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-info"></i>Fertilizer and feeding schedule</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-info"></i>Blooming season and frequency</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-lg-6">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="award" class="me-2"></i>
                        Professional Judging Analysis
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2"><i data-feather="check" class="me-2 text-warning"></i>AOS judging standards scoring</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-warning"></i>RHS evaluation criteria</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-warning"></i>Form, color, and size analysis</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-warning"></i>Flower arrangement evaluation</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-warning"></i>Overall quality assessment</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-warning"></i>Show preparation recommendations</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="users" class="me-2"></i>
                        Community Features
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2"><i data-feather="check" class="me-2 text-secondary"></i>Personal orchid tracking with unique ID</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-secondary"></i>Achievement badges and milestones</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-secondary"></i>Contribution to global database</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-secondary"></i>Featured orchid opportunities</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-secondary"></i>Access to complete analysis history</li>
                        <li class="mb-2"><i data-feather="check" class="me-2 text-secondary"></i>Connect with other enthusiasts</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Technical Details -->
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-light mb-4 text-center">The Technology Behind It</h2>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-lg-8">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="cpu" class="me-2"></i>
                        Advanced AI Analysis System
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Computer Vision</h6>
                            <ul class="small">
                                <li>OpenAI GPT-4 Vision model</li>
                                <li>Multi-angle image analysis</li>
                                <li>Feature extraction and pattern recognition</li>
                                <li>Color and shape analysis</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6>Database Integration</h6>
                            <ul class="small">
                                <li>Real-time cross-referencing</li>
                                <li>Multiple authoritative sources</li>
                                <li>Continuous learning and updates</li>
                                <li>Confidence scoring algorithms</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="database" class="me-2"></i>
                        Data Sources
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled small">
                        <li class="mb-1">• Royal Horticultural Society (RHS)</li>
                        <li class="mb-1">• American Orchid Society (AOS)</li>
                        <li class="mb-1">• WorldPlants.de</li>
                        <li class="mb-1">• Ecuagenera</li>
                        <li class="mb-1">• Andy's Orchids</li>
                        <li class="mb-1">• Jay's Encyclopedia</li>
                        <li class="mb-1">• Community contributions</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Getting Started -->
    <div class="row">
        <div class="col-12">
            <div class="card bg-gradient text-white" style="background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);">
                <div class="card-body text-center py-5">
                    <h3 class="mb-3">Ready to Discover Your Orchids?</h3>
                    <p class="lead mb-4">
                        Join thousands of orchid enthusiasts using AI-powered identification. It's completely free!
                    </p>
                    <div class="d-flex justify-content-center gap-3">
                        {% if not current_user.is_authenticated %}
                        <a href="{{ url_for('register') }}" class="btn btn-light btn-lg">
                            <i data-feather="user-plus" class="me-2"></i>Create Free Account
                        </a>
                        <a href="{{ url_for('contribute') }}" class="btn btn-outline-light btn-lg">
                            <i data-feather="upload" class="me-2"></i>Try Without Account
                        </a>
                        {% else %}
                        <a href="{{ url_for('upload') }}" class="btn btn-light btn-lg">
                            <i data-feather="upload" class="me-2"></i>Upload Your First Orchid
                        </a>
                        <a href="{{ url_for('user_dashboard') }}" class="btn btn-outline-light btn-lg">
                            <i data-feather="layout" class="me-2"></i>Go to Dashboard
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}