{{-- resources/views/frontend/jpt/livret-programme.blade.php --}}
@extends('frontend.jpt.layout.mainlayout')

@section('title', __('booklet.title'))

@section('content')
    <!-- === BANNIÈRE PROGRAMME === -->
    <header>
        <h1>{{ __('booklet.header_title') }}</h1>
        <p>{{ __('booklet.header_subtitle') }}</p>
        <div class="banner-decoration"></div>
    </header>

    <div class="livret-container">
        <div class="livret-content">
            <!-- Contenu principal simplifié -->
            <section class="livret-section intro-section" data-animate>
                <div class="intro-content">
                    <p>{{ __('booklet.introduction.content') }}</p>

                    <!-- Lien de téléchargement principal -->
                    <div class="main-download">
                        <a href="{{ URL::asset('assets/frontend/jpt/pdf/TUSAMED 2025 - Livret Programme.pdf') }}"
                            class="download-btn main-download-btn" target="_blank" download>
                            <i class="fas fa-download"></i>
                            {{ __('booklet.download.button_text') }}
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

<style>
    /* === BANNIÈRE PROGRAMME === */
    header {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('/assets/frontend/jpt/images/program-banner.jpg');
        background-size: cover;
        background-position: center;
        color: white;
    }

    /* === CONTENEUR PRINCIPAL === */
    .livret-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 60px 20px;
    }

    .livret-content {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    /* === SECTION INTRODUCTION === */
    .intro-section {
        text-align: center;
    }

    .intro-content {
        max-width: 700px;
        margin: 0 auto;
    }

    /* === TÉLÉCHARGEMENT PRINCIPAL === */
    .main-download {
        margin-top: 30px;
    }

    .main-download-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: var(--vert);
        color: white;
        padding: 18px 40px;
        border-radius: 10px;
        text-decoration: none;
        font-size: 1.2em;
        transition: var(--transition);
        box-shadow: 0 6px 20px rgba(46, 139, 87, 0.3);
        border: 2px solid var(--vert);
    }

    .main-download-btn:hover {
        background: transparent;
        color: var(--vert);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(46, 139, 87, 0.4);
    }

    .main-download-btn i {
        font-size: 1.2em;
    }

    /* === SECTIONS === */
    .livret-section {
        background: white;
        border-radius: 15px;
        padding: 40px;
        box-shadow: var(--ombre);
    }

    .livret-section h2 {
        color: var(--rouge);
        font-size: 2em;
        margin-bottom: 30px;
        text-align: center;
        font-weight: 600;
    }

    /* === INFORMATIONS PRATIQUES === */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }

    .info-card {
        text-align: center;
        padding: 25px;
        background: var(--fond);
        border-radius: 10px;
        transition: var(--transition);
        border: 1px solid var(--gris);
    }

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--ombre-hover);
        border-color: var(--dore);
    }

    .info-icon {
        width: 60px;
        height: 60px;
        background: var(--rouge);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 1.5em;
    }

    .info-card h4 {
        color: var(--texte);
        margin-bottom: 10px;
        font-size: 1.2em;
    }

    .info-card p {
        color: var(--texte-clair);
        line-height: 1.6;
    }

    /* === RESPONSIVE === */
    @media (max-width: 768px) {
        .programme-header {
            padding: 80px 0;
        }

        .programme-header h1 {
            font-size: 2.2em;
        }

        .livret-container {
            padding: 40px 15px;
        }

        .livret-section {
            padding: 30px 20px;
        }

        .main-download-btn {
            padding: 16px 30px;
            font-size: 1.1em;
            width: 100%;
            max-width: 300px;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 480px) {
        .programme-header h1 {
            font-size: 1.8em;
        }

        .main-download-btn {
            padding: 14px 25px;
            font-size: 1em;
        }
    }
</style>