@extends('layouts.splash')

@section('content')

<link href="{{ asset('css/main2.css') }}" rel="stylesheet">

<style>
    /* Conteneur principal */
    .main_view {
        position: relative; /* Permet au footer de se positionner à l’intérieur */
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        padding-bottom: 140px; /* Espace pour le footer */
    }

    /* Boutons modernisés */
    .btn-age {
        display: inline-block;
        width: 100%;
        max-width: 220px;
        padding: 15px 20px;
        font-size: 1.2rem;
        font-weight: bold;
        color: #fff;
        border: none;
        cursor: pointer;
        transition: transform 0.2s ease, background-color 0.3s ease;
    }

    .btn-age:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

    .btn-under {
        background-color: #2CA3A0; /* turquoise */
    }

    .btn-over {
        background-color: #275E66; /* bleu canard foncé */
    }

    /* Footer à l'intérieur du bloc principal */
    .footer-inside {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .footer-inside img {
        width: 100%;

    }
</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-xl-5 col-12 main_view">
            
            <!-- Header -->
            <img src="{{ asset('images/espacesud/header.png') }}" class="img-fluid" alt="Responsive image">

            <!-- Titre -->
            <div class="row justify-content-center">
                <div class="col-10 mg-top-80 text-center">
                    <div class="blockQuestion">
                        <h2>Quel est votre âge ?</h2>
                        <p>Veuillez choisir si vous avez plus ou moins de 12 ans.</p>
                    </div>
                </div>
            </div>

            <!-- Boutons -->
            <div class="row justify-content-center mg-top-100">
                <div class="col-6 text-center mg-bottom-50">
                    <form method="POST" action="{{ route('splash.setAge') }}">
                        @csrf
                        <input type="hidden" name="is_over_12" value="0">
                        <button type="submit" class="btn-age btn-under">Moins de 12 ans</button>
                    </form>
                </div>
                <div class="col-6 text-center mg-bottom-50">
                    <form method="POST" action="{{ route('splash.setAge') }}">
                        @csrf
                        <input type="hidden" name="is_over_12" value="1">
                        <button type="submit" class="btn-age btn-over">Plus de 12 ans</button>
                    </form>
                </div>
            </div>

            <!-- Footer à l'intérieur du bloc principal -->
            <div class="footer-inside">
                <img src="{{ asset('images/espacesud/Rocher.png') }}" alt="Footer Rocher">
            </div>

        </div>
    </div>
</div>

@endsection