import React from 'react'

const CATEGORIES = [
  {
    label: 'Wallpapers',
    description: 'Desktop & mobile backgrounds',
    href: '/wallpapers',
    icon: '🖥️',
    mascot: '/gfx/mascot_wallpapers.webp',
    color: 'from-sky-500/20 to-sky-900/40',
  },
  {
    label: 'Photography',
    description: 'Real-world captures & edits',
    href: '/photography',
    icon: '📷',
    mascot: '/gfx/mascot_photography.webp',
    color: 'from-emerald-500/20 to-emerald-900/40',
  },
  {
    label: 'Skins',
    description: 'App & game skins',
    href: '/skins',
    icon: '🎨',
    mascot: '/gfx/mascot_skins.webp',
    color: 'from-purple-500/20 to-purple-900/40',
  },
  {
    label: 'Digital Art',
    description: 'Illustrations & concept art',
    href: '/other',
    icon: '✏️',
    mascot: '/gfx/mascot_other.webp',
    color: 'from-rose-500/20 to-rose-900/40',
  },
  {
    label: 'Tags Hub',
    description: 'Browse by theme or style',
    href: '/tags',
    icon: '🏷️',
    mascot: '/gfx/mascot_other.webp',
    color: 'from-amber-500/20 to-amber-900/40',
  },
]

function CategoryTile({ cat }) {
  return (
    <a
      href={cat.href}
      className={`group relative flex flex-col justify-end overflow-hidden rounded-2xl bg-gradient-to-br ${cat.color} ring-1 ring-white/5 transition hover:-translate-y-1 hover:ring-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70`}
      style={{ minHeight: '7rem' }}
    >
      <div className="pointer-events-none absolute inset-0 bg-nova-900/20 transition group-hover:bg-nova-900/10" />

      {/* Mascot image — bottom-right, partially overflowing bottom edge */}
      {cat.mascot && (
        <img
          src={cat.mascot}
          alt=""
          aria-hidden="true"
          className="pointer-events-none absolute bottom-0 right-0 h-24 w-auto translate-y-2 object-contain drop-shadow-xl transition-transform duration-300 group-hover:-translate-y-1 group-hover:scale-105"
          loading="lazy"
        />
      )}

      {/* Text label — bottom-left, always readable */}
      <div className="relative z-10 p-3 pr-24">
        {!cat.mascot && (
          <span className="mb-2 block text-2xl" role="img" aria-label={cat.label}>{cat.icon}</span>
        )}
        <p className="font-semibold leading-tight text-white">{cat.label}</p>
        <p className="mt-0.5 text-xs text-nova-300">{cat.description}</p>
      </div>
    </a>
  )
}

/**
 * Static category quick-links. No backend data needed — these are fixed routes.
 */
export default function HomeCategories() {
  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-5 flex items-center justify-between">
        <h2 className="text-xl font-bold text-white">🗂️ Explore Categories</h2>
        <a href="/browse" className="text-sm text-nova-300 hover:text-white transition">
          Browse all →
        </a>
      </div>

      {/* 5 tiles: 2 rows on mobile, single row on xl */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
        {CATEGORIES.map((cat) => (
          <CategoryTile key={cat.href} cat={cat} />
        ))}
      </div>
    </section>
  )
}
