// Complete, improved, and type-safe MainMenu with Firebase integration & premium UI
// ✅ FIXED: Removed desktop view toggle buttons, kept mobile-only view toggling
// ✅ i18n: All UI strings localized (nl, en, de, fr)

import React, { useState, useEffect, useMemo, useCallback } from "react";
import {
  Container,
  Box,
  Typography,
  Stack,
  Chip,
  Paper,
  useTheme,
  alpha,
  useMediaQuery,
  Button,
  Alert,
  CircularProgress,
  Backdrop,
  Snackbar,
  Fab,
  Skeleton,
} from "@mui/material";
import {
  KeyboardArrowUpRounded as ScrollTopIcon,
  SortRounded as SortIcon,
  StarRounded as StarIcon,
  LocationOnRounded as LocationIcon,
  SetMealRounded as SushiIcon,
  Co2Rounded as FreshIcon,
  WorkspacePremiumRounded as PremiumIcon,
  DiamondRounded as DiamondIcon,
  StorefrontRounded as SupermarketIcon,
  PhoneRounded as PhoneIcon,
  WavesRounded as CoastalIcon,
  SailingRounded as SailingIcon,
  RefreshRounded as RefreshIcon,
  CloudOffRounded as OfflineIcon,
  ErrorOutlineRounded as ErrorIcon,
  ShoppingCartRounded as CartIcon,
  TrendingUpRounded as TrendingIcon,
  CelebrationRounded as CelebrationIcon,
} from "@mui/icons-material";
import {
  AnimatePresence,
  motion,
  LayoutGroup,
  type Variants,
} from "framer-motion";
import { createPortal } from "react-dom";
import { useTranslation } from "react-i18next";

import Header from "../common/Header";
import SearchBar from "./SearchBar";
import CategoryFilter from "./CategoryFilter";
import ProductCard from "./ProductCard";
import type { Product } from "./ProductCard";
import { useCart, type CartItem } from "../Cart/CartContext";

// Firebase services
import {
  ProductService,
  CategoryService,
  AnalyticsService,
  FirebaseErrorHandler,
  OfflineService,
  type AppCategory,
} from "../../firebase/services";

/* ============================================================================
   Animations
   ==========================================================================*/
const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.02,
      delayChildren: 0.05,
      ease: [0.4, 0, 0.2, 1],
    },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 8, scale: 0.98 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: { type: "spring", stiffness: 150, damping: 20, mass: 0.8 },
  },
  exit: {
    opacity: 0,
    y: -4,
    scale: 0.98,
    transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
  },
};

const heroVariants: Variants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
  },
};

const cartHelperVariants: Variants = {
  hidden: { opacity: 0, scale: 0.8, y: -20, filter: "blur(10px)" },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { type: "spring", stiffness: 300, damping: 25, duration: 0.6 },
  },
  exit: {
    opacity: 0,
    scale: 0.9,
    y: -10,
    filter: "blur(5px)",
    transition: { duration: 0.4, ease: [0.4, 0, 0.2, 1] },
  },
};

const MotionBox = motion(Box);
const MotionSnackbar = motion(Snackbar);

/* ============================================================================
   Opening Hours Utils (Europe/Amsterdam, structured result for i18n rendering)
   ==========================================================================*/
type OpeningInterval = {
  start: `${number}:${number}`;
  end: `${number}:${number}`;
};
type WeeklyOpeningHours = Record<0 | 1 | 2 | 3 | 4 | 5 | 6, OpeningInterval[]>;

const AMSTERDAM_TZ = "Europe/Amsterdam";

/** Haftalık saatler — özelleştirilebilir */
const OPENING_HOURS: WeeklyOpeningHours = {
  0: [{ start: "08:00", end: "18:00" }], // Sun
  1: [{ start: "08:00", end: "18:00" }], // Mon
  2: [{ start: "08:00", end: "18:00" }],
  3: [{ start: "08:00", end: "18:00" }],
  4: [{ start: "08:00", end: "18:00" }],
  5: [{ start: "08:00", end: "18:00" }],
  6: [{ start: "08:00", end: "18:00" }], // Sat
};

const toMinutes = (hhmm: string) => {
  const [h, m] = hhmm.split(":").map(Number);
  return (h || 0) * 60 + (m || 0);
};
const pad2 = (n: number) => n.toString().padStart(2, "0");
const formatHHMM = (mins: number) => {
  const h = Math.floor(mins / 60);
  const m = mins % 60;
  return `${pad2(h)}:${pad2(m)}`;
};

function getAmsterdamNowParts(d = new Date()) {
  const parts = new Intl.DateTimeFormat("en-GB", {
    timeZone: AMSTERDAM_TZ,
    hour: "2-digit",
    minute: "2-digit",
    hourCycle: "h23",
    weekday: "short",
    timeZoneName: "short",
  }).formatToParts(d);
  const get = (type: string) => parts.find((p) => p.type === type)?.value || "";
  const weekdayMap: Record<string, 0 | 1 | 2 | 3 | 4 | 5 | 6> = {
    Sun: 0,
    Mon: 1,
    Tue: 2,
    Wed: 3,
    Thu: 4,
    Fri: 5,
    Sat: 6,
  };
  const hour = parseInt(get("hour"), 10);
  const minute = parseInt(get("minute"), 10);
  const weekday = weekdayMap[get("weekday")] ?? 0;
  const tzShort = get("timeZoneName") || "";
  return { hour, minute, weekday, tzShort };
}

function isWithin(nowM: number, startM: number, endM: number) {
  if (startM === endM) return false;
  if (endM < startM) {
    // Overnight interval (e.g., 22:00–02:00)
    return nowM >= startM || nowM < endM;
  }
  return nowM >= startM && nowM < endM;
}

function findNextOpening(
  nowM: number,
  weekday: 0 | 1 | 2 | 3 | 4 | 5 | 6,
  hours: WeeklyOpeningHours
) {
  for (
    let offset = 0 as 0 | 1 | 2 | 3 | 4 | 5 | 6;
    offset < 7;
    offset = ((offset + 1) % 7) as any
  ) {
    const day = ((weekday + offset) % 7) as 0 | 1 | 2 | 3 | 4 | 5 | 6;
    const intervals = hours[day] || [];
    for (const it of intervals) {
      const s = toMinutes(it.start);
      const e = toMinutes(it.end);
      // If today: only consider future starts
      if (offset === 0) {
        if ((e < s && nowM < s) || (e >= s && nowM < s)) {
          return { dayOffset: offset, startM: s };
        }
      } else {
        return { dayOffset: offset, startM: s };
      }
    }
  }
  return null;
}

function findCurrentIntervalEnd(nowM: number, todays: OpeningInterval[]) {
  for (const it of todays) {
    const s = toMinutes(it.start);
    const e = toMinutes(it.end);
    if (isWithin(nowM, s, e)) {
      const endDayOffset = e < s ? 1 : 0;
      return { endM: e, endDayOffset };
    }
  }
  return null;
}

function computeOpenStatus(hours: WeeklyOpeningHours) {
  const { hour, minute, weekday, tzShort } = getAmsterdamNowParts();
  const nowM = hour * 60 + minute;
  const todays = hours[weekday] || [];

  const open = todays.some((it) =>
    isWithin(nowM, toMinutes(it.start), toMinutes(it.end))
  );

  const currentClose = open ? findCurrentIntervalEnd(nowM, todays) : null;
  const nextOpen = open ? null : findNextOpening(nowM, weekday, hours);

  return {
    isOpen: open,
    nowM,
    weekday,
    tzShort,
    todays,
    currentClose, // { endM, endDayOffset } | null
    nextOpen, // { dayOffset, startM } | null
  };
}

function minutesUntil(fromM: number, toM: number, dayOffset: number) {
  const minutesInDay = 24 * 60;
  if (dayOffset === 0) return Math.max(0, toM - fromM);
  // wrap to next days
  return Math.max(
    0,
    minutesInDay - fromM + (dayOffset - 1) * minutesInDay + toM
  );
}

function getWeekdayName(
  dayIndex: number,
  lng: string,
  style: "long" | "short" = "long"
) {
  // Use Intl for proper localized weekday names
  const ref = new Date(Date.UTC(2025, 7, 17 + ((dayIndex - 0 + 7) % 7))); // arbitrary week, align Sun=0
  return new Intl.DateTimeFormat(lng, { weekday: style }).format(ref);
}

/* ============================================================================
   Scroll To Top with Progress Ring (robust: detects scroll container + portal)
   ==========================================================================*/
