'use client'

import Link from 'next/link'
import { useState, useEffect, useRef } from 'react'

/* ─── Static fallback data ─────────────────────────────────────────────── */
const fallbackGames = [
  { name: 'Free Fire', slug: 'free-fire', img: 'https://play-lh.googleusercontent.com/WWcssH7fmGPPBxD9RoMkGjRBNF0GNFE1piikHCJFzGxANr3MbKvmWDgfmqyAEqUGq1k=w480-h960-rw', popular: true },
  { name: 'Mobile Legends', slug: 'mobile-legends', img: 'https://play-lh.googleusercontent.com/9jF0kJGPVi0kTqBxPIv-vU4fTFBEVRsBIuBgXc1PEV7bFGO2mfD6-6Kpg5bNqk7Wkua=w480-h960-rw', popular: true },
  { name: 'PUBG Mobile', slug: 'pubg-mobile', img: 'https://play-lh.googleusercontent.com/JRd05pyBH41qjgsJuWduRJpDeZG0Hnb0yjf2nWqO7VaGKL10-G5UIygxED-WNOc3pg=w480-h960-rw', popular: true },
  { name: 'Voucher Roblox', slug: 'roblox', img: 'https://play-lh.googleusercontent.com/WNWZaxi9RdJKe2GQM3vqXIAkk9RJgGqhL2bHME8K4HumRMaKM0DGLIZDR2b0RFEJ0A=w480-h960-rw', popular: true },
  { name: 'Magic Chess Go Go', slug: 'magic-chess', img: 'https://play-lh.googleusercontent.com/D7ASMKJMR0OE3i8n1lOoD0uFGMiKNIgNnkD0MZ9aCNMuW1OwEF5kP1dclUEOGSFMg=w480-h960-rw', popular: true },
  { name: 'Call of Duty Mobile', slug: 'call-of-duty', img: 'https://play-lh.googleusercontent.com/4OdnFTPKnqOWbmmrC9EGSmHJNFJTlicpD3bIRoRIGFnbGSFJ3cFwJtLMkXmkNGM6A4I=w480-h960-rw', popular: true },
]

const fallbackGamesAll = [
  ...fallbackGames,
  { name: 'Honor of Kings', slug: 'honor-of-kings', img: 'https://play-lh.googleusercontent.com/A4HGf_gCLMBXVhSVqFmGxqcGMGTF4U-P0vKFVR6MhRyTOzV1UlH_VDRJnOZDrORkiRE=w480-h960-rw', popular: false },
  { name: 'Valorant', slug: 'valorant', img: 'https://play-lh.googleusercontent.com/FMtH3iBffJtHMnCH_jRHBLGWy7HbFJUU1ViQFpPHCMsNe_t0S-s-sMQzE-hMFKFOw=w480-h960-rw', popular: false },
  { name: 'Call of Duty Mobile', slug: 'call-of-duty-2', img: 'https://play-lh.googleusercontent.com/4OdnFTPKnqOWbmmrC9EGSmHJNFJTlicpD3bIRoRIGFnbGSFJ3cFwJtLMkXmkNGM6A4I=w480-h960-rw', popular: true },
  { name: 'Lords Mobile', slug: 'lords-mobile', img: 'https://play-lh.googleusercontent.com/CXOWsLg0v7kVe8ov2LkEOm9YGaSN4hXE8UKbzU5UW4GSWB1b_d6yt0gxDuA-2rX3jw=w480-h960-rw', popular: false },
  { name: 'Speed Drifters', slug: 'speed-drifters', img: 'https://play-lh.googleusercontent.com/DkDFGHs4CdIHfXCWiuQJtq_U3lHJPJCd_PcWj4zRWu5LWEH-dkCHwzG5q8ZvA5DlnQ=w480-h960-rw', popular: false },
  { name: 'Light of Thel', slug: 'light-of-thel', img: 'https://play-lh.googleusercontent.com/k-IQFgUjlTT4TLnlKvPeJByZ_oZkqBXr31e-Mm6JFhBWz0A1EcRbhYqtQ3pJLFpHBg=w480-h960-rw', popular: false },
]

