# Project: Premium Mega Menu

## Architecture
- **Database Schema**: Update `Menu` and `MenuItem` models in Prisma schema (`apps/backend/prisma/schema.prisma`) to support `rootImage`, `columnImage`, and `hoverImage` fields.
- **Backend API**: `apps/backend/src/routes/menus.ts` handles saving and loading the menu tree payload and database fields.
- **MCP Server**: `apps/mcp-server/index.ts` and tool suite handles querying, modifying, and auditing menu structure.
- **Admin Panel UI**: `apps/admin/src/pages/MenuManagerPage.tsx` and `apps/spa/src/components/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` allow configuring and rendering the 3-image layout.
- **Storefront UI**: `apps/website/src/components/navigation/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` render the 3-image layout using `next/image` with lazy loading and fade-in micro-animations.

## Milestones
| # | Name | Scope | Dependencies | Status |
|---|------|-------|-------------|--------|
| M1 | E2E Testing Track | Create requirement-driven E2E tests for the 3-image mega menu layout. | None | PLANNED |
| M2 | DB & Backend Updates | Prisma migration, backend routes & schemas, and MCP tools updates. | None | PLANNED |
| M3 | Storefront & Admin UI | Implement admin configuration UI and Next.js storefront image rendering. | M2 | PLANNED |
| M4 | E2E & Adversarial Hardening | Pass E2E tests, add adversarial tests, run integrity audit. | M1, M3 | PLANNED |

## Interface Contracts
### Database Schema
- `Menu` model: `rootImage String?`
- `MenuItem` model: `columnImage String?`, `hoverImage String?`

### MegaMenuPayload Type Definitions
- `MegaMenuPayload`: `{ rootImage?: string; ... }`
- `MenuColumn`: `{ columnImage?: string; ... }`
- `MenuLink`: `{ hoverImage?: string; ... }`

## Code Layout
- **Database**: `apps/backend/prisma/schema.prisma`
- **Shared Types**: `packages/types/index.ts`
- **Backend Routes**: `apps/backend/src/routes/menus.ts`
- **MCP Server**: `apps/mcp-server/menu-tools.ts`, `apps/mcp-server/menu-toolkit.ts`
- **Admin UI**: `apps/admin/src/pages/MenuManagerPage.tsx`
- **SPA UI**: `apps/spa/src/components/DesktopMegaMenu.tsx`, `apps/spa/src/components/MobileDrawer.tsx`, `apps/spa/src/store/menuStore.ts`
- **Website UI**: `apps/website/src/components/navigation/DesktopMegaMenu.tsx`, `apps/website/src/components/navigation/menuTypes.ts`