{% extends "base.html" %}
{% load static %}

{% block title %}Partnership Opportunities - IHICL Investment{% endblock %}

{% block content %}
    <!-- Header Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">Partnership Opportunities</h4>
            <ol class="breadcrumb justify-content-center mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-white">Home</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-white">Pages</a></li>
                <li class="breadcrumb-item active text-primary">Partnerships</li>
            </ol>    
        </div>
    </div>
    <!-- Header End -->

    <!-- Partnership Intro Section Start -->
    <div class="container-fluid bg-light py-5">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center wow fadeInUp" data-wow-delay="0.1s">
                    <h2 class="section-title__title mb-4">Partnership Opportunities</h2>
                    <p class="faq-text">
                        We welcome collaboration with government, academia, off‑takers, hospitality, and travel partners. Get in touch to co‑create impact.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- Partnership Intro Section End -->

    <!-- Partnership Types Section Start -->
    <div class="container-fluid py-5" style="background-color: #F9F4E8;">
        <div class="container py-5">
            <div class="row g-4">
                <!-- Government & DFIs -->
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary btn-lg-square rounded-circle p-3 mx-auto mb-4">
                                <i class="fas fa-landmark text-white fa-2x"></i>
                            </div>
                            <h5 class="card-title mb-3">Government & DFIs</h5>
                            <p class="card-text">Policy support, blended finance, and catalytic capital.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Universities & R&D -->
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary btn-lg-square rounded-circle p-3 mx-auto mb-4">
                                <i class="fas fa-graduation-cap text-white fa-2x"></i>
                            </div>
                            <h5 class="card-title mb-3">Universities & R&D</h5>
                            <p class="card-text">Research, agronomy trials, and talent pipelines.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Certified Off-takers -->
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary btn-lg-square rounded-circle p-3 mx-auto mb-4">
                                <i class="fas fa-handshake text-white fa-2x"></i>
                            </div>
                            <h5 class="card-title mb-3">Certified Off‑takers</h5>
                            <p class="card-text">Forward contracts and quality‑assured exports.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Hospitality Partners -->
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary btn-lg-square rounded-circle p-3 mx-auto mb-4">
                                <i class="fas fa-hotel text-white fa-2x"></i>
                            </div>
                            <h5 class="card-title mb-3">Hospitality Partners</h5>
                            <p class="card-text">Experience design, events, and destination marketing.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Diaspora Channels -->
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary btn-lg-square rounded-circle p-3 mx-auto mb-4">
                                <i class="fas fa-globe-africa text-white fa-2x"></i>
                            </div>
                            <h5 class="card-title mb-3">Diaspora Channels</h5>
                            <p class="card-text">Compliant investment pathways and co‑investment vehicles.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Technology Providers -->
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary btn-lg-square rounded-circle p-3 mx-auto mb-4">
                                <i class="fas fa-microchip text-white fa-2x"></i>
                            </div>
                            <h5 class="card-title mb-3">Technology Providers</h5>
                            <p class="card-text">Solar‑hybrid power, cold chain, traceability systems.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Partnership Types Section End -->

    <!-- CTA Section Start -->
    <div class="container-fluid bg-primary py-5">
        <div class="container py-5 text-center text-white">
            <div class="wow fadeInUp" data-wow-delay="0.1s">
                <h2 class="display-4 mb-4">Partner with us today as we grow the economy through agriculture.</h2>
                
                <div class="d-flex flex-column flex-md-row justify-content-center">
                    <a href="{% url 'contact' %}" class="thm-btn become-volunteer__btn me-md-3 mb-3 mb-md-0">
                        Start Investing
                    </a>
                </div>
                
                <div class="mt-4">
                    <p class="mb-0">Or call our partnership team directly: +234-980-009-630</p>
                </div>
            </div>
        </div>
    </div>
    <!-- CTA Section End -->

    <style>
        .section-title__title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #085e2b;
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .section-title__title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #085e2b;
        }
        
        .faq-text {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #6c757d;
        }
        
        .thm-btn {
            background-color: #085e2b;
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        .thm-btn:hover {
            background-color: #064821;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .card {
            transition: transform 0.3s ease;
            background-color: white;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        @media (max-width: 992px) {
            .section-title__title {
                font-size: 2rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Make phone numbers clickable
            const phoneElement = document.querySelector('.mt-4 p');
            if (phoneElement) {
                phoneElement.style.cursor = 'pointer';
                phoneElement.addEventListener('click', function() {
                    const phoneNumber = this.textContent.replace('Or call our partnership team directly: ', '').trim();
                    window.location.href = `tel:${phoneNumber}`;
                });
            }
        });
    </script>
{% endblock %}