const categoryTabs = [
  { key: 'all', label: 'Top Up', icon: '⚡' },
  { key: 'voucher', label: 'Voucher', icon: '🎫' },
  { key: 'pulsa', label: 'Pulsa', icon: '📶' },
  { key: 'token', label: 'Token Listrik', icon: '⚡' },
  { key: 'paket-data', label: 'Paket Data', icon: '📡' },
  { key: 'voucher-data', label: 'Voucher Data', icon: '🌐' },
  { key: 'telpon', label: 'Telpon & SMS', icon: '📞' },
  { key: 'tv', label: 'TV', icon: '📺' },
  { key: 'etoll', label: 'E-Toll', icon: '🛣️' },
  { key: 'hiburan', label: 'Hiburan', icon: '🎬' },
  { key: 'emoney', label: 'E-Money', icon: '💳' },
]

const statsTemplate = [
  { label: 'Transaksi Sukses', key: 'orders', icon: '✅' },
  { label: 'Pengguna Aktif', key: 'users', icon: '👤' },
  { label: 'Game Tersedia', key: 'games', icon: '🎮' },
  { label: 'Proses Cepat', key: 'speed', value: '<1 Min', icon: '⚡' },
]

const features = [
  { icon: '⚡', title: 'Proses Instan', desc: 'Top up otomatis langsung diproses setelah pembayaran dikonfirmasi', color: '#f59e0b' },
  { icon: '🔒', title: 'Transaksi Aman', desc: 'Pembayaran via QRIS terverifikasi dengan enkripsi end-to-end', color: '#10b981' },
  { icon: '💰', title: 'Harga Terbaik', desc: 'Harga kompetitif dengan kualitas layanan premium terjamin', color: '#3b82f6' },
  { icon: '🎮', title: '100+ Game', desc: 'Koleksi lengkap game populer Indonesia dan global tersedia', color: '#8b5cf6' },
]

