@php
    $footerSiteName = \App\Models\Setting::getValue('site_name', config('app.name', 'Kiostore'));
    $blogEnabled = (bool) \App\Models\Setting::getValue('blog_enabled', false);
    $blogShowInFooter = (bool) \App\Models\Setting::getValue('blog_show_in_footer', true);
    $blogTitle = trim((string) \App\Models\Setting::getValue('blog_title', 'Blog')) ?: 'Blog';
    $footerEmail = trim(\App\Models\Setting::getValue('contact_email', ''));
    $footerWhatsappDisplay = trim(\App\Models\Setting::getValue('cs_whatsapp', ''));
    $footerWhatsapp = preg_replace('/[^0-9]/', '', $footerWhatsappDisplay);
    $footerAddress = trim(\App\Models\Setting::getValue('contact_address', ''));
    $footerOperator = trim(\App\Models\Setting::getValue('operator_name', ''));
    $footerHours = trim(\App\Models\Setting::getValue('cs_hours', ''));
@endphp

<footer class="site-footer">
    <div class="site-footer-inner">
        <div class="site-footer-brand">
            <a href="{{ route('home') }}" class="site-footer-name">{{ $footerSiteName }}</a>
            <p>Top up game, pulsa, token PLN, e-wallet, dan nomor virtual OTP. Semua layanan digital, tanpa pengiriman fisik atau ongkos kirim.</p>
        </div>

        <div class="site-footer-navigation">
            <nav class="site-footer-links" aria-label="Tautan layanan">
                <h2>Layanan</h2>
                <a href="{{ route('topup.index') }}">Top up game</a>
                <a href="{{ route('otp.buy') }}">Nomor OTP</a>
                <a href="{{ route('topup.track') }}">Cek pesanan</a>
                <a href="{{ route('api.docs') }}">Dokumentasi API</a>
            </nav>

            <nav class="site-footer-links" aria-label="Informasi situs">
                <h2>Informasi</h2>
                <a href="{{ route('about') }}">Tentang Kami</a>
                <a href="{{ route('contact') }}">Kontak</a>
                <a href="{{ route('privacy') }}">Kebijakan Privasi</a>
                <a href="{{ route('terms') }}">Syarat &amp; Ketentuan</a>
                @if($blogEnabled && $blogShowInFooter)
                    <a href="{{ route('blog.index') }}">{{ $blogTitle }}</a>
                @endif
                <a href="{{ route('announcements.index') }}">Pengumuman</a>
            </nav>
        </div>

        <div class="site-footer-contact">
            <h2>Hubungi</h2>
            @if($footerOperator)<p>Pengelola: {{ $footerOperator }}</p>@endif
            @if($footerEmail)
                <a href="mailto:{{ $footerEmail }}">{{ $footerEmail }}</a>
            @endif
            @if($footerWhatsapp)
                <a href="https://wa.me/{{ $footerWhatsapp }}" target="_blank" rel="noopener noreferrer">WhatsApp: {{ $footerWhatsappDisplay }}</a>
            @endif
            @if($footerHours)
                <p>Jam layanan/balasan: {{ $footerHours }}</p>
            @endif
            @if($footerAddress)
                <p class="site-footer-address">{{ $footerAddress }}</p>
            @endif
            @if(!$footerEmail && !$footerWhatsapp && !$footerAddress && !$footerOperator && !$footerHours)
                <a href="{{ route('contact') }}">Lihat informasi kontak</a>
            @endif
        </div>
    </div>
    <div class="site-footer-bottom">© {{ date('Y') }} {{ $footerSiteName }}</div>
</footer>

<style>
    .site-footer {
        margin-top: 32px;
        border-top: 1px solid var(--border);
        background: var(--surface);
        color: var(--text2);
    }
    .site-footer-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) minmax(0, 1fr);
        gap: 24px;
        max-width: 1280px;
        margin: 0 auto;
        padding: 28px 20px;
    }
    .site-footer-navigation {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .site-footer-brand,
    .site-footer-links,
    .site-footer-contact {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .site-footer-name {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        color: var(--text);
        font-size: 16px;
        font-weight: 700;
    }
    .site-footer-brand p {
        max-width: 34ch;
        color: var(--text2);
        line-height: 1.6;
    }
    .site-footer-contact p {
        overflow-wrap: anywhere;
        line-height: 1.6;
    }
    .site-footer h2 {
        min-height: 44px;
        display: flex;
        align-items: center;
        color: var(--text);
        font-size: 13px;
        font-weight: 700;
    }
    .site-footer-links a,
    .site-footer-contact a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        color: var(--text2);
        overflow-wrap: anywhere;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .site-footer a:hover {
        color: var(--text);
    }
    .site-footer-bottom {
        max-width: 1280px;
        margin: 0 auto;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 12px;
    }
    @media (max-width: 700px) {
        .site-footer-inner {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            padding: 20px 16px;
        }
        .site-footer-brand {
            grid-column: 1 / -1;
        }
        .site-footer-navigation,
        .site-footer-contact {
            grid-column: 1 / -1;
        }
    }
    @media (max-width: 380px) {
        .site-footer-inner {
            grid-template-columns: minmax(0, 1fr);
        }
        .site-footer-navigation {
            grid-template-columns: minmax(0, 1fr);
        }
        .site-footer-brand {
            grid-column: auto;
        }
        .site-footer-contact {
            grid-column: auto;
        }
    }
</style>