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

{% block title %}{{ config.seo.site_title }}{% endblock %}

{% block content %}

<!-- ─── Hero Section ─────────────────────────────────────────────────────── -->
<section class="hero">
    <div class="hero-container">
        <div class="hero-content">
            {% if config.profile.available %}
            <div class="hero-badge">{{ config.profile.available_label }}</div>
            {% endif %}
            <h1 class="hero-title">
                {{ config.hero.greeting }}
                <span class="gradient-text">{{ config.profile.first_name }}</span>
            </h1>
            <p class="hero-subtitle">{{ config.profile.subtitle }}</p>
            <div class="hero-actions">
                <a href="{% url 'projects:list' %}" class="btn btn-primary">
                    {{ config.hero.cta_primary_label }}
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
                <a href="#contact" class="btn btn-outline">{{ config.hero.cta_secondary_label }}</a>
                <a href="{% url 'projects:cv' %}" class="btn btn-cv">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                    Mon CV
                </a>
            </div>
            <div class="hero-stats">
                {% for stat in config.about.stats %}
                <div class="stat">
                    <span class="stat-number">{{ stat.value }}</span>
                    <span class="stat-label">{{ stat.label }}</span>
                </div>
                {% if not forloop.last %}<div class="stat-divider"></div>{% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="hero-visual">
            <div class="code-window">
                <div class="code-header">
                    <span class="dot red"></span>
                    <span class="dot yellow"></span>
                    <span class="dot green"></span>
                    <span class="code-filename">{{ config.hero.code_window.filename }}</span>
                </div>
                <pre class="code-content"><code><span class="code-keyword">class</span> <span class="code-class">{{ config.profile.first_name }}</span>:
    <span class="code-keyword">def</span> <span class="code-func">__init__</span>(self):
        self.role = <span class="code-str">"{{ config.profile.title }}"</span>{% for group in config.skills.groups %}
        self.{{ group.key }} = [{% for item in group.items|slice:":4" %}<span class="code-str">"{{ item }}"</span>{% if not forloop.last %}, {% endif %}{% endfor %}{% if group.items|length > 4 %}, <span class="code-comment">...</span>{% endif %}]{% endfor %}
        self.email = <span class="code-str">"{{ config.profile.email }}"</span></code></pre>
            </div>
        </div>
    </div>
</section>

<!-- ─── Compétences ──────────────────────────────────────────────────────── -->
<section class="section" id="competences">
    <div class="section-container">
        <div class="section-header">
            <span class="section-tag">{{ config.skills.section_tag }}</span>
            <h2 class="section-title">{{ config.skills.section_title }}</h2>
            <p class="section-sub">{{ config.skills.section_subtitle }}</p>
        </div>
        <div class="skills-groups">
            {% for group in config.skills.groups %}
            <div class="skill-group">
                <h3 class="skill-group-label">{{ group.label }}</h3>
                <div class="tech-grid">
                    {% for item in group.items %}
                    <div class="tech-badge">
                        <span class="tech-dot"></span>
                        {{ item }}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- ─── Expériences ──────────────────────────────────────────────────────── -->
{% if config.experience.items %}
<section class="section section-dark" id="experience">
    <div class="section-container">
        <div class="section-header">
            <span class="section-tag">{{ config.experience.section_tag }}</span>
            <h2 class="section-title">{{ config.experience.section_title }}</h2>
            <p class="section-sub">{{ config.experience.section_subtitle }}</p>
        </div>
        <div class="experience-list">
            {% for exp in config.experience.items %}
            <div class="experience-card">
                <div class="exp-header">
                    <div>
                        <h3 class="exp-company">{{ exp.company }}</h3>
                        <p class="exp-role">{{ exp.role }}</p>
                    </div>
                    <span class="exp-period">{{ exp.period }}</span>
                </div>
                <p class="exp-description">{{ exp.description }}</p>
                <div class="exp-tags">
                    {% for tag in exp.tags %}
                    <span class="tech-tag">{{ tag }}</span>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- ─── Projets en vedette ───────────────────────────────────────────────── -->
<section class="section" id="projets">
    <div class="section-container">
        <div class="section-header">
            <span class="section-tag">Réalisations</span>
            <h2 class="section-title">Projets sélectionnés</h2>
            <p class="section-sub">Mes projets les plus représentatifs</p>
        </div>
        <div class="projects-grid">
            {% for project in featured_projects %}
            <div class="project-card" data-category="{{ project.category }}">
                <div class="card-image-wrapper">
                    {% if project.images %}
                        <img src="{{ project.images.0 }}" alt="{{ project.title }}" class="card-image" onerror="this.parentElement.classList.add('no-image')">
                    {% else %}
                        <div class="card-image-placeholder">
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                        </div>
                    {% endif %}
                    <div class="card-category-badge">{{ project.category }}</div>
                </div>
                <div class="card-body">
                    <h3 class="card-title">{{ project.title }}</h3>
                    <p class="card-desc">{{ project.short_description }}</p>
                    <div class="card-techs">
                        {% for tech in project.technologies|slice:":4" %}
                        <span class="tech-tag">{{ tech }}</span>
                        {% endfor %}
                        {% if project.technologies|length > 4 %}
                        <span class="tech-tag tech-tag-more">+{{ project.technologies|length|add:"-4" }}</span>
                        {% endif %}
                    </div>
                    <a href="{% url 'projects:detail' project.slug %}" class="card-link">
                        Voir le projet
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </div>
            {% empty %}
            <p class="empty-state">Aucun projet disponible. Ajoutez vos projets dans <code>data/projects.json</code>.</p>
            {% endfor %}
        </div>
        {% if total_projects > 3 %}
        <div class="section-footer">
            <a href="{% url 'projects:list' %}" class="btn btn-outline">
                Voir tous les projets ({{ total_projects }})
            </a>
        </div>
        {% endif %}
    </div>
</section>

<!-- ─── Contact ─────────────────────────────────────────────────────────── -->
<section class="section section-dark" id="contact">
    <div class="section-container">
        <div class="section-header">
            <span class="section-tag">{{ config.contact.section_tag }}</span>
            <h2 class="section-title">{{ config.contact.section_title }}</h2>
            <p class="section-sub">{{ config.contact.section_subtitle }}</p>
        </div>
        <div class="contact-grid">
            {% for item in config.contact.items %}
            <a href="{{ item.url }}" {% if 'http' in item.url %}target="_blank"{% endif %} class="contact-card">
                <div class="contact-icon">{{ item.icon }}</div>
                <div>
                    <div class="contact-label">{{ item.label }}</div>
                    <div class="contact-value">{{ item.value }}</div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>

{% endblock %}
