{% extends "base.html" %}

{% block head %}
    <title>Discover What AI Can Do For Your Orchids - Orchid Continuum</title>
    <meta name="description" content="See how AI transforms orchid care from guesswork to precision with insights you'd never discover alone">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 0;
            text-align: center;
        }
        .comparison-card {
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 2rem;
            height: 100%;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .comparison-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .human-approach {
            background: #f8f9fa;
            border-left: 4px solid #dc3545;
        }
        .ai-approach {
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
            border-left: 4px solid #4caf50;
        }
        .insight-preview {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1rem 0;
            border-left: 4px solid #2196f3;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .wow-factor {
            display: inline-block;
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-left: 1rem;
        }
        .value-metric {
            font-size: 2rem;
            font-weight: bold;
            color: #4caf50;
            margin-bottom: 0.5rem;
        }
        .demo-button {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            border: none;
            color: white;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            border-radius: 25px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }
        .demo-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
            color: white;
        }
        .experience-selector {
            margin: 2rem 0;
        }
        .experience-btn {
            margin: 0.5rem;
            padding: 0.75rem 1.5rem;
            border: 2px solid #667eea;
            background: transparent;
            color: #667eea;
            border-radius: 25px;
            transition: all 0.3s;
        }
        .experience-btn:hover, .experience-btn.active {
            background: #667eea;
            color: white;
        }
        .hidden-pattern {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }
        .hidden-pattern.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section">
    <div class="container">
        <h1 class="display-3 mb-4">🤖 Think You Don't Need AI?</h1>
        <p class="lead mb-4">You're missing insights that could transform your orchid collection</p>
        <h2 class="h4 mb-5">See what patterns are hiding in your plants right now...</h2>
    </div>
</div>

<!-- Experience Level Selector -->
<div class="container experience-selector text-center">
    <h3 class="mb-3">What's your orchid experience level?</h3>
    <div>
        <button class="experience-btn active" data-level="beginner">
            🌱 Beginner (0-1 years)
        </button>
        <button class="experience-btn" data-level="intermediate">
            🌿 Intermediate (1-5 years)
        </button>
        <button class="experience-btn" data-level="advanced">
            🌺 Advanced (5+ years)
        </button>
    </div>
</div>

<!-- Main Comparison Section -->
<div class="container my-5">
    <div class="row">
        <!-- Human Approach -->
        <div class="col-md-6 mb-4">
            <div class="comparison-card human-approach">
                <h3 class="text-danger mb-3">
                    <i data-feather="user" class="me-2"></i>
                    Without AI: Manual Tracking
                </h3>
                
                <div class="mb-4">
                    <h5>What You're Doing Now:</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2">📝 Track care in notebooks or spreadsheets</li>
                        <li class="mb-2">🤔 React to problems after they appear</li>
                        <li class="mb-2">❓ Guess at optimal care schedules</li>
                        <li class="mb-2">📚 Research each problem individually</li>
                        <li class="mb-2">🔄 Repeat same mistakes with different plants</li>
                    </ul>
                </div>
                
                <div class="text-center">
                    <div class="value-metric text-danger">2-3 hours/week</div>
                    <p class="text-muted">Time spent on collection management</p>
                    
                    <div class="value-metric text-danger">40%</div>
                    <p class="text-muted">Plants that never reach full potential</p>
                </div>
            </div>
        </div>
        
        <!-- AI Approach -->
        <div class="col-md-6 mb-4">
            <div class="comparison-card ai-approach">
                <h3 class="text-success mb-3">
                    <i data-feather="cpu" class="me-2"></i>
                    With AI: Intelligent Analysis
                </h3>
                
                <div class="mb-4">
                    <h5>What AI Discovers for You:</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2">🔍 Finds hidden patterns across your entire collection</li>
                        <li class="mb-2">🔮 Predicts problems weeks before they appear</li>
                        <li class="mb-2">⚡ Optimizes care schedules automatically</li>
                        <li class="mb-2">🎯 Provides specific solutions, not generic advice</li>
                        <li class="mb-2">📈 Learns from successful collections worldwide</li>
                    </ul>
                </div>
                
                <div class="text-center">
                    <div class="value-metric text-success">15 min/week</div>
                    <p class="text-muted">Time spent on collection management</p>
                    
                    <div class="value-metric text-success">90%</div>
                    <p class="text-muted">Plants thriving at full potential</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden Insights Preview -->
