@extends('layouts.app')

@section('title', 'Club Atlético Torino de Talara - Sitio Oficial')

@section('content')
<!-- Hero Section -->
<section class="hero-section position-relative overflow-hidden text-white">
    <!-- Hero Background Image & Gradient Overlays -->
    <div class="hero-bg" style="background-image: url('{{ site_asset('hero_bg_image', 'img/hero_torino.jpg') }}');"></div>
    <div class="hero-gradient-overlay"></div>

    <div class="container-xl position-relative py-5" style="z-index: 3;">
        <div class="row align-items-center min-vh-75 py-4">
            <!-- Left Headline & Content -->
            <div class="col-lg-7 col-xl-6 py-4">
                <div class="hero-badge-tag mb-2">
                    {{ site_content('hero_badge', 'CLUB ATLÉTICO TORINO DE TALARA') }}
                </div>
                <h1 class="hero-headline mb-3">
                    {{ site_content('hero_title_line1', 'Más que un equipo,') }}<br>
                    <span class="text-gold-highlight">{{ site_content('hero_title_highlight', 'una pasión talareña') }}</span>
                </h1>
                <p class="hero-description mb-4">
                    {{ site_content('hero_description', 'El Torino de Talara es historia, identidad y orgullo de nuestra gente. Un club que nació del esfuerzo de su comunidad y que sigue luchando por un mismo sueño: llevar el nombre de Talara en alto.') }}
                </p>
                <div>
                    <a href="{{ site_content('hero_btn_link', '#historia') }}" class="btn btn-gold btn-hero rounded-pill px-4 py-3 d-inline-flex align-items-center text-uppercase">
                        {{ site_content('hero_btn_text', 'CONOCE NUESTRA HISTORIA') }} <i class="bi bi-arrow-right ms-2 fs-5"></i>
                    </a>
                </div>
            </div>

            <!-- Right: "¡Vamos Torino!" Script Overlay -->
            <div class="col-lg-5 col-xl-6 text-center text-lg-end position-relative mt-4 mt-lg-0">
                <div class="vamos-torino-script">
                    {!! nl2br(e(site_content('hero_script_text', "¡Vamos\nTorino!"))) !!}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section 1: HISTORIA -->
