@php
    $nolink = $nolink ?? false;
    $lang = $lang ?? request()->route('lang') ?? app()->getLocale() ?? 'in';
    $bookId = $drama['bookId'] ?? '';
    $dramaTitleSlug = null;

    if (!empty($drama['bookName'])) {
        if (preg_match('/[a-zA-Z]/', $drama['bookName'])) {
            $slug = \Illuminate\Support\Str::slug($drama['bookName']);
        } else {
            $slug = $drama['bookName'];
        }

        $dramaTitleSlug = rawurlencode($slug);
    }
@endphp
@if($drama && !empty($bookId))
<div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-center sm:items-start flex-wrap px-6 lg:px-8">
    @if(!$nolink && !empty($drama['bookId']))
        <a href="{{ route('drama.detail', ['lang' => $lang, 'bookId' => $drama['bookId']]) }}" tabindex="-1">
            <img src="{{ $drama['bookCover'] ?? $drama['coverWap'] ?? '' }}" alt="{{ $drama['bookName'] ?? 'Drama' }}" class="w-[70vw] max-w-[220px] h-[55vw] max-h-[320px] object-cover bg-[#222] rounded-lg flex-shrink-0 mx-auto sm:mx-0 hover:opacity-90 transition-opacity duration-150">
        </a>
    @else
        <img src="{{ $drama['bookCover'] ?? $drama['coverWap'] ?? '' }}" alt="{{ $drama['bookName'] ?? 'Drama' }}" class="w-[70vw] max-w-[220px] h-[55vw] max-h-[320px] object-cover bg-[#222] rounded-lg flex-shrink-0 mx-auto sm:mx-0">
    @endif
    <div class="flex-1 min-w-[0] max-w-full w-full sm:w-auto px-2 sm:px-0">
        <h1 class="text-white text-xl sm:text-2xl mb-2 sm:mb-3 break-words text-center sm:text-left">
            @if(!$nolink && !empty($drama['bookId']))
                <a href="{{ route('drama.detail', ['lang' => $lang, 'bookId' => $drama['bookId']]) }}" class="hover:underline hover:text-indigo-300 transition-colors duration-100">
                    {{ $drama['bookName'] ?? 'Untitled' }}
                </a>
            @else
                {{ $drama['bookName'] ?? 'Untitled' }}
            @endif
        </h1>
        <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4 mb-2">
            <p class="text-gray-400 text-sm sm:text-base mb-1 sm:mb-0 text-center sm:text-left">Chapters: {{ $drama['chapterCount'] ?? '-' }}</p>
            <p class="text-gray-400 text-sm sm:text-base text-center sm:text-left">Play Count: {{ number_format((int)($drama['playCount'] ?? 0)) }}</p>
        </div>
        <p class="text-gray-300 mb-3 sm:mb-4 text-sm sm:text-base text-center sm:text-left">{{ $drama['introduction'] ?? '' }}</p>
        <div class="flex justify-center sm:justify-start">
            <a href="{{ route('episode.page', ['lang' => $lang, 'bookId' => $drama['bookId'], 'episodeIndex' => 1]) }}"
            class="inline-block bg-gradient-to-r from-[#4D65ED] to-[#7F53FF] text-white font-bold rounded-full px-6 py-2 text-base mb-4 no-underline shadow-lg tracking-wide transition-transform duration-150 w-full max-w-xs text-center hover:scale-105 hover:shadow-xl">
                <span class="align-middle mr-2">▶</span> Play Now
            </a>
        </div>
        @if(!empty($drama['tags']))
            <div class="flex justify-center sm:justify-start mt-2">
                <x-tag-list :tags="$drama['tags']" :lang="$lang" />
            </div>
        @endif
        @if(isset($drama['corner']['name']))
            <span class="inline-block mt-2 sm:mt-0" style="background: {{ $drama['corner']['color'] ?? '#4D65ED' }}; color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 0.9em;">{{ $drama['corner']['name'] }}</span>
        @endif
    </div>
</div>
@endif
<script async="async" data-cfasync="false" src="https://confessinvaluable.com/5ef1d1164a2a76192edc5353bf2ba59a/invoke.js"></script>
<div id="container-5ef1d1164a2a76192edc5353bf2ba59a"></div>