<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $article->title }} - WYZSTORE</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #f39c12;
            --primary-gradient: linear-gradient(135deg, #f39c12, #e67e22);
            --bg: #0b0d0f;
            --surface: #141619;
            --border: rgba(255,255,255,0.08);
            --text-main: #ffffff;
            --text-muted: #e2e8f0; /* Ultra-bright untuk visibilitas maksimal */
            --nav-bg: rgba(11, 13, 15, 0.95);
        }

        body.light-mode {
            --bg: #f8fafc;
            --surface: #ffffff;
            --border: #e2e8f0;
            --text-main: #0f172a; /* Ultra Dark for Light Mode */
            --text-muted: #475569;
            --nav-bg: rgba(255, 255, 255, 0.95);
        }

        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg); color: var(--text-main); transition: 0.3s; padding-top: 75px; }
        
        /* PAKSA BOOTSTRAP MENGIKUTI TEMA */
        .text-muted { color: var(--text-muted) !important; }
        .text-secondary { color: var(--text-muted) !important; }
        
        .navbar-custom {
            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
            background: var(--nav-bg); backdrop-filter: blur(15px);
            border-bottom: 1px solid var(--border); padding: 12px 0;
        }
        .navbar-brand { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.4rem; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; }
        .navbar-brand span {
            background: linear-gradient(135deg, var(--primary) 0%, var(--text-main) 50%, var(--primary) 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: text-slide 3s linear infinite;
        }
        @keyframes text-slide {
            to { background-position: 200% center; }
        }
        .navbar-logo { height: 32px; width: auto; }
        .nav-link { color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
        
        .theme-toggle {
            background: var(--border); border: none; color: var(--text-main);
            width: 38px; height: 38px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; transition: 0.3s;
        }

        /* BANNER SECTION - CLEAN & UNTOUCHED */
        .article-hero {
            width: 100%; height: 450px;
            position: relative; overflow: hidden;
            border-radius: 0 0 40px 40px;
            margin-bottom: 30px; /* Jarak agar tidak menempel ke kotak teks */
        }
        .hero-img {
            width: 100%; 
            background-image: url('{{ \Illuminate\Support\Str::startsWith($article->image_url, ['http', '/']) ? $article->image_url : asset('storage/' . $article->image_url) }}');
            background-size: contain; background-repeat: no-repeat; background-position: center;
        }

        @media (max-width: 768px) { .article-hero { height: 280px; border-radius: 0 0 20px 20px; } }

        .hero-img {
            width: 100%; 
            height: 100%;
            background-image: url('{{ \Illuminate\Support\Str::startsWith($article->image_url, ['http', '/']) ? $article->image_url : asset('storage/' . $article->image_url) }}');
            background-size: contain; background-repeat: no-repeat; background-position: center;
        }

        /* ARTICLE BODY - NO NEGATIVE MARGIN */
        .article-main {
            max-width: 900px; margin: 0 auto 80px;
            position: relative; z-index: 10; padding: 0 20px;
        }

        .content-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 30px; padding: 50px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
        }
        @media (max-width: 768px) { .content-card { padding: 30px 20px; border-radius: 24px; } }

        .art-tag {
            background: var(--primary); color: #000; font-weight: 800;
            padding: 6px 16px; border-radius: 50px; font-size: 0.75rem;
            text-transform: uppercase; letter-spacing: 1px;
            display: inline-block; margin-bottom: 20px;
        }

        .art-title {
            font-family: 'Outfit', sans-serif; font-size: 2.8rem; font-weight: 800;
            line-height: 1.2; margin-bottom: 25px; color: var(--text-main);
        }
        @media (max-width: 768px) { .art-title { font-size: 1.8rem; } }

        .art-meta {
            display: flex; align-items: center; gap: 20px;
            margin-bottom: 40px; padding-bottom: 25px;
            border-bottom: 1px solid var(--border);
            color: var(--text-muted); font-size: 0.9rem;
        }

        .art-text {
            font-size: 1.15rem; line-height: 1.8; color: var(--text-main);
            opacity: 0.9; white-space: pre-line;
        }

        /* SHARE BOX */
        .share-box {
            margin-top: 50px; padding-top: 30px;
            border-top: 1px solid var(--border); text-center;
        }
        .social-btn {
            width: 45px; height: 45px; border-radius: 50%;
            background: var(--border); color: var(--text-main);
            display: inline-flex; align-items: center; justify-content: center;
            text-decoration: none; transition: 0.3s; margin: 0 8px;
        }
        .social-btn:hover { background: var(--primary); color: #000; transform: translateY(-5px); }
        /* PREMIUM FOOTER STYLES */
        footer { 
            background: rgba(10, 12, 16, 0.95); 
            border-top: 1px solid var(--border); 
            padding: 40px 0 20px; 
            margin-top: 0;
        }
        .footer-brand { 
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.8rem; 
            font-weight: 800; 
            margin-bottom: 20px; 
            text-decoration: none !important;
        }
        .footer-brand span {
            background: linear-gradient(135deg, #fff, var(--primary)); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
        }
        .footer-logo { 
            height: 45px; 
            width: auto; }
        .footer-text { 
            color: var(--text-muted); 
            font-size: 0.95rem; 
            line-height: 1.8; 
            max-width: 350px; }
        .footer-heading { 
            font-weight: 700; 
            font-size: 1.1rem; 
            color: var(--text-main); 
            margin-bottom: 25px; 
            position: relative; }
        .footer-heading::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 35px; height: 3px; background: var(--primary); border-radius: 10px; }
        .footer-link { display: block; color: var(--text-muted); text-decoration: none; font-size: 0.95rem; margin-bottom: 12px; transition: all 0.3s; }
        .footer-link:hover { color: var(--primary); padding-left: 5px; }
        .social-circle { 
            width: 40px; height: 40px; 
            border-radius: 50%; 
            background: rgba(255,255,255,0.05); 
            display: flex; align-items: center; justify-content: center; 
            color: #fff; text-decoration: none; 
            transition: all 0.3s; border: 1px solid var(--border);
        }
        .social-circle:hover { background: var(--primary); transform: translateY(-5px); box-shadow: 0 5px 15px var(--primary-glow); border-color: transparent; }
        .footer-copy { 
            text-align: center; 
            color: var(--text-muted); 
            font-size: 0.8rem; 
            margin-top: 20px; 
            padding: 15px 0; 
            border-top: 1px solid var(--border); 
            letter-spacing: 1px; 
            text-transform: uppercase;
            font-weight: 600;
            opacity: 0.8;
        }

        .footer-banner-full {
            width: 100%;
            background: var(--bg);
            margin-top: 50px;
            overflow: hidden;
            position: relative;
        }
        @media (max-width: 768px) {
            .footer-banner-full { margin-top: 30px !important; }
            footer { padding: 15px 0 0 0 !important; }
            footer .row { --bs-gutter-y: 0 !important; margin-bottom: 0 !important; }
            .footer-heading { margin-bottom: 10px !important; font-size: 1rem !important; }
            .footer-link { margin-bottom: 5px !important; font-size: 0.85rem !important; }
            .footer-copy { margin: 0 !important; padding: 5px 0 !important; border-top: none !important; }
            .footer-copy .container { padding: 0 !important; }
            body { padding-bottom: 0 !important; }
        }
        .footer-banner-wrapper {
            width: 100%;
            position: relative;
            background: var(--bg);
            display: flex;
            justify-content: center;
        }
        .footer-promo-image {
            width: 100%;
            max-width: 100vw;
            height: auto;
            display: block;
            object-fit: cover;
        }
        .footer-promo-image.dark-banner {
            mask-image: radial-gradient(ellipse 90% 80% at center, black 10%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 90% 80% at center, black 10%, transparent 100%);
            opacity: 0.9;
            filter: brightness(1.1) contrast(1.05);
        }
        .footer-promo-image.light-banner { display: none; }
        body.light-mode .footer-promo-image.dark-banner { display: none; }
        body.light-mode .footer-promo-image.light-banner { 
            display: block; 
            mask-image: none !important;
            -webkit-mask-image: none !important;
            opacity: 1 !important;
            filter: none !important;
        }
        .banner-glow {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at center, transparent 30%, var(--bg) 100%);
            pointer-events: none;
        }
        body.light-mode .banner-glow { display: none; }
        
        body.light-mode footer { background: #ffffff; border-top-color: rgba(0,0,0,0.05); }
        body.light-mode .footer-heading { color: #111827; }
        body.light-mode .footer-brand { background: linear-gradient(135deg, #111827, var(--primary)); -webkit-background-clip: text; }
        body.light-mode .social-circle { background: rgba(0,0,0,0.03); color: #111827; border-color: rgba(0,0,0,0.08); }
        body.light-mode .social-circle:hover { color: #fff; background: var(--primary); border-color: transparent;}
        
        .pay-slider-container { overflow: hidden; white-space: nowrap; position: relative; padding: 5px 0; }
        .pay-slider { display: flex; gap: 40px; width: max-content; animation: pay-scroll 25s linear infinite; }
        .pay-slider:hover { animation-play-state: paused; }
        @keyframes pay-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .pay-logo { height: 22px; width: auto; object-fit: contain; }
    </style>
</head>
<body>

    <!-- NAVBAR -->
    <nav class="navbar-custom">
        <div class="container d-flex align-items-center justify-content-between">
            <a href="/" class="navbar-brand">
                <img src="{{ asset('images/logo.png') }}" alt="Logo" class="navbar-logo">
                <span>WYZSTORE</span>
            </a>
            <div class="d-flex align-items-center gap-3">
                <a href="/articles" class="nav-link d-none d-md-block">Semua Artikel</a>
                <button class="theme-toggle" id="themeBtn" onclick="toggleTheme()">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- HERO BANNER - FULLY VISIBLE -->
    <div class="article-hero">
        <div class="hero-img"></div>
    </div>

    <!-- CONTENT - STARTS AFTER IMAGE -->
    <main class="article-main">
        <div class="content-card">
            <span class="art-tag">{{ $article->category }}</span>
            <h1 class="art-title">{{ $article->title }}</h1>
            
            <div class="art-meta">
                <span><i class="far fa-calendar-alt me-2"></i>{{ $article->created_at->format('d F Y') }}</span>
                <span><i class="far fa-clock me-2"></i>3 Menit Baca</span>
            </div>

            <div class="art-text">
                {{ $article->content }}
            </div>

                <div class="share-box text-center">
                    <p class="text-muted small mb-3">Bagikan Artikel Ini:</p>
                    <div class="d-flex justify-content-center">
                        <a href="https://wa.me/?text={{ urlencode($article->title . ' ' . url()->current()) }}" target="_blank" class="social-btn"><i class="fab fa-whatsapp"></i></a>
                        <a href="#" class="social-btn"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-btn"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
        </div>

        <div class="text-center mt-5">
            <a href="/articles" class="btn btn-outline-primary rounded-pill px-4 py-2">
                <i class="fas fa-arrow-left me-2"></i> Kembali ke Daftar Artikel
            </a>
        </div>
    </main>

    <!-- FOOTER PROMO BANNER FULL WIDTH -->
    <div class="footer-banner-full">
        <div class="footer-banner-wrapper">
            <!-- Gambar Dark Mode -->
            <img src="{{ asset('images/footer-banner.png') }}" alt="WYZSTORE Promo" class="footer-promo-image dark-banner">
            <!-- Gambar Light Mode -->
            <img src="{{ asset('images/bg-light.png') }}" alt="WYZSTORE Promo" class="footer-promo-image light-banner">
            <div class="banner-glow"></div>
        </div>
    </div>

<footer>
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-4 col-md-6 mb-3">
                <a href="/" class="footer-brand mb-2 d-inline-flex align-items-center gap-2">
                    <img src="{{ $homepage['logo_url'] ?? asset('images/logo.png') }}" alt="Logo" class="navbar-logo">
                    <span>WYZSTORE</span>
                </a>
                <p class="text-muted small mb-3" style="max-width: 300px;">Solusi top up game tercepat, termurah, dan terpercaya di Indonesia. Otomatis masuk dalam hitungan detik 24 jam nonstop.</p>
                <div class="d-flex gap-3 mb-3">
                    <a href="{{ $homepage['wa_link'] ?? '#' }}" class="social-circle"><i class="fab fa-whatsapp"></i></a>
                    <a href="{{ $homepage['ig_link'] ?? '#' }}" class="social-circle"><i class="fab fa-instagram"></i></a>
                    <a href="{{ $homepage['tiktok_link'] ?? '#' }}" class="social-circle"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>
            <div class="col-6 col-lg-2 mb-3">
                <h5 class="footer-heading">Navigasi</h5>
                <a href="/" class="footer-link">Home</a>
                <a href="/#games" class="footer-link">Daftar Game</a>
                <a href="/articles" class="footer-link">Berita & Artikel</a>
            </div>
            <div class="col-6 col-lg-3 mb-3">
                <h5 class="footer-heading">Bantuan</h5>
                <a href="https://wa.me/{{ env('WA_ADMIN_PHONE') }}" class="footer-link">Hubungi Kami</a>
                <a href="/#how-to" class="footer-link">Metode Pembayaran</a>
                <a href="#" class="footer-link">Syarat & Ketentuan</a>
            </div>
            <div class="col-12 col-lg-3 mb-3">
                <h5 class="footer-heading">Metode Pembayaran</h5>
                <div class="pay-slider-container">
                    <div class="pay-slider">
                        @php
                            $logos = isset($homepage['pay_logos']) && !empty($homepage['pay_logos']) 
                                ? explode(',', $homepage['pay_logos']) 
                                : [
                                    'https://upload.wikimedia.org/wikipedia/commons/e/e1/QRIS_logo.svg',
                                    'https://upload.wikimedia.org/wikipedia/commons/7/72/Logo_dana_blue.svg',
                                    'https://upload.wikimedia.org/wikipedia/commons/8/86/Gopay_logo.svg',
                                    'https://upload.wikimedia.org/wikipedia/commons/e/eb/Logo_ovo_purple.svg',
                                    'https://upload.wikimedia.org/wikipedia/commons/9/9d/Logo_Indomaret.png'
                                ];
                        @endphp

                        @foreach($logos as $logo)
                            <img src="{{ trim($logo) }}" class="pay-logo">
                        @endforeach
                        
                        {{-- Duplikasi untuk marquee seamless --}}
                        @foreach($logos as $logo)
                            <img src="{{ trim($logo) }}" class="pay-logo">
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-copy">
            <div class="container">
                <div class="mb-2">&copy; 2025 <span class="text-primary">WYZSTORE</span>. ALL RIGHTS RESERVED.</div>
                <div style="font-size: 0.65rem; opacity: 0.6; letter-spacing: 2px;">POWERED BY GER</div>
            </div>
        </div>
    </div>
</footer>

    <script>
        function toggleTheme() {
            document.body.classList.toggle('light-mode');
            const isLight = document.body.classList.contains('light-mode');
            localStorage.setItem('theme', isLight ? 'light' : 'dark');
            const icon = document.querySelector('#themeBtn i');
            icon.className = isLight ? 'fas fa-sun' : 'fas fa-moon';
        }
        if(localStorage.getItem('theme') === 'light') {
            document.body.classList.add('light-mode');
            document.querySelector('#themeBtn i').className = 'fas fa-sun';
        }
    </script>
</body>
</html>
