<?php
/**
 * Variables attendues :
 * $hero_title (string)
 * $hero_subtitle (string, optionnel)
 */
?>
<style>
.hero-banner {
    height: 260px;
    background: url("assets/img/colvert_sport_banner.jpg") center / cover no-repeat;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 30px;

    /* animation */
    opacity: 0;
    transform: translateY(-20px);
    animation: heroFadeIn 1s ease-out forwards;
}

.hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.25)
    );
}

.hero-banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 40px;
    color: white;
}

.hero-banner h1 {
    font-weight: 700;
    font-size: 2.4rem;
    margin-bottom: 8px;
}

.hero-banner p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* animation keyframes */
@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>

<div class="hero-banner">
    <div class="hero-banner-content">
        <div>
            <h1><?= $hero_title ?? 'Salle de Sport Colvert' ?></h1>

            <?php if(!empty($hero_subtitle)): ?>
                <p><?= $hero_subtitle ?></p>
            <?php endif; ?>

            <span class="badge bg-success fs-6 mt-2">
                💪 100 % Motivation
            </span>
        </div>
    </div>
</div>
