<!-- Mobile grid: hanya tampil di mobile -->
<div class="grid grid-cols-3 gap-2 gap-y-3 sm:hidden">
    <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $dramas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $drama): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <a href="<?php echo e(route('drama.detail', ['lang' => request()->route('lang') ?? app()->getLocale() ?? 'en', 'bookId' => $drama['bookId'] ?? $drama['id'] ?? ''])); ?>" class="no-underline text-inherit">
    <div class="w-full aspect-[3/4] flex flex-col border border-[#23262f] rounded-lg overflow-hidden shadow-lg bg-[#23262f] transition-transform duration-200 relative hover:scale-105 mb-2">
            <div class="relative w-full h-full">
                <img src="<?php echo e($drama['cover'] ?? $drama['coverWap'] ?? $drama['bookCover'] ?? ''); ?>" alt="<?php echo e($drama['bookName'] ?? 'Drama'); ?>" class="w-full h-full object-cover bg-[#222] block">
                <!--[if BLOCK]><![endif]--><?php if(isset($drama['corner']['name']) && !empty($drama['corner']['name'])): ?>
                    <span class="absolute top-1 left-1 px-2 py-0.5 rounded text-xs font-bold shadow" style="background: <?php echo e($drama['corner']['color'] ?? '#4D65ED'); ?>; color: #fff; z-index: 2;">
                        <?php echo e($drama['corner']['name']); ?>

                    </span>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[rgba(24,26,32,0.7)] rounded-full w-8 h-8 flex items-center justify-center shadow-lg cursor-pointer transition-colors duration-200">
                    <svg width="18" height="18" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="14" cy="14" r="14" fill="none"/>
                        <polygon points="11,9 21,14 11,19" fill="#fff"/>
                    </svg>
                </span>
                <!--[if BLOCK]><![endif]--><?php if(isset($drama['playCount'])): ?>
                    <span class="absolute top-1 right-1 bg-[rgba(24,26,32,0.7)] text-white text-[11px] sm:text-sm rounded px-2 py-0.5 flex items-center gap-1">
                        <svg class="inline-block" width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 5C7.455 5 3.73 7.943 2.143 12c1.587 4.057 5.312 7 9.857 7s8.27-2.943 9.857-7C20.27 7.943 16.545 5 12 5Zm0 12c-3.866 0-7.19-2.486-8.643-6C4.81 7.486 8.134 5 12 5s7.19 2.486 8.643 6c-1.453 3.514-4.777 6-8.643 6Zm0-9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z" fill="currentColor"/></svg>
                        <?php echo e($drama['playCount']); ?>

                    </span>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                <div class="absolute left-0 bottom-0 w-full bg-gradient-to-t from-black/80 to-transparent px-2 pt-3 pb-1">
                    <h3 class="text-xs text-white font-semibold truncate"><?php echo e($drama['bookName'] ?? 'Untitled'); ?></h3>
                </div>
            </div>
        </div>
    </a>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
</div>

<!-- Desktop/tablet flex lama: hanya tampil di sm ke atas -->
<div class="hidden sm:flex flex-wrap gap-4 justify-center">
    <!--[if BLOCK]><![endif]--><?php $__currentLoopData = collect($dramas); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $drama): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <a href="<?php echo e(route('drama.detail', ['lang' => request()->route('lang') ?? app()->getLocale() ?? 'en', 'bookId' => $drama['bookId'] ?? $drama['id'] ?? ''])); ?>" class="no-underline text-inherit">
        <div class="w-[220px] border border-[#23262f] overflow-hidden shadow-lg bg-[#23262f] transition-transform duration-200 relative hover:scale-105">
            <div class="relative w-full h-[320px]">
                <img src="<?php echo e($drama['cover'] ?? $drama['coverWap'] ?? $drama['bookCover'] ?? ''); ?>" alt="<?php echo e($drama['bookName'] ?? 'Drama'); ?>" class="w-full h-[320px] object-cover bg-[#222] block">
                <!--[if BLOCK]><![endif]--><?php if(isset($drama['corner']['name']) && !empty($drama['corner']['name'])): ?>
                    <span class="absolute top-1 left-1 px-2 py-0.5 rounded text-xs font-bold shadow" style="background: <?php echo e($drama['corner']['color'] ?? '#4D65ED'); ?>; color: #fff; z-index: 2;">
                        <?php echo e($drama['corner']['name']); ?>

                    </span>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[rgba(24,26,32,0.7)] rounded-full w-14 h-14 flex items-center justify-center shadow-lg cursor-pointer transition-colors duration-200">
                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="14" cy="14" r="14" fill="none"/>
                        <polygon points="11,9 21,14 11,19" fill="#fff"/>
                    </svg>
                </span>
                <!--[if BLOCK]><![endif]--><?php if(isset($drama['playCount'])): ?>
                    <span class="absolute top-1 right-1 bg-[rgba(24,26,32,0.7)] text-white text-xs sm:text-sm rounded px-2 py-0.5 flex items-center gap-1">
                        <svg class="inline-block" width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 5C7.455 5 3.73 7.943 2.143 12c1.587 4.057 5.312 7 9.857 7s8.27-2.943 9.857-7C20.27 7.943 16.545 5 12 5Zm0 12c-3.866 0-7.19-2.486-8.643-6C4.81 7.486 8.134 5 12 5s7.19 2.486 8.643 6c-1.453 3.514-4.777 6-8.643 6Zm0-9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z" fill="currentColor"/></svg>
                        <?php echo e($drama['playCount']); ?>

                    </span>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
            </div>
            <div class="p-4">
                <h3 class="text-base mb-2 text-white font-semibold"><?php echo e($drama['bookName'] ?? 'Untitled'); ?></h3>
                <!--[if BLOCK]><![endif]--><?php if(isset($drama['chapterCount'])): ?>
                    <p class="text-sm text-gray-400 mb-2">Chapters: <?php echo e($drama['chapterCount']); ?></p>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                <p class="text-sm text-gray-300 mb-2 h-[60px] overflow-hidden text-ellipsis"><?php echo e($drama['introduction'] ?? ''); ?></p>
                <?php
                    $tags = !empty($drama['tags']) ? $drama['tags'] : ($drama['tagNames'] ?? []);
                ?>
                <!--[if BLOCK]><![endif]--><?php if(!empty($tags)): ?>
                    <div class="mt-2">
                        <?php if (isset($component)) { $__componentOriginalffcce85b26c35c01d63ab7c313413aff = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalffcce85b26c35c01d63ab7c313413aff = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.tag-list','data' => ['tags' => $tags]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('tag-list'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['tags' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($tags)]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalffcce85b26c35c01d63ab7c313413aff)): ?>
<?php $attributes = $__attributesOriginalffcce85b26c35c01d63ab7c313413aff; ?>
<?php unset($__attributesOriginalffcce85b26c35c01d63ab7c313413aff); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalffcce85b26c35c01d63ab7c313413aff)): ?>
<?php $component = $__componentOriginalffcce85b26c35c01d63ab7c313413aff; ?>
<?php unset($__componentOriginalffcce85b26c35c01d63ab7c313413aff); ?>
<?php endif; ?>
                    </div>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
            </div>
        </div>
    </a>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
</div>
<div class="mt-4">
    <script async="async" data-cfasync="false" src="//madeupvigourpoll.com/d8d7cf75dff9444c03240ff0caa19319/invoke.js"></script>
    <div id="container-d8d7cf75dff9444c03240ff0caa19319"></div>
</div><?php /**PATH /Users/buchin/Repos/dracin-git/resources/views/components/drama-gallery.blade.php ENDPATH**/ ?>