import { createFileRoute } from '@tanstack/react-router'
import { getMenuData } from '~/lib/data'
import { MenuBrowser } from '~/components/menu-browser'

export const Route = createFileRoute('/menu')({
  head: () => ({
    meta: [
      { title: 'Menu | The Great Bear Microbrewery' },
      {
        name: 'description',
        content:
          'Wood-fired pizzas, tandoori & tapas, burgers and artisanal desserts — every dish designed to complement our house beers.',
      },
    ],
  }),
  loader: () => getMenuData(),
  component: MenuPage,
})

function MenuPage() {
  const { categories, items, pairings } = Route.useLoaderData()

  return (
    <div className="flex w-full flex-col">
      {/* Hero / Category Header */}
      <section className="relative w-full overflow-hidden bg-surface-container-lowest py-space-xl">
        <div
          className="absolute inset-0 bg-cover bg-center opacity-20"
          style={{ backgroundImage: "url('/images/menu-hero.jpg')" }}
        />
        <div className="absolute inset-0 bg-gradient-to-t from-surface via-surface/80 to-transparent" />
        <div className="relative mx-auto flex max-w-7xl flex-col items-center px-grid-margin text-center">
          <span className="mb-space-sm text-label-lg uppercase tracking-widest text-primary">
            Artisanal Gastropub Menu
          </span>
          <h1 className="mb-space-md max-w-3xl font-headline-xl text-on-surface">
            Flavors Crafted for the Glass &amp; Plate
          </h1>
          <p className="max-w-xl font-body-lg text-body-lg text-on-surface-variant">
            Every dish on our menu is thoughtfully designed to complement the complex malt profiles
            and hop notes of our freshly brewed house beers.
          </p>
        </div>
      </section>

      {/* Interactive Menu + Sticky Filter */}
      <MenuBrowser categories={categories} items={items} />

      {/* Pairing Recommendations Banner */}
      <section className="mt-space-2xl w-full bg-surface-container-low py-space-xl">
        <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-grid-gutter px-grid-margin md:grid-cols-3">
          <div className="flex flex-col gap-space-sm">
            <span className="text-label-lg uppercase text-primary">Cicerone Approved</span>
            <h2 className="font-headline-lg text-on-surface">
              The Science of Pairing Craft &amp; Kitchen
            </h2>
            <p className="text-body-md text-on-surface-variant">
              Our master brewer collaborates daily with our executive chef to harmonize hop
              bitterness, malt sweetness, and umami richness for an unforgettable tasting journey.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-grid-gutter sm:grid-cols-2 md:col-span-2">
            {pairings.map((pairing) => (
              <div key={pairing.uid} className="rounded-xl bg-surface p-space-lg shadow">
                <span className="mb-space-xs block font-headline-md text-primary">
                  {pairing.title}
                </span>
                <p className="text-body-sm text-on-surface-variant">{pairing.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}
