@php

$_cwHoje     = \Carbon\Carbon::today();
$_cwSliderId = 'cws' . uniqid();

$_cwM = $_cwHoje->month;
$_cwD = $_cwHoje->day;

if (($_cwM == 12 && $_cwD >= 21) || $_cwM <= 2 || ($_cwM == 3 && $_cwD <= 20)) {
    $_cwEstacao = ['nome' => __('radio.calendar_season_summer'), 'emoji' => '☀️',  'cor' => '#f59e0b', 'bg' => '#fef9ee'];
} elseif (($_cwM == 3 && $_cwD >= 21) || ($_cwM >= 4 && $_cwM <= 5) || ($_cwM == 6 && $_cwD <= 20)) {
    $_cwEstacao = ['nome' => __('radio.calendar_season_autumn'), 'emoji' => '🍂',  'cor' => '#ea580c', 'bg' => '#fff4ef'];
} elseif (($_cwM == 6 && $_cwD >= 21) || ($_cwM >= 7 && $_cwM <= 8) || ($_cwM == 9 && $_cwD <= 22)) {
    $_cwEstacao = ['nome' => __('radio.calendar_season_winter'), 'emoji' => '❄️',  'cor' => '#0ea5e9', 'bg' => '#f0f9ff'];
} else {
    $_cwEstacao = ['nome' => __('radio.calendar_season_spring'), 'emoji' => '🌸',  'cor' => '#ec4899', 'bg' => '#fef0f8'];
}

$_cwEmoji = function (string $nome): string {
    $n = mb_strtolower($nome, 'UTF-8');
    $mapa = [
        '🏥' => ['câncer','cancer','saúde','vacinação','dengue','fumo','obesidade','bucal','dst','hepatite','autismo','alzheimer','mamografia','imunodeficiência'],
        '💜' => ['mulher','mãe','mães','violência','agosto lilás','feminicídio'],
        '🎈' => ['criança','crianças','adoção'],
        '❤️' => ['namorados'],
        '🩸' => ['sangue','órgãos','orgaos','doação de sangue','doador de sangue'],
        '🌊' => ['água','oceanos','rio'],
        '🌿' => ['floresta','ecolog','amazônia','meio ambiente'],
        '🇧🇷' => ['independência','república','tiradentes','soldado','símbolos','constituição','proclamação','fico'],
        '🎃' => ['halloween','bruxas','finados'],
        '🎭' => ['carnaval'],
        '📚' => ['professor','escola','educação','alfabetização','escritor','comunicação','imprensa','jornalista'],
        '👨‍👧' => ['pai','família','familia'],
        '✊' => ['negro','consciência negra','direitos humanos','holocausto','indígena','intolerância','lgbt'],
        '☕' => ['café'],
        '🎵' => ['música','musica','rock','rádio','radio','radialista','músico'],
        '🌱' => ['agricultor','agricultur'],
        '🗳️' => ['voto','eleição','eleições'],
    ];
    foreach ($mapa as $emoji => $palavras) {
        foreach ($palavras as $p) {
            if (str_contains($n, $p)) return $emoji;
        }
    }
    return '📅';
};

$_cwAnimClass = function (string $nome): string {
    $n = mb_strtolower($nome, 'UTF-8');
    $mapa = [
        'cw-anim-pulse'  => ['câncer','cancer','saúde','vacinação','dengue','fumo','obesidade','bucal','dst','hepatite','autismo','alzheimer','mamografia','imunodeficiência'],
        'cw-anim-float'  => ['mulher','mãe','mães','violência','agosto lilás','feminicídio'],
        'cw-anim-bounce' => ['criança','crianças','adoção'],
        'cw-anim-heart'  => ['namorados'],
        'cw-anim-bleed'  => ['sangue','órgãos','orgaos','doação de sangue','doador de sangue'],
        'cw-anim-wave'   => ['água','oceanos','rio'],
        'cw-anim-sway'   => ['floresta','ecolog','amazônia','meio ambiente','pai','família','familia','agricultor','agricultur'],
        'cw-anim-flag'   => ['independência','república','tiradentes','soldado','símbolos','constituição','proclamação','fico'],
        'cw-anim-wobble' => ['halloween','bruxas','finados'],
        'cw-anim-spin'   => ['carnaval'],
        'cw-anim-flip'   => ['professor','escola','educação','alfabetização','escritor','comunicação','imprensa','jornalista'],
        'cw-anim-rise'   => ['negro','consciência negra','direitos humanos','holocausto','indígena','intolerância','lgbt'],
        'cw-anim-steam'  => ['café'],
        'cw-anim-note'   => ['música','musica','rock','rádio','radio','radialista','músico'],
        'cw-anim-swing'  => ['voto','eleição','eleições'],
    ];
    foreach ($mapa as $cls => $palavras) {
        foreach ($palavras as $p) {
            if (str_contains($n, $p)) return $cls;
        }
    }
    return 'cw-anim-soft';
};

