getlostguatemala.com/templates/index.html

{% extends "base.html" %}

{% block content %}
<header class="hero">
    {% if settings.get('hero_video_url') %}
    <video class="hero-video" autoplay muted loop playsinline>
        <source src="{{ settings.get('hero_video_url') }}" type="video/mp4">
    </video>
    {% endif %}
    <div class="hero-overlay"></div>
    <div class="hero-content">
        <h1>{{ 'Descubre Guatemala' if lang == 'es' else 'Discover Guatemala' }}</h1>
        <p>{{ 'La tierra de la eterna primavera, antiguas ruinas mayas y playas de clase mundial.' if lang == 'es' else 'The land of eternal spring, ancient Mayan ruins, and world-class surfing.' }}</p>
        <a href="#contact" class="btn btn-primary">{{ 'Reserva Ahora' if lang == 'es' else 'Book Now' }}</a>
    </div>
</header>

{% if request.args.get("submitted") %}
<div style="text-align: center; color: var(--primary-color); padding: 1rem; border: 1px solid var(--primary-color); margin: 2rem auto; width: 60%; font-weight: bold;">
    {{ '¡Gracias! Nos pondremos en contacto pronto.' if lang == 'es' else 'Thank you! We will be in touch soon.' }}
</div>
{% endif %}

<section id="tours">
    <h2 class="section-title">{{ 'Nuestros Tours' if lang == 'es' else 'Our Tours' }}</h2>
    <div class="grid">
        {% for tour in tours %}
        <div class="card glass-panel">
            {% if tour.image_url %}
            <img src="{{ tour.image_url }}" alt="{{ tour.title_en }}" class="card-img">
            {% endif %}
            <div class="card-content">
                <h3>{{ tour.title_es if lang == 'es' else tour.title_en }}</h3>
                <p>{{ tour.desc_es if lang == 'es' else tour.desc_en }}</p>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                    <div class="price">${{ tour.price }}</div>
                    <a href="/tour/{{ tour.id }}?lang={{ lang }}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.8rem;">{{ 'Detalles' if lang == 'es' else 'Details' }}</a>
                </div>
            </div>
        </div>
        {% else %}
        <p style="text-align:center; width:100%;">{{ 'Pronto...' if lang == 'es' else 'Coming soon...' }}</p>
        {% endfor %}
    </div>
</section>

<section id="surf">
    <h2 class="section-title">{{ 'Surf en El Paredón' if lang == 'es' else 'Surf in El Paredón' }}</h2>
    <div class="grid">
        {% for tour in surfs %}
        <div class="card glass-panel">
            {% if tour.image_url %}
            <img src="{{ tour.image_url }}" alt="{{ tour.title_en }}" class="card-img">
            {% endif %}
            <div class="card-content">
                <h3>{{ tour.title_es if lang == 'es' else tour.title_en }}</h3>
                <p>{{ tour.desc_es if lang == 'es' else tour.desc_en }}</p>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                    <div class="price">${{ tour.price }}</div>
                    <a href="/tour/{{ tour.id }}?lang={{ lang }}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.8rem;">{{ 'Detalles' if lang == 'es' else 'Details' }}</a>
                </div>
            </div>
        </div>
        {% else %}
        <p style="text-align:center; width:100%;">{{ 'Pronto...' if lang == 'es' else 'Coming soon...' }}</p>
        {% endfor %}
    </div>
</section>

<section id="volcanoes">
    <h2 class="section-title">{{ 'Volcanes Activos' if lang == 'es' else 'Active Volcanoes' }}</h2>
    <div class="grid">
        {% for tour in volcanoes %}
        <div class="card glass-panel">
            {% if tour.image_url %}
            <img src="{{ tour.image_url }}" alt="{{ tour.title_en }}" class="card-img">
            {% endif %}
            <div class="card-content">
                <h3>{{ tour.title_es if lang == 'es' else tour.title_en }}</h3>
                <p>{{ tour.desc_es if lang == 'es' else tour.desc_en }}</p>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                    <div class="price">${{ tour.price }}</div>
                    <a href="/tour/{{ tour.id }}?lang={{ lang }}" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.8rem;">{{ 'Detalles' if lang == 'es' else 'Details' }}</a>
                </div>
            </div>
        </div>
        {% else %}
        <p style="text-align:center; width:100%;">{{ 'Pronto...' if lang == 'es' else 'Coming soon...' }}</p>
        {% endfor %}
    </div>
</section>

<section id="contact" class="contact-section">
    <div class="glass-panel contact-form">
        <h2 style="color: var(--primary-color); margin-bottom: 2rem; font-size: 2rem; text-align: center;">
            {{ 'Comienza tu Viaje' if lang == 'es' else 'Start Your Journey' }}
        </h2>
        <form action="/submit?lang={{ lang }}" method="POST">
            <div class="form-group">
                <label>{{ 'Nombre' if lang == 'es' else 'Full Name' }}</label>
                <input type="text" name="name" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label>{{ 'Correo Electrónico' if lang == 'es' else 'Email' }}</label>
                <input type="email" name="email" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label>{{ 'Teléfono' if lang == 'es' else 'Phone' }}</label>
                <input type="tel" name="phone" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label>{{ 'Interesado en' if lang == 'es' else 'Interested In' }}</label>
                <select name="interested_in" class="form-control">
                    <option value="tour">Tours</option>
                    <option value="surf">Surf</option>
                    <option value="volcano">Volcanoes</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>{{ 'Mensaje' if lang == 'es' else 'Message' }}</label>
                <textarea name="message" class="form-control" rows="4"></textarea>
            </div>

            <!-- Checkbox Normal -->
            <label class="checkbox-wrap" style="color: #BBB;">
                <input type="checkbox" required>
                {{ 'Acepto los términos y condiciones' if lang == 'es' else 'I accept the terms and conditions' }}
            </label>
            
            <!-- Checkbox Retell AI -->
            {% if settings.get('retell_enabled') == 'true' %}
            <label class="checkbox-wrap" style="color: #BBB;">
                <input type="checkbox" name="wants_retell_ai" value="true">
                {{ 'Hablar con un Agente IA para coordinar' if lang == 'es' else 'Speak with an AI Agent to coordinate' }}
            </label>
            {% endif %}
            
            <div class="form-group" style="margin-top: 1rem;">
                {% if turnstile_site_key %}
                <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}"></div>
                {% else %}
                <i style="color: #888;">(Cloudflare Turnstile disabled, missing site key)</i>
                {% endif %}
            </div>
            
            <button type="submit" class="btn btn-primary" style="width: 100%; border-radius: 8px;">
                {{ 'Enviar Solicitud' if lang == 'es' else 'Submit Request' }}
            </button>
        </form>
    </div>
</section>
{% endblock %}