@extends('layouts.layout')

@section('content')
    <div class="container-index" id="container">
        <div class="section">
            <div class="container accueil">
                <div class="row row-accueil">
                    <!-- Colonne gauche (Texte) -->
                    <div class="col-left">
                        <h1>Marcus BONED</h1>
                        <h3>Développeur web</h3>
                        <a href="#contact">Contactez-moi <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                    <!-- Colonne droite (Image) -->
                    <div class="col-right">
                        <img src="{{ asset('/images-static/moi.png') }}" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="container a-propos">
                <div class="row">
                    <div class="col-12">
                        <h1>A propos de moi</h1>
                        <div>
                        <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="{{ route('a-propos') }}">En savoir plus sur moi <i class="fa-solid fa-arrow-right"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="container realisations">
                <div class="row">
                    <div class="col-12 text-real">
                        <h1>Mes réalisations</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4 col-md-6 col-12">
                        <a href="{{ url('realisation/17') }}" class="no-style">
                            <div class="realisation-card">
                                <img src="{{ asset('images/Capture%20d%E2%80%99%C3%A9cran%202025-06-20%20%C3%A0%2017.22.56-front-2-2.png') }}" class="img-fluid img-realisations" alt="Réalisation 1">
                                <h3>Estim'Bien Immobilier</h3>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <a href="{{ url('realisation/18') }}" class="no-style">
                            <div class="realisation-card">
                                <img src="{{ asset('images/Capture%20d%E2%80%99%C3%A9cran%202025-06-20%20%C3%A0%2017.28.27-front-2.png') }}" class="img-fluid img-realisations" alt="Réalisation 2">
                                <h3>Galerie ABCD</h3>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12">
                        <a href="{{ url('realisation/23') }}" class="no-style">
                            <div class="realisation-card">
                                <img src="{{ asset('images/Affiche_TTC.png') }}" alt="Réalisation 3" style="object-fit: contain;">
                                <h3>Toulon Tout Court</h3>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <a href="">Voir mes réalisations <i class="fa-solid fa-arrow-right"></i> </a>
                </div>
            </div>
        </div>
        <div class="section contact" id="contact">
            <div class="row row-contact">
                <div class="col-lg-6 col-12 contact-left">
                    <h1>Contactez-moi</h1>
                    <p>Bienvenue sur ma page de contact ! Si vous avez un projet en tête, des questions, ou souhaitez simplement discuter de vos idées, je suis là pour vous aider. Je suis un développeur web passionné par la création de solutions sur mesure pour chaque client. Que vous ayez besoin d'un site web moderne, d'une application interactive ou d'une simple amélioration de votre présence en ligne, je suis là pour vous accompagner à chaque étape.</p>
                </div>
                <div class="col-lg-6 col-12">
                    <form action="{{ route('contact') }}" method="POST" class="contact-form">
                        @csrf
                        <div class="form-group">
                            <label for="name">Nom :</label>
                            <input type="text" id="name" name="name" placeholder="Votre nom" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email :</label>
                            <input type="email" id="email" name="email" placeholder="Votre email" required>
                        </div>

                        <div class="form-group">
                            <label for="message">Message :</label>
                            <textarea id="message" name="message" placeholder="Votre message" rows="5" required></textarea>
                        </div>

                        <button type="submit" class="submit-btn">Envoyer</button>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    // Vérifie si on est sur la page "projet" en regardant l'URL
    if (window.location.pathname.includes('/project')) {
        document.body.style.overflow = 'auto'; // Réactive le scroll normal
        return; // Arrête l'exécution du script ici
    }

    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