$_cwTheme = function (string $nome): string {
    $n = mb_strtolower($nome, 'UTF-8');
    $mapa = [
        'namorados'   => ['namorados'],
        'saude'       => ['câncer','cancer','saúde','vacinação','dengue','fumo','obesidade','bucal','dst','hepatite','autismo','alzheimer','mamografia','imunodeficiência'],
        'mulher'      => ['mulher','mãe','mães','violência','agosto lilás','feminicídio'],
        'crianca'     => ['criança','crianças','adoção'],
        'sangue'      => ['sangue','órgãos','orgaos','doação de sangue','doador de sangue'],
        'agua'        => ['água','oceanos','rio'],
        'natureza'    => ['floresta','ecolog','amazônia','meio ambiente','agricultor','agricultur'],
        'brasil'      => ['independência','república','tiradentes','soldado','símbolos','constituição','proclamação','fico'],
        'halloween'   => ['halloween','bruxas','finados'],
        'carnaval'    => ['carnaval'],
        'educacao'    => ['professor','escola','educação','alfabetização','escritor','comunicação','imprensa','jornalista'],
        'diversidade' => ['negro','consciência negra','direitos humanos','holocausto','indígena','intolerância','lgbt'],
        'cafe'        => ['café'],
        'musica'      => ['música','musica','rock','rádio','radio','radialista','músico'],
        'pai'         => ['pai','família','familia'],
        'voto'        => ['voto','eleição','eleições'],
    ];
    foreach ($mapa as $theme => $palavras) {
        foreach ($palavras as $p) {
            if (str_contains($n, $p)) return $theme;
        }
    }
    return 'default';
};

$_cwEstacaoPalavras = ['outono', 'inverno', 'primavera', 'verão', 'verao', 'dicas de inverno', 'tema de outono'];
$_cwAtivas          = [];
$_cwProximas        = [];
$_cwDebugRaw        = [];
$_cwDebugParsed     = [];
$_cwDebugSkip       = [];

$_cwRawRows = \DB::table('library_add')
    ->where('type', '2')
    ->whereNotNull('campaign_start_date')
    ->whereNotNull('campaign_end_date')
    ->get();

foreach ($_cwRawRows as $row) {
    $_cwDebugRaw[] = [
        'id'   => $row->id,
        'nome' => $row->name,
        'ini'  => $row->campaign_start_date,
        'fim'  => $row->campaign_end_date,
    ];

    try {
        $_cwIni = \Illuminate\Support\Carbon::parse($row->campaign_start_date)->startOfDay();
        $_cwFim = \Illuminate\Support\Carbon::parse($row->campaign_end_date)->endOfDay();
    } catch (\Exception $e) {
        $_cwDebugSkip[] = ['nome' => $row->name, 'motivo' => 'exception: ' . $e->getMessage(), 'raw_ini' => $row->campaign_start_date];
        continue;
    }

    $_cwEhEstacao = false;
    foreach ($_cwEstacaoPalavras as $_kw) {
        if (str_contains(mb_strtolower($row->name, 'UTF-8'), $_kw)) {
            $_cwEhEstacao = true;
            break;
        }
    }
    if ($_cwEhEstacao) {
        $_cwDebugSkip[] = ['nome' => $row->name, 'motivo' => 'é estação'];
        continue;
    }

    $_cwItem = ['nome' => $row->name, 'ini' => $_cwIni, 'fim' => $_cwFim];

    if ($_cwHoje->between($_cwIni, $_cwFim)) {
        $_cwItem['restam'] = max(0, (int) $_cwHoje->diffInDays($_cwFim, true));
        $_cwAtivas[]       = $_cwItem;
        $_cwDebugParsed[]  = ['nome' => $row->name, 'ini_parsed' => $_cwIni->toDateString(), 'fim_parsed' => $_cwFim->toDateString(), 'status' => 'ATIVA', 'restam' => $_cwItem['restam']];
    } elseif ($_cwHoje->lt($_cwIni)) {
        $_cwItem['faltam'] = (int) $_cwHoje->diffInDays($_cwIni, true);
        $_cwProximas[]     = $_cwItem;
        $_cwDebugParsed[]  = ['nome' => $row->name, 'ini_parsed' => $_cwIni->toDateString(), 'fim_parsed' => $_cwFim->toDateString(), 'status' => 'PROXIMA', 'faltam' => $_cwItem['faltam']];
    } else {
        $_cwDebugParsed[] = ['nome' => $row->name, 'ini_parsed' => $_cwIni->toDateString(), 'fim_parsed' => $_cwFim->toDateString(), 'status' => 'PASSADA'];
    }
}

usort($_cwProximas, fn ($a, $b) => $a['ini']->lt($b['ini']) ? -1 : 1);

