import { notFound } from 'next/navigation'
import { getDictionary, hasLocale } from './dictionaries'
import { getCategories } from '@/data/menu'
import Header from '@/components/Header'
import CategorySection from '@/components/CategorySection'
import BottomTabBar from '@/components/BottomTabBar'
import WhatsAppButton from '@/components/WhatsAppButton'

export default async function MenuPage({
  params,
}: {
  params: Promise<{ lang: string }>
}) {
  const { lang } = await params
  if (!hasLocale(lang)) notFound()

  const dict = await getDictionary(lang)
  const categories = await getCategories()

  return (
    <>
      <Header dict={dict} />

      {/* Sticky category nav — renders directly below header via sticky positioning */}
      <BottomTabBar categories={categories} lang={lang} />

      <main
        className="relative min-h-screen"
        style={{ paddingTop: 'var(--header-h)', paddingBottom: '32px' }}
      >
        {/* Hero gradient fade from header */}
        <div
          aria-hidden="true"
          className="h-6 w-full"
          style={{
            background:
              'linear-gradient(180deg, rgba(31,20,10,0.10) 0%, transparent 100%)',
          }}
        />

        {/* Welcome strip */}
        <div className="px-4 pt-2 pb-1">
          <div
            className="rounded-2xl px-4 py-3 flex items-center gap-3"
            style={{
              background:
                'linear-gradient(135deg, rgba(74,175,168,0.10) 0%, rgba(200,168,80,0.07) 100%)',
              border: '1px solid rgba(74,175,168,0.18)',
            }}
          >
            <span className="text-2xl">🌊</span>
            <div>
              <p
                className="font-display italic text-coffee font-semibold leading-tight"
                style={{ fontSize: '0.95rem' }}
              >
                Kozmos Beach &amp; More
              </p>
              <p
                className="font-body text-muted leading-snug mt-0.5"
                style={{ fontSize: '0.68rem' }}
              >
                {lang === 'tr'
                  ? 'Taze malzemeler · Ege lezzetleri · Deniz kenarı'
                  : 'Fresh ingredients · Aegean flavours · Seaside'}
              </p>
            </div>
          </div>
        </div>

        {categories.map((category) => (
          <CategorySection
            key={category.id}
            category={category}
            lang={lang}
            currency={dict.currency}
          />
        ))}

        <div className="h-4" aria-hidden="true" />
      </main>

      <WhatsAppButton
        message={dict.whatsapp.message}
        label={dict.whatsapp.label}
      />
    </>
  )
}