const EnhancedScrollTop: React.FC = () => {
  const theme = useTheme();
  const { t } = useTranslation();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const isTablet = useMediaQuery(theme.breakpoints.down("md"));
  const [isVisible, setIsVisible] = useState(false);
  const [scrollProgress, setScrollProgress] = useState(0);

  const getScrollableAncestor = useCallback((start?: Element | null) => {
    if (typeof window === "undefined") return null;
    let el: Element | null =
      start ||
      document.getElementById("menu-section") ||
      document.querySelector("main") ||
      document.getElementById("root") ||
      document.body;

    while (el && el !== document.body) {
      const style = window.getComputedStyle(el);
      const oy = style.overflowY;
      const scrollable =
        (oy === "auto" || oy === "scroll" || oy === "overlay") &&
        (el as HTMLElement).scrollHeight > (el as HTMLElement).clientHeight;
      if (scrollable) return el as HTMLElement;
      el = el.parentElement;
    }

    const docEl = document.scrollingElement || document.documentElement;
    return (docEl as HTMLElement) || document.body;
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;

    const container = getScrollableAncestor(
      document.getElementById("menu-section")
    );

    const useWindow =
      container === document.body ||
      container === document.documentElement ||
      container === document.scrollingElement;

    const target: HTMLElement | Window = useWindow
      ? window
      : (container as HTMLElement);

    let ticking = false;

    const readMetrics = () => {
      if (useWindow) {
        const top =
          window.pageYOffset || document.documentElement.scrollTop || 0;
        const height =
          (document.scrollingElement || document.documentElement).scrollHeight -
          window.innerHeight;
        return { top, height: Math.max(1, height) };
      } else {
        const el = container as HTMLElement;
        return {
          top: el.scrollTop,
          height: Math.max(1, el.scrollHeight - el.clientHeight),
        };
      }
    };

    const handleScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const { top, height } = readMetrics();
        setScrollProgress(Math.min(top / height, 1));
        const threshold = isMobile ? 80 : 150;
        setIsVisible(top > threshold);
        ticking = false;
      });
    };

    // initial measure
    handleScroll();

    target.addEventListener("scroll", handleScroll as any, { passive: true });
    window.addEventListener("resize", handleScroll, { passive: true });

    return () => {
      target.removeEventListener("scroll", handleScroll as any);
      window.removeEventListener("resize", handleScroll);
    };
  }, [getScrollableAncestor, isMobile]);

  const buttonSize = isMobile ? 56 : isTablet ? 64 : 72;
  const baseBottom = isMobile ? 20 : isTablet ? 24 : 32;
  const baseRight = isMobile ? 20 : isTablet ? 24 : 32;

  const bottomWithSafeArea = `calc(${baseBottom}px + env(safe-area-inset-bottom, 0px))`;
  const rightWithSafeArea = `calc(${baseRight}px + env(safe-area-inset-right, 0px))`;

  const primary = theme.palette.primary.main;
  const primaryDark = theme.palette.primary.dark;
  const secondary = theme.palette.secondary.main;
  const secondaryDark = theme.palette.secondary.dark;

  if (typeof window === "undefined") return null;

  return createPortal(
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, scale: 0.85, y: 20 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.85, y: 20 }}
          transition={{
            type: "spring",
            stiffness: 260,
            damping: 20,
            duration: 0.3,
          }}
          style={{
            position: "fixed",
            bottom: bottomWithSafeArea,
            right: rightWithSafeArea,
            zIndex: 1400,
          }}
        >
          <motion.div
            whileHover={{
              scale: isMobile ? 1 : 1.08,
              rotate: isMobile ? 0 : -5,
              transition: { duration: 0.2 },
            }}
            whileTap={{ scale: 0.95 }}
          >
            <Box sx={{ position: "relative" }}>
              {/* Progress ring */}
              <svg
                width={buttonSize + 8}
                height={buttonSize + 8}
                aria-hidden
                style={{
                  position: "absolute",
                  top: -4,
                  left: -4,
                  transform: "rotate(-90deg)",
                }}
              >
                <circle
                  cx={(buttonSize + 8) / 2}
                  cy={(buttonSize + 8) / 2}
                  r={(buttonSize + 8) / 2 - 2}
                  fill="none"
                  stroke={alpha(primary, 0.2)}
                  strokeWidth="2"
                />
                <motion.circle
                  cx={(buttonSize + 8) / 2}
                  cy={(buttonSize + 8) / 2}
                  r={(buttonSize + 8) / 2 - 2}
                  fill="none"
                  stroke={primary}
                  strokeWidth="3"
                  strokeLinecap="round"
                  strokeDasharray={`${
                    2 * Math.PI * ((buttonSize + 8) / 2 - 2)
                  }`}
                  initial={{
                    strokeDashoffset: 2 * Math.PI * ((buttonSize + 8) / 2 - 2),
                  }}
                  animate={{
                    strokeDashoffset:
                      (1 - scrollProgress) *
                      2 *
                      Math.PI *
                      ((buttonSize + 8) / 2 - 2),
                  }}
                  transition={{ duration: 0.1 }}
                />
              </svg>

              <Fab
                aria-label={t("scrollToTop", { defaultValue: "Scroll to top" })}
                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
                sx={{
                  width: buttonSize,
                  height: buttonSize,
                  background: `linear-gradient(135deg, ${primary} 0%, ${secondary} 50%, ${primaryDark} 100%)`,
                  backdropFilter: "blur(20px)",
                  border: `2px solid ${alpha(primary, 0.3)}`,
                  boxShadow: `
                    0 8px 32px ${alpha(primary, 0.4)},
                    0 0 0 1px ${alpha("#ffffff", 0.1)} inset,
                    0 2px 16px ${alpha("#000000", 0.1)}
                  `,
                  color: "white",
                  position: "relative",
                  overflow: "hidden",
                  "&:hover": {
                    background: `linear-gradient(135deg, ${primaryDark} 0%, ${secondaryDark} 50%, ${primary} 100%)`,
                    boxShadow: `
                      0 12px 40px ${alpha(primary, 0.5)},
                      0 0 0 1px ${alpha("#ffffff", 0.2)} inset,
                      0 4px 20px ${alpha("#000000", 0.15)}
                    `,
                  },
                  "&::before": {
                    content: '""',
                    position: "absolute",
                    inset: 0,
                    background: `radial-gradient(circle at 30% 30%, ${alpha(
                      "#ffffff",
                      0.2
                    )} 0%, transparent 50%)`,
                    pointerEvents: "none",
                  },
                }}
              >
                <motion.div
                  animate={{ y: [0, -2, 0], rotate: [0, 3, -3, 0] }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                >
                  <ScrollTopIcon
                    sx={{
                      fontSize: isMobile ? 24 : isTablet ? 28 : 32,
                      filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
                    }}
                  />
                </motion.div>
              </Fab>
            </Box>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>,
    document.body
  );
};

/* ============================================================================
   Product Grid Layout
   ==========================================================================*/
interface EnhancedProductGridProps {
  viewMode: "grid" | "list";
  children: React.ReactNode;
}

const EnhancedProductGrid: React.FC<EnhancedProductGridProps> = ({
  viewMode,
  children,
}) => {
  const isMobile = useMediaQuery((t: any) => t.breakpoints.down("sm"));
  const isTablet = useMediaQuery((t: any) => t.breakpoints.down("md"));
  const isLarge = useMediaQuery((t: any) => t.breakpoints.up("lg"));
  const isXLarge = useMediaQuery((t: any) => t.breakpoints.up("xl"));

  const getGridConfig = () => {
    // ✅ List view only available on mobile
    if (viewMode === "list" && isMobile) {
      return {
        columns: "1fr",
        gap: 2,
        minHeight: 180,
      };
    }

    // Always grid view for desktop/tablet
    let columns: string;
    let gap: number;
    if (isMobile) {
      columns = "repeat(1, 1fr)";
      gap = 3;
    } else if (isTablet) {
      columns = "repeat(2, 1fr)";
      gap = 3;
    } else if (isXLarge) {
      columns = "repeat(4, 1fr)";
      gap = 5;
    } else if (isLarge) {
      columns = "repeat(3, 1fr)";
      gap = 4;
    } else {
      columns = "repeat(3, 1fr)";
      gap = 4;
    }
    return { columns, gap, minHeight: isMobile ? 380 : 420 };
  };

  const { columns, gap, minHeight } = getGridConfig();

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: columns,
        gap,
        width: "100%",
        alignItems: "stretch",
        "& > *": { minHeight, height: "100%" },

        // leave space for scroll-to-top FAB
        pb: {
          xs: "calc(120px + env(safe-area-inset-bottom, 0px))",
          sm: "calc(130px + env(safe-area-inset-bottom, 0px))",
          md: "calc(140px + env(safe-area-inset-bottom, 0px))",
        },

        "@media (max-width: 480px)": { gridTemplateColumns: "1fr", gap: 2 },
        "@media (min-width: 481px) and (max-width: 768px)": {
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 2.5,
        },
        "@media (min-width: 769px) and (max-width: 1024px)": {
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 3,
        },
        "@media (min-width: 1025px) and (max-width: 1200px)": {
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 3.5,
        },
        "@media (min-width: 1201px)": {
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 4,
        },
      }}
    >
      {children}
    </Box>
  );
};

/* ============================================================================
   First Item Cart Helper
   ==========================================================================*/
interface CartHelperProps {
  isVisible: boolean;
  onClose: () => void;
  addedItem: CartItem | null;
}

const FirstItemCartHelper: React.FC<CartHelperProps> = ({
  isVisible,
  onClose,
  addedItem,
}) => {
  const theme = useTheme();
  const { t } = useTranslation();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <AnimatePresence>
      {isVisible && (
        <MotionSnackbar
          open={isVisible}
          onClose={onClose}
          anchorOrigin={{ vertical: "top", horizontal: "center" }}
          autoHideDuration={4000}
          variants={cartHelperVariants}
          initial="hidden"
          animate="visible"
          exit="exit"
          sx={{
            top: isMobile ? 80 : 100,
            "& .MuiSnackbarContent-root": {
              minWidth: isMobile ? "90vw" : 420,
              maxWidth: isMobile ? "95vw" : 500,
            },
          }}
        >
          <motion.div
            animate={{ scale: [1, 1.02, 1], rotate: [0, 1, -1, 0] }}
            transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
          >
            <Paper
              elevation={0}
              sx={{
                p: { xs: 2.5, sm: 3 },
                borderRadius: { xs: 3, sm: 4 },
                background: `linear-gradient(135deg, ${theme.palette.success.main} 0%, ${theme.palette.primary.main} 100%)`,
                color: "white",
                boxShadow: `0 12px 40px ${alpha(
                  theme.palette.success.main,
                  0.4
                )}, 0 0 0 1px ${alpha("#ffffff", 0.2)} inset`,
                position: "relative",
                overflow: "hidden",
                "&::before": {
                  content: '""',
                  position: "absolute",
                  inset: 0,
                  background: `
                    radial-gradient(circle at 20% 80%, ${alpha(
                      "#ffffff",
                      0.1
                    )} 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, ${alpha(
                      "#ffffff",
                      0.1
                    )} 0%, transparent 50%)
                  `,
                  pointerEvents: "none",
                },
              }}
            >
              <Stack
                direction="row"
                spacing={2}
                alignItems="center"
                sx={{ position: "relative", zIndex: 1 }}
              >
                <motion.div
                  animate={{ rotate: [0, -10, 10, 0], scale: [1, 1.1, 1] }}
                  transition={{
                    duration: 1.5,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                >
                  <Box
                    sx={{
                      width: { xs: 50, sm: 60 },
                      height: { xs: 50, sm: 60 },
                      borderRadius: "50%",
                      background: alpha("#ffffff", 0.2),
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      backdropFilter: "blur(10px)",
                      border: `2px solid ${alpha("#ffffff", 0.3)}`,
                      boxShadow: `0 8px 32px ${alpha("#000000", 0.2)}`,
                    }}
                  >
                    <CartIcon
                      sx={{
                        fontSize: { xs: 24, sm: 28 },
                        color: "#ffffff",
                        filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
                      }}
                    />
                  </Box>
                </motion.div>

                <Box sx={{ flex: 1, minWidth: 0 }}>
                  <Stack spacing={0.5}>
                    <Typography
                      variant="h6"
                      sx={{
                        fontWeight: 800,
                        fontSize: { xs: "1rem", sm: "1.2rem" },
                        display: "flex",
                        alignItems: "center",
                        gap: 1,
                      }}
                    >
                      <CelebrationIcon sx={{ fontSize: 20 }} />
                      {t("firstItemAddedTitle", {
                        defaultValue: "First item added!",
                      })}
                    </Typography>
                    <Typography
                      variant="body1"
                      sx={{
                        fontSize: { xs: "0.85rem", sm: "0.9rem" },
                        opacity: 0.95,
                        fontWeight: 500,
                      }}
                    >
                      {t("addedToCartMessage", {
                        defaultValue: "{{name}} is in your cart",
                        name: addedItem?.name || "",
                      })}
                    </Typography>
                    <Typography
                      variant="body2"
                      sx={{
                        fontSize: { xs: "0.75rem", sm: "0.8rem" },
                        opacity: 0.8,
                        display: "flex",
                        alignItems: "center",
                        gap: 0.5,
                        mt: 0.5,
                      }}
                    >
                      <TrendingIcon sx={{ fontSize: 14 }} />
                      {t("viewCart", { defaultValue: "View cart" })}
                    </Typography>
                  </Stack>
                </Box>

                <motion.div
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                >
                  <Button
                    variant="outlined"
                    size="small"
                    onClick={() => {
                      window.scrollTo({ top: 0, behavior: "smooth" });
                      onClose();
                    }}
                    sx={{
                      color: "#ffffff",
                      borderColor: alpha("#ffffff", 0.5),
                      fontWeight: 600,
                      fontSize: { xs: "0.75rem", sm: "0.8rem" },
                      px: { xs: 2, sm: 2.5 },
                      py: { xs: 0.5, sm: 0.75 },
                      borderRadius: 2,
                      minWidth: { xs: 70, sm: 80 },
                      backdropFilter: "blur(10px)",
                      background: alpha("#ffffff", 0.1),
                      "&:hover": {
                        borderColor: "#ffffff",
                        background: alpha("#ffffff", 0.2),
                        transform: "translateY(-1px)",
                        boxShadow: `0 4px 12px ${alpha("#000000", 0.3)}`,
                      },
                    }}
                  >
                    {t("view", { defaultValue: "View" })}
                  </Button>
                </motion.div>
              </Stack>
            </Paper>
          </motion.div>
        </MotionSnackbar>
      )}
    </AnimatePresence>
  );
};

/* ============================================================================
   Loading Skeleton
   ==========================================================================*/
const SushiProductSkeleton: React.FC = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.92 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.6 }}
    >
      <Paper
        elevation={0}
        sx={{
          borderRadius: { xs: 4, sm: 6 },
          overflow: "hidden",
          background: `linear-gradient(135deg, ${alpha(
            theme.palette.background.paper,
            0.9
          )} 0%, ${alpha(theme.palette.primary.main, 0.02)} 100%)`,
          backdropFilter: "blur(20px)",
          border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
          position: "relative",
          "&::before": {
            content: '""',
            position: "absolute",
            inset: 0,
            background: `linear-gradient(45deg, transparent 30%, ${alpha(
              theme.palette.primary.main,
              0.08
            )} 50%, transparent 70%)`,
            transform: "translateX(-100%)",
            animation: "shimmer 2.2s infinite",
          },
          "@keyframes shimmer": {
            "0%": { transform: "translateX(-100%)" },
            "100%": { transform: "translateX(100%)" },
          },
        }}
      >
        <Skeleton
          variant="rectangular"
          height={isMobile ? 200 : 240}
          sx={{
            borderRadius: 0,
            background: `linear-gradient(90deg, ${alpha(
              theme.palette.primary.main,
              0.1
            )} 25%, ${alpha(theme.palette.primary.main, 0.18)} 50%, ${alpha(
              theme.palette.primary.main,
              0.1
            )} 75%)`,
            backgroundSize: "200% 100%",
            animation: "shimmer 1.8s ease-in-out infinite",
          }}
        />
        <Box sx={{ p: { xs: 2.5, sm: 3.5 } }}>
          <Stack spacing={1.5}>
            <Skeleton
              variant="text"
              height={isMobile ? 32 : 40}
              width="88%"
              sx={{ borderRadius: 2 }}
            />
            <Skeleton
              variant="text"
              height={isMobile ? 20 : 24}
              width="72%"
              sx={{ borderRadius: 1 }}
            />
            <Stack direction="row" spacing={1} sx={{ my: 1 }}>
              <Skeleton
                variant="rounded"
                width={65}
                height={26}
                sx={{ borderRadius: 2 }}
              />
              <Skeleton
                variant="rounded"
                width={85}
                height={26}
                sx={{ borderRadius: 2 }}
              />
            </Stack>
            <Stack
              direction="row"
              justifyContent="space-between"
              alignItems="center"
            >
              <Skeleton
                variant="text"
                width={90}
                height={isMobile ? 36 : 44}
                sx={{ borderRadius: 2 }}
              />
              <Skeleton
                variant="rounded"
                width={isMobile ? 110 : 130}
                height={isMobile ? 40 : 48}
                sx={{ borderRadius: 3 }}
              />
            </Stack>
          </Stack>
        </Box>
      </Paper>
    </motion.div>
  );
};

