@extends('layouts.app')

@section('title', __('practical_info.page_title'))
@section('meta_description', __('practical_info.meta_description'))

@section('content')

<!--=       Section 1 - Breadcrumb / Titre de la page      =-->
<div class="edu-breadcrumb-area breadcrumb-style-2 bg-image bg-image--19">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('practical_info.page_title') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ LaravelLocalization::localizeUrl('/') }}">{{ __('navigation.home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('practical_info.page_title') }}</li>
            </ul>
        </div>
    </div>
</div>

<!--=       Section 2 - Navigation de la page (style gallery EduLink)      =-->
<div class="edu-gallery-area edu-section-gap" style="padding-bottom: 0;">
    <div class="container">
        <div class="isotope-wrapper">
            <nav class="isotop-button button-transparent isotop-filter practical-info-nav" aria-label="{{ __('practical_info.page_title') }}" role="navigation">
                <a href="#section-certificates" class="section-nav-link is-checked">{{ __('practical_info.nav_certificates') }}</a>
                <a href="#section-vouchers" class="section-nav-link">{{ __('practical_info.nav_vouchers') }}</a>
                <a href="#section-attestations" class="section-nav-link">{{ __('practical_info.nav_attestations') }}</a>
            </nav>
        </div>
    </div>
</div>

<!--=       Section 3 - Certificats      =-->
<div id="section-certificates" class="section-gap-large edu-about-area about-style-7">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_certificates_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_certificates_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ __('practical_info.section_certificates_text') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-image-gallery" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <img class="main-img-1 w-100 rounded" src="{{ asset('assets/images/about/about-11.webp') }}" alt="{{ __('practical_info.section_certificates_title') }}">
                </div>
            </div>
        </div>
    </div>
</div>

<!--=       Section 4 - Chèques-formation      =-->
<div id="section-vouchers" class="section-gap-large edu-about-area about-style-7 bg-light">
    <div class="container">
        <div class="row g-5 align-items-center flex-lg-row-reverse">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_vouchers_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_vouchers_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ __('practical_info.section_vouchers_text') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-image-gallery" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <img class="main-img-1 w-100 rounded" src="{{ asset('assets/images/about/about-12.webp') }}" alt="{{ __('practical_info.section_vouchers_title') }}">
                </div>
            </div>
        </div>
    </div>
</div>

<!--=       Section 5 - Attestations / UFC      =-->
<div id="section-attestations" class="section-gap-large edu-about-area about-style-7">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_attestations_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_attestations_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ __('practical_info.section_attestations_text') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-image-gallery" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <img class="main-img-1 w-100 rounded" src="{{ asset('assets/images/about/about-13.webp') }}" alt="{{ __('practical_info.section_attestations_title') }}">
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const sections = document.querySelectorAll('[id^="section-"]');
    const navLinks = document.querySelectorAll('.practical-info-nav .section-nav-link');
    // Scroll fluide au clic
    navLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const target = document.querySelector(targetId);
            if (target) {
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                history.replaceState(null, null, targetId);
            }
        });
    });
    // Mise en évidence de l'onglet actif au scroll
    function updateActiveNav() {
        const scrollY = window.scrollY;
        let current = '';
        sections.forEach(function(section) {
            const top = section.offsetTop - 120;
            const height = section.offsetHeight;
            if (scrollY >= top && scrollY < top + height) {
                current = '#' + section.id;
            }
        });
        navLinks.forEach(function(link) {
            link.classList.remove('active', 'is-checked');
            if (link.getAttribute('href') === current) {
                link.classList.add('active', 'is-checked');
            }
        });
    }
    window.addEventListener('scroll', updateActiveNav);
    updateActiveNav();
});
</script>
@endpush

@endsection