{% extends "base.html" %}
{% block content %}

<div class="container py-5">
    <!-- Hero / Presentation Box -->
    <div class="p-5 mb-5 rounded-4 text-light shadow hero-box transparent-box">
        <div class="row align-items-center">
            <div class="col-md-6 mb-4 mb-md-0">
                <h1 class="display-4 mb-3">Bienvenue sur mon portfolio</h1>
                <p class="lead">
                    Salut ! Je suis Valentin, développeur bas-niveau passionné par la cybersécurité et le DevOps.  
                    Ici, vous pouvez découvrir mes projets et me contacter directement.
                </p>
            </div>
            <div class="col-md-6 text-center">
                <img src="{{ url_for('static', filename='img/profile.webp') }}" 
                     alt="Profile picture" 
                     class="rounded-circle img-fluid profile-pic"
                     style="width: 250px; height: 250px; object-fit: cover;">
            </div>
        </div>
    </div>

    <!-- Featured Projects Title -->
    <h2 class="text-light text-center mb-5">Featured Projects</h2>

<!-- Featured Project Boxes -->
<div class="container mb-5">
    <!-- Project 1 (left) -->
    {% for project in projects %}
    <div class="row mb-5 justify-content-{{ project.align }}">
        <div class="col-md-8">
            <div class="p-4 rounded-4 text-light shadow hover-scale transparent-box"
                onclick="window.location='{{ project.link }}'" style="cursor: pointer; position: relative;">

                <div class="row align-items-center {% if project.align == 'end' %}flex-md-row-reverse{% endif %}">
                    <div class="col-md-7">
                        <h4>{{ project.title }}</h4>
                        <p>{{ project.description }}</p>
                    </div>
                    <div class="col-md-5 text-center">
                        <img src="{{ url_for('static', filename='img/' ~ project.image) }}"
                            alt="{{ project.title }}"
                            class="img-fluid rounded shadow project-img">
                    </div>
                </div>

                {% if project.button %}
                <a href="{{ project.button[1] }}" class="btn btn-secondary project-btn">
                    {{ project.button[0] }}
                </a>
                {% endif %}

            </div>
        </div>
    </div>
    {% endfor %}

</div>

{% endblock %}