{% extends "base.html" %}

{% block content %}
<!-- Demo banner removed - was broken and giving visitors bad first impression -->

<!-- Featured Orchid of the Day - Above the Fold Hero -->
{% if orchid_of_day %}
<section class="featured-orchid" style="margin-top: 0; margin-bottom: 2rem;">
    <div class="container">
        <div class="fo-card">
            <!-- Left Column: Image and Haiku -->
            <div class="fo-left">
                {% if orchid_of_day.google_drive_id %}
                <img src="/api/drive-photo/{{ orchid_of_day.google_drive_id }}" 
                     alt="Flower of {{ orchid_of_day.genus or '' }} {{ orchid_of_day.species or orchid_of_day.display_name or orchid_of_day.scientific_name }}" 
                     class="fo-img"
                     onerror="this.onerror=null; this.src='/static/images/orchid_placeholder.svg'; this.alt='Orchid photo coming soon';"
                     onload="console.log('✅ Featured Orchid loaded successfully');">
                {% elif orchid_of_day.image_url and orchid_of_day.image_url != '/static/images/orchid_placeholder.svg' %}
                <img src="{{ orchid_of_day.image_url }}" 
                     alt="Flower of {{ orchid_of_day.genus or '' }} {{ orchid_of_day.species or orchid_of_day.display_name or orchid_of_day.scientific_name }}" 
                     class="fo-img"
                     onerror="this.src='/static/images/orchid_placeholder.svg'; this.alt='Orchid photo coming soon';">
                {% else %}
                <img src="/static/images/orchid_placeholder.svg" 
                     alt="Placeholder image — orchid photo coming soon" 
                     class="fo-img">
                {% endif %}
                
                <!-- Haiku Caption -->
                <figure class="fo-haiku">
                    <figcaption>
                        {% if orchid_of_day_enhanced and orchid_of_day_enhanced.creative_reflection and orchid_of_day_enhanced.creative_reflection.type == 'haiku' %}
                        {{ orchid_of_day_enhanced.creative_reflection.content }}
                        {% elif orchid_of_day_enhanced and orchid_of_day_enhanced.haiku %}
                        {{ orchid_of_day_enhanced.haiku }}
                        {% else %}
                        High in ancient trees<br/>
                        Life dances with morning mist<br/>
                        Sky gardens flourish
                        {% endif %}
                    </figcaption>
                </figure>
            </div>
            
            <!-- Right Column: Content -->
            <div class="fo-right">
                <!-- Eyebrow Badge -->
                <div class="fo-eyebrow">ORCHID OF THE DAY</div>
                
                <!-- Centered Title -->
                <h1 class="fo-title">
                    {% if orchid_of_day.genus and orchid_of_day.species %}
                    <em>{{ orchid_of_day.genus }} {{ orchid_of_day.species }}</em>
                    {% elif orchid_of_day.scientific_name %}
                    <em>{{ orchid_of_day.scientific_name }}</em>
                    {% elif orchid_of_day_enhanced and orchid_of_day_enhanced.orchid.expanded_display_name %}
                    <em>{{ orchid_of_day_enhanced.orchid.expanded_display_name }}</em>
                    {% else %}
                    {{ orchid_of_day.display_name }}
                    {% endif %}
                </h1>
                
                <!-- Spacer -->
                <div style="margin-bottom: 1rem;"></div>
                
                <!-- Country & Habitat Meta -->
                <div class="fo-meta">
                    {% if orchid_of_day_enhanced and orchid_of_day_enhanced.expanded_info and orchid_of_day_enhanced.expanded_info.geography %}
                    📍 Country: {{ orchid_of_day_enhanced.expanded_info.geography.distribution or orchid_of_day_enhanced.expanded_info.geography.native_habitat }} | 
                    🌿 Habitat: {{ orchid_of_day.native_habitat[:20] if orchid_of_day.native_habitat else 'Diverse' }}{% if orchid_of_day.native_habitat and orchid_of_day.native_habitat|length > 20 %}...{% endif %}
                    {% elif orchid_of_day.region %}
                    📍 Country: {{ orchid_of_day.region.title() }} | 
                    🌿 Habitat: {{ orchid_of_day.native_habitat[:20] if orchid_of_day.native_habitat else 'Rainforest → Montane' }}{% if orchid_of_day.native_habitat and orchid_of_day.native_habitat|length > 20 %}...{% endif %}
                    {% else %}
                    📍 Country: Diverse | 🌿 Habitat: Rainforest → Montane
                    {% endif %}
                </div>
                
                <!-- About This Orchid -->
                <p class="fo-about clamp-3">
                    {% if orchid_of_day_enhanced and orchid_of_day_enhanced.story %}
                    {{ orchid_of_day_enhanced.story }}
                    {% else %}
                    Meet {{ orchid_of_day.genus or orchid_of_day.display_name or 'this stunning orchid' }}—a remarkable member of one of nature's most diverse plant families. With intricate flower structures and specialized pollination strategies, this species represents millions of years of evolutionary adaptation.
                    {% endif %}
                </p>
                
                <!-- Notable Features -->
                <p class="fo-notable">
                    {% if orchid_of_day_enhanced and orchid_of_day_enhanced.fun_facts and orchid_of_day_enhanced.fun_facts|length > 0 %}
                    {{ orchid_of_day_enhanced.fun_facts[0] }}
                    {% else %}
                    There are more orchid species than bird and mammal species combined—over 30,000 known varieties!
                    {% endif %}
                </p>
                
                <!-- More Info Button -->
                <a href="/orchid/{{ orchid_of_day.id }}" 
                   class="fo-btn"
                   aria-label="More Info about {{ orchid_of_day.genus or '' }} {{ orchid_of_day.species or orchid_of_day.display_name or orchid_of_day.scientific_name }}">
                    More Info & Full Details
                </a>
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Quick Links Row -->
<div class="container mb-4">
    <div class="row g-3">
        <div class="col-6 col-md-3">
            <a href="{{ url_for('gallery') }}" class="btn btn-outline-primary w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
                <i data-feather="grid" class="mb-2" style="width: 28px; height: 28px;"></i>
                <span class="small">Browse Gallery</span>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="{{ url_for('search') }}" class="btn btn-outline-secondary w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
                <i data-feather="search" class="mb-2" style="width: 28px; height: 28px;"></i>
                <span class="small">Search Orchids</span>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="{{ url_for('upload') }}" class="btn btn-outline-success w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center">
                <i data-feather="upload" class="mb-2" style="width: 28px; height: 28px;"></i>
                <span class="small">Upload Photo</span>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="/research-lab/" class="btn btn-outline-warning w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center" style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);">
                <i data-feather="cpu" class="mb-2" style="width: 28px; height: 28px;"></i>
                <span class="small fw-bold">Research Lab</span>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="/bulk-analyzer/bulk-upload" class="btn btn-outline-success w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center" style="background: linear-gradient(135deg, #28a745, #20c997); color: white; border: none; box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);">
                <i data-feather="upload-cloud" class="mb-2" style="width: 28px; height: 28px;"></i>
                <span class="small fw-bold">Bulk Analysis</span>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="/widgets/" class="btn btn-outline-info w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center" style="background: linear-gradient(135deg, #17a2b8, #138496); color: white; border: none; box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);">
                <i data-feather="grid" class="mb-2" style="width: 28px; height: 28px;"></i>
                <span class="small fw-bold">Widget Gallery</span>
            </a>
        </div>
        <div class="col-6 col-md-3">
            <a href="/widgets/hollywood-orchids/" class="btn btn-outline-danger w-100 py-3 h-100 d-flex flex-column align-items-center justify-content-center" style="background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; border: none; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);">
                <i data-feather="film" class="mb-2" style="width: 28px; height: 28px;"></i>
                <span class="small fw-bold">Hollywood Orchids</span>
            </a>
        </div>
    </div>
