import { createPortal } from 'react-dom'
import { Link } from 'react-router-dom'
import './CategoriesDock.css'

/**
 * Fixed glossy dock — images and labels are hardcoded.
 * Slugs match production API categories on shirinibalout.com.
 * Portaled to document.body so backdrop-filter is not killed by
 * overflow-x: hidden / transform on .app ancestors.
 */
const DOCK_CATEGORIES = [
  {
    nameFa: 'کیک',
    nameEn: 'Cake',
    image: '/categories/Cake.png',
    slug: 'cake',
  },
  {
    nameFa: 'شیرینی',
    nameEn: 'Pastry',
    image: '/categories/pastry.png',
    slug: 'pastry',
  },
  {
    nameFa: 'سوهان',
    nameEn: 'Sohan',
    image: '/categories/sohan.png',
    slug: 'sohan',
  },
  {
    nameFa: 'دسر',
    nameEn: 'Dessert',
    image: '/categories/desert.png',
    slug: 'dessert',
  },
  {
    nameFa: 'شکلات',
    nameEn: 'Chocolate',
    image: '/categories/Choclate.png',
    slug: 'choclate',
  },
  {
    nameFa: 'باقلوا',
    nameEn: 'Baklava',
    image: '/categories/baghlava.png',
    slug: 'baklava-and-halva',
  },
] as const

export default function CategoriesDock() {
  return createPortal(
    <nav className="categories-dock" aria-label="دسته‌بندی محصولات">
      <div
        className="categories-dock__glass"
        aria-hidden="true"
        style={{
          // Inline so Vite/LightningCSS cannot drop the unprefixed property.
          backdropFilter: 'blur(20px) saturate(170%)',
          WebkitBackdropFilter: 'blur(20px) saturate(170%)',
        }}
      />
      <ul className="categories-dock__list">
        {DOCK_CATEGORIES.map((category) => (
          <li key={category.slug} className="categories-dock__item">
            <Link
              to={`/products/${category.slug}`}
              className="categories-dock__link"
            >
              <span className="categories-dock__image-wrap">
                <img src={category.image} alt="" className="categories-dock__image" />
              </span>
              <span className="categories-dock__names">
                <span className="categories-dock__name-fa">{category.nameFa}</span>
                <span className="categories-dock__name-en">{category.nameEn}</span>
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </nav>,
    document.body,
  )
}