<div class="container my-5">
    <div class="text-center mb-4">
        <h2>🔍 Insights You're Missing Right Now</h2>
        <p class="lead text-muted">These patterns are hiding in your collection, invisible without AI</p>
    </div>
    
    <div id="insightContainer">
        <!-- Insights will be loaded dynamically based on experience level -->
    </div>
    
    <div class="text-center mt-4">
        <button class="btn demo-button" onclick="revealInsights()">
            <i data-feather="eye" class="me-2"></i>
            Reveal What AI Sees
        </button>
    </div>
</div>

<!-- Interactive Demo Section -->
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
            <div class="card border-0 shadow-lg">
                <div class="card-body p-5">
                    <h2 class="mb-4">🚀 See AI in Action</h2>
                    <p class="lead mb-4">
                        Experience how AI analyzes a collection like yours and discovers 
                        insights that would take years to learn manually
                    </p>
                    
                    <a href="/collection/onboarding/demo?level=beginner" class="btn demo-button btn-lg me-3">
                        <i data-feather="play" class="me-2"></i>
                        Try Interactive Demo
                    </a>
                    
                    <a href="/collection" class="btn btn-outline-primary btn-lg">
                        <i data-feather="layers" class="me-2"></i>
                        Start My AI Collection
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Value Proposition Summary -->
<div class="bg-light py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2>Why Expert Growers Are Switching to AI</h2>
        </div>
        
        <div class="row">
            <div class="col-md-3 text-center mb-4">
                <div class="h1 text-primary">⏰</div>
                <h4>Save 10+ Hours/Month</h4>
                <p class="text-muted">Stop researching problems. Get instant expert analysis.</p>
            </div>
            <div class="col-md-3 text-center mb-4">
                <div class="h1 text-success">📈</div>
                <h4>60% More Blooms</h4>
                <p class="text-muted">Optimize conditions for maximum flowering potential.</p>
            </div>
            <div class="col-md-3 text-center mb-4">
                <div class="h1 text-warning">🔮</div>
                <h4>Prevent Problems</h4>
                <p class="text-muted">Predict and fix issues before plants suffer damage.</p>
            </div>
            <div class="col-md-3 text-center mb-4">
                <div class="h1 text-info">🎯</div>
                <h4>Expert-Level Insights</h4>
                <p class="text-muted">Gain decades of experience instantly.</p>
            </div>
        </div>
    </div>
</div>

<script>
    feather.replace();
    
    let currentLevel = 'beginner';
    
    // Experience level selection
    document.querySelectorAll('.experience-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.experience-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            currentLevel = this.dataset.level;
            loadInsightsForLevel(currentLevel);
        });
    });
    
    // Load insights based on experience level
    function loadInsightsForLevel(level) {
        const container = document.getElementById('insightContainer');
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';
        
        fetch(`/collection/onboarding/api/generate_insight?type=random&level=${level}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayInsight(data.insight, data.analysis_meta);
                }
            })
            .catch(error => {
                console.error('Error loading insights:', error);
                container.innerHTML = '<p class="text-muted">Loading insights...</p>';
            });
    }
    
    function displayInsight(insight, meta) {
        const container = document.getElementById('insightContainer');
        container.innerHTML = `
            <div class="insight-preview hidden-pattern">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <h4>${insight.title}</h4>
                    <span class="wow-factor">🤯 Wow Factor ${insight.wow_factor}/10</span>
                </div>
                <p class="lead">${insight.description}</p>
                
                <div class="row mt-4">
                    <div class="col-md-6">
                        <h6 class="text-danger">🧠 Human Approach:</h6>
                        <p class="text-muted">${insight.human_vs_ai.human}</p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-success">🤖 AI Analysis:</h6>
                        <p class="text-muted">${insight.human_vs_ai.ai}</p>
                    </div>
                </div>
                
                <div class="alert alert-success mt-3">
                    <strong>💡 Value:</strong> ${insight.value}
                </div>
                
                <small class="text-muted">
                    Analysis completed in ${meta.analysis_time} • ${meta.confidence} confidence • 
                    ${meta.data_points_analyzed} data points analyzed
                </small>
            </div>
        `;
    }
    
    function revealInsights() {
        loadInsightsForLevel(currentLevel);
        setTimeout(() => {
            document.querySelectorAll('.hidden-pattern').forEach(el => {
                el.classList.add('revealed');
            });
        }, 100);
    }
    
    // Load initial insights for beginners
    loadInsightsForLevel('beginner');
</script>
{% endblock %}