console.log( 'Code is Poetry' );
/* افزودن استایل و اسکریپت در صورت فعال بودن */
if ($skeleton_settings['enable']) {
    add_action('wp_head', function() use ($skeleton_settings) {
        ?>
        <style id="site-skeleton-css">
        .skeleton-loader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:#fff;padding:15px;box-sizing:border-box;display:flex;flex-direction:column;gap:15px;transition:opacity .3s ease-out;}
        .skeleton-item{background:linear-gradient(90deg,<?php echo esc_attr($skeleton_settings['bg_color']); ?> 25%,<?php echo esc_attr($skeleton_settings['highlight_color']); ?> 50%,<?php echo esc_attr($skeleton_settings['bg_color']); ?> 75%);background-size:400% 100%;animation:shimmer <?php echo floatval($skeleton_settings['animation_speed']); ?>s infinite;border-radius:6px;}
        @keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0% 50%;}}
        .skeleton-header{height:70px;width:100%;max-width:1200px;margin:0 auto;}
        .skeleton-title{height:30px;width:60%;max-width:600px;margin:0 auto;}
        .skeleton-content{height:16px;width:80%;max-width:800px;margin:0 auto;}
        .skeleton-content.short{width:50%;max-width:500px;}
        .skeleton-image{height:200px;width:100%;max-width:800px;margin:0 auto;}
        .skeleton-footer{height:60px;width:100%;max-width:1200px;margin:0 auto;}
        @media (max-width:768px){
            .skeleton-header{height:50px;}
            .skeleton-title{width:80%;height:24px;}
            .skeleton-content{width:90%;}
            .skeleton-image{height:150px;}
            .skeleton-footer{height:40px;}
        }
        </style>

        <div class="skeleton-loader">
            <div class="skeleton-item skeleton-header"></div>
            <div class="skeleton-item skeleton-title"></div>
            <div class="skeleton-item skeleton-content"></div>
            <div class="skeleton-item skeleton-content short"></div>
            <div class="skeleton-item skeleton-image"></div>
            <div class="skeleton-item skeleton-content"></div>
            <div class="skeleton-item skeleton-footer"></div>
        </div>

        <script defer>
        window.addEventListener('load',()=>{const e=document.querySelector('.skeleton-loader');if(e){e.style.opacity='0';setTimeout(()=>{e.remove()},<?php echo (int)($skeleton_settings['animation_speed'] * 1000); ?>);}});
        setTimeout(()=>{const e=document.querySelector('.skeleton-loader');if(e)e.remove();},2500);
        </script>
        <?php
    });
}