/**
 * Design & layout — single source of truth for this template.
 *
 * For new projects: change only this file (and add your font files or URLs if needed)
 * to set fonts, color palette, and left menu behavior.
 *
 * - Fonts: fontFamily, fontFallback (and fontSource if using Google/external).
 * - Colors: theme.primary, theme.surface, theme.preset (palette names in themeBootstrap.js).
 * - Left menu: defaultMenuMode and menuModes (full = static, short + submenu = slim/compact).
 * - Breakpoint: breakpoint (px) — also sync _sass_variables.scss $breakpoint and tailwind.css --breakpoint-lg.
 */

// ─── Typography ─────────────────────────────────────────────────────────────
/** Font family used for body and headings. Set to a single value or CSS stack. */
export const fontFamily = "InterDisplay";

/** Fallback stack when using a custom font (e.g. local or Google Fonts). */
export const fontFallback = "Helvetica, Arial, sans-serif";

/** Optional: 'local' (default, uses layout/fonts), 'google', or a URL string. */
export const fontSource = "local";

// ─── Layout breakpoint (sidebar ↔ mobile) ────────────────────────────────────
/** Pixel width at which layout is considered "desktop". Keep in sync with Tailwind --breakpoint-lg if used. */
export const breakpoint = 992;

// ─── Theme defaults (PrimeVue + app shell) ──────────────────────────────────
export const theme = {
  /** PrimeVue preset: 'Aura' | 'Lara' | 'Nora' */
  preset: "Aura",
  /** Primary palette name (must exist in themeBootstrap primaryColors). */
  primary: "blue",
  /** Surface palette name (must exist in themeBootstrap surfaces). */
  surface: "gray",
  /** Initial dark mode. When colorSchemeMode is 'system', this is overridden by OS. */
  darkTheme: false,
  /** 'system' | 'light' | 'dark' */
  colorSchemeMode: "system",
  /** Sidebar background: 'light' | 'dark' | 'primary' */
  menuTheme: "primary",
  /** Content cards: 'transparent' | 'filled' */
  cardStyle: "transparent",
};

// ─── Left menu mode (sidebar behavior) ───────────────────────────────────────
/**
 * Default sidebar mode. Your preferred combination:
 * - 'static'  = Full: icons + labels, can collapse to icon-only via anchor.
 * - 'slim'    = Short: icon-only; submenu opens to the right when item with children is active.
 * - 'compact' = Same as slim but slightly wider icon bar.
 * - 'overlay' = Full sidebar overlays content when opened (no persistent rail).
 * - 'reveal'  = Full slides in from left when opened.
 * - 'drawer'  = Full in a drawer.
 * - 'maestro' = Maestro: drawer + vertical submenu styling (this app).
 * - 'horizontal' = Top horizontal menu (no left rail).
 */
export const defaultMenuMode = "maestro";

/**
 * Menu modes to show in the layout config panel (if used).
 * Use a subset here to simplify choices for a project (e.g. only full + short + submenu).
 * Labels are shown in the UI.
 */
export const menuModes = [
  {
    value: "static",
    label: "Full",
    description: "Icons + labels; can collapse to icon-only",
  },
  {
    value: "slim",
    label: "Short",
    description: "Icon-only; submenu opens to the right when item has children",
  },
  {
    value: "compact",
    label: "Compact",
    description: "Icon-only, slightly wider; submenu to the right",
  },
  {
    value: "overlay",
    label: "Overlay",
    description: "Full menu overlays content when opened",
  },
  {
    value: "reveal",
    label: "Reveal",
    description: "Full menu slides in from left",
  },
  { value: "drawer", label: "Drawer", description: "Full menu in a drawer" },
  {
    value: "maestro",
    label: "Maestro",
    description: "Drawer + vertical submenu (this app)",
  },
  {
    value: "horizontal",
    label: "Horizontal",
    description: "Top horizontal menu bar",
  },
];

/** Which menu modes use "short" bar + overlay submenu (for layout logic). */
export const overlaySubmenuModes = ["slim", "compact", "horizontal"];