$_cwSlides = [];
if (!empty($_cwAtivas)) {
    foreach ($_cwAtivas as $_a) {
        $_cwSlides[] = $_a + ['tipo' => 'ativa'];
    }
} elseif (!empty($_cwProximas)) {
    $_cwPrimeiraData = $_cwProximas[0]['ini']->toDateString();
    foreach ($_cwProximas as $_p) {
        if ($_p['ini']->toDateString() === $_cwPrimeiraData) {
            $_cwSlides[] = $_p + ['tipo' => 'proxima'];
        } else {
            break;
        }
    }
}

$_cwLista = [];
if (!empty($_cwAtivas)) {
    $_cwLista = array_slice($_cwProximas, 0, 3);
} elseif (!empty($_cwProximas)) {
    $_cwPrimeiraData  = $_cwProximas[0]['ini']->toDateString();
    $_cwRestoProximas = array_values(array_filter(
        $_cwProximas,
        fn ($_p) => $_p['ini']->toDateString() !== $_cwPrimeiraData
    ));
    $_cwLista = array_slice($_cwRestoProximas, 0, 3);
}
@endphp

@once
<style>

@keyframes cw-pulse  { 0%,100%{transform:scale(1)}    50%{transform:scale(1.2)} }
@keyframes cw-float  { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.08)} }
@keyframes cw-bounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} 60%{transform:translateY(-3px)} }
@keyframes cw-heart  { 0%,100%{transform:scale(1)} 14%{transform:scale(1.25)} 28%{transform:scale(1)} 42%{transform:scale(1.18)} 70%{transform:scale(1)} }
@keyframes cw-bleed  { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:.78} }
@keyframes cw-wave   { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(14deg)} }
@keyframes cw-sway   { 0%,100%{transform:rotate(-7deg)}  50%{transform:rotate(7deg)} }
@keyframes cw-flag   { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(5deg) translateX(1px)} 75%{transform:rotate(-5deg) translateX(-1px)} }
@keyframes cw-wobble { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-8deg)} 40%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} 80%{transform:rotate(5deg)} }
@keyframes cw-spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes cw-flip   { 0%,40%,100%{transform:rotateY(0deg)} 50%,90%{transform:rotateY(180deg)} }
@keyframes cw-rise   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes cw-steam  { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-4px) scale(1.1)} }
@keyframes cw-note   { 0%,100%{transform:translateY(0) rotate(0deg)} 25%{transform:translateY(-6px) rotate(-10deg)} 75%{transform:translateY(-6px) rotate(10deg)} }
@keyframes cw-swing  { 0%,100%{transform:rotate(0deg)} 30%{transform:rotate(-12deg)} 70%{transform:rotate(12deg)} }
@keyframes cw-soft   { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.86} }

.cw-anim-pulse  { animation: cw-pulse  2s   ease-in-out infinite; display:inline-block }
.cw-anim-float  { animation: cw-float  3s   ease-in-out infinite; display:inline-block }
.cw-anim-bounce { animation: cw-bounce 1.6s ease-in-out infinite; display:inline-block }
.cw-anim-heart  { animation: cw-heart  1.8s ease-in-out infinite; display:inline-block }
.cw-anim-bleed  { animation: cw-bleed  1.5s ease-in-out infinite; display:inline-block }
.cw-anim-wave   { animation: cw-wave   2s   ease-in-out infinite; display:inline-block }
.cw-anim-sway   { animation: cw-sway   3s   ease-in-out infinite; display:inline-block }
.cw-anim-flag   { animation: cw-flag   2.5s ease-in-out infinite; display:inline-block }
.cw-anim-wobble { animation: cw-wobble 2s   ease-in-out infinite; display:inline-block }
.cw-anim-spin   { animation: cw-spin   8s   linear     infinite;  display:inline-block }
.cw-anim-flip   { animation: cw-flip   4s   ease-in-out infinite; display:inline-block }
.cw-anim-rise   { animation: cw-rise   2.5s ease-in-out infinite; display:inline-block }
.cw-anim-steam  { animation: cw-steam  2s   ease-in-out infinite; display:inline-block }
.cw-anim-note   { animation: cw-note   2s   ease-in-out infinite; display:inline-block }
.cw-anim-swing  { animation: cw-swing  2s   ease-in-out infinite; display:inline-block }
.cw-anim-soft   { animation: cw-soft   3s   ease-in-out infinite; display:inline-block }

.cw-track {
    display: flex;
    will-change: transform;
    transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.cw-slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;   /* necessário para o sistema de partículas */
    overflow: hidden;
}
.cw-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .3s, transform .3s;
}
.cw-dot.cw-dot-on {
    background: #fff;
    transform: scale(1.45);
}

.cw-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.cw-pcontent {
    position: relative;
    z-index: 1;
}

