@extends('layouts.app')

@php $activePage = 'actualites'; @endphp

@section('extra_css')
<style>
    .container {
        max-width: 1200px;
    }
    .header .row.align-items-center {
        min-height: 80px;
    }
    .events .single-team {
        margin-bottom: 30px;
    }
    .events .single-team iframe {
        width: 100%;
        height: 200px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .events .single-team img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    .events .single-team img:hover {
        transform: scale(1.05);
    }
    .events .single-team .t-bottom {
        padding: 15px 0;
    }
    .events .single-team .t-bottom h2 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    .events .single-team .t-bottom p {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }
    .events .single-team .t-bottom a {
        color: #5fc3d4;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .events .single-team .t-bottom a:hover {
        color: #4db5c7;
        text-decoration: underline;
    }
    .events .single-team video {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
</style>
@endsection

@section('content')
<!-- Breadcrumbs -->
<section class="breadcrumbs overlay">
    <div class="container">
        <div class="bread-inner">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-white">Nos Ev&eacute;nements</h3>
                    <ul class="bread-list">
                        <li>
                            <a href="{{ route('accueil') }}">
                                <i class="fa fa-chevron-left"></i> Accueil
                            </a>
                        </li>
                        <li>
                            <i class="fa fa-chevron-right"></i>
                        </li>
                        <li class="active" style="color:#ffe400;">Ev&eacute;nements &amp; Vid&eacute;os</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section Evenements -->
<section class="team section single-page events" id="team">
    <div class="container">
        <div class="row">
            <!-- Video YouTube 1 -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <iframe src="https://www.youtube.com/embed/mK9ledGaY5A?start=43"
                                title="Webinaire Data-Collect - Episode 1/3 Logement"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                        </iframe>
                    </div>
                    <div class="t-bottom">
                        <p>
                            <a href="https://www.youtube.com/embed/mK9ledGaY5A?start=43" target="_blank">
                                Webinaire Data-Collect - Episode 1/3 "Logement"
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Video YouTube 2 -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <iframe src="https://www.youtube.com/embed/fpWwbuq7bPU?start=40"
                                title="Webinaire Data-Collect - Episode 2/3 Tertiaire"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                        </iframe>
                    </div>
                    <div class="t-bottom">
                        <p>
                            <a href="https://www.youtube.com/watch?v=fpWwbuq7bPU&t=40s&ab_channel=Untec" target="_blank">
                                Webinaire Data-Collect - Episode 2/3 "Tertiaire"
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Video YouTube 3 -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <iframe src="https://www.youtube.com/embed/3BW8NtUzw4w?start=77"
                                title="Webinaire Data-Collect - Episode 3/3 Renovation energetique"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                        </iframe>
                    </div>
                    <div class="t-bottom">
                        <p>
                            <a href="https://www.youtube.com/watch?v=3BW8NtUzw4w&t=77s" target="_blank">
                                Episode 3/3 "R&eacute;novation &eacute;nerg&eacute;tique"
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Video YouTube 4 -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <iframe src="https://www.youtube.com/embed/yWYAPNGqvTM?start=17"
                                title="Webinaire aux adherents de l'IRIEC"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                        </iframe>
                    </div>
                    <div class="t-bottom">
                        <p>
                            <a href="https://www.youtube.com/watch?v=yWYAPNGqvTM&t=17s&ab_channel=Untec" target="_blank">
                                Webinaire aux adh&eacute;rents de l'IRIEC
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Video locale 1 -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <video controls>
                            <source src="{{ asset('img/video/innover_pour_faire_face_aux_coûts_de_la_construction (1080p).mp4') }}" type="video/mp4">
                            Votre navigateur ne supporte pas la lecture de vid&eacute;os.
                        </video>
                    </div>
                    <div class="t-bottom">
                        <p>
                            <a href="{{ asset('img/video/innover_pour_faire_face_aux_coûts_de_la_construction (1080p).mp4') }}" target="_blank">
                                Pr&eacute;sentation de Data-Collect au congr&egrave;s USH
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Video locale 2 -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <video controls>
                            <source src="{{ asset('img/video/Design sans titre.mp4') }}" type="video/mp4">
                            Votre navigateur ne supporte pas la lecture de vid&eacute;os.
                        </video>
                    </div>
                    <div class="t-bottom">
                        <p>
                            <a href="{{ asset('img/video/Design sans titre.mp4') }}" target="_blank">
                                Pr&eacute;sentation IRIEC - Design
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Images des evenements -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <img src="{{ asset('img/IMG_7284.JPG') }}" alt="Congres Untec 2024">
                    </div>
                    <div class="t-bottom">
                        <p>Congr&egrave;s Untec 2024</p>
                        <h2><a href="javascript:void(0);">Assembl&eacute;e G&eacute;n&eacute;rale</a></h2>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <img src="{{ asset('img/IMG_7287.JPG') }}" alt="Congres Untec 2024">
                    </div>
                    <div class="t-bottom">
                        <p>Congr&egrave;s Untec 2024</p>
                        <h2><a href="javascript:void(0);">Assembl&eacute;e G&eacute;n&eacute;rale</a></h2>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <img src="{{ asset('img/_DSC8784.jpg') }}" alt="Congres Untec Salon Actes 2025">
                    </div>
                    <div class="t-bottom">
                        <p>Congr&egrave;s Untec - Salon Actes 2025</p>
                        <h2><a href="javascript:void(0);">Assembl&eacute;e G&eacute;n&eacute;rale</a></h2>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <img src="{{ asset('img/_DSC8786.jpg') }}" alt="Congres Untec Salon Actes 2025">
                    </div>
                    <div class="t-bottom">
                        <p>Congr&egrave;s Untec - Salon Actes 2025</p>
                        <h2><a href="javascript:void(0);">Assembl&eacute;e G&eacute;n&eacute;rale</a></h2>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="single-team">
                    <div class="t-head">
                        <img src="{{ asset('img/_DSC0495.jpg') }}" alt="Congres Untec Salon Actes 2025">
                    </div>
                    <div class="t-bottom">
                        <p>Congr&egrave;s Untec - Salon Actes 2025</p>
                        <h2><a href="javascript:void(0);">Le Havre</a></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Newsletter -->
<section class="newsletter section">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-12">
                <div class="subscribe-text">
                    <h6>S'inscrire &agrave; la bo&icirc;te aux lettres</h6>
                    <p>
                        Recevez les derni&egrave;res actualit&eacute;s de l'IRIEC directement dans votre bo&icirc;te de r&eacute;ception en vous inscrivant d&egrave;s aujourd'hui.
                    </p>
                </div>
            </div>
            <div class="col-lg-6 col-12">
                <div class="subscribe-form">
                    <form method="POST" class="newsletter-inner">
                        @csrf
                        <input class="common-input" name="email" placeholder="Votre adresse E-mail" required type="email">
                        <button class="btn" type="submit">
                            <i class="fa fa-envelope"></i> S'inscrire maintenant
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection