@extends('layouts.app')

@push('styles')
@vite('resources/css/home.css')
@endpush

@section('pageTitle', 'Produk Digital — Game, Pulsa, PLN, E-Wallet, OTP')
@section('pageDescription', 'Top up game, pulsa, token PLN, e-wallet, dan nomor virtual OTP. Semua produk digital, tanpa pengiriman fisik.')

@section('content')
@php
    /* Teks sambutan dari admin — bisa diubah di Pengaturan Situs. */
    $welcomeText   = trim(\App\Models\Setting::getValue('welcome_text', ''));
    $welcomeActive = (bool) \App\Models\Setting::getValue('welcome_text_active', true);
    $showWelcome   = $welcomeActive && $welcomeText !== '';
@endphp

{{-- Wrapper: nol padding supaya banner menyentuh tepi, konten di dalam diberi padding. --}}
<div class="hw-shell">

    {{-- ── Banner ────────────────────────────────────────────────── --}}
    <div class="hw-banner-wrap">
        @include('components.banner-slider', ['banners' => $banners])
    </div>

    {{-- ── Teks sambutan (opsional, dari admin) ─────────────────── --}}
    @if($showWelcome)
    <div class="hw-welcome" aria-live="polite">
        <p class="hw-welcome-text">{{ $welcomeText }}</p>
    </div>
    @endif

    {{-- ── Konten utama ─────────────────────────────────────────── --}}
    <div class="hw-content">

        @auth
        @include('partials.enable-push', ['sub' => 'Kabar transaksi dan balasan admin'])
        @endauth

        {{-- Katalog: tab kategori + grid produk --}}
        <section id="katalog" aria-labelledby="katalog-title">

            <div class="hw-sec-head">
                <h2 id="katalog-title" class="hw-sec-title">Katalog</h2>
                <a href="{{ route('topup.index') }}" class="hw-sec-link home-section-link">Lihat semua</a>
            </div>

            @if($tabs->count() > 0)
            {{-- Chip kategori: geser horizontal, tepi kiri rata konten --}}
            <div class="hw-chips-wrap no-scrollbar" role="tablist" aria-label="Filter kategori">
                @foreach($tabs as $i => $tab)
                <button type="button"
                        role="tab"
                        id="tabbtn-{{ $tab->id }}"
                        aria-selected="{{ $i === 0 ? 'true' : 'false' }}"
                        aria-controls="tab-{{ $tab->id }}"
                        tabindex="{{ $i === 0 ? '0' : '-1' }}"
                        onclick="homeSwitchTab({{ $tab->id }}, this)"
                        class="hw-chip {{ $i === 0 ? 'hw-chip--active' : '' }}">
                    @if($tab->icon)<i class="{{ $tab->icon }}" aria-hidden="true"></i>@endif
                    {{ $tab->name }}
                </button>
                @endforeach
            </div>

            @foreach($tabs as $i => $tab)
            @php $games = $tab->is_all ? $allGames : $tab->games; @endphp
            <div id="tab-{{ $tab->id }}"
                 role="tabpanel"
                 aria-labelledby="tabbtn-{{ $tab->id }}"
                 @if($i !== 0) hidden @endif>
                @if($games->count() > 0)
                <div id="grid-{{ $tab->id }}" class="hw-grid">
                    @foreach($games as $j => $game)
                    @php
                        /* Inisial untuk placeholder — ambil huruf pertama tiap kata, max 2. */
                        $initials = implode('', array_map(fn($w) => strtoupper($w[0] ?? ''),
                            array_slice(explode(' ', $game->name), 0, 2)));
                    @endphp
                    <a href="{{ route('topup.show', $game->slug) }}"
                       class="hw-card home-card {{ $j >= 6 ? 'hidden' : '' }}"
                       data-tx-id="{{ $game->id }}"
                       aria-label="{{ $game->name }}">
                        <div class="hw-card-img-wrap">
                            @if($game->image)
                            <img src="{{ $game->image }}"
                                 alt="{{ $game->name }}"
                                 width="200" height="200"
                                 class="hw-card-img"
                                 @if($i === 0 && $j === 0) fetchpriority="high" @else loading="lazy" @endif
                                 onerror="this.style.display='none';this.nextElementSibling.removeAttribute('hidden')">
                            <div class="hw-card-placeholder" hidden aria-hidden="true">{{ $initials }}</div>
                            @else
                            <div class="hw-card-placeholder" aria-hidden="true">{{ $initials }}</div>
                            @endif
                        </div>
                        <div class="hw-card-name">{{ $game->name }}</div>
                    </a>
                    @endforeach
                </div>
                @if($games->count() > 6)
                <button type="button"
                        id="more-{{ $tab->id }}"
                        onclick="homeLoadMore({{ $tab->id }})"
                        class="hw-more-btn">
                    Lihat lebih banyak
                </button>
                @endif
                @else
                <div class="hw-empty">
                    <i class="fas fa-gamepad" aria-hidden="true"></i>
                    Belum ada produk di kategori ini.
                </div>
                @endif
            </div>
            @endforeach

            @else
            {{-- Tidak ada tab — tampilkan semua game langsung --}}
            @if($allGames->count() > 0)
            <div id="grid-all" class="hw-grid">
                @foreach($allGames as $j => $game)
                @php
                    $initials = implode('', array_map(fn($w) => strtoupper($w[0] ?? ''),
                        array_slice(explode(' ', $game->name), 0, 2)));
                @endphp
                <a href="{{ route('topup.show', $game->slug) }}"
                   class="hw-card home-card {{ $j >= 6 ? 'hidden' : '' }}"
                   aria-label="{{ $game->name }}">
                    <div class="hw-card-img-wrap">
                        @if($game->image)
                        <img src="{{ $game->image }}"
                             alt="{{ $game->name }}"
                             width="200" height="200"
                             class="hw-card-img"
                             @if($j === 0) fetchpriority="high" @else loading="lazy" @endif
                             onerror="this.style.display='none';this.nextElementSibling.removeAttribute('hidden')">
                        <div class="hw-card-placeholder" hidden aria-hidden="true">{{ $initials }}</div>
                        @else
                        <div class="hw-card-placeholder" aria-hidden="true">{{ $initials }}</div>
                        @endif
                    </div>
                    <div class="hw-card-name">{{ $game->name }}</div>
                </a>
                @endforeach
            </div>
            @if($allGames->count() > 6)
            <button type="button" id="more-all" onclick="homeLoadMoreAll()" class="hw-more-btn">
                Lihat lebih banyak
            </button>
            @endif
            @else
            <div class="hw-empty">
                <i class="fas fa-gamepad" aria-hidden="true"></i>
                Belum ada produk tersedia.
            </div>
            @endif
            @endif

        </section>

        {{-- Pengumuman terbaru --}}
        @if($announcements->count() > 0)
        <section class="hw-section" aria-labelledby="info-title">
            <div class="hw-sec-head">
                <h2 id="info-title" class="hw-sec-title">Informasi terbaru</h2>
                <a href="{{ route('announcements.index') }}" class="hw-sec-link home-section-link">Lihat semua</a>
            </div>
            <div class="hw-ann-list">
                @foreach($announcements as $ann)
                <a href="{{ route('announcements.index') }}" class="hw-ann-card">
                    <div class="hw-ann-meta">
                        <span class="hw-ann-badge" style="background:{{ $ann->type_badge_color }}">{{ $ann->type_label }}</span>
                        <span class="hw-ann-date">{{ $ann->published_at?->translatedFormat('d M Y') ?? $ann->created_at->translatedFormat('d M Y') }}</span>
                    </div>
                    <div class="hw-ann-title">{{ $ann->title }}</div>
                    <p class="hw-ann-excerpt">{{ \Illuminate\Support\Str::limit(strip_tags($ann->content), 110) }}</p>
                </a>
                @endforeach
            </div>
        </section>
        @endif

        {{-- Artikel blog (opsional) --}}
        @if($showBlogOnHome ?? false)
        <section class="hw-section" aria-labelledby="blog-title">
            <div class="hw-sec-head">
                <h2 id="blog-title" class="hw-sec-title">Artikel Terbaru</h2>
                <a href="{{ route('blog.index') }}" class="hw-sec-link home-section-link">Lihat semua</a>
            </div>
            @if($blogPosts->isEmpty())
            <p class="hw-empty">Belum ada artikel.</p>
            @else
            <div class="hw-blog-list">
                @foreach($blogPosts as $post)
                <a href="{{ route('blog.show', ['slug' => $post->slug]) }}" class="hw-blog-card">
                    @if($post->cover_image)
                    <img src="{{ asset('storage/'.$post->cover_image) }}"
                         alt=""
                         width="96" height="72"
                         loading="lazy"
                         class="hw-blog-thumb">
                    @endif
                    <div class="hw-blog-info">
                        <span class="hw-blog-date">{{ ($post->published_at ?? $post->created_at)->translatedFormat('d M Y') }}</span>
                        <span class="hw-blog-ttl">{{ $post->title }}</span>
                        <span class="hw-blog-exc">{{ $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 100) }}</span>
                    </div>
                </a>
                @endforeach
            </div>
            @endif
        </section>
        @endif

        {{-- FAQ --}}
        <section class="hw-section hw-faq" aria-labelledby="faq-title">
            <h2 id="faq-title" class="hw-sec-title">Pertanyaan Umum</h2>
            <div class="hw-faq-list">
                <div class="hw-faq-item">
                    <h3>
                        <button type="button" id="faq-q1" data-faq-toggle aria-controls="faq-a1" aria-expanded="false" class="hw-faq-btn">
                            <span>Apakah perlu akun untuk memesan?</span>
                            <i class="fas fa-chevron-down hw-faq-icon" aria-hidden="true"></i>
                        </button>
                    </h3>
                    <div id="faq-a1" role="region" aria-labelledby="faq-q1" hidden style="height:0;overflow:hidden;transition:height 150ms ease">
                        <p class="hw-faq-ans">Top up game dapat dipesan tanpa login. Untuk OTP, saldo, dan riwayat transaksi, diperlukan akun.</p>
                    </div>
                </div>
                <div class="hw-faq-item">
                    <h3>
                        <button type="button" id="faq-q2" data-faq-toggle aria-controls="faq-a2" aria-expanded="false" class="hw-faq-btn">
                            <span>Berapa lama pesanan diproses?</span>
                            <i class="fas fa-chevron-down hw-faq-icon" aria-hidden="true"></i>
                        </button>
                    </h3>
                    <div id="faq-a2" role="region" aria-labelledby="faq-q2" hidden style="height:0;overflow:hidden;transition:height 150ms ease">
                        <p class="hw-faq-ans">Pesanan diteruskan setelah pembayaran dikonfirmasi. Waktu selesai bergantung pada layanan dan penyedia. Cek status via nomor invoice.</p>
                    </div>
                </div>
                <div class="hw-faq-item">
                    <h3>
                        <button type="button" id="faq-q3" data-faq-toggle aria-controls="faq-a3" aria-expanded="false" class="hw-faq-btn">
                            <span>Salah memasukkan ID game atau data tujuan?</span>
                            <i class="fas fa-chevron-down hw-faq-icon" aria-hidden="true"></i>
                        </button>
                    </h3>
                    <div id="faq-a3" role="region" aria-labelledby="faq-q3" hidden style="height:0;overflow:hidden;transition:height 150ms ease">
                        <p class="hw-faq-ans">Periksa status pada invoice. Jika pesanan belum selesai, gunakan opsi yang tersedia atau hubungi dukungan dengan nomor invoice.</p>
                    </div>
                </div>
                <div class="hw-faq-item">
                    <h3>
                        <button type="button" id="faq-q4" data-faq-toggle aria-controls="faq-a4" aria-expanded="false" class="hw-faq-btn">
                            <span>Metode pembayaran apa saja yang tersedia?</span>
                            <i class="fas fa-chevron-down hw-faq-icon" aria-hidden="true"></i>
                        </button>
                    </h3>
                    <div id="faq-a4" role="region" aria-labelledby="faq-q4" hidden style="height:0;overflow:hidden;transition:height 150ms ease">
                        <p class="hw-faq-ans">@if($paymentMethods->isNotEmpty())Metode aktif: <strong>{{ $paymentMethods->pluck('name')->filter()->implode(', ') }}</strong>. @endif Pengguna yang masuk juga bisa bayar pakai saldo Kiostore.</p>
                    </div>
                </div>
                <div class="hw-faq-item">
                    <h3>
                        <button type="button" id="faq-q5" data-faq-toggle aria-controls="faq-a5" aria-expanded="false" class="hw-faq-btn">
                            <span>Yang perlu diketahui sebelum memesan nomor OTP?</span>
                            <i class="fas fa-chevron-down hw-faq-icon" aria-hidden="true"></i>
                        </button>
                    </h3>
                    <div id="faq-a5" role="region" aria-labelledby="faq-q5" hidden style="height:0;overflow:hidden;transition:height 150ms ease">
                        <p class="hw-faq-ans">Nomor virtual digunakan sementara untuk menerima kode. Layanan tujuan menentukan apakah nomor bisa dipakai. Periksa ketentuan layanan tujuan sebelum memesan.</p>
                    </div>
                </div>
            </div>
        </section>

        {{-- SEO text —  minimal, tidak ada klaim marketing --}}
        <section class="hw-section hw-seo" aria-labelledby="seo-title">
            <h2 id="seo-title" class="hw-seo-title">Produk Digital Kiostore</h2>
            <p class="hw-seo-text">
                Kiostore menyediakan top up game, pulsa, token listrik PLN, e-wallet, dan nomor virtual OTP Server 1 dan Server 2.
                Semua layanan digital, tanpa pengiriman fisik.
                Top up game dapat dipesan tanpa login;
                untuk nomor OTP atau pembayaran pakai saldo, <a href="{{ route('register') }}" class="hw-seo-link">buat akun</a> terlebih dahulu.
                Status pesanan dapat dicek kapan saja di halaman <a href="{{ route('topup.track') }}" class="hw-seo-link">cek pesanan</a>.
            </p>
        </section>

    </div>{{-- .hw-content --}}
</div>{{-- .hw-shell --}}

<style>
/* ── MODE TERANG: latar putih, aksen oranye ─────────────────────── */
/* Variabel diset ulang untuk halaman Home saat data-theme="light"
   agar nilai persisnya sesuai wireframe tanpa mengganggu layout lain. */
[data-theme="light"] .hw-shell {
    --hw-bg:         #ffffff;
    --hw-surface:    #ffffff;
    --hw-border:     rgba(15,23,42,0.10);
    --hw-text:       #111827;
    --hw-text2:      #374151;
    --hw-muted:      #6b7280;
    --hw-chip-idle:  #FDEBDD;
    --hw-chip-text:  #92400e;
    --hw-chip-actbg: #f97316;
    --hw-chip-acttx: #ffffff;
}
/* MODE GELAP: tetap pakai palet yang ada, hanya chip disesuaikan. */
.hw-shell {
    --hw-bg:         var(--bg);
    --hw-surface:    var(--surface);
    --hw-border:     var(--border);
    --hw-text:       var(--text);
    --hw-text2:      var(--text2);
    --hw-muted:      var(--muted);
    --hw-chip-idle:  var(--accent-l);
    --hw-chip-text:  var(--accent);
    --hw-chip-actbg: var(--accent);
    --hw-chip-acttx: #ffffff;
}

/* ── Shell ──────────────────────────────────────────────────────── */
.hw-shell {
    /* Banner edge-to-edge: kompensasi padding .desk-main dengan margin negatif. */
    margin: -16px -16px 0;
    background: var(--hw-bg);
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .hw-shell { margin: -24px -32px 0; }
}

/* ── Banner ─────────────────────────────────────────────────────── */
.hw-banner-wrap { width: 100%; }
.hw-banner-wrap .bs-wrap { margin-bottom: 0; }

/* ── Teks sambutan ──────────────────────────────────────────────── */
.hw-welcome {
    background: var(--hw-chip-idle);
    padding: 7px 16px;
}
.hw-welcome-text {
    font-size: 12px;
    color: var(--hw-chip-text);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

/* ── Konten utama ─────────────────────────────────────────────────
   Padding 16 px kiri-kanan mengikuti .desk-main, tapi hw-shell sudah
   kompensasi, jadi konten lurus dengan elemen halaman lain. */
.hw-content {
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 1024px) {
    .hw-content { padding: 24px 32px 0; }
}

/* ── Section header ─────────────────────────────────────────────── */
.hw-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.hw-sec-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hw-text);
    letter-spacing: -.2px;
}
.hw-sec-link {
    font-size: 12px;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Katalog section (tidak pakai hw-section padding atas) ───────── */
#katalog { margin: 0; }

.hw-section { border-top: 1px solid var(--hw-border); padding-top: 20px; }

/* ── Chip kategori ──────────────────────────────────────────────── */
.hw-chips-wrap {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Edge-to-edge: kompensasi padding hw-content */
    margin: 0 -16px 14px;
    padding: 0 16px 4px;
    scroll-padding-inline: 16px;
}
@media (min-width: 1024px) {
    .hw-chips-wrap { margin: 0 0 14px; padding: 0 0 4px; }
}
.hw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0 16px;
    height: 36px;
    border-radius: 999px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    background: var(--hw-chip-idle);
    color: var(--hw-chip-text);
    transition: background 120ms, color 120ms, transform 80ms;
    -webkit-tap-highlight-color: transparent;
}
.hw-chip:active { transform: scale(.96); }
.hw-chip--active,
.hw-chip[aria-selected="true"] {
    background: var(--hw-chip-actbg);
    color: var(--hw-chip-acttx);
}

/* ── Grid produk ────────────────────────────────────────────────── */
.hw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (min-width: 520px)  { .hw-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 800px)  { .hw-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1100px) { .hw-grid { grid-template-columns: repeat(6, 1fr); } }

/* ── Kartu produk ──────────────────────────────────────────────── */
.hw-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border-radius: 12px;
    padding: 10px 6px 8px;
    background: var(--hw-surface);
    border: 1px solid var(--hw-border);
    transition: transform 100ms, box-shadow 100ms;
    -webkit-tap-highlight-color: transparent;
}
.hw-card:active { transform: scale(.96); }

[data-theme="light"] .hw-card:hover {
    box-shadow: 0 2px 12px rgba(249,115,22,.12);
    border-color: rgba(249,115,22,.3);
}

.hw-card-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--hw-chip-idle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hw-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Placeholder inisial — muncul jika gambar gagal dimuat */
.hw-card-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--hw-chip-actbg);
    background: var(--hw-chip-idle);
    border-radius: 10px;
    letter-spacing: -.5px;
    line-height: 1;
    flex-shrink: 0;
}
.hw-card-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--hw-text);
    text-align: center;
    line-height: 1.35;
    /* Selalu tampil, maks 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

/* ── Tombol Lihat lebih banyak ──────────────────────────────────── */
.hw-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border-radius: 999px;
    border: 1.5px solid var(--hw-chip-actbg);
    background: transparent;
    color: var(--hw-chip-actbg);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 120ms, color 120ms;
    -webkit-tap-highlight-color: transparent;
}
.hw-more-btn:active {
    background: var(--hw-chip-actbg);
    color: #fff;
}

