{% extends "base.html" %}

{% block title %}Partners - The Orchid Continuum{% endblock %}

{% block content %}
<div class="container-fluid py-5" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh;">
    <div class="container">
        <!-- Header Section -->
        <div class="text-center mb-5">
            <h1 class="display-4 fw-bold text-white mb-4">
                <i data-feather="handshake" class="me-3" style="color: #00d4aa;"></i>
                Our Valued Partners
            </h1>
            <p class="lead text-light mb-4">
                The Orchid Continuum's success is built on collaboration with world-renowned orchid experts, 
                taxonomists, and passionate growers who share their knowledge and expertise with our global community.
            </p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <p class="text-light" style="font-size: 1.1rem;">
                        These partnerships enable us to provide authoritative, research-grade orchid information 
                        while maintaining the highest standards of botanical accuracy and cultural guidance.
                    </p>
                </div>
            </div>
        </div>

        <!-- Partners Grid -->
        <div class="row g-4">
            <!-- Gary Yong Gee -->
            <div class="col-lg-4">
                <div class="partner-card h-100" style="
                    background: rgba(255, 255, 255, 0.05);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 20px;
                    padding: 2rem;
                    text-align: center;
                    transition: all 0.3s ease;
                " onmouseover="this.style.transform='translateY(-10px)'; this.style.boxShadow='0 20px 40px rgba(0, 212, 170, 0.3)'" 
                   onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 32px rgba(0, 0, 0, 0.3)'">
                    
                    <!-- Partner Photo -->
                    <div class="partner-photo mb-4">
                        <div style="
                            width: 150px;
                            height: 150px;
                            border-radius: 50%;
                            background: linear-gradient(135deg, #00d4aa, #6B3FA0);
                            margin: 0 auto;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 3rem;
                            color: white;
                            font-weight: bold;
                            border: 4px solid rgba(255, 255, 255, 0.2);
                        ">
                            🇦🇺
                        </div>
                    </div>
                    
                    <!-- Partner Info -->
                    <h3 class="text-white mb-3">Gary Yong Gee</h3>
                    <p class="text-muted mb-3">
                        <i data-feather="map-pin" class="me-2" style="color: #00d4aa;"></i>
                        Australia
                    </p>
                    
                    <div class="partner-description text-light mb-4">
                        <p>Renowned Australian orchid expert and creator of the comprehensive 
                        <strong>Orchid Species Website</strong>, featuring detailed taxonomic information, 
                        cultural notes, and stunning photography of orchid species from around the world.</p>
                        
                        <p class="small text-muted">
                            Gary's extensive database serves as a cornerstone reference for orchid 
                            enthusiasts and researchers globally, providing authoritative botanical 
                            information and expert growing advice.
                        </p>
                    </div>
                    
                    <!-- Partnership Benefits -->
                    <div class="partnership-benefits mb-4">
                        <h6 class="text-warning mb-3">
                            <i data-feather="star" class="me-2"></i>
                            Partnership Contributions
                        </h6>
                        <ul class="list-unstyled text-start">
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Taxonomic accuracy verification
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Cultural information enhancement
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Species distribution mapping
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Expert photography collaboration
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Links -->
                    <div class="partner-links d-grid gap-2">
                        <a href="https://orchids.yonggee.name" target="_blank" class="btn btn-primary">
                            <i data-feather="external-link" class="me-2"></i>
                            Visit Gary's Orchid Website
                        </a>
                        <a href="/partnership-demo/gary-yong-gee" class="btn btn-outline-success">
                            <i data-feather="eye" class="me-2"></i>
                            View Partnership Demo
                        </a>
                    </div>
                </div>
            </div>

            <!-- Roberta Fox -->
            <div class="col-lg-4">
                <div class="partner-card h-100" style="
                    background: rgba(255, 255, 255, 0.05);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 20px;
                    padding: 2rem;
                    text-align: center;
                    transition: all 0.3s ease;
                " onmouseover="this.style.transform='translateY(-10px)'; this.style.boxShadow='0 20px 40px rgba(220, 53, 69, 0.3)'" 
                   onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 32px rgba(0, 0, 0, 0.3)'">
                    
                    <!-- Partner Photo -->
                    <div class="partner-photo mb-4">
                        <div style="
                            width: 150px;
                            height: 150px;
                            border-radius: 50%;
                            background: linear-gradient(135deg, #dc3545, #e83e8c);
                            margin: 0 auto;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 3rem;
                            color: white;
                            font-weight: bold;
                            border: 4px solid rgba(255, 255, 255, 0.2);
                        ">
                            🇺🇸
                        </div>
                    </div>
                    
                    <!-- Partner Info -->
                    <h3 class="text-white mb-3">Roberta Fox</h3>
                    <p class="text-muted mb-3">
                        <i data-feather="map-pin" class="me-2" style="color: #dc3545;"></i>
                        United States
                    </p>
                    
                    <div class="partner-description text-light mb-4">
                        <p>Distinguished orchid expert and author of the comprehensive 
                        <strong>Internet Orchid Species Photo Encyclopedia (IOSPE)</strong>, 
                        one of the most authoritative online orchid resources available.</p>
                        
                        <p class="small text-muted">
                            Roberta's meticulous documentation includes detailed species descriptions, 
                            etymology, cultural requirements, and historical context, making her work 
                            an invaluable reference for both amateur and professional orchid growers.
                        </p>
                    </div>
                    
                    <!-- Partnership Benefits -->
                    <div class="partnership-benefits mb-4">
                        <h6 class="text-warning mb-3">
                            <i data-feather="star" class="me-2"></i>
                            Partnership Contributions
                        </h6>
                        <ul class="list-unstyled text-start">
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Species encyclopedia integration
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Historical documentation
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Etymology and nomenclature
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Cultural guidance expertise
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Links -->
                    <div class="partner-links d-grid gap-2">
                        <a href="https://orchidspecies.com" target="_blank" class="btn btn-danger">
                            <i data-feather="external-link" class="me-2"></i>
                            Visit IOSPE Website
                        </a>
                        <a href="#" class="btn btn-outline-danger" onclick="alert('Partnership demo coming soon!')">
                            <i data-feather="eye" class="me-2"></i>
                            Partnership Integration
                        </a>
                    </div>
                </div>
            </div>

            <!-- Dr. Michael Hessler -->
            <div class="col-lg-4">
                <div class="partner-card h-100" style="
                    background: rgba(255, 255, 255, 0.05);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 20px;
                    padding: 2rem;
                    text-align: center;
                    transition: all 0.3s ease;
                " onmouseover="this.style.transform='translateY(-10px)'; this.style.boxShadow='0 20px 40px rgba(107, 63, 160, 0.3)'" 
                   onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 32px rgba(0, 0, 0, 0.3)'">
                    
                    <!-- Partner Photo -->
                    <div class="partner-photo mb-4">
                        <div style="
                            width: 150px;
                            height: 150px;
                            border-radius: 50%;
                            background: linear-gradient(135deg, #6B3FA0, #9b59b6);
                            margin: 0 auto;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 3rem;
                            color: white;
                            font-weight: bold;
                            border: 4px solid rgba(255, 255, 255, 0.2);
                        ">
                            🇩🇪
                        </div>
                    </div>
                    
                    <!-- Partner Info -->
                    <h3 class="text-white mb-3">Dr. Michael Hessler</h3>
                    <p class="text-muted mb-3">
                        <i data-feather="map-pin" class="me-2" style="color: #6B3FA0;"></i>
                        Germany
                    </p>
                    
                    <div class="partner-description text-light mb-4">
                        <p>Creator and maintainer of the authoritative 
                        <strong>World Orchids Taxonomic Database</strong>, the most comprehensive 
                        orchid taxonomic resource available, serving as the backbone of global orchid research.</p>
                        
                        <p class="small text-muted">
                            Dr. Hessler's database provides the definitive taxonomic framework that powers 
                            The Orchid Continuum's scientific accuracy, ensuring all species identifications 
                            and classifications meet the highest botanical standards.
                        </p>
                    </div>
                    
                    <!-- Partnership Benefits -->
                    <div class="partnership-benefits mb-4">
                        <h6 class="text-warning mb-3">
                            <i data-feather="star" class="me-2"></i>
                            Partnership Contributions
                        </h6>
                        <ul class="list-unstyled text-start">
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Authoritative taxonomic database
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Scientific nomenclature standards
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Systematic classification
                            </li>
                            <li class="mb-2">
                                <i data-feather="check-circle" class="me-2" style="color: #28a745; width: 16px; height: 16px;"></i>
                                Research-grade accuracy
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Links -->
                    <div class="partner-links d-grid gap-2">
                        <a href="https://worldorchids.org" target="_blank" class="btn" style="background: #6B3FA0; color: white;">
                            <i data-feather="external-link" class="me-2"></i>
                            Visit World Orchids
                        </a>
                        <a href="/citation-generator" class="btn btn-outline-light">
                            <i data-feather="book" class="me-2"></i>
                            Citation Generator
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Partnership Philosophy -->
        <div class="row mt-5">
            <div class="col-12">
                <div style="
                    background: rgba(255, 255, 255, 0.05);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 20px;
                    padding: 3rem;
                    text-align: center;
                ">
                    <h2 class="text-white mb-4">
                        <i data-feather="users" class="me-3" style="color: #00d4aa;"></i>
                        Our Partnership Philosophy
                    </h2>
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <p class="lead text-light mb-4">
                                The Orchid Continuum believes in the power of collaboration to advance orchid science, 
                                education, and conservation. Our partnerships are built on mutual respect, shared expertise, 
                                and a commitment to making authoritative orchid knowledge accessible to all.
                            </p>
                            <p class="text-light">
                                Each partner brings unique strengths to our platform while maintaining their independent 
                                websites and intellectual property. Together, we're creating a comprehensive orchid 
                                resource that benefits growers, researchers, and conservationists worldwide.
                            </p>
                        </div>
                    </div>
                    
                    <!-- Call to Action -->
                    <div class="mt-4">
                        <a href="/contact" class="btn btn-lg" style="background: linear-gradient(135deg, #00d4aa, #6B3FA0); color: white; border: none; font-weight: 600;">
                            <i data-feather="mail" class="me-2"></i>
                            Interested in Partnership?
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Initialize Feather icons
    feather.replace();
</script>
{% endblock %}