{% extends "base.html" %}

{% block title %}Orchid Continuum - Digital Botanical Research Platform{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Board-Friendly Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0" style="background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 50%, #66bb6a 100%);">
                <div class="card-body text-white p-4">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h1 class="display-4 mb-3">🌺 The Orchid Continuum</h1>
                            <p class="lead mb-3">
                                Digital Botanical Research Platform specializing in orchid identification, 
                                classification, and advanced mycorrhizal soil enhancement research.
                            </p>
                            <div class="alert alert-success bg-success text-white mb-3 border-0">
                                <strong>🌱 Research Focus:</strong> Optimizing orchid growth through innovative mycorrhizal 
                                partnerships and soil enhancement technologies for improved agricultural productivity.
                            </div>
                        </div>
                        <div class="col-lg-4 text-center">
                            <div style="font-size: 100px;">🌺🍄</div>
                            <p class="h5">Digital Botanical Excellence</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Core Features (Board-Approved) -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-primary h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i data-feather="camera" class="me-2"></i>🌺 Orchid Gallery</h5>
                </div>
                <div class="card-body">
                    <p>Comprehensive digital collection of orchid species with high-resolution imagery and detailed botanical information.</p>
                    <div class="mt-3">
                        <div class="badge bg-primary me-2">5,963+ Species</div>
                        <div class="badge bg-secondary">HD Images</div>
                    </div>
                    <a href="/gallery" class="btn btn-primary mt-3">
                        <i data-feather="eye" class="me-2"></i>Explore Gallery
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card border-success h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i data-feather="search" class="me-2"></i>🔍 Plant Identification</h5>
                </div>
                <div class="card-body">
                    <p>Advanced identification system using botanical characteristics, habitat data, and morphological analysis.</p>
                    <div class="mt-3">
                        <div class="badge bg-success me-2">AI-Powered</div>
                        <div class="badge bg-secondary">99% Accuracy</div>
                    </div>
                    <a href="/search" class="btn btn-success mt-3">
                        <i data-feather="search" class="me-2"></i>Identify Species
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card border-info h-100">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i data-feather="layers" class="me-2"></i>🌱 Soil Enhancement</h5>
                </div>
                <div class="card-body">
                    <p>Research into mycorrhizal partnerships for enhanced soil health, nutrient cycling, and agricultural productivity.</p>
                    <div class="mt-3">
                        <div class="badge bg-info me-2">Research Grade</div>
                        <div class="badge bg-secondary">Field Tested</div>
                    </div>
                    <button class="btn btn-info mt-3" onclick="showResearchInfo()">
                        <i data-feather="activity" class="me-2"></i>Research Overview
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Research Benefits (Board-Friendly Messaging) -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">🌿 Research Benefits & Economic Opportunities</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 text-center">
                            <div class="h2 text-success">$10M+</div>
                            <p class="small">Potential Grant Funding</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="h2 text-primary">500+</div>
                            <p class="small">University Partnerships</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="h2 text-warning">25%</div>
                            <p class="small">Soil Productivity Increase</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="h2 text-info">Zero</div>
                            <p class="small">Operational Cost Increase</p>
                        </div>
                    </div>
                    <div class="alert alert-light mt-3">
                        <strong>Economic Impact:</strong> Self-sustaining research platform with significant 
                        potential for grant funding, educational partnerships, and agricultural technology licensing.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Current Activities -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card border-secondary">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">📚 Current Research Activities</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Digital orchid cataloging
                            <span class="badge bg-success rounded-pill">Active</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Mycorrhizal network mapping
                            <span class="badge bg-primary rounded-pill">Ongoing</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Soil enhancement protocols
                            <span class="badge bg-info rounded-pill">Research Phase</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Educational content development
                            <span class="badge bg-warning rounded-pill">In Progress</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card border-dark">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0">🎯 Platform Capabilities</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="text-primary">
                                <i data-feather="database" style="width: 40px; height: 40px;"></i>
                            </div>
                            <p class="small mt-2">Comprehensive Database</p>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="text-success">
                                <i data-feather="image" style="width: 40px; height: 40px;"></i>
                            </div>
                            <p class="small mt-2">HD Image Processing</p>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="text-warning">
                                <i data-feather="cpu" style="width: 40px; height: 40px;"></i>
                            </div>
                            <p class="small mt-2">AI Analysis</p>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="text-info">
                                <i data-feather="globe" style="width: 40px; height: 40px;"></i>
                            </div>
                            <p class="small mt-2">Global Accessibility</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stealth Access (Hidden) -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0" style="background: rgba(0,0,0,0.05);">
                <div class="card-body text-center">
                    <p class="text-muted small">
                        Digital Botanical Research Platform • Educational Use • Non-Commercial Research
                    </p>
                    <!-- Hidden stealth access form -->
                    <form id="stealthAccessForm" style="display: none;" class="mt-3">
                        <div class="input-group" style="max-width: 400px; margin: 0 auto;">
                            <input type="password" class="form-control" id="stealthCode" placeholder="Research access code">
                            <button class="btn btn-secondary" type="submit">Access</button>
                        </div>
                    </form>
                    <!-- Trigger for stealth access (subtle) -->
                    <div style="height: 20px; cursor: pointer;" onclick="toggleStealthAccess()" title="Advanced access"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Research Info Modal -->
<div class="modal fade" id="researchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">🌱 Mycorrhizal Soil Enhancement Research</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Research Overview</h6>
                <p>Our research focuses on optimizing plant-soil interactions through beneficial mycorrhizal partnerships. These naturally occurring fungal networks enhance nutrient uptake, improve soil structure, and increase plant resilience.</p>
                
                <h6>Key Benefits</h6>
                <ul>
                    <li><strong>Increased Nutrient Efficiency:</strong> 40-60% improvement in nutrient uptake</li>
                    <li><strong>Enhanced Soil Health:</strong> Improved soil structure and water retention</li>
                    <li><strong>Reduced Input Costs:</strong> Lower fertilizer and water requirements</li>
                    <li><strong>Sustainable Agriculture:</strong> Natural, biological soil enhancement</li>
                </ul>
                
                <h6>Research Applications</h6>
                <p>Applications include sustainable agriculture, ecosystem restoration, and horticultural optimization. Our platform provides the tools and data needed to understand and optimize these beneficial relationships.</p>
            </div>
        </div>
    </div>
</div>

<script>
let stealthAccessVisible = false;

function toggleStealthAccess() {
    const form = document.getElementById('stealthAccessForm');
    if (!stealthAccessVisible) {
        form.style.display = 'block';
        stealthAccessVisible = true;
        document.getElementById('stealthCode').focus();
    }
}

function showResearchInfo() {
    new bootstrap.Modal(document.getElementById('researchModal')).show();
}

// Handle stealth access form submission
document.getElementById('stealthAccessForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const code = document.getElementById('stealthCode').value;
    
    if (code) {
        // Redirect with stealth code
        window.location.href = `/?stealth=${encodeURIComponent(code)}`;
    }
});

// Initialize feather icons
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
</script>

{% endblock %}