</div>

<!-- Prominent Orchid Continuum Branding Section -->
<div class="container-fluid py-4 mb-4" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-8 text-center">
                <div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
                    <div class="text-center text-md-start">
                        <h2 class="h3 mb-1" style="color: #7A4B8E;">The Orchid Continuum</h2>
                        <p class="text-muted mb-2">Digital orchid collection and community platform</p>
                        <div class="d-flex flex-wrap justify-content-center justify-content-md-start gap-2">
                            <span class="badge px-3 py-1" style="background: #7A4B8E; color: white;">5,797+ Orchids</span>
                            <span class="badge bg-success px-3 py-1">AI-Enhanced</span>
                            <span class="badge bg-warning text-dark px-3 py-1">Since 1979</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Orchids Gallery Preview -->
<div class="container mb-5">
    <div class="row mb-3">
        <div class="col-12 text-center">
            <h3 style="color: #7A4B8E;">Latest Database Additions</h3>
            <p class="text-muted">Latest additions to our growing collection</p>
        </div>
    </div>
    
    <div id="recent-orchids-container">
        <!-- Recent orchids will be loaded dynamically -->
        <div class="text-center py-4">
            <div class="spinner-border" style="color: #7A4B8E;" role="status">
                <span class="visually-hidden">Loading recent orchids...</span>
            </div>
        </div>
    </div>
    
    <div class="text-center mt-4">
        <a href="{{ url_for('gallery') }}" class="btn btn-lg" style="background: #7A4B8E; color: white; border: none;">
            <i data-feather="grid" class="me-2"></i>
            View Complete Gallery
        </a>
    </div>
