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

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Header Section -->
            <div class="text-center mb-5">
                <h1 class="display-4 text-light mb-3">
                    <i data-feather="star" class="me-3"></i>
                    Join the Orchid Continuum
                </h1>
                <p class="lead text-muted">
                    Become part of the world's most comprehensive AI-powered orchid identification and analysis community
                </p>
            </div>
            
            <!-- Value Proposition Cards -->
            <div class="row mb-5">
                <div class="col-md-4">
                    <div class="card bg-dark text-light h-100">
                        <div class="card-body text-center">
                            <i data-feather="cpu" class="mb-3" style="width: 48px; height: 48px; color: #0d6efd;"></i>
                            <h5>AI-Powered Analysis</h5>
                            <p class="small">Get instant orchid identification and detailed care recommendations using advanced AI technology.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-dark text-light h-100">
                        <div class="card-body text-center">
                            <i data-feather="award" class="mb-3" style="width: 48px; height: 48px; color: #198754;"></i>
                            <h5>Professional Judging</h5>
                            <p class="small">Access orchid show judging standards and get scoring analysis from multiple organizations.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-dark text-light h-100">
                        <div class="card-body text-center">
                            <i data-feather="database" class="mb-3" style="width: 48px; height: 48px; color: #dc3545;"></i>
                            <h5>Global Database</h5>
                            <p class="small">Access data from RHS, AOS, WorldPlants, and other authoritative botanical databases.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <!-- Registration Form -->
            <div class="card bg-dark text-light">
                <div class="card-header text-center">
                    <h3 class="h4 mb-0">Create Your Orchid Continuum Account</h3>
                    <small class="text-muted">Get your unique Orchid ID and start contributing!</small>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="first_name" class="form-label">First Name</label>
                                    <input type="text" 
                                           class="form-control bg-dark text-light border-secondary" 
                                           id="first_name" 
                                           name="first_name"
                                           placeholder="Your first name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="last_name" class="form-label">Last Name</label>
                                    <input type="text" 
                                           class="form-control bg-dark text-light border-secondary" 
                                           id="last_name" 
                                           name="last_name"
                                           placeholder="Your last name">
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" 
                                   class="form-control bg-dark text-light border-secondary" 
                                   id="email" 
                                   name="email" 
                                   placeholder="your@email.com"
                                   required>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="password" class="form-label">Password</label>
                                    <input type="password" 
                                           class="form-control bg-dark text-light border-secondary" 
                                           id="password" 
                                           name="password" 
                                           placeholder="Choose a secure password"
                                           minlength="6"
                                           required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="confirm_password" class="form-label">Confirm Password</label>
                                    <input type="password" 
                                           class="form-control bg-dark text-light border-secondary" 
                                           id="confirm_password" 
                                           name="confirm_password" 
                                           placeholder="Confirm your password"
                                           minlength="6"
                                           required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="experience_level" class="form-label">Your Orchid Experience</label>
                            <select class="form-select bg-dark text-light border-secondary" 
                                    id="experience_level" 
                                    name="experience_level">
                                <option value="beginner">Beginner - Just starting with orchids</option>
                                <option value="intermediate">Intermediate - Growing orchids for a few years</option>
                                <option value="expert">Expert - Advanced grower or professional</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <label for="orchid_interests" class="form-label">Your Orchid Interests</label>
                            <textarea class="form-control bg-dark text-light border-secondary" 
                                      id="orchid_interests" 
                                      name="orchid_interests" 
                                      rows="3"
                                      placeholder="What types of orchids interest you most? (e.g., Phalaenopsis, Cattleya, species orchids, hybrids, etc.)"></textarea>
                            <div class="form-text">Help us personalize your experience</div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i data-feather="user-plus" class="me-2"></i>
                                Join the Orchid Continuum
                            </button>
                        </div>
                    </form>
                    
                    <div class="text-center mt-3">
                        <p class="small text-muted">
                            Already have an account? 
                            <a href="{{ url_for('login') }}" class="text-primary">Sign in here</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Benefits Sidebar -->
        <div class="col-lg-4">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="gift" class="me-2"></i>
                        What You Get
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex mb-3">
                        <i data-feather="user" class="me-3 text-primary" style="min-width: 20px;"></i>
                        <div>
                            <strong>Unique Orchid ID</strong>
                            <p class="small text-muted mb-0">Get your personal OU-XXX123 identifier to track all your contributions</p>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-3">
                        <i data-feather="upload-cloud" class="me-3 text-success" style="min-width: 20px;"></i>
                        <div>
                            <strong>Unlimited Uploads</strong>
                            <p class="small text-muted mb-0">Upload as many orchid photos as you want for AI analysis</p>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-3">
                        <i data-feather="bar-chart" class="me-3 text-info" style="min-width: 20px;"></i>
                        <div>
                            <strong>Personal Dashboard</strong>
                            <p class="small text-muted mb-0">Track your contributions, view statistics, and earn achievement badges</p>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-3">
                        <i data-feather="star" class="me-3 text-warning" style="min-width: 20px;"></i>
                        <div>
                            <strong>Featured Opportunities</strong>
                            <p class="small text-muted mb-0">Get your exceptional orchids featured on the homepage</p>
                        </div>
                    </div>
                    
                    <div class="d-flex">
                        <i data-feather="users" class="me-3 text-secondary" style="min-width: 20px;"></i>
                        <div>
                            <strong>Community Access</strong>
                            <p class="small text-muted mb-0">Connect with orchid enthusiasts worldwide and share knowledge</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card bg-dark text-light mt-3">
                <div class="card-body text-center">
                    <h6><i data-feather="shield-check" class="me-2"></i>100% Free</h6>
                    <p class="small text-muted mb-0">
                        No hidden fees, no subscriptions. Join our community of orchid enthusiasts at no cost.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Password confirmation validation
document.getElementById('confirm_password').addEventListener('input', function() {
    const password = document.getElementById('password').value;
    const confirmPassword = this.value;
    
    if (password !== confirmPassword) {
        this.setCustomValidity('Passwords do not match');
    } else {
        this.setCustomValidity('');
    }
});
</script>
{% endblock %}