/* ============================================================================
   Offline Indicator
   ==========================================================================*/
const OfflineIndicator: React.FC = () => {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const theme = useTheme();
  const { t } = useTranslation();

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  if (isOnline) return null;

  return (
    <motion.div
      initial={{ opacity: 0, y: -50 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -50 }}
    >
      <Alert
        severity="warning"
        icon={<OfflineIcon />}
        sx={{
          position: "fixed",
          top: 16,
          left: 16,
          right: 16,
          zIndex: 1300,
          borderRadius: 3,
          boxShadow: `0 8px 32px ${alpha(theme.palette.warning.main, 0.3)}`,
        }}
      >
        <Typography variant="body2" fontWeight={600}>
          {t("offlineNotice", {
            defaultValue: "You are offline. Some features may be limited.",
          })}
        </Typography>
      </Alert>
    </motion.div>
  );
};

/* ============================================================================
   Error Display
   ==========================================================================*/
interface ErrorDisplayProps {
  error: string;
  onRetry: () => void;
  isRetrying: boolean;
}

const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
  error,
  onRetry,
  isRetrying,
}) => {
  const theme = useTheme();
  const { t } = useTranslation();
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.6 }}
    >
      <Paper
        elevation={0}
        sx={{
          textAlign: "center",
          py: { xs: 6, sm: 8 },
          px: { xs: 3, sm: 4 },
          borderRadius: 4,
          background: `linear-gradient(135deg, ${alpha(
            theme.palette.error.main,
            0.05
          )} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
          border: `1px solid ${alpha(theme.palette.error.main, 0.2)}`,
        }}
      >
        <ErrorIcon
          sx={{
            fontSize: 64,
            color: theme.palette.error.main,
            mb: 2,
            opacity: 0.8,
          }}
        />
        <Typography variant="h5" fontWeight={700} mb={2}>
          {t("errorOccurred", { defaultValue: "An error occurred" })}
        </Typography>
        <Typography variant="body1" color="text.secondary" mb={4}>
          {error}
        </Typography>
        <Button
          variant="contained"
          startIcon={
            isRetrying ? <CircularProgress size={20} /> : <RefreshIcon />
          }
          onClick={onRetry}
          disabled={isRetrying}
          sx={{ borderRadius: 3 }}
        >
          {isRetrying
            ? t("refreshingData", { defaultValue: "Refreshing data..." })
            : t("tryAgain", { defaultValue: "Try again" })}
        </Button>
      </Paper>
    </motion.div>
  );
};

/* ============================================================================
   Main Component
   ==========================================================================*/
const MainMenu: React.FC = () => {
  const theme = useTheme();
  const { t, i18n } = useTranslation();
  const { totalItems, setFirstItemCallback } = useCart();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const isSmallMobile = useMediaQuery(theme.breakpoints.down("sm"));

  // Data
  const [products, setProducts] = useState<Product[]>([]);
  const [categories, setCategories] = useState<AppCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [retrying, setRetrying] = useState(false);

  // UI state
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  const [sortBy, setSortBy] = useState<
    "name" | "price" | "rating" | "calories"
  >("name");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");

  // ✅ View mode - mobile only (list view disabled on desktop)
  const [viewMode, setViewMode] = useState<"grid" | "list">(() => {
    if (typeof window !== "undefined") {
      const saved = localStorage.getItem("menu-view-mode");
      if (saved === "grid" || saved === "list") return saved;
    }
    return "grid";
  });
  useEffect(() => {
    try {
      localStorage.setItem("menu-view-mode", viewMode);
    } catch {
      /* ignore */
    }
  }, [viewMode]);

  // First item helper
  const [showCartHelper, setShowCartHelper] = useState(false);
  const [addedItem, setAddedItem] = useState<CartItem | null>(null);

  // Unsub refs
  const [unsubscribeProducts, setUnsubscribeProducts] = useState<
    (() => void) | null
  >(null);
  const [unsubscribeCategories, setUnsubscribeCategories] = useState<
    (() => void) | null
  >(null);

  // Opening status (Europe/Amsterdam) – structured, localized in render
  const [openInfo, setOpenInfo] = useState(() =>
    computeOpenStatus(OPENING_HOURS)
  );
  useEffect(() => {
    setOpenInfo(computeOpenStatus(OPENING_HOURS));
    const id = setInterval(() => {
      setOpenInfo(computeOpenStatus(OPENING_HOURS));
    }, 30_000);
    return () => clearInterval(id);
  }, []);

  // First item callback hookup
  const handleFirstItemAdded = useCallback((item: CartItem) => {
    setAddedItem(item);
    setShowCartHelper(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
    setTimeout(() => setShowCartHelper(false), 4000);
  }, []);

  useEffect(() => {
    setFirstItemCallback(handleFirstItemAdded);
    return () => setFirstItemCallback(() => {});
  }, [setFirstItemCallback, handleFirstItemAdded]);

  const handleCloseCartHelper = useCallback(() => setShowCartHelper(false), []);

  // Load Firebase data
  useEffect(() => {
    void loadFirebaseData();
    return () => {
      if (unsubscribeProducts) unsubscribeProducts();
      if (unsubscribeCategories) unsubscribeCategories();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loadFirebaseData = async () => {
    setLoading(true);
    setError(null);
    try {
      const categoriesData = await CategoryService.getCategories();
      setCategories(categoriesData);

      const productUnsubscribe = ProductService.subscribeToProducts(
        (productsData) => {
          setProducts(productsData);
          setLoading(false);
        },
        (err) => {
          setError(FirebaseErrorHandler.handleError(err));
          setLoading(false);
        }
      );

      const categoryUnsubscribe = CategoryService.subscribeToCategories(
        (cs) => setCategories(cs),
        (err) => console.warn("Categories subscription error:", err)
      );

      setUnsubscribeProducts(() => productUnsubscribe);
      setUnsubscribeCategories(() => categoryUnsubscribe);
    } catch (err) {
      setError(FirebaseErrorHandler.handleError(err));
      setLoading(false);
    }
  };

  const handleRetry = async () => {
    setRetrying(true);
    try {
      if (unsubscribeProducts) unsubscribeProducts();
      if (unsubscribeCategories) unsubscribeCategories();
      try {
        await OfflineService.enableOffline();
      } catch {
        /* ignore */
      }
      await loadFirebaseData();
    } finally {
      setRetrying(false);
    }
  };

  const handleRefresh = () => {
    if (!loading) void handleRetry();
  };

  // Search analytics (debounced)
  useEffect(() => {
    if (searchQuery.trim() && searchQuery.length > 2) {
      const timeoutId = setTimeout(() => {
        AnalyticsService.trackSearchQuery(searchQuery.trim());
      }, 1000);
      return () => clearTimeout(timeoutId);
    }
  }, [searchQuery]);

  // Products filtered only by SEARCH (for counts)
  const productsAfterSearch = useMemo(() => {
    if (!searchQuery.trim()) return products;
    const q = searchQuery.toLowerCase();
    return products.filter(
      (p) =>
        p.name.toLowerCase().includes(q) ||
        p.description.toLowerCase().includes(q) ||
        p.ingredients?.some((ing) => ing.toLowerCase().includes(q)) ||
        p.categories.some((catId) => {
          const category = categories.find((c) => c.id === catId);
          return category?.name.toLowerCase().includes(q);
        })
    );
  }, [products, categories, searchQuery]);

  // Category counts (based on search results)
  const productCounts = useMemo(() => {
    const counts: Record<string, number> = { _all: productsAfterSearch.length };
    for (const c of categories) counts[c.id] = 0;
    for (const p of productsAfterSearch) {
      for (const cid of p.categories) {
        counts[cid] = (counts[cid] || 0) + 1;
      }
    }
    return counts;
  }, [productsAfterSearch, categories]);

  // Filter & sort for grid
  const filteredAndSortedProducts = useMemo(() => {
    let result = [...productsAfterSearch];

    if (selectedCategory) {
      result = result.filter((p) => p.categories.includes(selectedCategory));
    }

    result.sort((a, b) => {
      let aValue: string | number;
      let bValue: string | number;

      switch (sortBy) {
        case "price":
          aValue = a.price;
          bValue = b.price;
          break;
        case "calories":
          aValue = a.calories ?? 0;
          bValue = b.calories ?? 0;
          break;
        case "rating":
          aValue = (a as any).rating ?? 4.5;
          bValue = (b as any).rating ?? 4.5;
          break;
        default:
          aValue = a.name.toLowerCase();
          bValue = b.name.toLowerCase();
      }

      if (aValue < bValue) return sortOrder === "asc" ? -1 : 1;
      if (aValue > bValue) return sortOrder === "asc" ? 1 : -1;
      return 0;
    });

    return result;
  }, [productsAfterSearch, selectedCategory, sortBy, sortOrder]);

  const handleSortChange = (newSortBy: typeof sortBy | string) => {
    const next = newSortBy as typeof sortBy;
    if (sortBy === next) {
      setSortOrder((prev) => (prev === "asc" ? "desc" : "asc"));
    } else {
      setSortBy(next);
      setSortOrder("asc");
    }
  };

  const sortOptions = [
    {
      value: "name",
      label: t("name", { defaultValue: "Name" }),
      shortLabel: t("name", { defaultValue: "Name" }),
      icon: <SortIcon />,
    },
    {
      value: "price",
      label: t("price", { defaultValue: "Price" }),
      shortLabel: t("price", { defaultValue: "Price" }),
      icon: <SortIcon />,
    },
    {
      value: "rating",
      label: t("rating", { defaultValue: "Rating" }),
      shortLabel: t("rating", { defaultValue: "Rating" }),
      icon: <StarIcon />,
    },
    {
      value: "calories",
      label: t("calories", { defaultValue: "Calories" }),
      shortLabel: t("calories", { defaultValue: "Cal" }),
      icon: <FreshIcon />,
    },
  ] as const;

  // Localized open/close status strings
  const statusStrings = useMemo(() => {
    const { isOpen, currentClose, nextOpen, nowM, weekday } = openInfo;

    const todayLabel =
      openInfo.todays.length > 0
        ? openInfo.todays.map((i) => `${i.start}–${i.end}`).join(" · ")
        : t("closed", { defaultValue: "Closed" });

    if (isOpen && currentClose) {
      const mins = minutesUntil(
        nowM,
        currentClose.endM,
        currentClose.endDayOffset
      );
      const dayPrefix =
        currentClose.endDayOffset === 0
          ? ""
          : `${getWeekdayName((weekday + 1) % 7, i18n.language, "short")} `;
      const timeLabel = `${dayPrefix}${formatHHMM(currentClose.endM)}`;

      return {
        title: t("nowOpen", { defaultValue: "Now Open" }),
        sub: t("closesAt", {
          defaultValue: "Closes at {{time}} (in {{mins}} mins)",
          time: timeLabel,
          mins,
        }),
        todayLabel,
      };
    }

    if (!isOpen) {
      if (nextOpen) {
        const mins = minutesUntil(nowM, nextOpen.startM, nextOpen.dayOffset);
        if (nextOpen.dayOffset === 0) {
          return {
            title: t("currentlyClosed", { defaultValue: "Currently Closed" }),
            sub: t("opensAt", {
              defaultValue: "Opens at {{time}} (in {{mins}} mins)",
              time: formatHHMM(nextOpen.startM),
              mins,
            }),
            todayLabel,
          };
        } else if (nextOpen.dayOffset === 1) {
          return {
            title: t("currentlyClosed", { defaultValue: "Currently Closed" }),
            sub: t("opensTomorrowAt", {
              defaultValue: "Opens tomorrow at {{time}}",
              time: formatHHMM(nextOpen.startM),
            }),
            todayLabel,
          };
        } else {
          const dayName = getWeekdayName(
            (weekday + nextOpen.dayOffset) % 7,
            i18n.language,
            "long"
          );
          return {
            title: t("currentlyClosed", { defaultValue: "Currently Closed" }),
            sub: t("opensOnDayAt", {
              defaultValue: "Opens on {{day}} at {{time}}",
              day: dayName,
              time: formatHHMM(nextOpen.startM),
            }),
            todayLabel,
          };
        }
      }
      return {
        title: t("currentlyClosed", { defaultValue: "Currently Closed" }),
        sub: t("noOpeningHoursAvailable", {
          defaultValue: "No opening hours available",
        }),
        todayLabel,
      };
    }

    return {
      title: "",
      sub: "",
      todayLabel,
    };
  }, [openInfo, i18n.language, t]);

  // Early error view (no data)
  if (error && !products.length) {
    return (
      <Box sx={{ minHeight: "100vh", bgcolor: "background.default" }}>
        <Header cartCount={totalItems} />
        <Container maxWidth="lg" sx={{ py: 4 }}>
          <ErrorDisplay
            error={error}
            onRetry={handleRetry}
            isRetrying={retrying}
          />
        </Container>
      </Box>
    );
  }

  return (
    <Box
      sx={{
        minHeight: "100vh",
        bgcolor: "background.default",
        position: "relative",
        "&::before": {
          content: '""',
          position: "fixed",
          inset: 0,
          background: `
            radial-gradient(circle at 15% 25%, ${alpha(
              theme.palette.primary.main,
              0.04
            )} 0%, transparent 50%),
            radial-gradient(circle at 85% 75%, ${alpha(
              theme.palette.secondary.main,
              0.04
            )} 0%, transparent 50%),
            radial-gradient(circle at 50% 50%, ${alpha(
              theme.palette.info.main,
              0.02
            )} 0%, transparent 50%)
          `,
          pointerEvents: "none",
          zIndex: 0,
        },
      }}
    >
      <Header cartCount={totalItems} />
      <OfflineIndicator />

      {/* First Item Cart Helper */}
      <FirstItemCartHelper
        isVisible={showCartHelper}
        onClose={handleCloseCartHelper}
        addedItem={addedItem}
      />

      {/* Loading Backdrop */}
      <Backdrop sx={{ color: "#fff", zIndex: 1200 }} open={retrying}>
        <Stack alignItems="center" spacing={2}>
          <CircularProgress color="inherit" size={60} />
          <Typography variant="h6">
            {t("refreshingData", { defaultValue: "Refreshing data..." })}
          </Typography>
        </Stack>
      </Backdrop>

      {/* Hero */}
      <MotionBox
        variants={heroVariants}
        initial="hidden"
        animate="visible"
        sx={{
          position: "relative",
          py: { xs: 8, sm: 12, md: 18 },
          px: { xs: 2, sm: 3 },
          overflow: "hidden",
          zIndex: 1,
        }}
      >
        <Container maxWidth="lg" sx={{ position: "relative", zIndex: 2 }}>
          {/* Premium Badge */}
          <motion.div
            initial={{ opacity: 0, y: -30, scale: 0.85 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            transition={{ delay: 0.2, duration: 1.0 }}
          >
            <Box sx={{ textAlign: "center", mb: { xs: 4, sm: 6 } }}>
              <Paper
                elevation={0}
                sx={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 2.5,
                  px: { xs: 3.5, sm: 5 },
                  py: { xs: 2, sm: 2.5 },
                  borderRadius: { xs: 8, sm: 10 },
                  background: `linear-gradient(135deg, ${alpha(
                    theme.palette.background.paper,
                    0.95
                  )} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
                  backdropFilter: "blur(30px)",
                  border: `2px solid ${alpha(
                    theme.palette.primary.main,
                    0.18
                  )}`,
                  boxShadow: `0 20px 50px ${alpha(
                    theme.palette.primary.main,
                    0.15
                  )}, 0 0 0 1px ${alpha(
                    theme.palette.common.white,
                    0.1
                  )} inset`,
                }}
              >
                <DiamondIcon
                  sx={{
                    fontSize: { xs: 22, sm: 26 },
                    color: theme.palette.primary.main,
                    filter: `drop-shadow(0 3px 10px ${alpha(
                      theme.palette.primary.main,
                      0.4
                    )})`,
                  }}
                />
                <Typography
                  variant="body1"
                  sx={{
                    fontWeight: 800,
                    fontSize: { xs: "0.95rem", sm: "1.15rem" },
                    background: `linear-gradient(135deg, ${theme.palette.text.primary} 0%, ${theme.palette.primary.main} 100%)`,
                    WebkitBackgroundClip: "text",
                    WebkitTextFillColor: "transparent",
                    backgroundClip: "text",
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                  }}
                >
                  {t("Premium Sushi Experience", {
                    defaultValue: "Premium Sushi Experience",
                  })}
                </Typography>
                <PremiumIcon
                  sx={{
                    fontSize: { xs: 22, sm: 26 },
                    color: theme.palette.secondary.main,
                    filter: `drop-shadow(0 3px 10px ${alpha(
                      theme.palette.secondary.main,
                      0.4
                    )})`,
                  }}
                />
              </Paper>
            </Box>
          </motion.div>

          {/* Title */}
          <motion.div
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4, duration: 1.2 }}
          >
            <Box sx={{ textAlign: "center", mb: { xs: 4, sm: 5 } }}>
              <Typography
                variant="body1"
                sx={{
                  fontFamily: "'Noto Sans', sans-serif",
                  fontSize: { xs: "1.1rem", sm: "1.3rem", md: "1.5rem" },
                  color: alpha(theme.palette.text.secondary, 0.75),
                  mb: 1.5,
                  letterSpacing: "0.3em",
                  fontWeight: 300,
                }}
              >
                寿司布雷斯肯斯
              </Typography>

              <Typography
                variant="h1"
                sx={{
                  fontWeight: 900,
                  mb: { xs: 2.5, sm: 3.5 },
                  background: `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 35%, ${theme.palette.primary.dark} 65%, ${theme.palette.secondary.dark} 100%)`,
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  backgroundClip: "text",
                  letterSpacing: "-0.02em",
                  lineHeight: 0.88,
                  fontSize: {
                    xs: "3.2rem",
                    sm: "4.8rem",
                    md: "6.5rem",
                    lg: "7.5rem",
                  },
                  textShadow: `0 12px 40px ${alpha(
                    theme.palette.primary.main,
                    0.25
                  )}`,
                  position: "relative",
                  "&::after": {
                    content: '""',
                    position: "absolute",
                    bottom: { xs: -16, sm: -20 },
                    left: "50%",
                    transform: "translateX(-50%)",
                    width: { xs: 140, sm: 220, md: 320 },
                    height: { xs: 5, sm: 7 },
                    background: `linear-gradient(90deg, transparent 0%, ${theme.palette.primary.main} 15%, ${theme.palette.secondary.main} 50%, ${theme.palette.primary.main} 85%, transparent 100%)`,
                    borderRadius: 4,
                    animation: "glow 3.5s ease-in-out infinite alternate",
                  },
                  "@keyframes glow": {
                    "0%": {
                      opacity: 0.7,
                      transform: "translateX(-50%) scaleX(0.9)",
                    },
                    "100%": {
                      opacity: 1,
                      transform: "translateX(-50%) scaleX(1)",
                    },
                  },
                }}
              >
                {t("restaurantName", { defaultValue: "Sushi Breskens" })}
              </Typography>

              <Typography
                variant="h4"
                sx={{
                  color: theme.palette.text.primary,
                  fontWeight: 300,
                  mb: { xs: 2.5, sm: 3.5 },
                  fontStyle: "italic",
                  fontSize: { xs: "1.3rem", sm: "1.7rem", md: "2.1rem" },
                  letterSpacing: "0.08em",
                  position: "relative",
                  "&::before": {
                    content: '"🍣"',
                    position: "absolute",
                    left: { xs: "-35px", sm: "-45px" },
                    top: "50%",
                    transform: "translateY(-50%)",
                    fontSize: { xs: "1.1rem", sm: "1.3rem" },
                    opacity: 0.65,
                  },
                  "&::after": {
                    content: '"🍣"',
                    position: "absolute",
                    right: { xs: "-35px", sm: "-45px" },
                    top: "50%",
                    transform: "translateY(-50%)",
                    fontSize: { xs: "1.1rem", sm: "1.3rem" },
                    opacity: 0.65,
                  },
                }}
              >
                {t("Authentic Asian Excellence", {
                  defaultValue: "Authentic Asian Excellence",
                })}
              </Typography>

              <Typography
                variant="h6"
                sx={{
                  color: theme.palette.text.secondary,
                  fontWeight: 400,
                  lineHeight: 1.8,
                  maxWidth: { xs: "100%", sm: "750px", md: "850px" },
                  mx: "auto",
                  fontSize: { xs: "1.05rem", sm: "1.25rem", md: "1.35rem" },
                  px: { xs: 2, sm: 0 },
                }}
              >
                {t(
                  "Ontdek de unieke harmonie van traditionele Asian culinaire meesterschap in het hart van Zeeland. Gevestigd in Breskens Winkelhart, waar verse ingrediënten dagelijks worden bereid met authentieke technieken.",
                  {
                    defaultValue:
                      "Discover the unique harmony of traditional Asian culinary mastery in the heart of Zeeland. Located in Breskens Shopping Center, where fresh ingredients are prepared daily with authentic techniques.",
                  }
                )}
              </Typography>
            </Box>
          </motion.div>

          {/* Features */}
          <motion.div
            initial={{ opacity: 0, y: 60 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.8, duration: 1.0 }}
          >
            <Stack
              direction={{ xs: "column", sm: "row" }}
              spacing={{ xs: 3.5, sm: 4.5 }}
              justifyContent="center"
              alignItems="center"
              sx={{ mb: { xs: 6, sm: 8 } }}
            >
              {[
                {
                  icon: <SupermarketIcon />,
                  label: t("Unique Concept", {
                    defaultValue: "Unique Concept",
                  }),
                  desc: t("Verse sushi in PLUS Lohman supermarkt", {
                    defaultValue: "Fresh sushi in PLUS Lohman supermarket",
                  }),
                  color: theme.palette.primary.main,
                },
                {
                  icon: <CoastalIcon />,
                  label: t("Zeeland Fresh", { defaultValue: "Zeeland Fresh" }),
                  desc: t("Dagelijks verse vis uit de kustwateren", {
                    defaultValue: "Daily fresh fish from coastal waters",
                  }),
                  color: theme.palette.info.main,
                },
                {
                  icon: <SailingIcon />,
                  label: t("Coastal Heritage", {
                    defaultValue: "Coastal Heritage",
                  }),
                  desc: t("Breskens maritieme traditie sinds 2022", {
                    defaultValue: "Breskens maritime tradition since 2022",
                  }),
                  color: theme.palette.secondary.main,
                },
              ].map((feature, index) => (
                <motion.div
                  key={`${feature.label}-${index}`}
                  initial={{ opacity: 0, y: 40, scale: 0.9 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  transition={{ delay: 1.2 + index * 0.2, duration: 0.8 }}
                  whileHover={{
                    scale: isMobile ? 1.02 : 1.08,
                    y: -10,
                    transition: { duration: 0.3 },
                  }}
                >
                  <Paper
                    elevation={0}
                    sx={{
                      p: { xs: 3.5, sm: 4.5 },
                      borderRadius: { xs: 5, sm: 7 },
                      background: `linear-gradient(135deg, ${alpha(
                        theme.palette.background.paper,
                        0.92
                      )} 0%, ${alpha(feature.color, 0.04)} 100%)`,
                      backdropFilter: "blur(30px)",
                      border: `2px solid ${alpha(feature.color, 0.12)}`,
                      textAlign: "center",
                      minWidth: { xs: "340px", sm: "300px" },
                      minHeight: { xs: 160, sm: 180 },
                      boxShadow: `0 20px 60px ${alpha(
                        feature.color,
                        0.15
                      )}, 0 0 0 1px ${alpha(
                        theme.palette.common.white,
                        0.08
                      )} inset`,
                      transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
                      position: "relative",
                      overflow: "hidden",
                      "&:hover": {
                        backgroundColor: alpha(feature.color, 0.08),
                        borderColor: alpha(feature.color, 0.25),
                        boxShadow: `0 30px 80px ${alpha(
                          feature.color,
                          0.25
                        )}, 0 0 0 1px ${alpha(
                          theme.palette.common.white,
                          0.12
                        )} inset`,
                      },
                    }}
                  >
                    <Box
                      sx={{
                        width: { xs: 70, sm: 80 },
                        height: { xs: 70, sm: 80 },
                        borderRadius: "50%",
                        background: `linear-gradient(135deg, ${alpha(
                          feature.color,
                          0.18
                        )} 0%, ${alpha(feature.color, 0.28)} 100%)`,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        mx: "auto",
                        mb: 3,
                        color: feature.color,
                        position: "relative",
                        "&::after": {
                          content: '""',
                          position: "absolute",
                          inset: -5,
                          borderRadius: "50%",
                          border: `2px solid ${alpha(feature.color, 0.25)}`,
                          animation: "pulse 3.5s ease-in-out infinite",
                        },
                        "@keyframes pulse": {
                          "0%, 100%": { opacity: 0.6, transform: "scale(1)" },
                          "50%": { opacity: 1, transform: "scale(1.08)" },
                        },
                      }}
                    >
                      {React.cloneElement(feature.icon, {
                        sx: { fontSize: { xs: 32, sm: 36 } },
                      })}
                    </Box>
                    <Typography
                      variant="h6"
                      sx={{
                        fontWeight: 800,
                        mb: 1,
                        fontSize: { xs: "1.15rem", sm: "1.3rem" },
                        color: feature.color,
                      }}
                    >
                      {feature.label}
                    </Typography>
                    <Typography
                      variant="body2"
                      sx={{
                        color: theme.palette.text.secondary,
                        fontSize: { xs: "0.9rem", sm: "0.95rem" },
                        fontWeight: 500,
                        lineHeight: 1.6,
                      }}
                    >
                      {feature.desc}
                    </Typography>
                  </Paper>
                </motion.div>
              ))}
            </Stack>
          </motion.div>

          {/* Contact / Dynamic Open Status */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1.8, duration: 0.6 }}
          >
            <Stack
              direction={{ xs: "column", sm: "row" }}
              spacing={{ xs: 3, sm: 4 }}
              justifyContent="center"
              alignItems="center"
              sx={{ mb: { xs: 4, sm: 6 } }}
            >
              {/* Dynamic status card */}
              <Paper
                elevation={0}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 2.5,
                  px: { xs: 3.5, sm: 4.5 },
                  py: { xs: 2.5, sm: 3 },
                  borderRadius: { xs: 5, sm: 6 },
                  background: (theme) =>
                    openInfo.isOpen
                      ? `linear-gradient(135deg, ${alpha(
                          theme.palette.success.main,
                          0.12
                        )} 0%, ${alpha(theme.palette.success.main, 0.06)} 100%)`
                      : `linear-gradient(135deg, ${alpha(
                          theme.palette.error.main,
                          0.1
                        )} 0%, ${alpha(theme.palette.error.main, 0.05)} 100%)`,
                  border: (theme) =>
                    `2px solid ${alpha(
                      openInfo.isOpen
                        ? theme.palette.success.main
                        : theme.palette.error.main,
                      0.25
                    )}`,
                  boxShadow: (theme) =>
                    `0 12px 40px ${alpha(
                      openInfo.isOpen
                        ? theme.palette.success.main
                        : theme.palette.error.main,
                      0.18
                    )}`,
                }}
              >
                <Box
                  sx={(theme) => ({
                    width: 14,
                    height: 14,
                    borderRadius: "50%",
                    backgroundColor: openInfo.isOpen
                      ? theme.palette.success.main
                      : theme.palette.error.main,
                    position: "relative",
                    "&::after": {
                      content: '""',
                      position: "absolute",
                      inset: -5,
                      borderRadius: "50%",
                      border: `2px solid ${alpha(
                        openInfo.isOpen
                          ? theme.palette.success.main
                          : theme.palette.error.main,
                        0.35
                      )}`,
                      animation: "ripple 2.5s infinite",
                    },
                    "@keyframes ripple": {
                      "0%": { opacity: 1, transform: "scale(1)" },
                      "100%": { opacity: 0, transform: "scale(2.2)" },
                    },
                  })}
                />
                <Stack spacing={0.5}>
                  <Typography
                    variant="body1"
                    sx={(theme) => ({
                      fontWeight: 800,
                      color: openInfo.isOpen
                        ? theme.palette.success.dark
                        : theme.palette.error.dark,
                      fontSize: { xs: "0.95rem", sm: "1.05rem" },
                    })}
                  >
                    {statusStrings.title}
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={(theme) => ({
                      color: openInfo.isOpen
                        ? theme.palette.success.main
                        : theme.palette.error.main,
                      fontSize: { xs: "0.8rem", sm: "0.85rem" },
                      fontWeight: 600,
                    })}
                  >
                    {statusStrings.sub}
                  </Typography>
                  <Typography variant="caption" sx={{ opacity: 0.75 }}>
                    {t("today", { defaultValue: "Today" })}:{" "}
                    {statusStrings.todayLabel}
                  </Typography>
                </Stack>
              </Paper>

              {/* Location card */}
              <Paper
                elevation={0}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 2.5,
                  px: { xs: 3.5, sm: 4.5 },
                  py: { xs: 2.5, sm: 3 },
                  borderRadius: { xs: 5, sm: 6 },
                  background: alpha(theme.palette.background.paper, 0.85),
                  backdropFilter: "blur(25px)",
                  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
                  boxShadow: `0 12px 40px ${alpha(
                    theme.palette.common.black,
                    0.1
                  )}`,
                }}
              >
                <LocationIcon
                  sx={{
                    fontSize: { xs: 20, sm: 22 },
                    color: theme.palette.primary.main,
                  }}
                />
                <Stack spacing={0.5}>
                  <Typography
                    variant="body1"
                    sx={{
                      fontWeight: 600,
                      fontSize: { xs: "0.95rem", sm: "1.05rem" },
                      color: theme.palette.text.primary,
                    }}
                  >
                    {t("locationName", {
                      defaultValue: "PLUS Lohman – Breskens",
                    })}
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{
                      fontSize: { xs: "0.8rem", sm: "0.85rem" },
                      color: theme.palette.text.secondary,
                    }}
                  >
                    Spuiplein 49, Zeeland
                  </Typography>
                </Stack>
              </Paper>
            </Stack>

            <Box sx={{ textAlign: "center" }}>
              <Typography
                variant="body1"
                sx={{
                  color: theme.palette.text.secondary,
                  fontSize: { xs: "0.9rem", sm: "1rem" },
                  mb: 2,
                }}
              >
                {t("Voor vragen of reserveringen:", {
                  defaultValue: "For questions or reservations:",
                })}
              </Typography>
              <Button
                variant="outlined"
                startIcon={<PhoneIcon />}
                href="tel:+31613478352"
                sx={{
                  borderRadius: 4,
                  px: { xs: 3, sm: 4 },
                  py: { xs: 1.5, sm: 2 },
                  fontWeight: 600,
                  fontSize: { xs: "0.9rem", sm: "1rem" },
                  borderColor: alpha(theme.palette.primary.main, 0.3),
                  color: theme.palette.primary.main,
                  "&:hover": {
                    borderColor: theme.palette.primary.main,
                    backgroundColor: alpha(theme.palette.primary.main, 0.08),
                    transform: "translateY(-2px)",
                    boxShadow: `0 8px 25px ${alpha(
                      theme.palette.primary.main,
                      0.25
                    )}`,
                  },
                }}
              >
                +31 6 13478352
              </Button>
            </Box>
          </motion.div>
        </Container>
      </MotionBox>

      {/* Menu Section */}
      <Container
        id="menu-section"
        maxWidth="xl"
        sx={{
          py: { xs: 3, sm: 4, md: 6 },
          px: { xs: 2, sm: 3 },
          position: "relative",
          zIndex: 1,
        }}
      >
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3, duration: 0.8 }}
        >
          <Paper
            elevation={0}
            sx={{
              p: { xs: 3, sm: 4 },
              mb: { xs: 3, sm: 4, md: 6 },
              borderRadius: { xs: 4, sm: 6 },
              background: `linear-gradient(135deg, ${alpha(
                theme.palette.background.paper,
                0.95
              )} 0%, ${alpha(theme.palette.primary.main, 0.02)} 100%)`,
              backdropFilter: "blur(30px)",
              border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
              boxShadow: `0 16px 48px ${alpha(
                theme.palette.common.black,
                0.08
              )}, 0 0 0 1px ${alpha(theme.palette.common.white, 0.05)} inset`,
              position: "relative",
              overflow: "hidden",
              "&::before": {
                content: '""',
                position: "absolute",
                top: 0,
                left: 0,
                right: 0,
                height: 2,
                background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 50%, ${theme.palette.primary.main} 100%)`,
              },
            }}
          >
            <Stack spacing={{ xs: 3, sm: 4 }}>
              <SearchBar
                value={searchQuery}
                onChange={setSearchQuery}
                loading={loading}
              />

              <CategoryFilter
                active={selectedCategory}
                onSelect={setSelectedCategory}
                categories={categories}
                loading={loading}
                productCounts={productCounts}
                showCounts
                showIcons
                variant="premium"
                /* ✅ Mobile-only: sorting + direction + view + refresh (localized labels) */
                sortOptions={isMobile ? (sortOptions as any) : undefined}
                sortValue={sortBy}
                sortDirection={sortOrder}
                onSortChange={(v) => handleSortChange(v)}
                onSortDirectionChange={(dir) => setSortOrder(dir)}
                onRefresh={isMobile ? handleRefresh : undefined}
                viewMode={viewMode}
                onViewToggle={
                  isMobile
                    ? () => setViewMode((p) => (p === "grid" ? "list" : "grid"))
                    : undefined
                }
              />

              {/* ✅ Desktop controls (simplified - NO view toggle) */}
              {!isMobile && (
                <Stack
                  direction={{ xs: "column", sm: "row" }}
                  justifyContent="space-between"
                  alignItems={{ xs: "stretch", sm: "center" }}
                  spacing={3}
                >
                  <Stack direction="row" spacing={3} alignItems="center">
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: 1,
                        px: 2,
                        py: 1,
                        borderRadius: 3,
                        background: alpha(theme.palette.primary.main, 0.08),
                        border: `1px solid ${alpha(
                          theme.palette.primary.main,
                          0.15
                        )}`,
                      }}
                    >
                      <SushiIcon
                        sx={{ fontSize: 20, color: theme.palette.primary.main }}
                      />
                      <Typography
                        variant="body1"
                        sx={{
                          fontWeight: 700,
                          color: theme.palette.primary.main,
                        }}
                      >
                        {loading
                          ? t("loading", { defaultValue: "Loading..." })
                          : `${filteredAndSortedProducts.length} ${t(
                              "Premium Gerechten",
                              {
                                defaultValue: "Premium Dishes",
                              }
                            )}`}
                      </Typography>
                    </Box>

                    {filteredAndSortedProducts.length > 0 && !loading && (
                      <Chip
                        label={
                          selectedCategory
                            ? categories.find((c) => c.id === selectedCategory)
                                ?.name || selectedCategory
                            : t("allCategories", {
                                defaultValue: "All Categories",
                              })
                        }
                        variant="outlined"
                        size="medium"
                        onDelete={
                          selectedCategory
                            ? () => setSelectedCategory(null)
                            : undefined
                        }
                        sx={{
                          fontWeight: 600,
                          borderColor: alpha(theme.palette.secondary.main, 0.3),
                          color: theme.palette.secondary.main,
                          "&:hover": {
                            backgroundColor: alpha(
                              theme.palette.secondary.main,
                              0.08
                            ),
                          },
                        }}
                      />
                    )}
                  </Stack>

                  <Stack direction="row" spacing={1.5} alignItems="center">
                    <Button
                      variant="outlined"
                      startIcon={<RefreshIcon />}
                      onClick={handleRefresh}
                      disabled={loading}
                      size="small"
                      sx={{
                        borderRadius: 3,
                        textTransform: "none",
                        fontWeight: 600,
                        mr: 1,
                      }}
                    >
                      {t("refresh", { defaultValue: "Refresh" })}
                    </Button>

                    {/* ✅ Desktop sorting chips (NO view toggle) */}
                    {(
                      [
                        { key: "name", labelKey: "name", icon: <SortIcon /> },
                        { key: "price", labelKey: "price", icon: <SortIcon /> },
                        {
                          key: "rating",
                          labelKey: "rating",
                          icon: <StarIcon />,
                        },
                        {
                          key: "calories",
                          labelKey: "calories",
                          icon: <FreshIcon />,
                        },
                      ] as const
                    ).map((option) => (
                      <Chip
                        key={option.key}
                        label={t(option.labelKey, { defaultValue: option.key })}
                        variant={sortBy === option.key ? "filled" : "outlined"}
                        size="medium"
                        clickable
                        onClick={() =>
                          handleSortChange(option.key as typeof sortBy)
                        }
                        disabled={loading}
                        icon={
                          sortBy === option.key ? (
                            <Box
                              sx={{
                                transform:
                                  sortOrder === "desc"
                                    ? "rotate(180deg)"
                                    : "none",
                                transition: "transform 0.3s ease",
                                display: "flex",
                                alignItems: "center",
                              }}
                            >
                              {option.icon}
                            </Box>
                          ) : (
                            option.icon
                          )
                        }
                        sx={{
                          fontSize: "0.8rem",
                          fontWeight: 600,
                          height: 40,
                          backgroundColor:
                            sortBy === option.key
                              ? theme.palette.primary.main
                              : "transparent",
                          color:
                            sortBy === option.key
                              ? "white"
                              : theme.palette.text.primary,
                          borderColor: alpha(theme.palette.primary.main, 0.3),
                          "&:hover": {
                            backgroundColor:
                              sortBy === option.key
                                ? theme.palette.primary.dark
                                : alpha(theme.palette.primary.main, 0.08),
                            transform: "translateY(-2px)",
                            boxShadow: `0 8px 25px ${alpha(
                              theme.palette.primary.main,
                              0.25
                            )}`,
                          },
                          "&:disabled": { opacity: 0.5 },
                        }}
                      />
                    ))}
                  </Stack>
                </Stack>
              )}

              {/* Mobile summary */}
              {isMobile && (
                <Stack direction="row" spacing={2} alignItems="center">
                  <Box
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      gap: 1,
                      flex: 1,
                    }}
                  >
                    <SushiIcon
                      sx={{ fontSize: 18, color: theme.palette.primary.main }}
                    />
                    <Typography
                      variant="body2"
                      sx={{
                        fontWeight: 700,
                        color: theme.palette.primary.main,
                      }}
                    >
                      {loading
                        ? t("loading", { defaultValue: "Loading..." })
                        : `${filteredAndSortedProducts.length} ${t(
                            "gerechten",
                            {
                              defaultValue: "dishes",
                            }
                          )}`}
                    </Typography>
                  </Box>

                  {selectedCategory && (
                    <Chip
                      label={
                        categories.find((c) => c.id === selectedCategory)
                          ?.name || selectedCategory
                      }
                      variant="outlined"
                      size="small"
                      onDelete={() => setSelectedCategory(null)}
                      sx={{ fontSize: "0.75rem", fontWeight: 600 }}
                    />
                  )}
                </Stack>
              )}
            </Stack>
          </Paper>
        </motion.div>

        {/* Products Grid */}
        <LayoutGroup>
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            key={`${searchQuery}-${selectedCategory}-${sortBy}-${sortOrder}-${viewMode}`}
          >
            <EnhancedProductGrid viewMode={viewMode}>
              <AnimatePresence mode="popLayout">
                {loading || !products.length
                  ? Array.from({ length: isSmallMobile ? 6 : 12 }).map(
                      (_, idx) => (
                        <motion.div
                          key={`skeleton-${idx}`}
                          variants={itemVariants}
                          layout
                        >
                          <SushiProductSkeleton />
                        </motion.div>
                      )
                    )
                  : filteredAndSortedProducts.map((product, index) => (
                      <motion.div
                        key={product.id}
                        variants={itemVariants}
                        layout
                        layoutId={product.id}
                        initial="hidden"
                        animate="visible"
                        exit="exit"
                      >
                        <ProductCard
                          product={product}
                          index={index}
                          viewMode={viewMode}
                        />
                      </motion.div>
                    ))}
              </AnimatePresence>
            </EnhancedProductGrid>
          </motion.div>
        </LayoutGroup>

        {/* Empty State */}
        {!loading &&
          filteredAndSortedProducts.length === 0 &&
          products.length > 0 && (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.8 }}
            >
              <Paper
                elevation={0}
                sx={{
                  textAlign: "center",
                  py: { xs: 8, sm: 12 },
                  px: { xs: 4, sm: 6 },
                  borderRadius: { xs: 4, sm: 6 },
                  background: `linear-gradient(135deg, ${alpha(
                    theme.palette.background.paper,
                    0.9
                  )} 0%, ${alpha(theme.palette.primary.main, 0.02)} 100%)`,
                  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
                }}
              >
                <Typography variant="h5" fontWeight={800} gutterBottom>
                  {t("noResults", { defaultValue: "No results found" })}
                </Typography>
                <Typography
                  variant="body1"
                  color="text.secondary"
                  sx={{ mb: 3 }}
                >
                  {t(
                    "Probeer uw zoekopdracht aan te passen of bekijk alle categorieën",
                    {
                      defaultValue:
                        "Try adjusting your search or view all categories",
                    }
                  )}
                </Typography>
                <Stack
                  direction="row"
                  spacing={2}
                  justifyContent="center"
                  flexWrap="wrap"
                >
                  <Button
                    variant="outlined"
                    onClick={() => setSelectedCategory(null)}
                  >
                    {t("resetCategory", { defaultValue: "Reset category" })}
                  </Button>
                  <Button variant="outlined" onClick={() => setSearchQuery("")}>
                    {t("resetSearch", { defaultValue: "Reset search" })}
                  </Button>
                  <Button
                    variant="contained"
                    onClick={handleRefresh}
                    startIcon={<RefreshIcon />}
                  >
                    {t("refresh", { defaultValue: "Refresh" })}
                  </Button>
                </Stack>
              </Paper>
            </motion.div>
          )}
      </Container>

      {/* Scroll to top */}
      <EnhancedScrollTop />
    </Box>
  );
};

export default MainMenu;