'use client'

import Link from 'next/link'

const links = [
  { href: '/', label: '🏠 Beranda' },
  { href: '/games', label: '🎮 Game Top Up' },
  { href: '/products', label: '📱 App Premium' },
  { href: '/check-order', label: '🔍 Cek Order' },
]

export default function Footer() {
  return (
    <footer style={{
      background: '#0d0d14',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      padding: '60px 24px 30px',
      marginTop: 'auto',
    }}>
      <div style={{ maxWidth: '1280px', margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
          gap: '40px',
          marginBottom: '40px',
        }}>
          {/* Brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
              <div style={{
                width: 36,
                height: 36,
                background: 'linear-gradient(135deg, #f59e0b, #d97706)',
                borderRadius: '10px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '18px',
              }}>⚡</div>
              <span style={{ fontFamily: 'Rajdhani, sans-serif', fontWeight: 700, fontSize: '20px', color: '#f1f5f9' }}>
                Amane<span style={{ color: '#f59e0b' }}>Nime</span> Store
              </span>
            </div>
            <p style={{ color: '#64748b', fontSize: '13px', lineHeight: '1.6' }}>
              Platform top up game & digital products terpercaya. Proses cepat, harga terbaik, layanan 24 jam.
            </p>
            <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
              {['QRIS', 'DANA', 'Transfer'].map(m => (
                <span key={m} style={{
                  padding: '4px 10px',
                  background: 'rgba(245,158,11,0.1)',
                  border: '1px solid rgba(245,158,11,0.2)',
                  borderRadius: '6px',
                  fontSize: '11px',
                  color: '#f59e0b',
                  fontWeight: 600,
                }}>{m}</span>
              ))}
            </div>
          </div>

          {/* Menu */}
          <div>
            <h4 style={{ color: '#f1f5f9', fontWeight: 600, marginBottom: '16px', fontSize: '14px' }}>Menu</h4>
            {links.map(link => (
              <Link key={link.href} href={link.href} style={{
                display: 'block',
                color: '#64748b',
                textDecoration: 'none',
                fontSize: '14px',
                marginBottom: '10px',
                transition: 'color 0.2s',
              }}
                onMouseEnter={e => (e.target as HTMLElement).style.color = '#f59e0b'}
                onMouseLeave={e => (e.target as HTMLElement).style.color = '#64748b'}
              >
                {link.label}
              </Link>
            ))}
          </div>

          {/* Akun */}
          <div>
            <h4 style={{ color: '#f1f5f9', fontWeight: 600, marginBottom: '16px', fontSize: '14px' }}>Akun</h4>
            {[
              { href: '/auth/login', label: 'Masuk' },
              { href: '/auth/register', label: 'Daftar' },
              { href: '/dashboard', label: 'Dashboard' },
              { href: '/dashboard/orders', label: 'Riwayat Order' },
            ].map(link => (
              <Link key={link.href} href={link.href} style={{
                display: 'block',
                color: '#64748b',
                textDecoration: 'none',
                fontSize: '14px',
                marginBottom: '10px',
                transition: 'color 0.2s',
              }}
                onMouseEnter={e => (e.target as HTMLElement).style.color = '#f59e0b'}
                onMouseLeave={e => (e.target as HTMLElement).style.color = '#64748b'}
              >
                {link.label}
              </Link>
            ))}
          </div>

          {/* Info */}
          <div>
            <h4 style={{ color: '#f1f5f9', fontWeight: 600, marginBottom: '16px', fontSize: '14px' }}>Info</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {[
                { icon: '⚡', text: 'Proses Otomatis' },
                { icon: '🔒', text: 'Transaksi Aman' },
                { icon: '💬', text: 'Support 24/7' },
                { icon: '🎮', text: '100+ Game' },
              ].map(item => (
                <div key={item.text} style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#64748b', fontSize: '13px' }}>
                  <span>{item.icon}</span>
                  {item.text}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom */}
        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.06)',
          paddingTop: '24px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: '12px',
        }}>
          <p style={{ color: '#374151', fontSize: '13px' }}>
            © 2026 AmaneNime Store. All rights reserved.
          </p>
          <p style={{ color: '#374151', fontSize: '13px' }}>
            Powered by <span style={{ color: '#f59e0b' }}>AmaneNime</span>
          </p>
        </div>
      </div>
    </footer>
  )
}
