@php
    $currentTenant = tenant();
    $isVaopeTheme = $currentTenant ? ($currentTenant->id === 'vaope' || str_contains(request()->getHost(), 'vaope')) : true;

    // Configurar logo y tema según el tenant
    if ($isVaopeTheme) {
        $logo = 'https://static.vaope.com/public/repository/2644-logo-vaope.png';
        $logoAlt = 'Logo VAOPE';
        $themeClass = 'vaope-theme';
    } else {
        $logo = 'https://static.vaope.com/public/repository/2644-logo-vaope.png';
        $logoAlt = 'Logo TuEntrada';
        $themeClass = 'tuentrada-theme';
    }

    // Redes sociales según el tenant
    $socialNetworks = [
        'youtube' => env('REDES_YT'),
        'instagram' => env('REDES_IG'),
        'facebook' => env('REDES_FB'),
        'tiktok' => env('REDES_TK')
    ];

    $hasSocialNetworks = !empty(array_filter($socialNetworks));
@endphp

<tr>
    <td class="header-cell">
        <table class="header {{ $themeClass }}" width="100%" cellpadding="0" cellspacing="0" role="presentation">
            <tr>
                <td class="header-content-cell">
                    <div class="header-container">
                        <div class="header-wrapper">
                            <!-- Logo -->
                            <div class="logo-container">
                                <a href="{{ config('app.url') }}" class="logo-link">
                                    <img src="{{ $logo }}" alt="{{ $logoAlt }}" class="header-logo" />
                                </a>
                            </div>

                            <!-- Redes sociales -->
                            @if($hasSocialNetworks)
                            <div class="social-container">
                                <div class="social-icons">
                                    @if($socialNetworks['youtube'])
                                    <a href="{{ $socialNetworks['youtube'] }}" class="social-link">
                                        <svg viewBox="0 0 24 24" class="social-icon youtube">
                                            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                                        </svg>
                                    </a>
                                    @endif

                                    @if($socialNetworks['instagram'])
                                    <a href="{{ $socialNetworks['instagram'] }}" class="social-link">
                                        <svg viewBox="0 0 24 24" class="social-icon instagram">
                                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                                        </svg>
                                    </a>
                                    @endif

                                    @if($socialNetworks['facebook'])
                                    <a href="{{ $socialNetworks['facebook'] }}" class="social-link">
                                        <svg viewBox="0 0 24 24" class="social-icon facebook">
                                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                        </svg>
                                    </a>
                                    @endif

                                    @if($socialNetworks['tiktok'])
                                    <a href="{{ $socialNetworks['tiktok'] }}" class="social-link">
                                        <svg viewBox="0 0 24 24" class="social-icon tiktok">
                                            <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                                        </svg>
                                    </a>
                                    @endif
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>

<style>
/* Base header styles with email client compatibility */
.header {
    background-color: #25254C;
    height: 90px;
    margin: 0;
}

.header-cell {
    padding: 0;
}

.header-content-cell {
    padding: 15px 20px;
}

/* Añadido nuevo contenedor para mejor control de márgenes */
.header-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-container {
    flex: 0 0 auto; /* Prevent growing and shrinking */
    padding-right: 20px; /* Espacio entre el logo y los íconos sociales */
    text-align: left; /* Ensure left alignment */
    align-self: flex-start; /* Align to the start of the flex container */
}

.logo-link {
    display: inline-block;
    text-decoration: none;
}

.header-logo {
    height: 20px;
    width: auto;
    max-width: 175px;
}

.social-container {
    flex: 0 0 auto;
}

.social-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.social-link {
    display: inline-block;
    text-decoration: none;
}

.social-icon {
    width: 26px;
    height: 26px;
    fill: white;
}

/* Pantallas extra grandes */
@media only screen and (min-width: 1400px) {
    .header-container {
        max-width: 1200px;
        padding: 0 40px;
    }

    .header-logo {
        height: 26px;
        max-width: 240px;
    }

    .logo-container {
        padding-right: 30px;
    }

    .social-icon {
        width: 28px;
        height: 28px;
    }

    .social-icons {
        gap: 12px;
    }
}

/* Large screens (desktops) */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .header-container {
        max-width: 1000px;
        padding: 0 30px;
    }

    .header-logo {
        height: 24px;
        max-width: 220px;
    }

    .logo-container {
        padding-right: 25px;
    }
}

/* Medium screens (tablets) */
@media only screen and (max-width: 768px) {
    .header {
        height: auto;
    }

    .header-content-cell {
        padding: 15px;
    }

    .header-container {
        padding: 0 15px;
    }

    .social-icon {
        width: 24px;
        height: 24px;
    }

    .social-icons {
        gap: 8px;
    }
}

/* Small screens (mobile landscape) */
@media only screen and (max-width: 600px) {
    .header-container {
        padding: 0 10px;
    }

    .header-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .logo-container {
        text-align: center;
        margin: 0 auto;
        padding-right: 0;
    }

    .header-logo {
        height: 18px;
    }

    .social-container {
        width: 100%;
    }

    .social-icons {
        justify-content: center;
    }

    .social-icon {
        width: 22px;
        height: 22px;
    }
}

/* Extra small screens (mobile portrait) */
@media only screen and (max-width: 400px) {
    .header-content-cell {
        padding: 12px 10px;
    }

    .header-container {
        padding: 0 5px;
    }

    .header-wrapper {
        gap: 12px;
    }

    .header-logo {
        height: 16px;
    }

    .social-icon {
        width: 20px;
        height: 20px;
    }

    .social-icons {
        gap: 7px;
    }
}

/* Email client specific fixes */
[data-ogsc] .header {
    background-color: #25254C !important;
}

/* Dark mode support for clients that support it */
@media (prefers-color-scheme: dark) {
    .header {
        background-color: #1a1a38;
    }

    .social-icon {
        fill: #f1f1f1;
    }
}
</style>