/* ─── Component ─────────────────────────────────────────────────────────── */
export default function HomePage({
  realStats, dbCategories, dbDigitalProducts, banners, popup,
}: {
  realStats?: any, dbCategories?: any[], dbDigitalProducts?: any[], banners?: any[], popup?: any
}) {
  const [showPopup, setShowPopup] = useState(false)
  const [currentBanner, setCurrentBanner] = useState(0)
  const [activeCategory, setActiveCategory] = useState('all')
  const [search, setSearch] = useState('')
  const bannerRef = useRef<HTMLDivElement>(null)
  const tabsRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (popup?.active && !sessionStorage.getItem('popup_seen')) {
      setShowPopup(true)
      sessionStorage.setItem('popup_seen', 'true')
    }
  }, [popup])

  useEffect(() => {
    if (!banners || banners.length <= 1) return
    const iv = setInterval(() => setCurrentBanner(p => (p + 1) % banners.length), 5000)
    return () => clearInterval(iv)
  }, [banners])

  /* Build game list from db or fallback */
  const allGames: any[] = dbCategories && dbCategories.length > 0
    ? dbCategories.map((c, i) => ({
        name: c.name,
        slug: c.slug,
        img: c.thumbnail || fallbackGamesAll.find(g => g.name.toLowerCase().includes(c.name.toLowerCase().split(' ')[0]))?.img || null,
        popular: i < 6,
        rank: i,
      }))
    : fallbackGamesAll.map((g, i) => ({ ...g, rank: i }))

  const popularGames = allGames.filter(g => g.popular).slice(0, 6)
  const filteredGames = allGames.filter(g =>
    !search || g.name.toLowerCase().includes(search.toLowerCase())
  )

  return (
    <div style={{ paddingTop: '64px', background: '#0d0d14', minHeight: '100vh' }}>

      {/* ══════════════════════════════════════
          BANNER SLIDER (Full width, prominent)
          ══════════════════════════════════════ */}
      {banners && banners.length > 0 ? (
        <section style={{ position: 'relative', background: '#111118', overflow: 'hidden' }}>
          <div
            ref={bannerRef}
            style={{
              display: 'flex',
              transition: 'transform 0.6s cubic-bezier(0.4,0,0.2,1)',
              transform: `translateX(-${currentBanner * 100}%)`,
            }}
          >
            {banners.map((b, i) => (
              <div key={i} style={{ minWidth: '100%', position: 'relative' }}>
                {b.link ? (
                  <Link href={b.link} style={{ display: 'block' }}>
                    <img src={b.image} alt={`Banner ${i + 1}`} style={{ width: '100%', maxHeight: '380px', objectFit: 'cover', display: 'block' }} />
                  </Link>
                ) : (
                  <img src={b.image} alt={`Banner ${i + 1}`} style={{ width: '100%', maxHeight: '380px', objectFit: 'cover', display: 'block' }} />
                )}
              </div>
            ))}
          </div>

          {/* Prev / Next arrows */}
          {banners.length > 1 && (
            <>
              <button
                onClick={() => setCurrentBanner(p => (p - 1 + banners.length) % banners.length)}
                style={{
                  position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
                  width: 36, height: 36, borderRadius: '50%',
                  background: 'rgba(0,0,0,0.55)', border: '1px solid rgba(255,255,255,0.15)',
                  color: '#fff', cursor: 'pointer', fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  zIndex: 10, transition: 'background 0.2s',
                }}
                onMouseEnter={e => (e.currentTarget.style.background = 'rgba(245,158,11,0.5)')}
                onMouseLeave={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.55)')}
              >‹</button>
              <button
                onClick={() => setCurrentBanner(p => (p + 1) % banners.length)}
                style={{
                  position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
                  width: 36, height: 36, borderRadius: '50%',
                  background: 'rgba(0,0,0,0.55)', border: '1px solid rgba(255,255,255,0.15)',
                  color: '#fff', cursor: 'pointer', fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  zIndex: 10, transition: 'background 0.2s',
                }}
                onMouseEnter={e => (e.currentTarget.style.background = 'rgba(245,158,11,0.5)')}
                onMouseLeave={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.55)')}
              >›</button>
            </>
          )}

          {/* Dot indicators */}
          {banners.length > 1 && (
            <div style={{ position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 6, zIndex: 10 }}>
              {banners.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setCurrentBanner(i)}
                  style={{
                    width: currentBanner === i ? 24 : 8, height: 8, borderRadius: 4,
                    background: currentBanner === i ? '#f59e0b' : 'rgba(255,255,255,0.4)',
                    border: 'none', cursor: 'pointer', transition: 'all 0.3s', padding: 0,
                  }}
                />
              ))}
            </div>
          )}
        </section>
      ) : (
        /* Fallback hero banner when no banners configured */
        <section style={{
          background: 'linear-gradient(135deg, #1a0a2e 0%, #16213e 40%, #0f3460 70%, #1a0a2e 100%)',
          padding: '0',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* Decorative blobs */}
          <div style={{ position: 'absolute', top: '-50px', right: '-50px', width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%)', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', bottom: '-30px', left: '20%', width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(245,158,11,0.2), transparent 70%)', pointerEvents: 'none' }} />

          <div style={{ maxWidth: 1280, margin: '0 auto', padding: '48px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
            <div style={{ flex: 1, minWidth: 260 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: 'rgba(245,158,11,0.15)', border: '1px solid rgba(245,158,11,0.3)',
                borderRadius: 100, padding: '5px 14px', fontSize: 12, color: '#f59e0b', fontWeight: 600, marginBottom: 20,
              }}>
                <span style={{ width: 6, height: 6, background: '#f59e0b', borderRadius: '50%', boxShadow: '0 0 6px #f59e0b' }} />
                LAYANAN TOP UP 24 JAM
              </div>
              <h1 className="font-game" style={{ fontSize: 'clamp(32px, 5vw, 60px)', fontWeight: 700, lineHeight: 1.1, color: '#fff', marginBottom: 16, letterSpacing: '-1px' }}>
                Top Up Game<br />
                <span style={{ background: 'linear-gradient(135deg, #f59e0b, #a855f7)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
                  PROSES DETIKAN
                </span>
              </h1>
              <p style={{ color: '#94a3b8', fontSize: 16, lineHeight: 1.7, marginBottom: 28, maxWidth: 480 }}>
                Topup Mobile Legends, Free Fire, PUBG, dan 100+ game lainnya. Proses otomatis, harga terbaik!
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Link href="/games" className="btn btn-primary" style={{ fontSize: 15, padding: '13px 28px' }}>
                  🎮 Top Up Sekarang
                </Link>
                <Link href="/check-order" className="btn btn-secondary" style={{ fontSize: 15, padding: '13px 28px' }}>
                  🔍 Cek Order
                </Link>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', maxWidth: 360, justifyContent: 'center' }}>
              {fallbackGames.slice(0, 4).map((g, i) => (
                <Link key={g.slug} href={`/games/${g.slug}`} style={{ textDecoration: 'none' }}>
                  <div style={{
                    width: 80, height: 80, borderRadius: 16, overflow: 'hidden',
                    border: '2px solid rgba(255,255,255,0.1)',
                    transition: 'transform 0.2s, border-color 0.2s',
                    animation: `float ${2 + i * 0.4}s ease-in-out infinite`,
                  }}
                    onMouseEnter={e => { (e.currentTarget as HTMLElement).style.transform = 'scale(1.1)'; (e.currentTarget as HTMLElement).style.borderColor = 'rgba(245,158,11,0.6)' }}
                    onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = 'scale(1)'; (e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.1)' }}
                  >
                    <img src={g.img} alt={g.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={e => { (e.target as HTMLImageElement).style.display = 'none' }} />
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ══════════════════════════════════════
          PRODUK POPULER (horizontal scroll row)
          ══════════════════════════════════════ */}
      <section style={{ padding: '32px 0 24px', background: '#0d0d14' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <h2 style={{ fontSize: 20, fontWeight: 700, color: '#f1f5f9', display: 'flex', alignItems: 'center', gap: 8, margin: 0 }}>
              <span style={{ color: '#f59e0b' }}>⭐</span> Produk Populer
            </h2>
            <Link href="/games" style={{ fontSize: 13, color: '#f59e0b', textDecoration: 'none', fontWeight: 600 }}>
              Lihat Semua →
            </Link>
          </div>

          {/* Horizontal scroll */}
          <div style={{
            display: 'flex',
            gap: 14,
            overflowX: 'auto',
            paddingBottom: 8,
            scrollbarWidth: 'none',
            WebkitOverflowScrolling: 'touch',
          }}>
            {popularGames.map((game, i) => (
              <Link key={game.slug + i} href={`/games/${game.slug}`} style={{ textDecoration: 'none', flexShrink: 0 }}>
                <div style={{
                  width: 150,
                  borderRadius: 16,
                  overflow: 'hidden',
                  background: '#16161f',
                  border: '1px solid rgba(255,255,255,0.08)',
                  transition: 'transform 0.2s, box-shadow 0.2s',
                  cursor: 'pointer',
                  position: 'relative',
                }}
                  onMouseEnter={e => {
                    (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)'
                    ;(e.currentTarget as HTMLElement).style.boxShadow = '0 12px 32px rgba(245,158,11,0.15)'
                  }}
                  onMouseLeave={e => {
                    (e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
                    ;(e.currentTarget as HTMLElement).style.boxShadow = 'none'
                  }}
                >
                  {/* Populer badge */}
                  <div style={{
                    position: 'absolute', top: 8, left: 8, zIndex: 5,
                    background: '#f59e0b', color: '#000', fontSize: 10, fontWeight: 700,
                    padding: '2px 8px', borderRadius: 6,
                  }}>Populer</div>

                  {game.img ? (
                    <img src={game.img} alt={game.name}
                      style={{ width: '100%', height: 150, objectFit: 'cover', display: 'block' }}
                      onError={e => { (e.target as HTMLImageElement).src = `https://placehold.co/150x150/1a1a2e/ffffff?text=${encodeURIComponent(game.name.split(' ')[0])}` }}
                    />
                  ) : (
                    <div style={{
                      width: '100%', height: 150,
                      background: 'linear-gradient(135deg, rgba(245,158,11,0.15), rgba(139,92,246,0.1))',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 48,
                    }}>🎮</div>
                  )}

                  <div style={{ padding: '10px 10px 12px' }}>
                    <div style={{ fontSize: 12, fontWeight: 600, color: '#f1f5f9', lineHeight: 1.3 }}>
                      {game.name}
                    </div>
                    <div style={{ fontSize: 11, color: '#94a3b8', marginTop: 2 }}>Top Up</div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════
          PILIH GAME — full catalogue with filters
          ══════════════════════════════════════ */}
      <section style={{ padding: '8px 0 48px', background: '#0d0d14' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 20px' }}>

          {/* Header row */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
            <h2 style={{ fontSize: 20, fontWeight: 700, color: '#f1f5f9', display: 'flex', alignItems: 'center', gap: 8, margin: 0 }}>
              🎮 Pilih Game
            </h2>
            {/* Search */}
            <div style={{ position: 'relative', width: 240 }}>
              <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: '#64748b', fontSize: 14 }}>🔍</span>
              <input
                type="text"
                placeholder="Cari game..."
                value={search}
                onChange={e => setSearch(e.target.value)}
                style={{
                  width: '100%', padding: '9px 14px 9px 36px',
                  background: '#16161f', border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: 10, color: '#f1f5f9', fontSize: 13, outline: 'none',
                }}
              />
            </div>
          </div>

          {/* Category filter tabs */}
          <div
            ref={tabsRef}
            style={{
              display: 'flex', gap: 8, overflowX: 'auto',
              paddingBottom: 4, scrollbarWidth: 'none',
              marginBottom: 24,
            }}
          >
            {categoryTabs.map(tab => (
              <button
                key={tab.key}
                onClick={() => setActiveCategory(tab.key)}
                style={{
                  flexShrink: 0,
                  display: 'flex', alignItems: 'center', gap: 6,
                  padding: '8px 16px',
                  borderRadius: 100,
                  border: activeCategory === tab.key
                    ? '1px solid rgba(245,158,11,0.6)'
                    : '1px solid rgba(255,255,255,0.08)',
                  background: activeCategory === tab.key
                    ? 'rgba(245,158,11,0.12)'
                    : 'rgba(255,255,255,0.03)',
                  color: activeCategory === tab.key ? '#f59e0b' : '#94a3b8',
                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  whiteSpace: 'nowrap', transition: 'all 0.2s',
                }}
              >
                <span style={{ fontSize: 14 }}>{tab.icon}</span>
                {tab.label}
              </button>
            ))}
          </div>

          {/* Top Up sub-label */}
          {activeCategory === 'all' && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
              <span style={{ width: 4, height: 18, background: '#f59e0b', borderRadius: 2 }} />
              <span style={{ fontSize: 15, fontWeight: 700, color: '#f1f5f9' }}>Top Up</span>
            </div>
          )}

          {/* Game grid */}
          {activeCategory === 'all' ? (
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
              gap: 14,
            }}>
              {filteredGames.map((game: any, i) => (
                <Link key={game.slug + i} href={`/games/${game.slug}`} style={{ textDecoration: 'none' }}>
                  <div style={{
                    borderRadius: 14, overflow: 'hidden',
                    background: '#16161f', border: '1px solid rgba(255,255,255,0.07)',
                    cursor: 'pointer', transition: 'transform 0.2s, box-shadow 0.2s',
                    position: 'relative',
                  }}
                    onMouseEnter={e => {
                      (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)'
                      ;(e.currentTarget as HTMLElement).style.boxShadow = '0 12px 32px rgba(0,0,0,0.4)'
                      ;(e.currentTarget as HTMLElement).style.borderColor = 'rgba(245,158,11,0.3)'
                    }}
                    onMouseLeave={e => {
                      (e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
                      ;(e.currentTarget as HTMLElement).style.boxShadow = 'none'
                      ;(e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.07)'
                    }}
                  >
                    {game.popular && (
                      <div style={{
                        position: 'absolute', top: 7, left: 7, zIndex: 5,
                        background: '#f59e0b', color: '#000', fontSize: 9, fontWeight: 700,
                        padding: '2px 7px', borderRadius: 5, letterSpacing: 0.3,
                      }}>Populer</div>
                    )}
                    {game.img ? (
                      <img src={game.img} alt={game.name}
                        style={{ width: '100%', aspectRatio: '1/1', objectFit: 'cover', display: 'block' }}
                        onError={e => { (e.target as HTMLImageElement).src = `https://placehold.co/150x150/1a1a2e/ffffff?text=${encodeURIComponent(game.name.split(' ')[0])}` }}
                      />
                    ) : (
                      <div style={{
                        width: '100%', aspectRatio: '1/1',
                        background: 'linear-gradient(135deg, rgba(245,158,11,0.12), rgba(139,92,246,0.08))',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 40,
                      }}>🎮</div>
                    )}
                    <div style={{ padding: '8px 8px 10px', textAlign: 'center' }}>
                      <div style={{ fontSize: 12, fontWeight: 600, color: '#f1f5f9', lineHeight: 1.3 }}>{game.name}</div>
                      <div style={{ fontSize: 10, color: '#64748b', marginTop: 2 }}>Top Up</div>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            /* Other category CTA */
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              padding: '80px 24px', textAlign: 'center',
              border: '1px dashed rgba(255,255,255,0.1)', borderRadius: 20,
            }}>
              <div style={{ fontSize: 64, marginBottom: 20 }}>
                {categoryTabs.find(t => t.key === activeCategory)?.icon}
              </div>
              <h3 style={{ fontSize: 20, fontWeight: 700, color: '#f1f5f9', marginBottom: 10 }}>
                {categoryTabs.find(t => t.key === activeCategory)?.label}
              </h3>
              <p style={{ color: '#64748b', fontSize: 14, marginBottom: 24 }}>
                Segera tersedia. Saat ini silakan cek koleksi Top Up Game kami.
              </p>
              <Link href="/games" className="btn btn-primary" style={{ padding: '12px 28px' }}>
                🎮 Lihat Top Up Game
              </Link>
            </div>
          )}
        </div>
      </section>

      {/* ══════════════════════════════════════
          STATS STRIP
          ══════════════════════════════════════ */}
      <section style={{ padding: '40px 20px', background: '#111118', borderTop: '1px solid rgba(255,255,255,0.05)', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: 12 }}>
            {statsTemplate.map(stat => (
              <div key={stat.label} style={{ textAlign: 'center', padding: '16px 8px' }}>
                <div style={{ fontSize: 26, marginBottom: 6 }}>{stat.icon}</div>
                <div className="font-game" style={{ fontSize: 26, fontWeight: 700, color: '#f59e0b', marginBottom: 4 }}>
                  {stat.value || (realStats ? realStats[stat.key as string] : '—')}
                </div>
                <div style={{ color: '#64748b', fontSize: 12 }}>{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════
          FEATURES
          ══════════════════════════════════════ */}
      <section style={{ padding: '72px 20px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 52 }}>
            <h2 className="font-game" style={{ fontSize: 34, fontWeight: 700, color: '#f1f5f9', marginBottom: 12 }}>
              Kenapa <span className="gradient-text">AmaneNime Store</span>?
            </h2>
            <p style={{ color: '#64748b', fontSize: 16, maxWidth: 480, margin: '0 auto' }}>
              Pengalaman belanja digital yang cepat, aman, dan menyenangkan
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20 }}>
            {features.map(f => (
              <div key={f.title} className="card" style={{ padding: '28px 24px' }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 14,
                  background: `${f.color}18`, border: `1px solid ${f.color}28`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 22, marginBottom: 18,
                }}>{f.icon}</div>
                <h3 style={{ color: '#f1f5f9', fontWeight: 700, fontSize: 15, marginBottom: 8 }}>{f.title}</h3>
                <p style={{ color: '#64748b', fontSize: 13, lineHeight: 1.6 }}>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════
          CTA
          ══════════════════════════════════════ */}
      <section style={{ padding: '64px 20px', background: '#0d0d14' }}>
        <div style={{
          maxWidth: 760, margin: '0 auto', textAlign: 'center',
          background: 'linear-gradient(135deg, rgba(245,158,11,0.07) 0%, rgba(139,92,246,0.07) 100%)',
          border: '1px solid rgba(245,158,11,0.18)',
          borderRadius: 24, padding: '56px 36px',
        }}>
          <h2 className="font-game" style={{ fontSize: 34, fontWeight: 700, color: '#f1f5f9', marginBottom: 14 }}>
            Siap Top Up Sekarang? ⚡
          </h2>
          <p style={{ color: '#94a3b8', fontSize: 16, marginBottom: 28 }}>
            Daftar gratis dan nikmati top up yang lebih mudah & cepat
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Link href="/auth/register" className="btn btn-primary" style={{ fontSize: 15, padding: '13px 30px' }}>
              Daftar Gratis
            </Link>
            <Link href="/games" className="btn btn-secondary" style={{ fontSize: 15, padding: '13px 30px' }}>
              Lihat Produk
            </Link>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════
          POPUP MODAL
          ══════════════════════════════════════ */}
      {showPopup && popup && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 9999,
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
          background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(6px)',
        }}>
          <div className="card" style={{ width: '100%', maxWidth: 480, maxHeight: '85vh', position: 'relative', overflowY: 'auto', animation: 'scaleIn 0.3s ease-out' }}>
            <button
              onClick={() => setShowPopup(false)}
              style={{
                position: 'absolute', top: 14, right: 14, zIndex: 10,
                width: 30, height: 30, borderRadius: '50%',
                background: 'rgba(0,0,0,0.5)', color: '#fff',
                border: '1px solid rgba(255,255,255,0.1)', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14,
              }}
            >✕</button>
            {popup.image && <img src={popup.image} alt="Popup" style={{ width: '100%', maxHeight: 240, objectFit: 'cover' }} />}
            <div style={{ padding: 28 }}>
              {popup.title && <h2 style={{ fontSize: 22, fontWeight: 700, color: '#f1f5f9', marginBottom: 14 }}>{popup.title}</h2>}
              {popup.content && <div style={{ color: '#94a3b8', fontSize: 14, lineHeight: 1.6 }} dangerouslySetInnerHTML={{ __html: popup.content }} />}
              <button onClick={() => setShowPopup(false)} className="btn btn-primary" style={{ width: '100%', marginTop: 20, padding: 12 }}>
                Tutup
              </button>
            </div>
          </div>
        </div>
      )}

      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes scaleIn { from { opacity:0; transform:scale(0.93) } to { opacity:1; transform:scale(1) } }
        @keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
        section::-webkit-scrollbar { display: none; }
        div::-webkit-scrollbar { display: none; }
      ` }} />
    </div>
  )
}