.cw-p {
    position: absolute;
    pointer-events: none;
    user-select: none;
    display: inline-block;
    will-change: transform, opacity;
    line-height: 1;
}

@keyframes cwp-hearts {
    0%   { transform: translateX(0) translateY(-30px) scale(.45) rotate(-20deg); opacity: 0 }
    9%   { transform: translateX(0) translateY(12px)  scale(1)   rotate(5deg);   opacity: var(--op) }
    48%  { transform: translateX(calc(var(--sway) * .55)) translateY(95px)  scale(1.1) rotate(-6deg) }
    88%  { opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(230px) scale(.65) rotate(var(--rot)); opacity: 0 }
}

@keyframes cwp-fall {
    0%   { transform: translateX(0) translateY(-30px) rotate(0deg);   opacity: 0 }
    8%   { opacity: var(--op) }
    90%  { opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(230px) rotate(var(--rot)); opacity: 0 }
}

@keyframes cwp-rise {
    0%   { transform: translateX(0) translateY(220px); opacity: 0 }
    8%   { opacity: var(--op) }
    90%  { opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(-30px); opacity: 0 }
}

@keyframes cwp-leaf {
    0%   { transform: translateX(0) translateY(-30px) rotate(0deg)    scaleX(1);  opacity: 0 }
    18%  { opacity: var(--op) }
    30%  { transform: translateX(calc(var(--sway) * .4))  translateY(48px)  rotate(90deg)  scaleX(-1) }
    55%  { transform: translateX(calc(var(--sway) * -.2)) translateY(110px) rotate(185deg) scaleX(1) }
    78%  { transform: translateX(calc(var(--sway) * .8))  translateY(168px) rotate(270deg) scaleX(-1); opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(230px) rotate(360deg) scaleX(1); opacity: 0 }
}

@keyframes cwp-bubble {
    0%   { transform: translateX(0) translateY(220px) scale(.5); opacity: 0 }
    8%   { opacity: var(--op) }
    28%  { transform: translateX(calc(var(--sway) * -.85)) translateY(155px) scale(1) }
    52%  { transform: translateX(calc(var(--sway) *  .85)) translateY(88px)  scale(1.1) }
    76%  { transform: translateX(calc(var(--sway) * -.3))  translateY(28px)  scale(.92); opacity: var(--op) }
    100% { transform: translateX(0) translateY(-30px) scale(.4); opacity: 0 }
}

@keyframes cwp-confetti {
    0%   { transform: translateX(0) translateY(-30px) rotate(0deg)   scaleY(1);  opacity: 0 }
    5%   { opacity: var(--op) }
    25%  { transform: translateX(calc(var(--sway) * .35)) translateY(48px)  rotate(135deg) scaleY(.25) }
    52%  { transform: translateX(calc(var(--sway) * .7))  translateY(110px) rotate(258deg) scaleY(1) }
    76%  { transform: translateX(calc(var(--sway) * .9))  translateY(168px) rotate(335deg) scaleY(.4) }
    92%  { opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(230px) rotate(var(--rot)); opacity: 0 }
}

@keyframes cwp-sparkle {
    0%, 100% { transform: scale(0)    rotate(0deg);   opacity: 0 }
    22%      { transform: scale(1.2)  rotate(22deg);  opacity: var(--op) }
    50%      { transform: scale(.88)  rotate(-14deg); opacity: var(--op) }
    78%      { transform: scale(1.05) rotate(10deg);  opacity: var(--op) }
}

@keyframes cwp-note {
    0%   { transform: translateX(0) translateY(220px) rotate(-22deg); opacity: 0 }
    8%   { opacity: var(--op) }
    28%  { transform: translateX(calc(var(--sway) *  .75)) translateY(148px) rotate(16deg) }
    52%  { transform: translateX(calc(var(--sway) * -.42)) translateY(85px)  rotate(-13deg) }
    76%  { transform: translateX(calc(var(--sway) *  .9))  translateY(22px)  rotate(9deg);  opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(-30px) rotate(4deg); opacity: 0 }
}

@keyframes cwp-spooky {
    0%   { transform: translate(0, 220px) scale(.65); opacity: 0 }
    12%  { opacity: var(--op) }
    32%  { transform: translate(calc(var(--sway) *  .5), 138px) scale(1.08) }
    58%  { transform: translate(calc(var(--sway) * -.3), 62px)  scale(.9) }
    80%  { transform: translate(calc(var(--sway) *  .7), 10px)  scale(1);   opacity: var(--op) }
    100% { transform: translate(var(--sway), -30px) scale(.4); opacity: 0 }
}

@keyframes cwp-steam {
    0%   { transform: translateX(0) translateY(0) scale(.4);    opacity: 0 }
    16%  { opacity: var(--op) }
    52%  { transform: translateX(var(--sway)) translateY(-55px) scale(1.5);    opacity: calc(var(--op) * .48) }
    100% { transform: translateX(calc(var(--sway) * 1.5)) translateY(-115px) scale(2.3); opacity: 0 }
}

