{% extends "layout.html" %}
{% load i18n %}

{% block title %}{% trans "Curso de Agricultura de Precisión y Sostenible" %}{% endblock title %}

{% block head %}
    {% load static %}
    {% load humanize %}
<style>
    .course-hero {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('{% static "images/empieza-background.jpg" %}');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 4rem 0;
        margin-bottom: 2rem;
    }
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: #28a745;
    }
    .payment-panel {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 2rem;
        text-align: center;
    }
    .info-card {
        transition: all 0.3s ease;
        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        height: 100%;
    }
    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    .info-card .card-body {
        padding: 1.5rem;
    }
    .info-card .card-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: #28a745;
    }
    .accordion-button:not(.collapsed) {
        background-color: #e8f5e9;
        color: #2e7d32;
        font-weight: bold;
    }
    .accordion-button:focus {
        box-shadow: none;
        border-color: rgba(0,0,0,.125);
    }
    .accordion-item {
        margin-bottom: 1rem;
        border-radius: 0.5rem !important;
        overflow: hidden;
    }
    .module-icon {
        margin-right: 10px;
        color: #28a745;
    }
    .stripe-button {
        background: linear-gradient(135deg, #635bff 0%, #8a85ff 100%);
        border: none;
        border-radius: 6px;
        padding: 13px 25px;
        font-weight: 600;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        box-shadow: 0 2px 5px rgba(99, 91, 255, 0.3);
        text-transform: none;
        letter-spacing: normal;
    }
    .stripe-button:hover {
        background: linear-gradient(135deg, #4f47e6 0%, #726cf5 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(99, 91, 255, 0.4);
    }
    .stripe-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTE0NC4zIDIxNi43YzAgMTUuNi0xMC4yIDIzLjQtMzAuNCAyMy40SDEwMHYtNzRoMTMuN2MxOS44IDAgMzAuNiA3LjUgMzAuNiAyMy4ydjI3LjR6TTEwMCAxMTZoNDAuMmMxOS44IDAgMzAuNiA3LjUgMzAuNiAyMy4ydjI3LjRjMCAxNS42LTEwLjggMjMuNC0zMC42IDIzLjRIMTAwVjExNnpNMjUwLjUgMTU4LjVjMC0zMy4xLTI0LjEtNTMuOS02MS41LTUzLjlIMTQ3djE1OGg0MS45di0zOS4xaDE0LjZjMTYuNCAwIDI3LjEtNi44IDMyLjktMTkuNGwtMzIuOS0xMy42Yy0zLjIgOS44LTEyLjIgMTUuNi0yMi42IDE1LjZoLTEyLjR2LTMxLjVoMTIuNGMxMC4xIDAgMTkuMSA1LjQgMTkuMSAxNS4xVjIxMGMwIDkuNy05IDE1LjEtMTkuMSAxNS4xaC0xMi40VjI0MGg0MS45YzM3LjQgMCA2MS41LTIwLjggNjEuNS01My45di0yNy42eiIvPjwvc3ZnPg==') no-repeat;
        background-size: contain;
    }
    .price-tag {
        font-size: 2.5rem;
        font-weight: bold;
        color: #28a745;
        margin: 15px 0;
    }
    .payment-details {
        background: white;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
        border: 1px solid #e9ecef;
    }
</style>
{% endblock %}

{% block content %}
    {% load static %}
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid contenido-principal">
                <!-- Hero Section -->
                <div class="row course-hero text-center mb-5">
                    <div class="col-12">
                        <h1 class="display-4 fw-bold">Curso Online: Agricultura de Precisión y Sostenible</h1>
                        <p class="lead">Combina tecnología y sostenibilidad para transformar tu producción agrícola</p>
                    </div>
                </div>

                <!-- Course Details -->
                <div class="row mb-5">
                    <div class="col-md-8">
                        <h2 class="mb-4">¿Qué aprenderás en este curso?</h2>
                        <p class="lead">Un curso intensivo diseñado para agricultores, técnicos y profesionales que buscan optimizar sus prácticas agrícolas mediante tecnología y métodos sostenibles.</p>
                        
                        <div class="row mt-4 g-4">
                            <!-- Duración Card -->
                            <div class="col-md-6">
                                <div class="card info-card h-100">
                                    <div class="card-body text-center">
                                        <div class="card-icon">
                                            <i class="bi bi-calendar-check"></i>
                                        </div>
                                        <h4 class="card-title">Duración</h4>
                                        <p class="card-text">1 día intensivo</p>
                                        <p class="card-text">5 horas totales (con pausas incluidas)</p>
                                        <div class="mt-3">
                                            <span class="badge bg-success">Horario flexible</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Modalidad Card -->
                            <div class="col-md-6">
                                <div class="card info-card h-100">
                                    <div class="card-body text-center">
                                        <div class="card-icon">
                                            <i class="bi bi-laptop"></i>
                                        </div>
                                        <h4 class="card-title">Modalidad</h4>
                                        <p class="card-text">100% online en vivo</p>
                                        <p class="card-text">Plataforma: Zoom, Google Meet o similar</p>
                                        <div class="mt-3">
                                            <span class="badge bg-success">Acceso desde cualquier dispositivo</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="payment-panel">
                            <h3 class="mb-3">Inscripción y Pago</h3>
                            
                            <div class="price-tag">
                                $50 USD
                            </div>
                            
                            <div class="payment-details">
                                <p class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i> Acceso completo al curso</p>
                                <p class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i> Materiales descargables</p>
                                <p class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i> Certificado de participación</p>
                                <p class="mb-1"><i class="bi bi-check-circle-fill text-success me-2"></i> Acceso a comunidad online</p>
                            </div>
                            
                            <p class="text-muted mb-3">Método de pago seguro:</p>
                            
                            <a href="https://buy.stripe.com/8x27sK4Oc8ln6qY9xg5Vu00" class="btn stripe-button w-100 mb-3" target="_blank">
                                <span class="stripe-icon"></span>
                                Pagar con Stripe
                            </a>
                            
                            <p class="small text-muted mt-3">
                                <i class="bi bi-lock-fill me-1"></i> Transacción segura
                                <br>
                                <i class="bi bi-shield-check me-1"></i> Protección al comprador
                            </p>
                            
                            <div class="mt-4">
                                <p class="small">
                                    <i class="bi bi-info-circle me-1"></i> 
                                    ¿Necesitas otra forma de pago? 
                                    <a href="#" class="text-success">Contáctanos</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Course Modules - Accordion Version -->
                <div class="row mb-5">
                    <h2 class="text-center mb-4">Contenido detallado del curso</h2>
                    
                    <div class="col-12">
                        <div class="accordion" id="courseAccordion">
                            
                            <!-- Bloque 1 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        <i class="bi bi-house-door-fill module-icon"></i> Bloque 1: Introducción
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#courseAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-person-circle me-2"></i> Presentación del instructor
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-bullseye me-2"></i> Objetivos del curso
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-arrow-left-right me-2"></i> Agricultura tradicional vs sostenible vs de precisión
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Bloque 2 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        <i class="bi bi-tree-fill module-icon"></i> Bloque 2: Agricultura Sostenible
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#courseAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-brightness-alt-high me-2"></i> Agroecología y biodiversidad
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-droplet-fill me-2"></i> Manejo sostenible de agua y suelo
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-cloud-sun-fill me-2"></i> Estrategias frente al cambio climático
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-building me-2"></i> Casos reales de fincas sostenibles
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Bloque 3 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        <i class="bi bi-cpu-fill module-icon"></i> Bloque 3: Agricultura de Precisión
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#courseAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-geo-alt-fill me-2"></i> GPS, sensores, drones y teledetección
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-map-fill me-2"></i> Mapas NDVI y fertilización variable
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-phone-fill me-2"></i> Apps accesibles (AgriCarm demo)
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Bloque 4 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingFour">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                        <i class="bi bi-tools module-icon"></i> Bloque 4: Taller Virtual
                                    </button>
                                </h2>
                                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#courseAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-clipboard-check me-2"></i> Actividad práctica con escenario modelo
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-moisture me-2"></i> Trabajo en grupos: análisis de suelo
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-arrow-repeat me-2"></i> Rotación y fertilización
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Bloque 5 -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingFive">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                        <i class="bi bi-puzzle-fill module-icon"></i> Bloque 5: Integración
                                    </button>
                                </h2>
                                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#courseAccordion">
                                    <div class="accordion-body">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-wallet2 me-2"></i> Cómo comenzar sin grandes inversiones
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-diagram-3 me-2"></i> Modelos de transición sostenible
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-database me-2"></i> Valor de los datos en la agricultura
                                            </li>
                                            <li class="list-group-item d-flex align-items-center">
                                                <i class="bi bi-cash-coin me-2"></i> Ingresos alternativos
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Info -->
                <div class="row mb-5">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h3 class="card-title">Beneficios del Curso</h3>
                                <div class="row">
                                    <div class="col-md-6">
                                        <ul class="list-unstyled">
                                            <li class="mb-2"><i class="bi bi-file-earmark-pdf-fill text-success me-2"></i> Materiales descargables (PDFs, presentaciones)</li>
                                            <li class="mb-2"><i class="bi bi-award-fill text-success me-2"></i> Certificado de participación</li>
                                            <li class="mb-2"><i class="bi bi-people-fill text-success me-2"></i> Acceso a comunidad online de aprendizaje</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <ul class="list-unstyled">
                                            <li class="mb-2"><i class="bi bi-laptop-fill text-success me-2"></i> Demostraciones prácticas en pantalla compartida</li>
                                            <li class="mb-2"><i class="bi bi-chat-square-text-fill text-success me-2"></i> Sondeos interactivos y trabajo grupal</li>
                                            <li class="mb-2"><i class="bi bi-skip-start-fill text-success me-2"></i> Pausas activas con contenido motivacional</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>            
{% endblock content %}

{% block footer %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}