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

{% block content %}
<!-- Hero Section -->
<section class="hero-section text-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <a href="{{ radio_url }}" target="_blank" class="text-decoration-none">
                    <span class="live-badge mb-3 d-inline-block">En Vivo</span>
                </a>
                <h1 class="display-3 fw-bold mb-4">Tu Voz, Tu Música, <br><span style="color: var(--neon-cyan)">Tu Radio.</span></h1>
                <p class="lead text-muted mb-5">Transmitiendo los mejores discos las 24 horas, los 7 días de la semana. Únete a nuestra comunidad y crea la lista de reproducción.</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{{ radio_url }}" target="_blank" class="btn btn-neon px-5 py-3 fs-5">
                        <i class="fas fa-play me-2"></i> Escuchar Música
                    </a>
                </div>
                <div class="mt-4 d-flex justify-content-center gap-3">
                    <a href="#request" class="btn btn-outline-light rounded-pill px-4">Pedir una Canción</a>
                    <a href="#schedule" class="btn btn-outline-light rounded-pill px-4">Ver Horario</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Grid -->
<div class="container pb-5">
    <div class="row g-4">
        <!-- Schedule Section -->
        <div class="col-lg-7" id="schedule">
            <div class="card h-100 p-4 text-white">
                <h2 class="h3 mb-4 fw-bold text-white">Horario de la Radio</h2>
                {% if programs %}
                    <div class="schedule-list">
                        {% for program in programs %}
                            <div class="schedule-item d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-1 fw-bold text-white">{{ program.title }}</h5>
                                    <p class="mb-0 text-white small">con {{ program.dj_name|default:"AutoDJ" }}</p>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-dark text-cyan">{{ program.start_time|time:"H:i" }} - {{ program.end_time|time:"H:i" }}</span>
                                    <div class="small text-white mt-1">{{ program.get_day_display }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <p class="text-white">No hay programas programados para hoy. ¡Sintoniza nuestra mezcla 24/7!</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Song Request Section -->
        <div class="col-lg-5" id="request">
            <div class="card h-100 p-4">
                <h2 class="h3 mb-4 fw-bold text-white">Pedir una Canción</h2>
                <form method="post" class="song-form">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label small text-white">Tu Nombre</label>
                        {{ form.listener_name }}
                    </div>
                    <div class="row mb-3">
                        <div class="col">
                            <label class="form-label small text-white">Título de la Canción</label>
                            {{ form.song_title }}
                        </div>
                        <div class="col">
                            <label class="form-label small text-white">Nombre del Artista</label>
                            {{ form.artist_name }}
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label small text-white">Saludo / Mensaje</label>
                        {{ form.message }}
                    </div>
                    <button type="submit" class="btn btn-neon w-100">Enviar Pedido</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- WhatsApp Community Section -->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="card p-5 text-center shadow-lg border-0" style="background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);">
            <div class="mb-4">
                <i class="fab fa-whatsapp display-1 text-white"></i>
            </div>
            <h2 class="mb-3 text-white fw-bold">¡Únete a Lili Records Radio!</h2>
            <p class="mb-4 text-white lead">Únete a nuestro grupo exclusivo de WhatsApp. <br> <strong>¡Comparte con otros oyentes y envía tus mensajes de voz!</strong></p>
            <div class="d-flex flex-column flex-md-row justify-content-center gap-3">
                <a href="{{ whatsapp_group_link }}" target="_blank" class="btn btn-light btn-lg rounded-pill px-5 fw-bold text-success">
                    <i class="fas fa-users me-2"></i> Unirme a Lili Records Radio
                </a>
                <a href="https://wa.me/{{ whatsapp_number|cut:'+'|cut:' ' }}?text=Hola,%20quiero%20enviar%20un%20mensaje%20de%20voz%20para%20la%20radio" target="_blank" class="btn btn-outline-light btn-lg rounded-pill px-5 fw-bold">
                    <i class="fas fa-microphone me-2"></i> Enviar Mensaje de Voz
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}