<section id="historia" class="py-5 bg-white">
    <div class="container-xl py-4">
        <div class="row g-4 align-items-center">
            <!-- Left Column: Story -->
            <div class="col-lg-5">
                <div class="section-tag mb-2">
                    <span class="section-tag-text" style="color: #b91c1c;">{{ site_content('historia_tag', 'HISTORIA') }}</span>
                    <span class="section-tag-line" style="background-color: #b91c1c;"></span>
                </div>
                <h2 class="section-heading mb-3">
                    {!! nl2br(e(site_content('historia_title', "Una tradición que\nnace en Talara"))) !!}
                </h2>
                <p class="text-muted mb-3" style="font-size: 14.5px; line-height: 1.75;">
                    {{ site_content('historia_p1', 'El Club Atlético Torino de Talara fue fundado el 6 de enero de 1954, en la ciudad de Talara, provincia de Talara, Piura, Perú. Desde sus inicios, el club ha sido un referente del fútbol regional, destacándose por su entrega, compromiso y el orgullo de representar a nuestra tierra.') }}
                </p>
                <p class="text-muted mb-4" style="font-size: 14.5px; line-height: 1.75;">
                    {{ site_content('historia_p2', 'A lo largo de su historia, el Torino ha participado en diversos torneos de la región y del fútbol peruano, formando jugadores que han dejado huella en el deporte nacional.') }}
                </p>
                <a href="{{ site_content('historia_btn_link', '#historia-completa') }}" class="btn btn-maroon rounded-pill px-4 py-2 d-inline-flex align-items-center text-uppercase" style="font-size: 12px; letter-spacing: 0.5px;">
                    {{ site_content('historia_btn_text', 'LEER MÁS SOBRE NUESTRA HISTORIA') }} <i class="bi bi-arrow-right ms-2"></i>
                </a>
            </div>

            <!-- Center Column: Polaroid Team Photo 1954 -->
            <div class="col-lg-4 text-center">
                <div class="polaroid-wrapper mx-auto">
                    <div class="polaroid-card">
                        <div class="polaroid-image-box">
                            <img src="{{ site_asset('historia_polaroid_img', 'img/historia_1954.jpg') }}" alt="Torino de Talara 1954" class="img-fluid rounded-1">
                        </div>
                        <div class="polaroid-text text-start mt-2 px-2">
                            <div class="script-title" style="font-family: 'Caveat', cursive; font-size: 26px; color: #800020; font-weight: 700; line-height: 1.1;">
                                {{ site_content('historia_polaroid_title', 'Torino de Talara - 1954') }}
                            </div>
                            <div class="text-muted" style="font-size: 11px;">
                                {{ site_content('historia_polaroid_sub', 'Fundación del club') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Datos del Club Card -->
            <div class="col-lg-3">
                <div class="club-data-card p-4 rounded-4 shadow-sm">
                    <h6 class="club-data-title mb-4">DATOS DEL CLUB</h6>
                    
                    <div class="club-data-item d-flex align-items-start mb-3">
                        <div class="data-icon-box me-3">
                            <i class="fa-solid fa-shield-halved"></i>
                        </div>
                        <div>
                            <span class="data-label">Nombre</span>
                            <span class="data-value">{{ site_content('club_data_name', 'Club Atlético Torino de Talara') }}</span>
                        </div>
                    </div>

                    <div class="club-data-item d-flex align-items-start mb-3">
                        <div class="data-icon-box me-3">
                            <i class="fa-regular fa-calendar-days"></i>
                        </div>
                        <div>
                            <span class="data-label">Fundación</span>
                            <span class="data-value">{{ site_content('club_data_foundation', '6 de enero de 1954') }}</span>
                        </div>
                    </div>

                    <div class="club-data-item d-flex align-items-start mb-3">
                        <div class="data-icon-box me-3">
                            <i class="fa-solid fa-location-dot"></i>
                        </div>
                        <div>
                            <span class="data-label">Ciudad</span>
                            <span class="data-value">{{ site_content('club_data_city', 'Talara, Piura - Perú') }}</span>
                        </div>
                    </div>

                    <div class="club-data-item d-flex align-items-start mb-3">
                        <div class="data-icon-box me-3">
                            <i class="fa-solid fa-star"></i>
                        </div>
                        <div>
                            <span class="data-label">Apodos</span>
                            <span class="data-value">{{ site_content('club_data_nicknames', 'El Torino / Los Aurirrojos') }}</span>
                        </div>
                    </div>

                    <div class="club-data-item d-flex align-items-start mb-3">
                        <div class="data-icon-box me-3">
                            <i class="fa-solid fa-shirt"></i>
                        </div>
                        <div>
                            <span class="data-label">Colores</span>
                            <span class="data-value">{{ site_content('club_data_colors', 'Rojo, Amarillo y Granate') }}</span>
                        </div>
                    </div>

                    <div class="club-data-item d-flex align-items-start">
                        <div class="data-icon-box me-3">
                            <i class="fa-solid fa-trophy"></i>
                        </div>
                        <div>
                            <span class="data-label">Estadio</span>
                            <span class="data-value">{{ site_content('club_data_stadium', 'Estadio Campeones del 36 (Talara)') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section 2: NUESTROS VALORES -->
<section class="py-5 bg-values-section">
    <div class="container-xl py-3">
        <div class="text-center mb-5">
            <div class="section-tag justify-content-center mb-1">
                <span class="section-tag-text" style="color: #b45309;">{{ site_content('valores_tag', 'NUESTROS VALORES') }}</span>
                <span class="section-tag-line" style="background-color: #f59e0b;"></span>
            </div>
            <h2 class="section-heading">{{ site_content('valores_title', 'Valores que nos unen') }}</h2>
            <p class="text-muted mx-auto" style="max-width: 600px; font-size: 14.5px;">
                {{ site_content('valores_subtitle', 'El Torino de Talara se construye con valores que nos definen dentro y fuera de la cancha.') }}
            </p>
        </div>

        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-5 g-4 justify-content-center text-center">
            <!-- Valor 1 -->
            <div class="col">
                <div class="value-card h-100">
                    <div class="value-icon-circle mx-auto mb-3" style="background: #fff7ed; color: #ea580c;">
                        <i class="{{ site_content('valor_1_icon', 'fa-solid fa-handshake') }} fs-2"></i>
                    </div>
                    <h6 class="value-title">{!! nl2br(e(site_content('valor_1_title', "Compromiso\ncon la comunidad"))) !!}</h6>
                </div>
            </div>

            <!-- Valor 2 -->
            <div class="col">
                <div class="value-card h-100">
                    <div class="value-icon-circle mx-auto mb-3" style="background: #fef2f2; color: #dc2626;">
                        <i class="{{ site_content('valor_2_icon', 'fa-solid fa-users') }} fs-2"></i>
                    </div>
                    <h6 class="value-title">{!! nl2br(e(site_content('valor_2_title', "Trabajo\nen equipo"))) !!}</h6>
                </div>
            </div>

            <!-- Valor 3 -->
            <div class="col">
                <div class="value-card h-100">
                    <div class="value-icon-circle mx-auto mb-3" style="background: #fefce8; color: #ca8a04;">
                        <i class="{{ site_content('valor_3_icon', 'fa-solid fa-trophy') }} fs-2"></i>
                    </div>
                    <h6 class="value-title">{!! nl2br(e(site_content('valor_3_title', "Disciplina\ny esfuerzo"))) !!}</h6>
                </div>
            </div>

            <!-- Valor 4 -->
            <div class="col">
                <div class="value-card h-100">
                    <div class="value-icon-circle mx-auto mb-3" style="background: #fff1f2; color: #e11d48;">
                        <i class="{{ site_content('valor_4_icon', 'fa-solid fa-heart') }} fs-2"></i>
                    </div>
                    <h6 class="value-title">{!! nl2br(e(site_content('valor_4_title', "Amor al\nfútbol"))) !!}</h6>
                </div>
            </div>

            <!-- Valor 5 -->
            <div class="col">
                <div class="value-card h-100">
                    <div class="value-icon-circle mx-auto mb-3" style="background: #fef3c7; color: #d97706;">
                        <i class="{{ site_content('valor_5_icon', 'fa-solid fa-star') }} fs-2"></i>
                    </div>
                    <h6 class="value-title">{!! nl2br(e(site_content('valor_5_title', "Orgullo\ntalareño"))) !!}</h6>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section 3: PARTIDOS & NOTICIAS -->
<section id="partidos" class="py-5 bg-white">
    <div class="container-xl py-3">
        <div class="row g-4 align-items-stretch">
            <!-- Left Column: Title & Ver Todos CTA -->
            <div class="col-lg-3 d-flex flex-column justify-content-center">
                <div class="section-tag mb-2">
                    <span class="section-tag-text" style="color: #b45309;">{{ site_content('partidos_tag', 'PARTIDOS') }}</span>
                    <span class="section-tag-line" style="background-color: #f59e0b;"></span>
                </div>
                <h2 class="section-heading mb-2">{{ site_content('partidos_title', 'Últimos partidos') }}</h2>
                <p class="text-muted mb-4" style="font-size: 14px; line-height: 1.6;">
                    {{ site_content('partidos_desc', 'Sigue la actualidad del equipo y no te pierdas sus próximos encuentros.') }}
                </p>
                <div>
                    <a href="{{ site_content('partidos_btn_link', '#todos-los-partidos') }}" class="btn btn-maroon rounded-pill px-4 py-2 text-uppercase d-inline-flex align-items-center" style="font-size: 12px; letter-spacing: 0.5px;">
                        {{ site_content('partidos_btn_text', 'VER TODOS LOS PARTIDOS') }} <i class="bi bi-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>

            <!-- Center Column: Match Card -->
            <div class="col-lg-5">
                <div class="card h-100 border rounded-4 p-4 text-center justify-content-between shadow-xs match-card" style="background-color: #fafbfc; border-color: #e5e7eb;">
                    <div>
                        <span class="match-league-title">{{ site_content('match_tournament', 'LIGA DEPARTAMENTAL DE FÚTBOL - PIURA') }}</span>
                        <div class="d-inline-flex align-items-center mt-2 match-date-badge">
                            <i class="fa-regular fa-calendar-days me-1 text-danger"></i> {{ site_content('match_date_time', 'Sáb. 26 de abril de 2025 | 15:30') }}
                        </div>
                    </div>

                    <!-- Teams Display -->
                    <div class="row align-items-center my-3">
                        <div class="col-5 text-center">
                            <img src="{{ site_asset('site_logo', 'img/Logo_de_Club_Atletico_Torino.png') }}" alt="{{ site_content('match_team_local', 'Torino de Talara') }}" style="height: 56px; object-fit: contain;">
                            <span class="d-block fw-bold text-dark mt-2" style="font-size: 12px; letter-spacing: 0.5px;">{{ site_content('match_team_local', 'TORINO DE TALARA') }}</span>
                        </div>
                        <div class="col-2 text-center">
                            <span class="fw-bolder text-secondary fs-4" style="letter-spacing: 1px;">VS</span>
                        </div>
                        <div class="col-5 text-center">
                            <img src="{{ site_asset('match_rival_logo', 'img/escudo_alianza_sullana.jpg') }}" alt="{{ site_content('match_team_rival', 'Alianza Sullana') }}" style="height: 56px; object-fit: contain;" class="rounded-circle shadow-xs">
                            <span class="d-block fw-bold text-dark mt-2" style="font-size: 12px; letter-spacing: 0.5px;">{{ site_content('match_team_rival', 'ALIANZA SULLANA') }}</span>
                        </div>
                    </div>

                    <div>
                        <p class="text-muted small mb-3" style="font-size: 12px;">
                            {{ site_content('match_stadium', 'Estadio Campeones del 36 - Talara') }}
                        </p>
                        <a href="#detalles-partido" class="btn btn-gold rounded-pill px-4 py-2 text-uppercase fw-bold" style="font-size: 12px; letter-spacing: 0.5px;">
                            VER DETALLES <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Right Column: News Card -->
            <div class="col-lg-4" id="noticias">
                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden news-card">
                    <div class="row g-0 h-100">
                        <div class="col-5">
                            <img src="{{ site_asset('news_image', 'img/hinchada.jpg') }}" alt="Hinchada Torino de Talara" class="h-100 w-100 news-img" style="object-fit: cover; min-height: 180px;">
                        </div>
                        <div class="col-7 p-3 p-xl-4 d-flex flex-column justify-content-between">
                            <div>
                                <span class="news-tag">{{ site_content('news_tag', 'NOTICIAS') }}</span>
                                <h6 class="fw-bold text-dark mt-1" style="font-size: 14.5px; line-height: 1.35;">
                                    {{ site_content('news_title', 'La hinchada sigue haciendo la diferencia') }}
                                </h6>
                                <p class="text-muted mt-2" style="font-size: 12px; line-height: 1.45;">
                                    {{ site_content('news_desc', 'El apoyo de nuestra gente es la fuerza que impulsa al Torino de Talara.') }}
                                </p>
                            </div>
                            <div>
                                <a href="{{ site_content('news_btn_link', '#noticia-1') }}" class="news-link d-inline-flex align-items-center">
                                    {{ site_content('news_btn_text', 'VER MÁS') }} <i class="bi bi-arrow-right ms-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section 4: APOYA AL CLUB (PERFECTLY ALIGNED) -->
<section id="apoyar" class="py-5" style="background-color: #fafaf9; border-top: 1px solid #f3f4f6;">
    <div class="container-xl py-3">
        <div class="row g-4 align-items-stretch">
            <!-- Left Column: Sunset Refinery Image (Stretches full height to match right content) -->
            <div class="col-lg-4 d-flex">
                <div class="sunset-banner-box position-relative rounded-4 overflow-hidden shadow-sm w-100">
                    <img src="{{ site_asset('apoyar_banner_img', 'img/talara_sunset.jpg') }}" alt="Talara Sunset" class="sunset-img-fill">
                    <div class="sunset-text-overlay p-4">
                        <div class="script-banner-text">
                            {!! nl2br(e(site_content('apoyar_banner_script', "¡Tu apoyo\ntambién juega!"))) !!}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Title, Subtitle, and 5 Cards in a single balanced flex row -->
            <div class="col-lg-8 d-flex flex-column justify-content-between">
                <!-- Top Headings -->
                <div class="mb-3">
                    <div class="section-tag mb-1">
                        <span class="section-tag-text" style="color: #b45309;">{{ site_content('apoyar_tag', 'APOYA AL CLUB') }}</span>
                    </div>
                    <h2 class="section-heading mb-2">{{ site_content('apoyar_title', 'Juntos podemos más') }}</h2>
                    <p class="text-muted mb-0" style="font-size: 14px; line-height: 1.6; max-width: 800px;">
                        {{ site_content('apoyar_subtitle', 'Tu aporte, por pequeño que parezca, hace la diferencia. Con tu apoyo ayudamos al club a seguir creciendo, formando talentos y llevando el nombre de Talara a lo más alto.') }}
                    </p>
                </div>

                <!-- Bottom: 5 Cards in a Single Row (4 White Cards + 1 Maroon Card) -->
                <div class="support-cards-flex-container mt-3">
                    <!-- Card 1: Donaciones -->
                    <a href="{{ route('donations.create') }}" class="support-item-white text-decoration-none">
                        <div class="support-item-icon">
                            <i class="{{ site_content('apoyo_1_icon', 'fa-solid fa-heart') }}"></i>
                        </div>
                        <div class="support-item-title">{{ site_content('apoyo_1_title', 'Donaciones') }}</div>
                        <div class="support-item-desc">{{ site_content('apoyo_1_desc', 'Apoya y sé parte del cambio') }}</div>
                    </a>

                    <!-- Card 2: Apadrina un jugador -->
                    <a href="{{ route('donations.create') }}" class="support-item-white text-decoration-none">
                        <div class="support-item-icon">
                            <i class="{{ site_content('apoyo_2_icon', 'fa-solid fa-users') }}"></i>
                        </div>
                        <div class="support-item-title">{{ site_content('apoyo_2_title', 'Apadrina un jugador') }}</div>
                        <div class="support-item-desc">{{ site_content('apoyo_2_desc', 'Ayuda a formar el futuro') }}</div>
                    </a>

                    <!-- Card 3: Voluntariado -->
                    <a href="#contacto" class="support-item-white text-decoration-none">
                        <div class="support-item-icon">
                            <i class="{{ site_content('apoyo_3_icon', 'fa-solid fa-hand-holding-heart') }}"></i>
                        </div>
                        <div class="support-item-title">{{ site_content('apoyo_3_title', 'Voluntariado') }}</div>
                        <div class="support-item-desc">{{ site_content('apoyo_3_desc', 'Tu tiempo también suma') }}</div>
                    </a>

                    <!-- Card 4: Empresas aliadas -->
                    <a href="#contacto" class="support-item-white text-decoration-none">
                        <div class="support-item-icon">
                            <i class="{{ site_content('apoyo_4_icon', 'fa-solid fa-building') }}"></i>
                        </div>
                        <div class="support-item-title">{{ site_content('apoyo_4_title', 'Empresas aliadas') }}</div>
                        <div class="support-item-desc">{{ site_content('apoyo_4_desc', 'Juntos por el desarrollo de nuestro club') }}</div>
                    </a>

                    <!-- Card 5: Haz tu donación (Maroon Box) -->
                    <div class="support-item-maroon">
                        <div class="maroon-top-content">
                            <div class="maroon-heart-icon mb-2">
                                <i class="fa-regular fa-heart"></i>
                            </div>
                            <h6 class="maroon-card-title mb-1">{{ site_content('maroon_box_title', 'Haz tu donación') }}</h6>
                            <p class="maroon-card-desc mb-3">
                                {{ site_content('maroon_box_desc', 'Tu aporte nos ayuda a seguir construyendo este gran sueño.') }}
                            </p>
                        </div>
                        <div>
                            <a href="{{ route('donations.create') }}" class="btn btn-gold btn-maroon-donate rounded-pill w-100 text-uppercase">
                                {{ site_content('maroon_box_btn_text', 'DONAR AHORA') }} <i class="bi bi-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section 5: GALERÍA -->
<section id="galeria" class="py-5 bg-white">
    <div class="container-xl py-3">
        <div class="row align-items-center g-4">
            <!-- Left Column: Title & CTA -->
            <div class="col-lg-3">
                <div class="section-tag mb-1">
                    <span class="section-tag-text" style="color: #b45309;">{{ site_content('galeria_tag', 'GALERÍA') }}</span>
                    <span class="section-tag-line" style="background-color: #f59e0b;"></span>
                </div>
                <h2 class="section-heading mb-2" style="line-height: 1.2;">{{ site_content('galeria_title', 'Nuestra historia en imágenes') }}</h2>
                <p class="text-muted mb-4" style="font-size: 14px;">
                    {{ site_content('galeria_subtitle', 'Momentos que nos unen, dentro y fuera de la cancha.') }}
                </p>
                <a href="{{ site_content('galeria_btn_link', '#galeria-completa') }}" class="btn btn-outline-dark rounded-pill px-4 py-2 fw-semibold text-uppercase" style="font-size: 12px; letter-spacing: 0.5px;">
                    {{ site_content('galeria_btn_text', 'VER GALERÍA COMPLETA') }} <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>

            <!-- Right Column: 4 Preview Images with Navigation Arrows -->
            <div class="col-lg-9 position-relative">
                <div class="row g-3">
                    <!-- Photo 1: Team Lineup -->
                    <div class="col-6 col-md-3">
                        <div class="gallery-preview-card rounded-3 overflow-hidden shadow-xs">
                            <img src="{{ site_asset('galeria_img_1', 'img/gallery_team.jpg') }}" alt="Plantel Torino de Talara" class="w-100 img-fluid">
                        </div>
                    </div>

                    <!-- Photo 2: Hinchada -->
                    <div class="col-6 col-md-3">
                        <div class="gallery-preview-card rounded-3 overflow-hidden shadow-xs">
                            <img src="{{ site_asset('galeria_img_2', 'img/hinchada.jpg') }}" alt="Hinchada con bandera de Torino" class="w-100 img-fluid">
                        </div>
                    </div>

                    <!-- Photo 3: Action Shot -->
                    <div class="col-6 col-md-3">
                        <div class="gallery-preview-card rounded-3 overflow-hidden shadow-xs">
                            <img src="{{ site_asset('galeria_img_3', 'img/gallery_action.jpg') }}" alt="Jugador en acción de juego" class="w-100 img-fluid">
                        </div>
                    </div>

                    <!-- Photo 4: Stadium -->
                    <div class="col-6 col-md-3">
                        <div class="gallery-preview-card rounded-3 overflow-hidden shadow-xs">
                            <img src="{{ site_asset('galeria_img_4', 'img/gallery_stadium.jpg') }}" alt="Estadio Campeonísimo Torino de Talara" class="w-100 img-fluid">
                        </div>
                    </div>
                </div>

                <!-- Navigation Chevrons -->
                <button class="gallery-chevron gallery-chevron-prev d-none d-md-flex" aria-label="Anterior">
                    <i class="bi bi-chevron-left"></i>
                </button>
                <button class="gallery-chevron gallery-chevron-next d-none d-md-flex" aria-label="Siguiente">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</section>

<!-- Section 6: PRE-FOOTER CTA BANNER -->
<section class="pre-footer-banner position-relative overflow-hidden py-4 text-white">
    <!-- Background overlay with Talara sunset silhouette -->
    <div class="banner-bg-silhouette" style="background-image: url('{{ site_asset('apoyar_banner_img', 'img/talara_sunset.jpg') }}');"></div>
    <div class="banner-gradient-cover"></div>

    <div class="container-xl position-relative py-3" style="z-index: 3;">
        <div class="row align-items-center justify-content-between g-3">
            <!-- Left: Logo & text -->
            <div class="col-lg-3 col-md-4 d-flex align-items-center">
                <img src="{{ site_asset('site_logo', 'img/Logo_de_Club_Atletico_Torino.png') }}" alt="{{ site_content('site_name', 'Torino de Talara') }}" style="height: 48px; object-fit: contain;" class="me-3">
                <div class="d-flex flex-column lh-1">
                    <span class="fw-bolder text-white text-uppercase" style="font-size: 15px; letter-spacing: 0.5px;">{{ site_content('site_name', 'TORINO DE TALARA') }}</span>
                    <span class="text-white-50 mt-1" style="font-size: 10px; letter-spacing: 1px;">{{ site_content('site_slogan_sub', 'Tradición · Garra · Talento') }}</span>
                </div>
            </div>

            <!-- Center: Script motto -->
            <div class="col-lg-6 col-md-4 text-center">
                <div class="banner-script-motto">
                    {{ site_content('prefooter_motto', '¡Juntos hacemos grande al Torino!') }}
                </div>
            </div>

            <!-- Right: Action Button -->
            <div class="col-lg-3 col-md-4 text-center text-md-end">
                <a href="{{ route('donations.create') }}" class="btn btn-gold rounded-pill px-4 py-2 fw-bold text-uppercase" style="font-size: 12.5px; letter-spacing: 0.5px;">
                    {{ site_content('prefooter_btn_text', 'APOYAR AL CLUB') }} <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Page-specific CSS matching screenshot -->
<style>
    /* Hero Section */
    .hero-section {
        min-height: 540px;
        background-color: #2b0409;
        display: flex;
        align-items: center;
    }

    .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center right;
        z-index: 1;
    }

    .hero-gradient-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
            rgba(25, 2, 6, 0.96) 0%, 
            rgba(35, 4, 9, 0.90) 38%, 
            rgba(45, 5, 12, 0.65) 60%, 
            rgba(35, 4, 9, 0.45) 100%);
        z-index: 2;
    }

    .hero-badge-tag {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: rgba(255, 255, 255, 0.85);
        text-transform: uppercase;
    }

    .hero-headline {
        font-size: clamp(32px, 4.5vw, 50px);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.5px;
        color: #ffffff;
    }

    .text-gold-highlight {
        color: var(--torino-gold);
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.88);
        max-width: 530px;
    }

    .btn-hero {
        font-size: 13px;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    }

    /* "¡Vamos Torino!" Script */
    .vamos-torino-script {
        font-family: 'Caveat', cursive;
        font-size: clamp(48px, 6vw, 72px);
        font-weight: 700;
        line-height: 0.95;
        color: #ffffff;
        transform: rotate(-9deg);
        text-shadow: 3px 5px 20px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.5);
        display: inline-block;
    }

    /* Section Headings */
    .section-heading {
        font-weight: 800;
        font-size: clamp(24px, 2.5vw, 32px);
        color: #111827;
        letter-spacing: -0.3px;
    }

    /* Polaroid Card in Historia */
    .polaroid-wrapper {
        max-width: 320px;
        transform: rotate(-2deg);
        transition: transform 0.3s ease;
    }

    .polaroid-wrapper:hover {
        transform: rotate(0deg) scale(1.02);
    }

    .polaroid-card {
        background-color: #ffffff;
        padding: 12px 12px 16px 12px;
        border-radius: 6px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #f1f1f1;
    }

    .polaroid-image-box img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    /* Club Data Card */
    .club-data-card {
        background-color: #f8fafc;
        border: 1px solid #eef2f6;
    }

    .club-data-title {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #800020;
    }

    .data-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 1px solid #fee2e2;
        color: #800020;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    .data-label {
        display: block;
        font-size: 11px;
        color: #6b7280;
        font-weight: 500;
        line-height: 1.2;
    }

    .data-value {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.3;
    }

    /* Section 2: Values */
    .bg-values-section {
        background-color: #fafaf9;
        border-top: 1px solid #f3f4f6;
        border-bottom: 1px solid #f3f4f6;
    }

    .value-card {
        padding: 10px;
        transition: transform 0.25s ease;
    }

    .value-card:hover {
        transform: translateY(-4px);
    }

    .value-icon-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s ease;
    }

    .value-card:hover .value-icon-circle {
        transform: scale(1.08);
    }

    .value-title {
        font-size: 13.5px;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.35;
    }

    /* Section 3: Partidos */
    .match-league-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #6b7280;
    }

    .match-date-badge {
        font-size: 12px;
        font-weight: 600;
        color: #b91c1c;
    }

    /* News Card */
    .news-card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    }

    .news-tag {
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #b45309;
        text-transform: uppercase;
    }

    .news-link {
        font-size: 12px;
        font-weight: 700;
        color: var(--torino-maroon);
        text-decoration: none;
        letter-spacing: 0.5px;
    }

    .news-link:hover {
        color: var(--torino-maroon-dark);
    }

    /* ========================================================
       SECTION 4: APOYA AL CLUB - PIXEL-PERFECT ALIGNMENT
       ======================================================== */
    .sunset-banner-box {
        position: relative;
        height: 100%;
        min-height: 310px;
        background-color: #1c0307;
        border-radius: 18px !important;
    }

    .sunset-img-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .sunset-banner-box:hover .sunset-img-fill {
        transform: scale(1.04);
    }

    .sunset-text-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(16, 1, 4, 0.92) 0%, rgba(16, 1, 4, 0.4) 60%, transparent 100%);
        z-index: 2;
    }

    .script-banner-text {
        font-family: 'Caveat', cursive;
        font-size: clamp(34px, 3.8vw, 44px);
        font-weight: 700;
        line-height: 1.05;
        color: var(--torino-gold);
        transform: rotate(-4deg);
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.85);
    }

    /* Single Flex Row for the 5 Cards */
    .support-cards-flex-container {
        display: flex;
        gap: 12px;
        align-items: stretch;
        width: 100%;
    }

    /* 4 White Support Cards */
    .support-item-white {
        flex: 1 1 0;
        min-width: 110px;
        background-color: #ffffff;
        border: 1px solid #f1f5f9;
        border-radius: 14px;
        padding: 20px 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
        transition: all 0.25s ease;
    }

    .support-item-white:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
        border-color: #fed7aa;
    }

    .support-item-icon {
        font-size: 26px;
        color: #b91c1c; /* Uniform maroon color matching reference */
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 32px;
    }

    .support-item-title {
        font-size: 13px;
        font-weight: 700;
        color: #111827;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    .support-item-desc {
        font-size: 11px;
        color: #6b7280;
        line-height: 1.35;
    }

    /* 5th Card: Maroon "Haz tu donación" Box */
    .support-item-maroon {
        flex: 1.45 1 0;
        min-width: 200px;
        background-color: #4a060d;
        border-radius: 14px;
        padding: 20px 16px;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 8px 25px rgba(74, 6, 13, 0.28);
    }

    .maroon-heart-icon {
        font-size: 24px;
        color: var(--torino-gold);
        line-height: 1;
    }

    .maroon-card-title {
        font-size: 17px;
        font-weight: 800;
        color: #ffffff;
    }

    .maroon-card-desc {
        font-size: 11.5px;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.75);
    }

    .btn-maroon-donate {
        font-size: 12px;
        font-weight: 800;
        padding: 8px 12px;
        letter-spacing: 0.5px;
    }

    @media (max-width: 991px) {
        .support-cards-flex-container {
            flex-wrap: wrap;
        }

        .support-item-white {
            flex: 1 1 calc(50% - 12px);
        }

        .support-item-maroon {
            flex: 1 1 100%;
            margin-top: 6px;
        }

        .sunset-banner-box {
            min-height: 250px;
        }
    }

    /* Section 5: Galería */
    .gallery-preview-card {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        transition: transform 0.25s ease;
    }

    .gallery-preview-card:hover {
        transform: translateY(-3px);
    }

    .gallery-preview-card img {
        width: 100%;
        height: 135px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .gallery-preview-card:hover img {
        transform: scale(1.06);
    }

    .gallery-chevron {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        color: #111827;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        z-index: 5;
    }

    .gallery-chevron:hover {
        background-color: var(--torino-gold);
        color: #120104;
    }

    .gallery-chevron-prev {
        left: -16px;
    }

    .gallery-chevron-next {
        right: -16px;
    }

    /* Section 6: Pre-Footer Banner */
    .pre-footer-banner {
        background-color: #3b020b;
        min-height: 100px;
    }

    .banner-bg-silhouette {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-size: cover;
        background-position: center right;
        opacity: 0.35;
        z-index: 1;
    }

    .banner-gradient-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #3b020b 0%, #3b020b 50%, rgba(59, 2, 11, 0.7) 100%);
        z-index: 2;
    }

    .banner-script-motto {
        font-family: 'Caveat', cursive;
        font-size: clamp(26px, 3.2vw, 36px);
        font-weight: 700;
        color: #ffffff;
        transform: rotate(-2deg);
        text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.6);
        display: inline-block;
    }
</style>
@endsection