@if ($query === '')
    <div class="pt-4">
        <x-ui.section-header
            eyebrow="Trends"
            title="지금 뜨는 태그"
            title-tag="h2"
            size="md"
        />

        @php
            $visibleTrendItems = collect($trendItems)
                ->filter(function ($trendItem) {
                    return collect(data_get($trendItem, 'data.news_items', []))
                        ->filter(function ($newsItem) {
                            return trim((string) data_get($newsItem, 'title', '')) !== '';
                        })
                        ->isNotEmpty();
                })
                ->values();
        @endphp

        @if ($visibleTrendItems->isEmpty())
            <x-ui.empty-state
                title="지금 뜨는 태그가 없습니다"
            />
        @else
<div
    class="overflow-hidden rounded-[1.5rem] border border-muted bg-card shadow-sm mt-4"
    data-trend-spotlight
>
    <div class="p-4 sm:p-5 lg:p-6">
        {{-- 태그 목록 --}}
        <div class="flex items-center gap-3 border-b border-muted pb-4">
            <div
                class="min-w-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
                role="tablist"
                aria-label="지금 뜨는 태그"
                data-trend-tag-strip
            >
                <div class="flex min-w-max items-center gap-2.5">
                    @foreach ($visibleTrendItems as $trendIndex => $trendItem)
                        @php
                            $isActiveTrend = $trendIndex === 0;
                        @endphp
                        <button
                            type="button"
                            role="tab"
                            aria-selected="{{ $isActiveTrend ? 'true' : 'false' }}"
                            aria-controls="trend-panel-{{ $trendItem->id }}"
                            data-trend-tag
                            data-active="{{ $isActiveTrend ? 'true' : 'false' }}"
                            class="shrink-0 rounded-full border px-4 py-2.5 text-sm font-bold leading-none transition-[background-color,border-color,color,box-shadow] duration-200 sm:px-5 sm:py-3
                                {{ $isActiveTrend
                                    ? 'border-primary bg-[rgb(var(--color-primary-rgb))] text-white shadow-sm'
                                    : 'border-muted bg-surface text-[rgb(var(--color-text-main-rgb))] hover:border-primary-soft hover:bg-surface1' }}"
                        >
                            {{ $trendItem->title }}
                        </button>
                    @endforeach
                </div>
            </div>

            <button
                type="button"
                class="hidden h-11 w-11 shrink-0 place-items-center rounded-full border border-muted bg-card text-xl c-main shadow-sm transition-[background-color,border-color,color] duration-200 hover:border-primary-soft hover:bg-surface1 hover:c-primary md:grid"
                aria-label="태그 더 보기"
                data-trend-tag-scroll
            >
                <span aria-hidden="true">›</span>
            </button>
        </div>

        {{-- 관련 기사 Swiper --}}
        <div class="min-w-0 pt-2">
            <div
                class="swiper overflow-hidden"
                data-trend-carousel
            >
                <div class="swiper-wrapper">
                    @foreach ($visibleTrendItems as $trendIndex => $trendItem)
                        @php
                            $trendData = $trendItem->data ?? [];

                            $newsItems = collect(
                                data_get($trendData, 'news_items', [])
                            );

                            $trendUrl = data_get($trendData, 'link')
                                ?: 'https://trends.google.co.kr/trending/rss?geo=KR';

                            $approxTraffic = trim(
                                (string) data_get($trendData, 'approx_traffic', '')
                            );
                        @endphp

                        <div
                            id="trend-panel-{{ $trendItem->id }}"
                            class="swiper-slide"
                            role="tabpanel"
                            aria-hidden="{{ $trendIndex === 0 ? 'false' : 'true' }}"
                            data-trend-panel
                        >
                            <div class="divide-y divide-[rgb(var(--color-border-muted-rgb)/0.75)]">
                                @if ($newsItems->isEmpty())
                                    <div class="py-12 text-center text-sm c-muted">
                                        표시할 관련 기사가 없습니다.
                                    </div>
                                @else
                                    @foreach ($newsItems->take(3) as $newsItem)
                                        @php
                                            $newsUrl = trim(
                                                (string) data_get($newsItem, 'url', '')
                                            );

                                            $newsTitle = trim(
                                                (string) data_get($newsItem, 'title', '')
                                            );

                                            $newsSnippet = trim(
                                                (string) data_get($newsItem, 'snippet', '')
                                            );

                                            $newsSource = trim(
                                                (string) data_get($newsItem, 'source', '')
                                            );

                                            $newsPicture = trim(
                                                (string) (
                                                    data_get($newsItem, 'picture')
                                                    ?: data_get($newsItem, 'picture_url')
                                                )
                                            );
                                        @endphp

                                        @if ($newsTitle !== '')
                                            <a
                                                href="{{ $newsUrl !== '' ? $newsUrl : $trendUrl }}"
                                                target="_blank"
                                                rel="noopener"
                                                class="group grid grid-cols-[minmax(0,1fr)_clamp(72px,20%,220px)] items-center gap-3 rounded-[1.25rem] px-1 py-5 transition-colors duration-200 hover:bg-surface1 sm:gap-4 sm:px-3 lg:grid-cols-[minmax(0,1fr)_220px] lg:gap-6"
                                            >
                                                <div class="min-w-0 space-y-2.5">
                                                    <h3 class="line-clamp-2 text-lg font-extrabold leading-[1.45] tracking-[-0.04em] c-main transition-colors group-hover:c-primary sm:text-xl lg:text-[1.4rem]">
                                                        {{ $newsTitle }}
                                                    </h3>

                                                    @if ($newsSnippet !== '')
                                                        <p class="line-clamp-2 text-sm leading-6 c-muted sm:text-base sm:leading-7">
                                                            {{ $newsSnippet }}
                                                        </p>
                                                    @endif

                                                    <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs font-semibold c-muted sm:text-sm">
                                                        <span>
                                                            {{ $newsSource !== '' ? $newsSource : 'Google Trends' }}
                                                        </span>

                                                        @if ($approxTraffic !== '')
                                                            <span class="text-[rgb(var(--color-border-default-rgb))]">·</span>
                                                            <span>{{ $approxTraffic }} 검색</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                @if ($newsPicture !== '')
                                                    <div class="overflow-hidden rounded-[1rem] bg-surface justify-self-end lg:w-[220px]">
                                                        <img
                                                            src="{{ $newsPicture }}"
                                                            alt=""
                                                            loading="lazy"
                                                            class="aspect-[4/3] w-full object-cover transition-transform duration-300 group-hover:scale-[1.02] sm:aspect-[16/10]"
                                                        >
                                                    </div>
                                                @endif
                                            </a>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
        @endif
    </div>
@endif