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

{% block title %}{{ page_config.seo_title|default:"Contact - Secure Uplink" }}{% endblock %}

{% block extra_css %}
<style>
    /* ============================================ */
    /* CONTACT PAGE - NETRUNNER TRANSMISSION        */
    /* ============================================ */
    
    /* En-tête Hero */
    .contact-hero {
        text-align: center;
        margin-bottom: 4rem;
        position: relative;
        padding: 2rem 0;
    }
    
    .contact-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
        animation: scanline-horizontal 3s linear infinite;
    }
    
    .hero-title {
        font-family: var(--font-title);
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 5px;
        color: var(--neon-cyan);
        text-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
        margin-bottom: 1rem;
        position: relative;
    }
    
    .hero-title::before {
        content: '> ';
        color: var(--cp-yellow);
        margin-right: 10px;
    }
    
    .hero-subtitle {
        font-family: var(--font-tech);
        font-size: 1.2rem;
        font-weight: 300;
        color: var(--text-secondary);
        letter-spacing: 2px;
        text-transform: uppercase;
        overflow: hidden;
        border-right: 2px solid var(--neon-cyan);
        white-space: nowrap;
        margin: 0 auto;
        width: fit-content;
        animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    }
    
    /* Layout 2 Colonnes */
    .contact-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    @media (min-width: 992px) {
        .contact-layout {
            grid-template-columns: 1.5fr 1fr;
            gap: 3rem;
        }
    }
    
    /* Panneau Verre (Réutilisable) */
    .glass-panel {
        background: rgba(10, 10, 18, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-subtle);
        border-left: 3px solid var(--neon-cyan);
        padding: 2.5rem;
        position: relative;
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .glass-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--neon-cyan), transparent);
        animation: pulse-line 2s ease-in-out infinite;
    }
    
    .panel-title {
        font-family: var(--font-title);
        font-size: 1.5rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: var(--neon-cyan);
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .panel-title i {
        font-size: 1.3rem;
        filter: drop-shadow(0 0 8px var(--neon-cyan));
    }
    
    /* Formulaire - Inputs Cyberpunk */
    .form-group {
        margin-bottom: 2rem;
        position: relative;
    }
    
    .form-label {
        font-family: var(--font-tech);
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .form-label::before {
        content: '// ';
        color: var(--cp-yellow);
    }
    
    .cyber-input,
    .cyber-textarea {
        width: 100%;
        background: rgba(10, 10, 15, 0.8);
        border: 1px solid #333;
        border-left: 2px solid var(--neon-cyan);
        color: var(--neon-cyan);
        font-family: var(--font-tech);
        font-size: 1rem;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
        outline: none;
    }
    
    .cyber-input {
        height: 50px;
    }
    
    .cyber-textarea {
        min-height: 150px;
        resize: vertical;
    }
    
    .cyber-input:focus,
    .cyber-textarea:focus {
        background: rgba(0, 243, 255, 0.05);
        border-color: var(--neon-cyan);
        border-left-width: 3px;
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.3), inset 0 0 10px rgba(0, 243, 255, 0.1);
    }
    
    .cyber-input::placeholder,
    .cyber-textarea::placeholder {
        color: rgba(160, 160, 160, 0.5);
        font-style: italic;
    }
    
    /* Honeypot - INVISIBLE */
    .honeypot-field {
        display: none !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Erreurs de formulaire */
    .form-errors {
        background: rgba(255, 0, 0, 0.1);
        border-left: 3px solid #ff0000;
        padding: 1rem;
        margin-bottom: 1.5rem;
        font-family: var(--font-tech);
        color: #ff6b6b;
        font-size: 0.9rem;
    }
    
    .form-errors ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .form-errors li::before {
        content: '⚠ ';
        margin-right: 5px;
    }
    
    .field-error {
        color: #ff6b6b;
        font-size: 0.85rem;
        margin-top: 0.5rem;
        display: block;
        font-family: var(--font-tech);
    }
    
    /* Bouton Submit */
    .btn-submit {
        width: 100%;
        height: 60px;
        background: linear-gradient(135deg, rgba(0, 243, 255, 0.2) 0%, rgba(191, 0, 255, 0.2) 100%);
        border: 2px solid var(--neon-cyan);
        color: var(--neon-cyan);
        font-family: var(--font-title);
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .btn-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }
    
    .btn-submit:hover {
        background: var(--neon-cyan);
        color: var(--bg-dark);
        box-shadow: 0 0 30px rgba(0, 243, 255, 0.8), inset 0 0 20px rgba(0, 243, 255, 0.3);
        transform: translateY(-2px);
    }
    
    .btn-submit:hover::before {
        left: 100%;
    }
    
    .btn-submit:active {
        transform: translateY(0);
    }
    
    /* Colonne Droite - Info Widgets */
    .info-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    @media (min-width: 992px) {
        .info-sidebar {
            position: sticky;
            top: 20px;
            max-height: calc(100vh - 40px);
        }
    }
    
    .info-widget {
        background: rgba(10, 10, 18, 0.7);
        border: 1px solid var(--border-subtle);
        padding: 1.5rem;
        position: relative;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    }
    
    .info-widget::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        background: var(--cp-yellow);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
    }
    
    .widget-title {
        font-family: var(--font-title);
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--cp-yellow);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .widget-content {
        font-family: var(--font-tech);
        font-size: 1rem;
        color: var(--text-main);
        line-height: 1.8;
    }
    
    .widget-content a {
        color: var(--neon-cyan);
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
    }
    
    .widget-content a:hover {
        color: var(--neon-purple);
        transform: translateX(5px);
    }
    
    /* Carte Localisation */
    .location-map {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, rgba(0, 243, 255, 0.1) 0%, rgba(10, 10, 18, 0.9) 100%);
        border: 1px solid var(--border-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    .location-map::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 80%;
        background: 
            repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0, 243, 255, 0.1) 10px, rgba(0, 243, 255, 0.1) 11px),
            repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0, 243, 255, 0.1) 10px, rgba(0, 243, 255, 0.1) 11px);
    }
    
    .location-map i {
        font-size: 3rem;
        color: var(--neon-cyan);
        filter: drop-shadow(0 0 20px var(--neon-cyan));
        z-index: 1;
        animation: pulse-icon 2s ease-in-out infinite;
    }
    
    /* Status Bar */
    .status-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 1rem;
        background: rgba(0, 243, 255, 0.05);
        border: 1px solid var(--neon-cyan);
        font-family: var(--font-tech);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--neon-cyan);
        margin-bottom: 1.5rem;
    }
    
    .status-indicator {
        width: 8px;
        height: 8px;
        background: var(--neon-cyan);
        border-radius: 50%;
        animation: pulse-dot 1.5s ease-in-out infinite;
        box-shadow: 0 0 10px var(--neon-cyan);
    }
    
    /* Animations */
    @keyframes typing {
        from { width: 0 }
        to { width: 100% }
    }
    
    @keyframes blink-caret {
        from, to { border-color: transparent }
        50% { border-color: var(--neon-cyan) }
    }
    
    @keyframes scanline-horizontal {
        0% { transform: translateX(-50%) scaleX(0); }
        50% { transform: translateX(-50%) scaleX(1); }
        100% { transform: translateX(-50%) scaleX(0); }
    }
    
    @keyframes pulse-line {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }
    
    @keyframes pulse-icon {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    @keyframes pulse-dot {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }
    
    /* Responsive */
    @media (max-width: 991px) {
        .glass-panel {
            padding: 1.5rem;
        }
        
        .hero-subtitle {
            font-size: 1rem;
            white-space: normal;
            border-right: none;
            animation: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="contact-hero">
    <h1 class="hero-title">{{ page_config.title|default:"UPLINK ESTABLISHED" }}</h1>
    <p class="hero-subtitle">{{ page_config.subtitle|default:"Connexion sécurisée établie. En attente de transmission..." }}</p>
</div>

<!-- Status Bar -->
<div class="status-bar">
    <span class="status-indicator"></span>
    <span>SECURE CHANNEL ACTIVE</span>
    <span style="margin-left: auto; color: var(--text-secondary);">ENCRYPTION: AES-256</span>
</div>

<!-- Affichage des erreurs globales du formulaire -->
{% if form.non_field_errors %}
<div class="form-errors">
    <strong><i class="fas fa-exclamation-triangle"></i> ERREUR DE TRANSMISSION</strong>
    <ul>
        {% for error in form.non_field_errors %}
        <li>{{ error }}</li>
        {% endfor %}
    </ul>
</div>
{% endif %}

<!-- Layout 2 Colonnes -->
<div class="contact-layout">
    <!-- COLONNE GAUCHE : FORMULAIRE -->
    <div class="form-column">
        <div class="glass-panel">
            <h2 class="panel-title">
                <i class="fas fa-satellite-dish"></i>
                TRANSMISSION FORM
            </h2>
            
            <form method="post" novalidate>
                {% csrf_token %}
                
                <!-- Honeypot (Invisible) -->
                <div class="honeypot-field">
                    {{ form.bpot }}
                </div>
                
                <!-- Champ Nom -->
                <div class="form-group">
                    <label for="{{ form.name.id_for_label }}" class="form-label">Identification</label>
                    <input 
                        type="text" 
                        name="{{ form.name.name }}" 
                        id="{{ form.name.id_for_label }}"
                        class="cyber-input"
                        placeholder="Votre nom complet"
                        value="{{ form.name.value|default:'' }}"
                        required>
                    {% if form.name.errors %}
                        {% for error in form.name.errors %}
                        <span class="field-error">{{ error }}</span>
                        {% endfor %}
                    {% endif %}
                </div>
                
                <!-- Champ Email -->
                <div class="form-group">
                    <label for="{{ form.email.id_for_label }}" class="form-label">Adresse Email</label>
                    <input 
                        type="email" 
                        name="{{ form.email.name }}" 
                        id="{{ form.email.id_for_label }}"
                        class="cyber-input"
                        placeholder="votre@email.com"
                        value="{{ form.email.value|default:'' }}"
                        required>
                    {% if form.email.errors %}
                        {% for error in form.email.errors %}
                        <span class="field-error">{{ error }}</span>
                        {% endfor %}
                    {% endif %}
                </div>
                
                <!-- Champ Sujet -->
                <div class="form-group">
                    <label for="{{ form.subject.id_for_label }}" class="form-label">Objet de la transmission</label>
                    <input 
                        type="text" 
                        name="{{ form.subject.name }}" 
                        id="{{ form.subject.id_for_label }}"
                        class="cyber-input"
                        placeholder="Sujet de votre message"
                        value="{{ form.subject.value|default:'' }}">
                    {% if form.subject.errors %}
                        {% for error in form.subject.errors %}
                        <span class="field-error">{{ error }}</span>
                        {% endfor %}
                    {% endif %}
                </div>
                
                <!-- Champ Message -->
                <div class="form-group">
                    <label for="{{ form.content.id_for_label }}" class="form-label">Contenu du message</label>
                    <textarea 
                        name="{{ form.content.name }}" 
                        id="{{ form.content.id_for_label }}"
                        class="cyber-textarea"
                        placeholder="Votre message crypté sera transmis de manière sécurisée..."
                        required>{{ form.content.value|default:'' }}</textarea>
                    {% if form.content.errors %}
                        {% for error in form.content.errors %}
                        <span class="field-error">{{ error }}</span>
                        {% endfor %}
                    {% endif %}
                </div>
                
                <!-- Bouton Submit -->
                <button type="submit" class="btn-submit">
                    <i class="fas fa-paper-plane"></i>
                    INITIATE TRANSFER
                </button>
            </form>
        </div>
    </div>
    
    <!-- COLONNE DROITE : INFORMATIONS -->
    <div class="info-sidebar">
        <!-- Widget Email -->
        <div class="info-widget">
            <h3 class="widget-title">
                <i class="fas fa-envelope"></i>
                EMAIL
            </h3>
            <div class="widget-content">
                <a href="houessoukenny205@gmail.com">
                    <i class="fas fa-at me-2"></i>houessoukenny205@gmail.com
                </a>
            </div>
        </div>
        
        <!-- Widget Téléphone -->
        <div class="info-widget">
            <h3 class="widget-title">
                <i class="fas fa-phone"></i>
                TÉLÉPHONE
            </h3>
            <div class="widget-content">
                <a href="tel:+2290150809976">
                    <i class="fas fa-mobile-alt me-2"></i>+229 50 80 99 76
                </a>
            </div>
        </div>
        
        <!-- Widget Localisation -->
        <div class="info-widget">
            <h3 class="widget-title">
                <i class="fas fa-map-marker-alt"></i>
                LOCALISATION
            </h3>
            <div class="widget-content">
                <p style="margin-bottom: 1rem;">
                    <i class="fas fa-map-pin me-2"></i>Cotonou, Bénin
                </p>
                <div class="location-map">
                    <i class="fas fa-broadcast-tower"></i>
                </div>
            </div>
        </div>
        
        <!-- Widget Status -->
        <div class="info-widget">
            <h3 class="widget-title">
                <i class="fas fa-signal"></i>
                STATUS SYSTÈME
            </h3>
            <div class="widget-content">
                <p><i class="fas fa-check-circle me-2" style="color: #00ff00;"></i>Connexion Sécurisée</p>
                <p><i class="fas fa-check-circle me-2" style="color: #00ff00;"></i>Encryption Active</p>
                <p><i class="fas fa-check-circle me-2" style="color: #00ff00;"></i>Système Opérationnel</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}