@extends('layouts.layout')

@section('css')
    <link rel="stylesheet" href="{{ asset('css/a-propos.css') }}">
@endsection

@section('content')
    <div class="container-index" id="container">
        <div class="section">
            <div class="container accueil">
                <div class="row row-accueil">
                    <!-- Colonne droite (Image) -->
                    <div class="col-right">
                        <img src="{{ asset('/images-static/moi.png') }}" alt="">
                    </div>
                    <!-- Colonne gauche (Texte) -->
                    <div class="a-propos-left">
                        <h3 class="a-propos-titre">A propos</h3>
                        <h1>Développeur web</h1>
                        <p>Développeur passionné, j’aime analyser des problématiques, expérimenter et concevoir des solutions efficaces. Curieux et rigoureux, je veille à optimiser chaque projet pour allier performance, intuitivité et innovation. Toujours en quête d’apprentissage, je mets mes compétences au service de projets ambitieux pour offrir des expériences fluides et modernes.</p>
                        <a href="{{ url('/') }}#contact">Contactez-moi <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="section parcours">
            <div class="container">
                <div class="row">
                    <h1>Ma formation</h1>
                    <p>
                        J'ai suivi une formation en <strong>BUT MMI</strong>, une filière multidisciplinaire qui m’a permis de développer des compétences variées dans les domaines du développement web, du design, de la communication numérique et de la gestion de projet. Cette formation m’a offert une solide base technique, tout en me sensibilisant à l’importance de l’expérience utilisateur et de la création de contenus numériques.
                    </p>
                    <p>
                        Grâce à ce parcours, j’ai acquis des compétences pratiques dans la conception de sites web, le développement d’applications, ainsi que dans la gestion de projets multimédia. Cette polyvalence m’a permis de comprendre les enjeux techniques et créatifs du monde numérique, et de me préparer à répondre aux besoins diversifiés du secteur.
                    </p>

                    <h1 style="margin-top: 40px;">Mes experiences </h1>
                    <p>
                        Durant mes 3 années de BUT, j'ai eu l'occasion de réaliser un stage chaque année, de 4, 8 et 14 semaines respectivement. Lors de mon premier stage, j’ai travaillé pour une galerie d'art, où j’ai eu la chance de concevoir un site web dédié à la présentation de leurs œuvres et événements. 
                    </p>    
                    <p>
                        Ensuite, lors de mes deux derniers stages au sein de l'agence web <strong>Nymphea Studio</strong> à Avignon, j'ai pu évoluer au sein d'une équipe dynamique et être confronté à une variété de projets différents. Ces expériences m'ont permis d’affiner mes compétences techniques tout en développant ma capacité à m'adapter à différents types de projets.
                    </p>

                </div>
            </div>
        </div>
        <div class="section competences-section">
            <div class="container">
                <div class="row">
                <h1 class="titre-competences">Mes Compétences Principales</h1>
        
                    <!-- Compétences Technologiques -->
                    <div class="row competences">
                        <!-- Compétences de base -->
                        <div class="col-md-4">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="bi bi-file-earmark-code fs-1"></i>
                                    <h5 class="card-title">Technologies</h5>
                                    <p class="card-text">
                                        <strong>HTML, CSS, JavaScript, PHP</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Frameworks -->
                        <div class="col-md-4">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="bi bi-boxes fs-1"></i>
                                    <h5 class="card-title">Frameworks</h5>
                                    <p class="card-text">
                                        <strong>Laravel, React, React Native</strong>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Bases de données -->
                        <div class="col-md-4">
                            <div class="card text-center">
                                <div class="card-body">
                                    <i class="bi bi-database fs-1"></i>
                                    <h5 class="card-title">Bases de données</h5>
                                    <p class="card-text">
                                        <strong>SQL</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Soft Skills Section (À compléter) -->
                    <div class="row mt-4 competences">
                        <div class="col-12 text-center">
                            <h1 class="titre-competences">Soft Skills</h1>
                            <div class="row">
                                <!-- Travail en équipe -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-people fs-1"></i>
                                            <h5 class="card-title">Travail en équipe</h5>
                                        </div>
                                    </div>
                                </div>

                                <!-- Résolution de problèmes -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-brightness-high fs-1"></i>
                                            <h5 class="card-title">Résolution de problèmes</h5>
                                        </div>
                                    </div>
                                </div>

                                <!-- Adaptabilité -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-arrow-repeat fs-1"></i>
                                            <h5 class="card-title">Adaptabilité</h5>
                                        </div>
                                    </div>
                                </div>

                                <!-- Prise d'initiative -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-lightbulb fs-1"></i>
                                            <h5 class="card-title">Prise d'initiative</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <!-- Esprit critique -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-flag fs-1"></i>
                                            <h5 class="card-title">Esprit critique</h5>
                                        </div>
                                    </div>
                                </div>

                                <!-- Gestion du stress -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-heart-pulse fs-1"></i>
                                            <h5 class="card-title">Gestion du stress</h5>
                                        </div>
                                    </div>
                                </div>

                                <!-- Esprit d'analyse -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-search fs-1"></i>
                                            <h5 class="card-title">Esprit d'analyse</h5>
                                        </div>
                                    </div>
                                </div>

                                <!-- Autonomie -->
                                <div class="col-md-3 col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <i class="bi bi-person-check fs-1"></i>
                                            <h5 class="card-title">Autonomie</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="section">
                <div class="container text-center">
                    <div class="row">
                        <h1 class="cta-title">Envie de discuter d’un projet ou d’une collaboration ?</h1>
                        <p class="cta-description">
                            Que ce soit pour échanger des idées, discuter d'une nouvelle opportunité ou vous accompagner dans la réalisation de votre projet, je suis à votre écoute. 
                            Vous avez un défi à relever ou une question à poser ? Cliquez sur le bouton ci-dessous pour accéder au formulaire de contact et nous pourrons en discuter plus en détail.
                        </p>
                        <a href="{{ url('/') }}#contact" class="cta-button">Contactez-moi</a>
                    </div>  
                </div>
            </div>

    </div>
    

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const sections = document.querySelectorAll('.section');
            let currentSection = 0;
            let isScrolling = false;
            const animationDuration = 1000;  // Durée de l'animation en ms
            const scrollSpeed = 0.1;  // Facteur pour ralentir le défilement

            // Réactive le défilement vertical pour mobile
            const isMobile = window.innerWidth <= 768;
            if (isMobile) {
                document.body.style.overflow = 'auto'; // Réactive le scroll vertical sur mobile
                return; // On arrête ici l'exécution pour mobile
            }

            // Désactiver le défilement normal du body pour un scroll horizontal
            document.body.style.overflow = 'hidden';

            function scrollToSection(index) {
                if (index < 0 || index >= sections.length || isScrolling) return;

                isScrolling = true;
                currentSection = index;

                // Scroll horizontal
                sections[index].scrollIntoView({ behavior: 'smooth', inline: 'start' });

                setTimeout(() => {
                    isScrolling = false;
                }, animationDuration);
            }

            window.addEventListener('wheel', function(e) {
                e.preventDefault();
                if (isScrolling || window.innerWidth <= 768) return; // Ne rien faire sur mobile

                // Ajuste la vitesse du scroll horizontal
                const delta = e.deltaY * scrollSpeed;

                if (delta > 0) {
                    scrollToSection(currentSection + 1); // Scroll vers la section suivante
                } else {
                    scrollToSection(currentSection - 1); // Scroll vers la section précédente
                }
            }, { passive: false });

            window.addEventListener('keydown', function(e) {
                if (isScrolling || window.innerWidth <= 768) return;

                if (e.key === 'ArrowRight') {
                    e.preventDefault();
                    scrollToSection(currentSection + 1);
                } else if (e.key === 'ArrowLeft') {
                    e.preventDefault();
                    scrollToSection(currentSection - 1);
                }
            });

            let touchStartX = 0;
            window.addEventListener('touchstart', function(e) {
                touchStartX = e.touches[0].clientX;
            }, { passive: false });

            window.addEventListener('touchmove', function(e) {
                if (isScrolling || window.innerWidth <= 768) {
                    e.preventDefault();
                    return;
                }

                const touchX = e.touches[0].clientX;
                const diff = touchStartX - touchX;

                // Ajuste la vitesse du scroll tactile
                if (Math.abs(diff) > 50 * scrollSpeed) {
                    if (diff > 0) {
                        scrollToSection(currentSection + 1); // Scroll vers la droite
                    } else {
                        scrollToSection(currentSection - 1); // Scroll vers la gauche
                    }
                    e.preventDefault();
                }
            }, { passive: false });

            // Gérer les clics sur des éléments pour défiler vers la section spécifique
            document.querySelectorAll('[data-section]').forEach(button => {
                button.addEventListener('click', function() {
                    const sectionIndex = parseInt(this.dataset.section);
                    scrollToSection(sectionIndex);
                });
            });

            // Gestion des liens de navigation pour faire défiler vers une section avec un id
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    const targetId = this.getAttribute('href').split('#')[1];
                    if (!targetId) return;

                    const targetSection = document.getElementById(targetId);
                    if (targetSection) {
                        e.preventDefault();
                        targetSection.scrollIntoView({ behavior: 'smooth', inline: 'start' });
                        history.pushState(null, null, `#${targetId}`);
                    }
                });
            });

        });
    </script>
@endsection