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

{% block title %}{{ profile.title }} - Identity Record{% endblock %}

{% block extra_css %}
<style>
    /* ======================
       CYBERPUNK ABOUT PAGE
       ====================== */
    
    :root {
        --cp-yellow: #fcee0a;
        --cp-cyan: #00f0ff;
        --cp-black: #0a0a0a;
        --cp-dark: #1a1a1a;
        --cp-border: #333;
    }

    body {
        background: var(--cp-black);
        color: #e0e0e0;
        overflow-x: hidden;
    }

    /* Scanline Global Effect */
    .about-container::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15) 0px,
            transparent 1px,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 3px
        );
        pointer-events: none;
        z-index: 1000;
        animation: scanline 8s linear infinite;
    }

    @keyframes scanline {
        0% { transform: translateY(0); }
        100% { transform: translateY(10px); }
    }

    .about-container {
        padding: 40px 20px;
        position: relative;
    }

    /* ======================
       1. HERO - IDENTITY RECORD
       ====================== */
    
    .identity-hero {
        margin-bottom: 80px;
        position: relative;
    }

    .identity-hero::before {
        content: '[ IDENTITY RECORD DECRYPTED ]';
        position: absolute;
        top: -30px;
        left: 0;
        font-family: 'Courier New', monospace;
        font-size: 0.75rem;
        color: var(--cp-cyan);
        letter-spacing: 2px;
        animation: blink 1.5s infinite;
    }

    .hero-content {
        display: grid;
        gap: 40px;
        align-items: start;
    }

    @media (min-width: 992px) {
        .hero-content {
            grid-template-columns: 300px 1fr;
            gap: 60px;
        }
    }

    /* Photo Portrait avec effet hexagonal */
    .profile-frame {
        position: relative;
        max-width: 300px;
        margin: 0 auto;
    }

    .profile-frame::before {
        content: '';
        position: absolute;
        inset: -10px;
        background: linear-gradient(135deg, var(--cp-cyan), var(--cp-yellow));
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        z-index: -1;
        animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }

    .profile-image {
        width: 100%;
        height: auto;
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        border: 2px solid var(--cp-yellow);
    }

    .scan-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent 50%, rgba(0, 240, 255, 0.1) 50%);
        background-size: 100% 4px;
        animation: scan 3s linear infinite;
        pointer-events: none;
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }

    @keyframes scan {
        0% { background-position: 0 0; }
        100% { background-position: 0 100%; }
    }

    /* Texte Bio */
    .bio-section {
        background: var(--cp-dark);
        border: 1px solid var(--cp-border);
        border-left: 4px solid var(--cp-yellow);
        padding: 30px;
        position: relative;
    }

    .bio-section::before {
        content: '>>_';
        position: absolute;
        top: 10px;
        right: 20px;
        font-family: 'Courier New', monospace;
        color: var(--cp-cyan);
        animation: blink 1s infinite;
    }

    .glitch-title {
        font-size: 3rem;
        font-weight: 900;
        color: var(--cp-yellow);
        text-transform: uppercase;
        position: relative;
        display: inline-block;
        margin-bottom: 10px;
    }

    .glitch-title::before,
    .glitch-title::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .glitch-title::before {
        color: var(--cp-cyan);
        animation: glitch1 2.5s infinite;
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    }

    .glitch-title::after {
        color: #ff00ff;
        animation: glitch2 2.5s infinite;
        clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    }

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

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

    .subtitle {
        font-size: 1.2rem;
        color: var(--cp-yellow);
        margin-bottom: 30px;
        font-family: 'Courier New', monospace;
    }

    .bio-text {
        font-family: 'Courier New', monospace;
        line-height: 1.8;
        color: #b0b0b0;
    }

    .bio-text p {
        margin-bottom: 20px;
    }

    /* ======================
       2. TIMELINE EXPÉRIENCES
       ====================== */
    
    .memory-sync {
        margin-bottom: 80px;
        position: relative;
    }

    .section-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--cp-cyan);
        text-transform: uppercase;
        margin-bottom: 40px;
        position: relative;
        padding-left: 20px;
    }

    .section-title::before {
        content: '//';
        position: absolute;
        left: 0;
        color: var(--cp-yellow);
    }

    .timeline {
        position: relative;
        padding-left: 0;
    }

    @media (min-width: 992px) {
        .timeline {
            padding-left: 60px;
        }
    }

    /* Ligne verticale */
    .timeline::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, var(--cp-cyan), var(--cp-yellow));
        box-shadow: 0 0 10px var(--cp-cyan);
    }

    @media (min-width: 992px) {
        .timeline::before {
            left: 20px;
        }
    }

    .experience-node {
        position: relative;
        margin-bottom: 50px;
        padding-left: 60px;
    }

    /* Point de connexion */
    .experience-node::before {
        content: '';
        position: absolute;
        left: 11px;
        top: 20px;
        width: 20px;
        height: 20px;
        background: var(--cp-yellow);
        border: 3px solid var(--cp-black);
        border-radius: 50%;
        box-shadow: 0 0 15px var(--cp-yellow);
        z-index: 2;
    }

    .experience-card {
        background: var(--cp-dark);
        border: 1px solid var(--cp-border);
        padding: 25px;
        clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
        position: relative;
        transition: all 0.3s ease;
    }

    .experience-card:hover {
        border-color: var(--cp-cyan);
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
        transform: translateX(5px);
    }

    .experience-date {
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        color: var(--cp-yellow);
        text-transform: uppercase;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .experience-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--cp-cyan);
        margin-bottom: 5px;
    }

    .experience-company {
        font-size: 1.1rem;
        color: #888;
        margin-bottom: 15px;
    }

    .experience-description {
        color: #b0b0b0;
        line-height: 1.6;
        white-space: pre-line;
    }

    .active-badge {
        display: inline-block;
        padding: 5px 15px;
        background: var(--cp-yellow);
        color: var(--cp-black);
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
        margin-top: 15px;
        animation: blink 1.5s infinite;
    }

    @keyframes blink {
        0%, 50%, 100% { opacity: 1; }
        25%, 75% { opacity: 0.5; }
    }

    /* ======================
       3. FORMATION & PHILOSOPHIE
       ====================== */
    
    .data-banks {
        margin-bottom: 80px;
    }

    .data-banks .row {
        gap: 40px 0;
    }

    /* Education */
    .education-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .education-item {
        background: var(--cp-dark);
        border-left: 4px solid var(--cp-cyan);
        padding: 20px;
        position: relative;
    }

    .education-item::before {
        content: '◆';
        position: absolute;
        left: -14px;
        top: 20px;
        color: var(--cp-cyan);
        font-size: 1.5rem;
    }

    .education-degree {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--cp-cyan);
        margin-bottom: 5px;
    }

    .education-institution {
        color: #888;
        margin-bottom: 5px;
    }

    .education-year {
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        color: var(--cp-yellow);
    }

    /* Philosophie */
    .philosophy-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
    }

    .philosophy-card {
        background: var(--cp-dark);
        border: 2px solid var(--cp-border);
        padding: 30px 20px;
        text-align: center;
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: all 0.3s ease;
    }

    .philosophy-card::before {
        content: '';
        position: absolute;
        inset: -2px;
        background: linear-gradient(135deg, var(--cp-yellow), var(--cp-cyan));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .philosophy-card:hover::before {
        opacity: 0.2;
    }

    .philosophy-card:hover {
        border-color: var(--cp-yellow);
        transform: translateY(-5px);
    }

    .philosophy-icon {
        font-size: 3rem;
        color: var(--cp-yellow);
        margin-bottom: 15px;
    }

    .philosophy-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--cp-cyan);
        text-transform: uppercase;
    }

    /* ======================
       4. SKILL MATRIX
       ====================== */
    
    .skill-matrix {
        margin-bottom: 80px;
    }

    .skill-category {
        margin-bottom: 40px;
    }

    .skill-category-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--cp-yellow);
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .skill-bar-container {
        margin-bottom: 20px;
    }

    .skill-name {
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        color: #b0b0b0;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .skill-level {
        color: var(--cp-cyan);
        font-weight: 700;
    }

    .skill-bar-bg {
        height: 20px;
        background: repeating-linear-gradient(
            90deg,
            #1a1a1a 0px,
            #1a1a1a 10px,
            #0a0a0a 10px,
            #0a0a0a 20px
        );
        border: 1px solid var(--cp-border);
        position: relative;
        overflow: hidden;
    }

    .skill-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--cp-yellow), #ffd700);
        position: relative;
        transition: width 1s ease;
        box-shadow: 0 0 10px var(--cp-yellow);
    }

    .skill-bar-fill::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
        animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    /* Vision Section */
    .vision-section {
        background: var(--cp-dark);
        border: 1px solid var(--cp-border);
        border-top: 4px solid var(--cp-yellow);
        padding: 40px;
        margin-bottom: 80px;
    }

    .vision-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--cp-yellow);
        margin-bottom: 20px;
    }

    .vision-text {
        color: #b0b0b0;
        line-height: 1.8;
        white-space: pre-line;
    }

    /* Mobile adjustments */
    @media (max-width: 991px) {
        .glitch-title {
            font-size: 2rem;
        }

        .section-title {
            font-size: 1.5rem;
        }

        .experience-node {
            padding-left: 50px;
        }

        .philosophy-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="about-container">
    {% if profile %}
    <!-- ======================
         1. IDENTITY RECORD HERO
         ====================== -->
    <section class="identity-hero">
        <div class="hero-content">
            <!-- Photo Portrait -->
            <div class="profile-frame">
                {% if profile.profile_image %}
                <img src="{{ profile.profile_image.url }}" alt="{{ profile.title }}" class="profile-image">
                <div class="scan-overlay"></div>
                {% else %}
                <div style="width: 300px; height: 300px; background: var(--cp-dark); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); display: flex; align-items: center; justify-content: center; color: var(--cp-yellow);">
                    <i class="fa-solid fa-user" style="font-size: 4rem;"></i>
                </div>
                {% endif %}
            </div>

            <!-- Bio Section -->
            <div>
                <h1 class="glitch-title" data-text="{{ profile.title }}">{{ profile.title }}</h1>
                <p class="subtitle">{{ profile.subtitle }}</p>
                
                <div class="bio-section">
                    <div class="bio-text">
                        <p><strong>{{ profile.bio_intro }}</strong></p>
                        <p>{{ profile.bio_content }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ======================
         2. NEURAL LINK HISTORY (Timeline)
         ====================== -->
    <section class="memory-sync">
        <h2 class="section-title">Neural Link History</h2>
        
        <div class="timeline">
            {% for exp in experiences %}
            <article class="experience-node">
                <div class="experience-card">
                    <div class="experience-date">
                        {{ exp.start_date|date:"Y.m" }} - 
                        {% if exp.is_current or not exp.end_date %}
                            <span style="color: var(--cp-cyan);">PRESENT</span>
                        {% else %}
                            {{ exp.end_date|date:"Y.m" }}
                        {% endif %}
                    </div>
                    
                    <h3 class="experience-title">{{ exp.job_title }}</h3>
                    <div class="experience-company">
                        {{ exp.company }}
                        {% if exp.location %} · {{ exp.location }}{% endif %}
                    </div>
                    
                    <div class="experience-description">{{ exp.description }}</div>
                    
                    {% if exp.is_current %}
                    <span class="active-badge">◆ ACTIVE LINK</span>
                    {% endif %}
                </div>
            </article>
            {% endfor %}
        </div>
    </section>

    <!-- ======================
         3. DATA BANKS (Education & Philosophy)
         ====================== -->
    <section class="data-banks">
        <div class="row">
            <!-- Education Column -->
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h2 class="section-title">Upload History</h2>
                <div class="education-list">
                    {% for edu in educations %}
                    <article class="education-item">
                        <h3 class="education-degree">{{ edu.degree }}</h3>
                        <div class="education-institution">{{ edu.institution }}</div>
                        <div class="education-year">
                            {{ edu.year_start }}
                            {% if edu.year_end %}
                                - {{ edu.year_end }}
                            {% else %}
                                - EN COURS
                            {% endif %}
                        </div>
                        {% if edu.description %}
                        <div style="color: #888; margin-top: 10px; font-size: 0.9rem;">{{ edu.description }}</div>
                        {% endif %}
                    </article>
                    {% endfor %}
                </div>
            </div>

            <!-- Philosophy Column -->
            <div class="col-lg-6">
                <h2 class="section-title">Core Directives</h2>
                <div class="philosophy-grid">
                    {% for phil in philosophies %}
                    <article class="philosophy-card">
                        <i class="{{ phil.icon_class }} philosophy-icon"></i>
                        <h3 class="philosophy-title">{{ phil.title }}</h3>
                    </article>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>

    <!-- Vision Section (if exists) -->
    {% if profile.vision_text %}
    <section class="vision-section">
        <h2 class="vision-title">{{ profile.vision_title }}</h2>
        <div class="vision-text">{{ profile.vision_text }}</div>
    </section>
    {% endif %}

    <!-- ======================
         4. SKILL MATRIX
         ====================== -->
    <section class="skill-matrix">
        <h2 class="section-title">Skill Matrix</h2>
        
        {% for category in skill_categories %}
        <div class="skill-category">
            <h3 class="skill-category-title">
                <i class="{{ category.icon_class }}"></i> {{ category.name }}
            </h3>
            
            {% for skill in category.skills.all %}
            <div class="skill-bar-container">
                <div class="skill-name">
                    <span>{{ skill.name }}</span>
                    <span class="skill-level">{{ skill.level }}%</span>
                </div>
                <div class="skill-bar-bg">
                    <div class="skill-bar-fill" style="width: {{ skill.level }}%;"></div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </section>

    {% else %}
    <!-- Fallback si pas de profil configuré -->
    <div style="text-align: center; padding: 100px 20px; color: var(--cp-cyan);">
        <i class="fa-solid fa-exclamation-triangle" style="font-size: 3rem; margin-bottom: 20px;"></i>
        <h2>[ IDENTITY RECORD NOT FOUND ]</h2>
        <p style="font-family: 'Courier New', monospace; color: #888;">
            Configuration About Profile manquante. Veuillez accéder au panneau d'administration.
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}