@keyframes cwp-star-rain {
    0%   { transform: translateX(0) translateY(-30px) rotate(0deg) scale(.6);  opacity: 0 }
    8%   { opacity: var(--op) }
    35%  { transform: translateX(calc(var(--sway) * .4)) translateY(65px)  rotate(120deg) scale(1) }
    65%  { transform: translateX(calc(var(--sway) * -.3)) translateY(138px) rotate(240deg) scale(1.1) }
    90%  { opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(230px) rotate(360deg) scale(.5); opacity: 0 }
}

@keyframes cwp-cross {
    0%   { transform: translateX(0) translateY(220px) scale(.7); opacity: 0 }
    10%  { opacity: var(--op) }
    45%  { transform: translateX(calc(var(--sway) * .5)) translateY(110px) scale(1.15) }
    88%  { opacity: var(--op) }
    100% { transform: translateX(var(--sway)) translateY(-30px) scale(.6); opacity: 0 }
}

@keyframes cwp-ribbon {
    0%   { transform: translateX(0) translateY(220px) rotate(-30deg); opacity: 0 }
    8%   { opacity: var(--op) }
    30%  { transform: translateX(calc(var(--sway) * .9)) translateY(148px) rotate(25deg) }
    55%  { transform: translateX(calc(var(--sway) * -.6)) translateY(80px) rotate(-18deg) }
    80%  { transform: translateX(calc(var(--sway) * .7)) translateY(22px) rotate(12deg); opacity: var(--op) }
    100% { transform: translateX(0) translateY(-30px) rotate(0deg); opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
    [class^="cw-anim-"] { animation: none !important; }
    .cw-p               { animation: none !important; opacity: 0 !important; }
}
</style>
@endonce

@once
<script>
window._cwReg = window._cwReg || {};

window.cwGoTo = window.cwGoTo || function (id, idx) {
    var s = window._cwReg[id];
    if (s) s.jumpTo(idx);
};

{{-- ────────────────────────────────────────────────────────────────────────────
   Configuração de partículas por tema
   ─ chars  : pool de caracteres/emoji usados
   ─ anim   : nome do @keyframes cwp-*
   ─ count  : número de partículas simultâneas
   ─ sz     : [min, max] em rem
   ─ op     : [min, max] opacidade
   ─ spd    : [min, max] duração da animação em segundos
   ─ sway   : [min, max] deslocamento horizontal em px
   ─ origin : 'top' | 'bottom' | 'random' | 'steam'
   ─ colors : (opcional) array de cores CSS — aplicadas como color:
──────────────────────────────────────────────────────────────────────────── --}}
window._cwThemes = window._cwThemes || {

    namorados: {
        chars:  ['❤','💕','💗','💖','♥'],
        anim:   'cwp-hearts',
        count:  15,
        sz:     [0.6, 1.15],
        op:     [0.45, 0.82],
        spd:    [3.8, 7.2],
        sway:   [-32, 32],
        origin: 'top'
    },

    saude: {
        chars:  ['✚','✛','➕','⊕','＋'],
        anim:   'cwp-cross',
        count:  10,
        sz:     [0.42, 0.78],
        op:     [0.16, 0.38],
        spd:    [5, 9.5],
        sway:   [-14, 14],
        origin: 'bottom'
    },

    mulher: {
        chars:  ['✿','❀','🌸','꩜','✾','⁕'],
        anim:   'cwp-fall',
        count:  11,
        sz:     [0.55, 1.0],
        op:     [0.28, 0.58],
        spd:    [5.5, 9.5],
        sway:   [-24, 24],
        origin: 'top',
        colors: ['#f9a8d4','#f0abfc','#e879f9','#f472b6','#ffffff']
    },

    crianca: {
        chars:  ['🎈','⭐','✨','🎊','○','●'],
        anim:   'cwp-rise',
        count:  11,
        sz:     [0.6, 1.1],
        op:     [0.38, 0.72],
        spd:    [3.8, 7],
        sway:   [-20, 20],
        origin: 'bottom',
        colors: ['#fde68a','#fca5a5','#a5f3fc','#bbf7d0','#fbcfe8','#ffffff']
    },

    sangue: {
        chars:  ['🩸','▼','◆','●','💧'],
        anim:   'cwp-fall',
        count:  8,
        sz:     [0.45, 0.85],
        op:     [0.28, 0.52],
        spd:    [3, 5.5],
        sway:   [-8, 8],
        origin: 'top',
        colors: ['#fca5a5','#f87171','#ef4444','#fee2e2']
    },

    agua: {
        chars:  ['○','◯','°','·','◦','⊙'],
        anim:   'cwp-bubble',
        count:  14,
        sz:     [0.45, 1.05],
        op:     [0.12, 0.35],
        spd:    [3.2, 7],
        sway:   [-20, 20],
        origin: 'bottom',
        colors: ['rgba(186,230,253,1)','rgba(224,242,254,1)','rgba(255,255,255,1)']
    },

    natureza: {
        chars:  ['🍃','🌿','🍂','🍁','✾','❧'],
        anim:   'cwp-leaf',
        count:  10,
        sz:     [0.58, 1.0],
        op:     [0.28, 0.58],
        spd:    [4.5, 8.5],
        sway:   [-34, 34],
        origin: 'top'
    },

    brasil: {
        chars:  ['★','✦','●','◆','▲','■','⬟'],
        anim:   'cwp-confetti',
        count:  20,
        sz:     [0.32, 0.82],
        op:     [0.48, 0.88],
        spd:    [2.8, 5.8],
        sway:   [-44, 44],
        origin: 'top',
        colors: ['#009c3b','#ffdf00','#002776','#ffffff','#17c964']
    },

    halloween: {
        chars:  ['👻','🦇','🕷','💀','⚰','✦'],
        anim:   'cwp-spooky',
        count:  8,
        sz:     [0.62, 1.02],
        op:     [0.26, 0.55],
        spd:    [5.5, 10.5],
        sway:   [-28, 28],
        origin: 'bottom'
    },

    carnaval: {
        chars:  ['●','◆','▲','■','★','✦','⬟','▬'],
        anim:   'cwp-confetti',
        count:  26,
        sz:     [0.3, 0.88],
        op:     [0.55, 0.9],
        spd:    [2, 4.8],
        sway:   [-48, 48],
        origin: 'top',
        colors: ['#ff4081','#ffeb3b','#7c4dff','#00bcd4','#ff6e40','#69f0ae','#f48fb1','#80cbc4']
    },

    educacao: {
        chars:  ['⭐','✦','✧','★','✩','✪','✫'],
        anim:   'cwp-sparkle',
        count:  13,
        sz:     [0.42, 0.98],
        op:     [0.28, 0.62],
        spd:    [1.8, 4.5],
        sway:   [0, 0],
        origin: 'random',
        colors: ['#fde68a','#fef08a','#fcd34d','#ffffff','#d9f99d']
    },

    diversidade: {
        chars:  ['★','◆','●','▲','✦','◈'],
        anim:   'cwp-ribbon',
        count:  15,
        sz:     [0.4, 0.88],
        op:     [0.38, 0.7],
        spd:    [4, 8],
        sway:   [-22, 22],
        origin: 'bottom',
        colors: ['#e40303','#ff8c00','#ffed00','#008026','#004dff','#750787','#ffffff']
    },

    cafe: {
        chars:  ['·','∘','○','◦','~','≈'],
        anim:   'cwp-steam',
        count:  7,
        sz:     [0.7, 1.45],
        op:     [0.13, 0.3],
        spd:    [2.4, 5],
        sway:   [-13, 13],
        origin: 'steam'
    },

    musica: {
        chars:  ['♩','♪','♫','♬','𝅘𝅥𝅮'],
        anim:   'cwp-note',
        count:  12,
        sz:     [0.68, 1.22],
        op:     [0.28, 0.62],
        spd:    [4, 8],
        sway:   [-24, 24],
        origin: 'bottom'
    },

    pai: {
        chars:  ['★','✦','⭐','✩','✪','♡'],
        anim:   'cwp-star-rain',
        count:  11,
        sz:     [0.5, 0.95],
        op:     [0.3, 0.6],
        spd:    [4, 7.5],
        sway:   [-22, 22],
        origin: 'top',
        colors: ['#fde68a','#fcd34d','#fbbf24','#ffffff','#d9f99d']
    },

    voto: {
        chars:  ['★','✓','✦','✔','◈','·'],
        anim:   'cwp-sparkle',
        count:  10,
        sz:     [0.4, 0.88],
        op:     [0.22, 0.52],
        spd:    [2, 4.8],
        sway:   [0, 0],
        origin: 'random',
        colors: ['#86efac','#bbf7d0','#fde68a','#ffffff']
    },

    default: {
        chars:  ['✦','✧','·','⭐','∘'],
        anim:   'cwp-sparkle',
        count:  8,
        sz:     [0.38, 0.78],
        op:     [0.18, 0.42],
        spd:    [2.5, 5.5],
        sway:   [0, 0],
        origin: 'random'
    }
};

window.cwSpawnParticles = window.cwSpawnParticles || function (containerEl, theme) {
    var cfg = window._cwThemes[theme] || window._cwThemes['default'];
    containerEl.innerHTML = '';

    var r  = function (a, b) { return a + Math.random() * (b - a); };
    var ri = function (a, b) { return Math.floor(r(a, b + 0.999)); };

    for (var i = 0; i < cfg.count; i++) {
        var el   = document.createElement('span');
        el.textContent = cfg.chars[ri(0, cfg.chars.length - 1)];
        el.className   = 'cw-p';

        var sz   = r(cfg.sz[0],   cfg.sz[1]);
        var op   = r(cfg.op[0],   cfg.op[1]);
        var spd  = r(cfg.spd[0],  cfg.spd[1]);
        var dly  = r(0, spd * 0.88);
        var sway = r(cfg.sway[0], cfg.sway[1]);
        var rot  = r(-75, 75);
        var left = r(3, 91);

        var topCss;
        if (cfg.origin === 'top') {
            topCss = 'top:0;';
        } else if (cfg.origin === 'bottom') {
            topCss = 'bottom:0;top:auto;';
        } else if (cfg.origin === 'steam') {
            topCss = 'top:auto;bottom:' + r(8, 28) + '%;';
            left   = r(32, 62);
        } else {
            topCss = 'top:' + r(5, 82) + '%;';
        }

        var colorCss = '';
        if (cfg.colors && cfg.colors.length) {
            colorCss = 'color:' + cfg.colors[ri(0, cfg.colors.length - 1)] + ';';
        }

        el.style.cssText =
            'left:'         + left.toFixed(1)     + '%;'    +
            topCss                                           +
            'font-size:'    + sz.toFixed(2)        + 'rem;'  +
            colorCss                                         +
            '--op:'         + op.toFixed(2)        + ';'     +
            '--sway:'       + sway.toFixed(1)      + 'px;'   +
            '--rot:'        + rot.toFixed(0)       + 'deg;'  +
            'animation:'    + cfg.anim + ' '
                            + spd.toFixed(2) + 's '
                            + dly.toFixed(2) + 's ease-in-out infinite;';

        containerEl.appendChild(el);
    }
};
</script>
@endonce

<div class="block block-rounded d-flex flex-column mb-3"
     style="width:100%;height:100%;overflow:hidden;border:1px solid #eee">

    <div class="d-flex justify-content-between align-items-center px-3 pt-3 pb-2"
         style="border-bottom:1px solid #f0f0f0;flex-shrink:0">
        <span style="font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em">
            {{ __('radio.calendar_title') }}
        </span>
        <span class="rounded-pill px-2 py-1"
              style="font-size:.63rem;font-weight:700;background:{{ $_cwEstacao['bg'] }};color:{{ $_cwEstacao['cor'] }}">
            {{ $_cwEstacao['emoji'] }}&nbsp;{{ $_cwEstacao['nome'] }}
        </span>
    </div>

    @if(!empty($_cwSlides))

    <div id="{{ $_cwSliderId }}"
         class="mx-3 mt-3 rounded-3 flex-shrink-0"
         style="overflow:hidden;background:linear-gradient(145deg,#1a7a5a 0%,#239e76 100%)">

        <div class="cw-track" id="{{ $_cwSliderId }}-track">

            @foreach($_cwSlides as $_cwSlide)
            <div class="cw-slide py-3 px-2 text-center text-white"
                 data-cw-theme="{{ $_cwTheme($_cwSlide['nome']) }}">

                <div class="cw-particles"></div>

                <div class="cw-pcontent">

                    <div style="font-size:1.7rem;line-height:1">
                        <span class="{{ $_cwAnimClass($_cwSlide['nome']) }}">{{ $_cwEmoji($_cwSlide['nome']) }}</span>
                    </div>

                    @if(isset($_cwSlide['restam']))

                        @if($_cwSlide['restam'] > 0)
                            <div class="fw-bold" style="font-size:2.1rem;line-height:1.1;margin-top:3px">
                                {{ $_cwSlide['restam'] }}
                            </div>
                            <div style="font-size:.63rem;opacity:.75">
                                {{ $_cwSlide['restam'] == 1 ? __('radio.calendar_day_left') : __('radio.calendar_days_left') }}
                            </div>
                        @else
                            <div style="font-size:.73rem;font-weight:600;opacity:.88;margin-top:8px;letter-spacing:.02em">
                                {{ __('radio.stats_period_today') }}
                            </div>
                        @endif

                        <div class="fw-semibold" style="font-size:.78rem;margin-top:7px;line-height:1.3;padding:0 6px">
                            {{ Str::title($_cwSlide['nome']) }}
                        </div>
                        <div style="font-size:.58rem;opacity:.55;margin-top:2px">
                            {{ __('radio.calendar_until') }} {{ $_cwSlide['fim']->format('d/m') }}
                        </div>

                    @else

                        <div class="fw-bold" style="font-size:2.1rem;line-height:1.1;margin-top:3px">
                            @if($_cwSlide['faltam'] == 0) 🎉
                            @else {{ $_cwSlide['faltam'] }}
                            @endif
                        </div>
                        <div style="font-size:.63rem;opacity:.75">
                            @if($_cwSlide['faltam'] == 0)    {{ __('radio.calendar_today_excl') }}
                            @elseif($_cwSlide['faltam'] == 1) {{ __('radio.calendar_day_until') }}
                            @else                             {{ __('radio.calendar_days_until') }}
                            @endif
                        </div>
                        <div class="fw-semibold" style="font-size:.78rem;margin-top:7px;line-height:1.3;padding:0 6px">
                            {{ Str::title($_cwSlide['nome']) }}
                        </div>
                        <div style="font-size:.58rem;opacity:.55;margin-top:2px">
                            {{ $_cwSlide['ini']->format('d/m') }}
                        </div>

                    @endif

                </div>
            </div>
            @endforeach

        </div>

        @if(count($_cwSlides) > 1)
        <div id="{{ $_cwSliderId }}-dots"
             style="display:flex;justify-content:center;align-items:center;gap:5px;padding:2px 8px 10px">
            @foreach($_cwSlides as $_cwIdx => $_cwSlide)
            <button class="cw-dot {{ $_cwIdx === 0 ? 'cw-dot-on' : '' }}"
                    aria-label="{{ __('radio.calendar_slide_aria', ['current' => $_cwIdx + 1, 'total' => count($_cwSlides)]) }}"
                    onclick="cwGoTo('{{ $_cwSliderId }}', {{ $_cwIdx }})">
            </button>
            @endforeach
        </div>
        @endif

    </div>

    @else

    <div class="flex-grow-1 d-flex align-items-center justify-content-center">
        <div class="text-center text-muted py-3">
            <i class="fa fa-calendar-check fa-2x mb-2 d-block" style="color:#e0e0e0"></i>
            <span style="font-size:.75rem">{{ __('radio.calendar_empty') }}</span>
        </div>
    </div>

    @endif

    @if(!empty($_cwLista))
    <div class="px-3 pb-3 flex-grow-1" style="margin-top:10px">
        <div style="font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:5px">
            {{ __('radio.calendar_next') }}
        </div>
        @foreach($_cwLista as $_cwN)
        <div class="d-flex align-items-center"
             style="padding:5px 0;border-bottom:1px solid #f5f5f5">
            <span style="font-size:.85rem;width:22px;flex-shrink:0;text-align:center;line-height:1">
                <span class="{{ $_cwAnimClass($_cwN['nome']) }}">{{ $_cwEmoji($_cwN['nome']) }}</span>
            </span>
            <span class="flex-grow-1 mx-2 text-truncate"
                  style="font-size:.71rem;font-weight:500">
                {{ Str::title($_cwN['nome']) }}
            </span>
            <b style="font-size:.63rem;white-space:nowrap">
                @if($_cwN['faltam'] == 0)    {{ __('radio.calendar_today_lower') }}
                @elseif($_cwN['faltam'] == 1) {{ __('radio.calendar_tomorrow') }}
                @else {{ $_cwN['ini']->format('d/m') }}
                @endif
            </b>
        </div>
        @endforeach
    </div>
    @else
    <div style="flex-grow:1"></div>
    @endif

</div>

<script>
(function () {
    var id    = @json($_cwSliderId);
    var total = {{ count($_cwSlides) }};

    document.querySelectorAll('#' + id + ' .cw-slide[data-cw-theme]').forEach(function (slide) {
        var pEl = slide.querySelector('.cw-particles');
        if (pEl && window.cwSpawnParticles) {
            window.cwSpawnParticles(pEl, slide.getAttribute('data-cw-theme') || 'default');
        }
    });

    if (total <= 1) return;

    var cur    = 0;
    var timer  = null;
    var track  = document.getElementById(id + '-track');
    var dotsEl = document.getElementById(id + '-dots');

    function render() {
        if (track)
            track.style.transform = 'translateX(-' + (cur * 100) + '%)';
        if (dotsEl)
            dotsEl.querySelectorAll('.cw-dot').forEach(function (d, i) {
                d.classList.toggle('cw-dot-on', i === cur);
            });
    }

    function go(idx) {
        cur = ((idx % total) + total) % total;
        render();
    }

    function startAuto() {
        clearInterval(timer);
        timer = setInterval(function () { go(cur + 1); }, 8000);
    }

    function jumpTo(idx) {
        clearInterval(timer);
        go(idx);
        startAuto();
    }

    var wrapper = document.getElementById(id);
    var txStart = 0;
    if (wrapper) {
        wrapper.addEventListener('touchstart', function (e) {
            txStart = e.touches[0].clientX;
        }, { passive: true });

        wrapper.addEventListener('touchend', function (e) {
            var dx = txStart - e.changedTouches[0].clientX;
            if (Math.abs(dx) > 28)
                jumpTo(cur + (dx > 0 ? 1 : -1));
        }, { passive: true });
    }

    window._cwReg[id] = { jumpTo: jumpTo };

    startAuto();
})();
</script>