{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/hero_header.css') }}">
{% endblock %}

{% block hero_header %}
<div class="hero_header">
    <video id="video1" autoplay muted loop>
        <source src="{{ asset('videos/hero_header.mp4') }}" type="video/mp4">
        Votre navigateur ne supporte pas la lecture de vidéos.
    </video>
    {# <video id="video2" muted style="opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
        <source src="{{ asset('videos/hero_header_deuxieme.mp4') }}" type="video/mp4">
    </video> #}
    <div class="wrapper">
        <section class="hero_title">
            <h1>MedCareConfort</h1>
        </section>
        <section class="hero_subtitle">
            <h2>Des solutions fiables pour un confort optimal</h2>
        </section>
        <a href="#" class="hero_button">Je consulte les produits</a>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{# <script>
document.addEventListener("DOMContentLoaded", function() {
    const video1 = document.getElementById("video1");
    const video2 = document.getElementById("video2");

    video1.addEventListener("ended", function() {
        video1.classList.add("fade-out");

        setTimeout(() => {
            video2.classList.remove("hidden");
            video2.play();
            video2.classList.add("fade-in");
        }, 1000); 
    });
});
</script> #}
{% endblock %}

{# IMAGE FIXE #}

{# {% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/hero_header.css') }}">
{% endblock %}

{% block hero_header %}
<div class="hero_header">
    <div class="wrapper">
        <section class="hero_title">
            <h1>MedCareConfort</h1>
        </section>
        <section class="hero_subtitle">
        <h2>Des solutions fiables pour un confort optimal</h2>
        </section>
        <a href="#" class="hero_button">Je consulte les produits</a>
    </div>
</div>
{% endblock %} #}