/* ── Kosong ─────────────────────────────────────────────────────── */
.hw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--hw-muted);
    border: 1.5px dashed var(--hw-border);
    border-radius: 12px;
}
.hw-empty i { font-size: 24px; }

/* ── Pengumuman ─────────────────────────────────────────────────── */
.hw-ann-list { display: flex; flex-direction: column; gap: 8px; }
.hw-ann-card {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--hw-border);
    background: var(--hw-surface);
    text-decoration: none;
    transition: border-color 120ms;
}
.hw-ann-card:active { opacity: .85; }
[data-theme="light"] .hw-ann-card:hover { border-color: rgba(249,115,22,.3); }
.hw-ann-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.hw-ann-badge { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 4px; }
.hw-ann-date  { font-size: 11px; color: var(--hw-muted); }
.hw-ann-title { font-size: 13px; font-weight: 700; color: var(--hw-text); line-height: 1.4; margin-bottom: 3px; }
.hw-ann-excerpt { font-size: 12px; color: var(--hw-text2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Blog ────────────────────────────────────────────────────────── */
.hw-blog-list { display: flex; flex-direction: column; gap: 10px; }
.hw-blog-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--hw-border);
    background: var(--hw-surface);
    text-decoration: none;
    transition: border-color 120ms;
}
.hw-blog-card:active { opacity: .85; }
.hw-blog-thumb { width: 72px; aspect-ratio: 4/3; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.hw-blog-info  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-blog-date  { font-size: 11px; color: var(--hw-muted); }
.hw-blog-ttl   { font-size: 13px; font-weight: 700; color: var(--hw-text); line-height: 1.4; }
.hw-blog-exc   { font-size: 12px; color: var(--hw-text2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── FAQ ────────────────────────────────────────────────────────── */
.hw-faq-list { border: 1px solid var(--hw-border); border-radius: 12px; overflow: hidden; }
.hw-faq-item { border-bottom: 1px solid var(--hw-border); }
.hw-faq-item:last-child { border-bottom: none; }
.hw-faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    background: var(--hw-surface);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--hw-text);
    text-align: left;
    font-family: inherit;
    min-height: 44px;
    transition: background 120ms;
    -webkit-tap-highlight-color: transparent;
}
.hw-faq-btn:hover { background: var(--hw-chip-idle); }
.hw-faq-icon {
    font-size: 11px;
    color: var(--hw-muted);
    flex-shrink: 0;
    transition: transform 150ms ease;
}
.hw-faq-btn[aria-expanded="true"] .hw-faq-icon { transform: rotate(180deg); }
.hw-faq-ans {
    padding: 0 14px 13px;
    font-size: 13px;
    color: var(--hw-text2);
    line-height: 1.65;
    background: var(--hw-surface);
}

/* ── SEO ────────────────────────────────────────────────────────── */
.hw-seo { border-top: 1px solid var(--hw-border); }
.hw-seo-title { font-size: 14px; font-weight: 700; color: var(--hw-text); margin-bottom: 6px; }
.hw-seo-text  { font-size: 13px; color: var(--hw-muted); line-height: 1.7; }
.hw-seo-link  { color: var(--hw-chip-actbg); font-weight: 600; }
[data-theme="light"] .hw-seo-link { color: #b8470b; }

/* ── home-card.hidden (Tailwind utility tambahan, sama seperti sebelumnya) ── */
.home-card.hidden  { display: none; }
.home-card.revealed { display: flex; }
</style>
@endsection

@push('scripts')
<script>
/* Tab kategori */
var homeTabs = Array.prototype.slice.call(document.querySelectorAll('[role="tab"]'));

function homeSwitchTab(id, btn) {
    document.querySelectorAll('[role="tabpanel"]').forEach(function (p) {
        if (p.id.indexOf('tab-') === 0) p.hidden = true;
    });
    homeTabs.forEach(function (b) {
        b.setAttribute('aria-selected', 'false');
        b.classList.remove('hw-chip--active');
        b.tabIndex = -1;
    });
    var panel = document.getElementById('tab-' + id);
    if (panel) panel.hidden = false;
    btn.setAttribute('aria-selected', 'true');
    btn.classList.add('hw-chip--active');
    btn.tabIndex = 0;
    btn.scrollIntoView({ block: 'nearest', inline: 'nearest',
        behavior: window.matchMedia('(prefers-reduced-motion:reduce)').matches ? 'auto' : 'smooth' });
}

homeTabs.forEach(function (btn, i) {
    btn.addEventListener('keydown', function (e) {
        var next = null;
        if (e.key === 'ArrowRight') next = homeTabs[i + 1] || homeTabs[0];
        if (e.key === 'ArrowLeft')  next = homeTabs[i - 1] || homeTabs[homeTabs.length - 1];
        if (e.key === 'Home')       next = homeTabs[0];
        if (e.key === 'End')        next = homeTabs[homeTabs.length - 1];
        if (!next) return;
        e.preventDefault();
        next.focus();
        next.click();
    });
});

/* Load more */
function homeLoadMore(tabId) {
    var grid = document.getElementById('grid-' + tabId);
    var btn  = document.getElementById('more-' + tabId);
    if (!grid || !btn) return;
    var exp = btn.dataset.expanded === '1';
    grid.querySelectorAll('.home-card.hidden').forEach(function (c) {
        c.classList.toggle('revealed', !exp);
    });
    btn.textContent = exp ? 'Lihat lebih banyak' : 'Lihat lebih sedikit';
    btn.dataset.expanded = exp ? '0' : '1';
}
function homeLoadMoreAll() {
    var grid = document.getElementById('grid-all');
    var btn  = document.getElementById('more-all');
    if (!grid || !btn) return;
    var exp = btn.dataset.expanded === '1';
    grid.querySelectorAll('.home-card.hidden').forEach(function (c) {
        c.classList.toggle('revealed', !exp);
    });
    btn.textContent = exp ? 'Lihat lebih banyak' : 'Lihat lebih sedikit';
    btn.dataset.expanded = exp ? '0' : '1';
}

/* FAQ accordion */
var faqBtns  = Array.prototype.slice.call(document.querySelectorAll('[data-faq-toggle]'));
var faqOpen  = null;
var faqRM    = window.matchMedia('(prefers-reduced-motion:reduce)').matches;

function faqReveal(panel, show) {
    if (!panel) return;
    clearTimeout(panel._faqTimer);
    panel.hidden = false;
    panel.style.height = panel.getBoundingClientRect().height + 'px';
    requestAnimationFrame(function () {
        panel.style.height = show ? panel.scrollHeight + 'px' : '0px';
    });
    panel._faqTimer = setTimeout(function () {
        panel.style.height = '';
        panel.hidden = !show;
    }, faqRM ? 0 : 160);
}

/* Inisialisasi: buka FAQ pertama */
faqBtns.forEach(function (b) {
    var p = document.getElementById(b.getAttribute('aria-controls'));
    if (p) p.style.height = 'auto';
});
if (faqBtns.length) {
    faqBtns[0].setAttribute('aria-expanded', 'true');
    faqBtns[0].querySelector('.hw-faq-icon').style.transform = 'rotate(180deg)';
    faqOpen = faqBtns[0];
    faqReveal(document.getElementById(faqBtns[0].getAttribute('aria-controls')), true);
}

faqBtns.forEach(function (btn) {
    btn.addEventListener('click', function () {
        var open  = btn.getAttribute('aria-expanded') === 'true';
        var panel = document.getElementById(btn.getAttribute('aria-controls'));
        if (faqOpen && faqOpen !== btn) {
            faqOpen.setAttribute('aria-expanded', 'false');
            faqReveal(document.getElementById(faqOpen.getAttribute('aria-controls')), false);
        }
        faqOpen = open ? null : btn;
        btn.setAttribute('aria-expanded', open ? 'false' : 'true');
        faqReveal(panel, !open);
    });
});
</script>
@endpush