kozmos-qr-menu/components/CategorySection.tsx

import type { Category } from '@/data/menu'
import MenuItemRow from './MenuItemRow'

type Props = {
  category: Category
  lang: string
  currency: string
}

export default function CategorySection({ category, lang, currency }: Props) {
  const l = lang as 'tr' | 'en'

  return (
    <section id={category.id} className="category-section category-reveal px-4 pt-9 pb-1">
      {/* Category header */}
      <div className="mb-4">
        <div className="flex items-center gap-3 mb-2">
          {/* Emoji badge with gradient ring */}
          <div className="relative flex-shrink-0">
            {/* Outer glow ring */}
            <div
              className="absolute inset-0 rounded-2xl blur-sm opacity-60"
              style={{
                background: 'linear-gradient(135deg, #4AAFA8, #5C8A5C)',
                transform: 'scale(1.15)',
              }}
            />
            <div
              className="relative w-11 h-11 rounded-2xl flex items-center justify-center text-xl"
              style={{
                background: 'linear-gradient(135deg, rgba(74,175,168,0.18), rgba(92,138,92,0.12))',
                border: '1px solid rgba(74,175,168,0.30)',
              }}
            >
              {category.emoji}
            </div>
          </div>

          {/* Title */}
          <div className="flex-1 min-w-0">
            <h2
              className="font-display font-semibold italic text-coffee leading-tight"
              style={{ fontSize: '1.2rem' }}
            >
              {category.label[l]}
            </h2>
          </div>

          {/* Item count badge */}
          <span
            className="flex-shrink-0 font-body text-[0.6rem] font-semibold tracking-widest uppercase rounded-full px-2.5 py-0.5"
            style={{
              color: '#8A7265',
              background: 'rgba(61,43,31,0.07)',
              border: '1px solid rgba(61,43,31,0.10)',
            }}
          >
            {category.items.length}
          </span>
        </div>

        {/* Decorative divider */}
        <div className="flex items-center gap-2 ml-1">
          <div className="w-1.5 h-1.5 rounded-full bg-teal opacity-70" />
          <div
            className="flex-1 h-px"
            style={{
              background:
                'linear-gradient(90deg, rgba(74,175,168,0.40) 0%, rgba(212,200,176,0.40) 60%, transparent 100%)',
            }}
          />
          <div className="w-1 h-1 rounded-full bg-gold opacity-50" />
        </div>
      </div>

      {/* Items card */}
      <div
        className="rounded-2xl overflow-hidden"
        style={{
          background: 'rgba(253,250,245,0.72)',
          border: '1px solid rgba(212,200,176,0.60)',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          boxShadow:
            '0 2px 16px rgba(61,43,31,0.06), 0 1px 3px rgba(61,43,31,0.04)',
        }}
      >
        {/* Thin top gradient line */}
        <div
          className="h-px w-full"
          style={{
            background:
              'linear-gradient(90deg, transparent, rgba(74,175,168,0.35), transparent)',
          }}
        />

        <div className="px-4 pb-1 pt-0.5">
          {category.items.map((item, i) => (
            <MenuItemRow
              key={item.id}
              item={item}
              lang={lang}
              currency={currency}
              index={i}
              isLast={i === category.items.length - 1}
            />
          ))}
        </div>
      </div>
    </section>
  )
}