</div>

<!-- Features Section -->
<div class="container-fluid py-5" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h3 style="color: #7A4B8E;">Explore Our Features</h3>
                <p class="text-muted">Discover the power of AI-enhanced orchid identification and community</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i data-feather="camera" style="width: 48px; height: 48px; color: #7A4B8E;"></i>
                        </div>
                        <h5 style="color: #7A4B8E;">AI Identification</h5>
                        <p class="text-muted">Upload photos for instant AI-powered orchid identification with detailed analysis.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i data-feather="map" style="width: 48px; height: 48px; color: #7A4B8E;"></i>
                        </div>
                        <h5 style="color: #7A4B8E;">Interactive Map</h5>
                        <p class="text-muted">Explore orchid distributions worldwide with our comprehensive mapping system.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i data-feather="users" style="width: 48px; height: 48px; color: #7A4B8E;"></i>
                        </div>
                        <h5 style="color: #7A4B8E;">Community</h5>
                        <p class="text-muted">Join fellow enthusiasts in building the world's largest orchid database.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm hollywood-preview-card">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i data-feather="film" style="width: 48px; height: 48px; color: #7A4B8E;"></i>
                        </div>
                        <h5 style="color: #7A4B8E;">🎬 Hollywood Orchids</h5>
                        <p class="text-muted">Discover orchids in classic films from "The Big Sleep" to "Wild Orchid" with trailers and analysis.</p>
                        <a href="/widgets/hollywood-orchids/" class="btn btn-outline-primary">Explore Cinema Collection</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Load recent orchids dynamically
document.addEventListener('DOMContentLoaded', function() {
    // Set a timeout to prevent hanging
    const timeoutPromise = new Promise((_, reject) => 
        setTimeout(() => reject(new Error('Request timeout')), 8000)
    );
    
    Promise.race([
        fetch('/api/recent-orchids'),
        timeoutPromise
    ])
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            const container = document.getElementById('recent-orchids-container');
            if (data.length > 0) {
                container.innerHTML = `
                    <div class="row g-3">
                        ${data.slice(0, 8).map(orchid => `
                            <div class="col-6 col-md-3">
                                <div class="card h-100 border-0 shadow-sm">
                                    ${orchid.google_drive_id ? 
                                        `<img src="/api/drive-photo/${orchid.google_drive_id}" 
                                             class="card-img-top" 
                                             style="height: 200px; object-fit: cover;" 
                                             alt="${orchid.display_name}"
                                             onerror="this.onerror=null; this.parentElement.innerHTML='<div class=&quot;card-img-top bg-light d-flex align-items-center justify-content-center&quot; style=&quot;height: 200px;&quot;><i data-feather=&quot;image&quot; style=&quot;width: 48px; height: 48px; color: #7A4B8E;&quot;></i></div>'; feather.replace();">` :
                                        '<div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 200px;"><i data-feather="image" style="width: 48px; height: 48px; color: #7A4B8E;"></i></div>'
                                    }
                                    <div class="card-body p-3">
                                        <h6 class="card-title mb-1" style="color: #7A4B8E;">${orchid.display_name}</h6>
                                        <p class="card-text small text-muted mb-2">${orchid.region || 'Unknown origin'}</p>
                                        <a href="/orchid/${orchid.id}" class="btn btn-sm btn-outline-primary">View Details</a>
                                    </div>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                `;
                feather.replace();
            } else {
                container.innerHTML = '<p class="text-center text-muted">No recent orchids available.</p>';
            }
        })
        .catch(error => {
            console.error('Error loading recent orchids:', error);
            document.getElementById('recent-orchids-container').innerHTML = `
                <div class="row g-3">
                    ${Array.from({length: 4}, (_, i) => `
                        <div class="col-6 col-md-3">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                                    <i data-feather="image" style="width: 48px; height: 48px; color: #7A4B8E;"></i>
                                </div>
                                <div class="card-body p-3">
                                    <h6 class="card-title mb-1" style="color: #7A4B8E;">Loading orchids...</h6>
                                    <p class="card-text small text-muted mb-2">Please wait</p>
                                    <button class="btn btn-sm btn-outline-primary" disabled>Loading...</button>
                                </div>
                            </div>
                        </div>
                    `).join('')}
                </div>
            `;
            feather.replace();
        });
});
</script>

{% endblock %}