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

{% block title %}{{ service.title }} - SYSTEM SPEC{% endblock %}

{% block extra_css %}
<style>
    /* ========== FONTS ========== */
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&display=swap');

    /* ========== KEYFRAMES ========== */
    @keyframes glitch-text {
        0%, 100% { 
            transform: translate(0);
            text-shadow: 
                2px 2px 0 #fcee0a,
                -2px -2px 0 #00f3ff;
        }
        25% { 
            transform: translate(-2px, 2px);
            text-shadow: 
                -2px -2px 0 #fcee0a,
                2px 2px 0 #00f3ff;
        }
        50% { 
            transform: translate(2px, -2px);
            text-shadow: 
                3px 0 0 #fcee0a,
                -3px 0 0 #00f3ff;
        }
        75% { 
            transform: translate(-2px, -2px);
            text-shadow: 
                0 3px 0 #fcee0a,
                0 -3px 0 #00f3ff;
        }
    }

    @keyframes scanline-move {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(100%); }
    }

    @keyframes pulse-icon {
        0%, 100% { 
            transform: scale(1);
            filter: drop-shadow(0 0 20px rgba(252, 238, 10, 0.6));
        }
        50% { 
            transform: scale(1.05);
            filter: drop-shadow(0 0 40px rgba(252, 238, 10, 0.9));
        }
    }

    @keyframes diode-activate {
        0% { opacity: 0.3; }
        100% { opacity: 1; }
    }

    @keyframes glitch-button {
        0%, 100% { transform: translate(0); }
        20% { transform: translate(-2px, 2px); }
        40% { transform: translate(-2px, -2px); }
        60% { transform: translate(2px, 2px); }
        80% { transform: translate(2px, -2px); }
    }

    /* ========== BODY & MAIN ========== */
    body {
        background: #000000;
        color: #b0b0b0;
        font-family: 'Rajdhani', sans-serif;
        position: relative;
    }

    /* Scanlines overlay */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.1) 0px,
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px,
            transparent 3px
        );
        pointer-events: none;
        z-index: 9999;
        opacity: 0.3;
    }

    .service-detail-container {
        padding: 40px 0;
        position: relative;
        z-index: 1;
    }

    /* ========== SYSTEM PATH (BREADCRUMB) ========== */
    .system-path {
        background: #0a0a0a;
        border: 1px solid #2a2a2a;
        border-left: 3px solid #fcee0a;
        padding: 15px 20px;
        margin-bottom: 30px;
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .system-path a {
        color: #fcee0a;
        text-decoration: none;
        transition: all 0.2s ease;
        text-shadow: 0 0 10px rgba(252, 238, 10, 0.5);
    }

    .system-path a:hover {
        color: #00f3ff;
        text-shadow: 0 0 15px rgba(0, 243, 255, 0.8);
    }

    .system-path span {
        color: #606060;
        margin: 0 10px;
    }

    .system-path .current {
        color: #ffffff;
    }

    /* ========== HERO BANNER ========== */
    .hero-banner {
        position: relative;
        height: 400px;
        margin-bottom: 40px;
        overflow: hidden;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
        border: 2px solid #fcee0a;
        box-shadow: 
            0 0 30px rgba(252, 238, 10, 0.4),
            inset 0 0 50px rgba(0, 0, 0, 0.8);
    }

    .hero-banner-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.4) contrast(1.2) saturate(0.5);
        mix-blend-mode: luminosity;
    }

    /* Grille overlay sur l'image */
    .hero-banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            linear-gradient(rgba(252, 238, 10, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(252, 238, 10, 0.05) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
        z-index: 1;
    }

    /* Scanline qui bouge */
    .hero-banner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #00f3ff 50%, transparent 100%);
        animation: scanline-move 3s linear infinite;
        z-index: 2;
        box-shadow: 0 0 20px rgba(0, 243, 255, 0.8);
    }

    /* Placeholder pattern si pas d'image */
    .hero-banner-placeholder {
        width: 100%;
        height: 100%;
        background: 
            linear-gradient(45deg, #0a0a0a 25%, transparent 25%),
            linear-gradient(-45deg, #0a0a0a 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #0a0a0a 75%),
            linear-gradient(-45deg, transparent 75%, #0a0a0a 75%);
        background-size: 40px 40px;
        background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
        background-color: #1a1a1a;
    }

    .hero-title {
        position: absolute;
        bottom: 40px;
        left: 40px;
        z-index: 3;
        font-family: 'Orbitron', sans-serif;
        font-size: 3rem;
        font-weight: 900;
        color: #fcee0a;
        text-transform: uppercase;
        letter-spacing: 4px;
        text-shadow: 
            0 0 20px rgba(252, 238, 10, 0.8),
            0 0 40px rgba(252, 238, 10, 0.5),
            4px 4px 0 rgba(0, 0, 0, 0.9);
        animation: glitch-text 5s ease-in-out infinite;
    }

    /* ========== DATA LOG (COLONNE GAUCHE) ========== */
    .data-log {
        margin-bottom: 40px;
    }

    .data-panel {
        background: rgba(10, 10, 10, 0.95);
        border: 1px solid #2a2a2a;
        border-left: 4px solid #00f3ff;
        padding: 30px;
        margin-bottom: 30px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        box-shadow: 
            0 0 20px rgba(0, 0, 0, 0.8),
            inset 0 0 30px rgba(0, 0, 0, 0.5);
    }

    .data-panel-title {
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.8rem;
        font-weight: 700;
        color: #fcee0a;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(252, 238, 10, 0.3);
        text-shadow: 0 0 10px rgba(252, 238, 10, 0.6);
    }

    .data-panel-content {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #c0c0c0;
        font-family: 'Rajdhani', sans-serif;
    }

    /* ========== MODULES GRID ========== */
    .modules-title {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: #fcee0a;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 25px;
        text-shadow: 0 0 15px rgba(252, 238, 10, 0.6);
    }

    .modules-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 15px;
        margin-bottom: 40px;
    }

    .module-chip {
        background: #0a0a0a;
        border: 1px solid #2a2a2a;
        border-left: 3px solid #fcee0a;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        transition: all 0.2s ease;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
        position: relative;
    }

    .module-chip::before {
        content: '';
        width: 8px;
        height: 8px;
        background: #fcee0a;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        flex-shrink: 0;
        opacity: 0.3;
        transition: all 0.2s ease;
        box-shadow: 0 0 5px rgba(252, 238, 10, 0.3);
    }

    .module-chip:hover {
        background: rgba(252, 238, 10, 0.05);
        border-left-color: #00f3ff;
        transform: translateX(5px);
        box-shadow: 
            0 0 20px rgba(252, 238, 10, 0.3),
            inset 0 0 20px rgba(252, 238, 10, 0.05);
    }

    .module-chip:hover::before {
        opacity: 1;
        background: #00f3ff;
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.8);
        animation: diode-activate 0.3s ease;
    }

    .module-chip-text {
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.95rem;
        color: #c0c0c0;
        letter-spacing: 0.5px;
    }

    .module-chip:hover .module-chip-text {
        color: #ffffff;
    }

    /* ========== CONTROL PANEL (COLONNE DROITE) ========== */
    .control-panel {
        position: sticky;
        top: 20px;
    }

    .control-box {
        background: rgba(10, 10, 10, 0.95);
        border: 2px solid #fcee0a;
        padding: 30px;
        margin-bottom: 20px;
        clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
        box-shadow: 
            0 0 30px rgba(252, 238, 10, 0.4),
            inset 0 0 40px rgba(0, 0, 0, 0.8);
    }

    .control-icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 150px;
        margin-bottom: 30px;
        position: relative;
    }

    .control-icon-wrapper::before {
        content: '';
        position: absolute;
        width: 120px;
        height: 120px;
        border: 2px solid rgba(252, 238, 10, 0.3);
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        animation: pulse-icon 3s ease-in-out infinite;
    }

    .control-icon {
        font-size: 5rem;
        color: #fcee0a;
        filter: drop-shadow(0 0 30px rgba(252, 238, 10, 0.8));
        animation: pulse-icon 3s ease-in-out infinite;
        z-index: 1;
    }

    /* ========== INSTALL BUTTON ========== */
    .install-button {
        display: block;
        width: 100%;
        padding: 20px;
        background: #fcee0a;
        color: #000000;
        text-align: center;
        text-decoration: none;
        font-family: 'Orbitron', sans-serif;
        font-weight: 900;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        border: none;
        clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
        box-shadow: 
            0 0 30px rgba(252, 238, 10, 0.6),
            inset 0 0 20px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    .install-button::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(45deg);
        transition: all 0.5s ease;
    }

    .install-button:hover {
        background: #ffffff;
        color: #000000;
        box-shadow: 
            0 0 40px rgba(252, 238, 10, 0.9),
            0 0 80px rgba(252, 238, 10, 0.6);
        animation: glitch-button 0.3s ease;
    }

    .install-button:hover::before {
        left: 150%;
    }

    .install-button i {
        margin-right: 10px;
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 991.98px) {
        .hero-title {
            font-size: 2rem;
            bottom: 20px;
            left: 20px;
        }

        .hero-banner {
            height: 300px;
        }

        .data-panel {
            padding: 20px;
        }

        .modules-grid {
            grid-template-columns: 1fr;
        }

        .control-panel {
            position: static;
            margin-top: 30px;
        }

        .control-box {
            padding: 25px;
        }

        .install-button {
            font-size: 1rem;
            padding: 18px;
        }
    }

    @media (max-width: 575.98px) {
        .system-path {
            font-size: 0.75rem;
            padding: 12px 15px;
        }

        .hero-title {
            font-size: 1.5rem;
            letter-spacing: 2px;
        }

        .hero-banner {
            height: 250px;
        }

        .modules-title {
            font-size: 1.2rem;
        }

        .control-icon {
            font-size: 4rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="service-detail-container">
    <div class="container">
        
        <!-- ========== SYSTEM PATH (BREADCRUMB) ========== -->
        <div class="system-path">
            <a href="{% url 'services:list' %}">ROOT_DIR > SERVICES</a>
            <span>></span>
            <span class="current">{{ service.slug|upper }}</span>
        </div>

        <!-- ========== HERO BANNER ========== -->
        <div class="hero-banner">
            {% if service.banner_image %}
                <img src="{{ service.banner_image.url }}" alt="{{ service.title }}" class="hero-banner-img">
            {% else %}
                <div class="hero-banner-placeholder"></div>
            {% endif %}
            <h1 class="hero-title">{{ service.title }}</h1>
        </div>

        <!-- ========== MAIN LAYOUT ========== -->
        <div class="row">
            
            <!-- ========== DATA LOG (COLONNE GAUCHE) ========== -->
            <div class="col-lg-8">
                <div class="data-log">
                    
                    <!-- Description Panel -->
                    <div class="data-panel">
                        <h2 class="data-panel-title">/// SYSTEM OVERVIEW</h2>
                        <div class="data-panel-content">
                            {{ service.full_description|safe }}
                        </div>
                    </div>

                    <!-- Modules Grid -->
                    {% if service.features.all %}
                    <div>
                        <h2 class="modules-title">/// INSTALLED MODULES</h2>
                        <div class="modules-grid">
                            {% for feature in service.features.all %}
                            <div class="module-chip">
                                <span class="module-chip-text">{{ feature.text }}</span>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                </div>
            </div>

            <!-- ========== CONTROL PANEL (COLONNE DROITE) ========== -->
            <div class="col-lg-4">
                <div class="control-panel">
                    
                    <div class="control-box">
                        <!-- Icon Display -->
                        <div class="control-icon-wrapper">
                            <i class="{{ service.icon_class }} control-icon"></i>
                        </div>

                        <!-- Install Button -->
                        <a href="{% url 'contact:index' %}" class="install-button">
                            <i class="fa-solid fa-bolt"></i>
                            INITIALISER LE PROTOCOLE
                        </a>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>
{% endblock %}