@if ($ringtone->content_type === 'sound_effect')
    @php
        $controlColors = [
            '#808080',
            '#22c55e',
            '#f59e0b',
            '#ef4444',
            '#0ea5e9',
            '#8b5cf6',
        ];
        $controlColor = $controlColors[abs(crc32((string) ($ringtone->slug ?: $ringtone->id))) % count($controlColors)];
    @endphp
    @once
        <style>
            .play-button.mediaPlayer {
                width: 94px;
                height: 89px;
                position: absolute;
                border: 0;
                display: block;
                background: url('{{ asset('content/images/sound_button.png') }}') no-repeat;
                background-position: -5px -5px;
                -webkit-tap-highlight-color: transparent;
            }

            [type='button'],
            [type='reset'],
            [type='submit'],
            button {
                -webkit-appearance: button;
            }

            .sound-item .sound-details {
                margin: auto;
                text-align: center;
                justify-items: center;
                display: inline-block;
                width: 100%;
            }

            .sound-item .sound-controls {
                width: 92px;
                height: 84px;
                border-radius: 50%;
                text-align: center;
                margin: auto auto 15px;
                position: relative;
                overflow: visible;
                background: var(--sound-control-color, #808080);
                box-shadow: inset 0 8px 18px rgba(255, 255, 255, 0.18), 0 10px 20px rgba(15, 23, 42, 0.16);
            }

            .play-button.mediaPlayer:focus {
                background: url('{{ asset('content/images/sound_button.png') }}') no-repeat;
                background-position: -5px -5px;
            }

            .play-button.mediaPlayer:active {
                background: url('{{ asset('content/images/sound_button.png') }}') no-repeat;
                background-position: -109px -5px;
            }

            .play-button.mediaPlayer {
                cursor: pointer;
                transition: transform 140ms ease, background-position 80ms steps(1);
                transform-origin: center;
            }

            .play-button.mediaPlayer:active,
            .play-button.mediaPlayer.is-pressed {
                transform: scale(0.95);
                background-position: -109px -5px;
            }
        </style>
    @endonce
    <article
        class="sound-item rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
        data-ringtone-card
        data-ringtone-key="{{ $ringtone->slug }}"
        data-ringtone-title="{{ $ringtone->title }}"
        data-ringtone-url="{{ route('frontend.content.show', $ringtone->slug) }}"
    >
        <audio data-ringtone-audio preload="none" src="{{ $ringtone->file_url }}"></audio>

        <div class="sound-details">
            <div class="sound-controls" style="--sound-control-color: {{ $controlColor }};">
                <button
                    type="button"
                    data-ringtone-play
                    title="Play {{ $ringtone->title }}"
                    aria-label="Play {{ $ringtone->title }}"
                    class="play-button mediaPlayer"
                ></button>
            </div>

            <p class="mt-4 line-clamp-2 text-[28px] font-semibold leading-8 text-slate-900">{{ $ringtone->title }}</p>
            <p class="mt-2 text-sm text-slate-600">
                @if ($ringtone->duration)
                    {{ gmdate('i:s', $ringtone->duration) }}
                    <span class="mx-1">-</span>
                @endif
                {{ number_format($ringtone->downloads) }} Downloads
            </p>
        </div>

        <div class="mt-5 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <button type="button" data-ringtone-share title="Share" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 12l8-5m-8 5l8 5M7 12a2 2 0 11-4 0 2 2 0 014 0zm14-5a2 2 0 11-4 0 2 2 0 014 0zm0 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </button>
                <button type="button" data-ringtone-like title="Like" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 21s-6.7-4.35-9.33-8.27C.97 10.2 2.1 6.5 5.65 5.35 8.1 4.57 10 5.64 12 7.7c2-2.06 3.9-3.13 6.35-2.35 3.55 1.15 4.68 4.85 2.98 7.38C18.7 16.65 12 21 12 21z"/>
                    </svg>
                </button>
            </div>

            <a href="{{ route('frontend.content.show', $ringtone->slug) }}" title="Download {{ $ringtone->title }}" class="btn-primary inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-base font-semibold">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0l-4-4m4 4l4-4M4 19h16"/>
                </svg>
                Download
            </a>
        </div>
    </article>
@elseif ($ringtone->isImageType())
    <article
        class="group overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm"
        data-ringtone-card
        data-ringtone-key="{{ $ringtone->slug }}"
        data-ringtone-title="{{ $ringtone->title }}"
        data-ringtone-url="{{ route('frontend.content.show', $ringtone->slug) }}"
    >
        <a href="{{ route('frontend.content.show', $ringtone->slug) }}" class="relative block h-[240px] w-full overflow-hidden bg-slate-200 sm:h-[280px] xl:h-[320px]">
            <img
                src="{{ $ringtone->file_url }}"
                alt="{{ $ringtone->title }}"
                class="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]"
                loading="lazy"
            >
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/25 to-transparent"></div>
            <p class="absolute left-2.5 top-2.5 rounded-md bg-white/90 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-700">
                {{ $ringtone->content_type_label }}
            </p>
            <div class="absolute inset-x-0 bottom-0 p-2.5">
                <p class="line-clamp-2 rounded-md bg-black/35 px-2 py-1 text-sm font-semibold leading-5 text-white">
                    {{ $ringtone->title }}
                </p>
            </div>
        </a>

        <div class="flex items-center justify-between border-t border-slate-200 bg-white px-2.5 py-2">
            <p class="text-xs font-medium text-slate-600">{{ number_format($ringtone->downloads) }} Downloads</p>
            <a href="{{ route('frontend.content.show', $ringtone->slug) }}" title="Download {{ $ringtone->title }}" class="btn-primary inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-semibold">
                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0l-4-4m4 4l4-4M4 19h16"/>
                </svg>
                Download
            </a>
        </div>
    </article>
@else
    <article
        class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
        data-ringtone-card
        data-ringtone-key="{{ $ringtone->slug }}"
        data-ringtone-title="{{ $ringtone->title }}"
        data-ringtone-url="{{ route('frontend.content.show', $ringtone->slug) }}"
    >
        @if ($ringtone->isAudioType())
            <audio data-ringtone-audio preload="none" src="{{ $ringtone->file_url }}"></audio>
        @endif

        <div class="flex items-start gap-3">
            @if ($ringtone->isAudioType())
                <button type="button" data-ringtone-play title="Play Preview" class="mt-0.5 inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-slate-600 text-white hover:bg-slate-700">
                    <svg data-icon-play class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M8 5.5v13l10-6.5-10-6.5z"/>
                    </svg>
                    <svg data-icon-pause class="hidden h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M7 5h4v14H7zM13 5h4v14h-4z"/>
                    </svg>
                </button>
            @elseif ($ringtone->isVideoType())
                <video src="{{ $ringtone->file_url }}" class="h-16 w-16 rounded-xl object-cover border border-slate-200" muted playsinline preload="metadata"></video>
            @endif

            <div class="min-w-0">
                <p class="inline-flex rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-medium text-slate-600">{{ $ringtone->content_type_label }}</p>
                <h3 class="mt-2 text-xl font-semibold leading-6 sm:text-2xl">
                    <a href="{{ route('frontend.content.show', $ringtone->slug) }}" class="hover:text-sky-700">{{ $ringtone->title }}</a>
                </h3>
                <p class="mt-1 text-sm text-slate-600">
                    @if ($ringtone->duration)
                        {{ gmdate('i:s', $ringtone->duration) }} Sec
                        <span class="mx-1">-</span>
                    @endif
                    {{ number_format($ringtone->downloads) }} Downloads
                </p>
            </div>
        </div>

        <div class="mt-3 flex flex-wrap gap-2">
            @php
                $chips = $ringtone->relationLoaded('tags') ? $ringtone->tags->pluck('name')->filter()->take(6)->values() : collect();
                if ($chips->isEmpty() && !empty($ringtone->category?->name)) {
                    $chips = collect([$ringtone->category->name]);
                }
            @endphp
            @foreach ($chips as $chip)
                <a href="{{ route('frontend.search', ['q' => $chip]) }}" class="rounded-lg border border-slate-300 px-2.5 py-1 text-sm text-slate-700 hover:border-sky-200 hover:text-sky-700">
                    {{ $chip }}
                </a>
            @endforeach
        </div>

        <div class="mt-4 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <button type="button" data-ringtone-share title="Share" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 12l8-5m-8 5l8 5M7 12a2 2 0 11-4 0 2 2 0 014 0zm14-5a2 2 0 11-4 0 2 2 0 014 0zm0 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </button>
                <button type="button" data-ringtone-like title="Like" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition hover:bg-slate-200">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 21s-6.7-4.35-9.33-8.27C.97 10.2 2.1 6.5 5.65 5.35 8.1 4.57 10 5.64 12 7.7c2-2.06 3.9-3.13 6.35-2.35 3.55 1.15 4.68 4.85 2.98 7.38C18.7 16.65 12 21 12 21z"/>
                    </svg>
                </button>
            </div>

            <a href="{{ route('frontend.content.show', $ringtone->slug) }}" title="Download {{ $ringtone->title }}" class="btn-primary inline-flex items-center gap-1.5 rounded-full px-5 py-2 text-lg font-semibold">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0l-4-4m4 4l4-4M4 19h16"/>
                </svg>
                Download
            </a>
        </div>
    </article>
@endif