import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
import { H as r, T as o, ax as c, aC as n, c as m } from "../index-sdOMz8GW.js";
import { Layers as d, Zap as h, Palette as p, Moon as u, Layout as g, Monitor as S, Sparkles as A } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => {
  const s = [
    {
      icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      title: "Zustand State Management",
      description: "Centralized theme state with minimal boilerplate, localStorage persistence, and excellent TypeScript support.",
      iconBgClassName: "from-yellow-500 via-amber-500 to-orange-500"
    },
    {
      icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      title: "CSS Custom Properties",
      description: "Dynamic brand colors using 12 CSS variables (6 light/dark pairs) for real-time theme updates without rebuilds.",
      iconBgClassName: "from-blue-500 via-cyan-500 to-teal-500"
    },
    {
      icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
      title: "Dark Mode Support",
      description: "Automatic dark/light mode switching with smooth transitions and system preference detection.",
      iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
    }
  ], i = [
    {
      icon: /* @__PURE__ */ e(g, { className: "w-5 h-5" }),
      title: "Default",
      description: "Standard theme with Clean, Admin, and Horizontal layouts.",
      color: "blue"
    },
    {
      icon: /* @__PURE__ */ e(S, { className: "w-5 h-5" }),
      title: "macOS (Sonoma)",
      description: "macOS-inspired dock layout with Sonoma visual style.",
      color: "purple"
    },
    {
      icon: /* @__PURE__ */ e(A, { className: "w-5 h-5" }),
      title: "macOS Tahoe",
      description: "Latest macOS Tahoe style with Tahoe and Tahoe Dock layouts.",
      color: "teal"
    }
  ];
  return /* @__PURE__ */ t(l, { children: [
    /* @__PURE__ */ e(
      r,
      {
        title: "Theme Architecture",
        description: "Built on Zustand, CSS custom properties, and Tailwind CSS v4 for a flexible, performant, and type-safe theming system.",
        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Core Technologies" }),
        /* @__PURE__ */ e(
          o,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Three pillars that power the theming system"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: s.map((a) => /* @__PURE__ */ e(c, { layout: "horizontal", ...a }, a.title)) })
    ] }),
    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Theme Variants" }),
        /* @__PURE__ */ e(
          o,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Three visual styles with their own layout constraints"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: i.map((a) => /* @__PURE__ */ e(
        n,
        {
          icon: a.icon,
          title: a.title,
          description: a.description,
          color: a.color
        },
        a.title
      )) })
    ] }),
    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Layout Constraint Map" }),
        /* @__PURE__ */ e(
          o,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Each theme variant restricts which layouts are available"
          }
        )
      ] }),
      /* @__PURE__ */ e(
        m,
        {
          language: "TS",
          code: `// THEME_STYLE_LAYOUTS mapping
const THEME_STYLE_LAYOUTS: Record<THEME_VARIANT, ThemeStyleConfig> = {
  default: {
    validLayouts: [CLEAN, ADMIN, HORIZONTAL],
    defaultLayout: HORIZONTAL,
  },
  macos: {
    validLayouts: [MACOS, MACOS_CLEAN],
    defaultLayout: MACOS,
  },
  'macos-tahoe': {
    validLayouts: [MACOS_TAHOE, MACOS_TAHOE_DOCK, MACOS_TAHOE_CLEAN],
    defaultLayout: MACOS_TAHOE,
  },
};

// LAYOUT_OPTIONS enum (8 values)
enum LAYOUT_OPTIONS {
  CLEAN = 'clean',
  ADMIN = 'admin',
  HORIZONTAL = 'horizontal',
  MACOS = 'macos',
  MACOS_CLEAN = 'macos-clean',
  MACOS_TAHOE = 'macos-tahoe',
  MACOS_TAHOE_DOCK = 'macos-tahoe-dock',
  MACOS_TAHOE_CLEAN = 'macos-tahoe-clean',
}`
        }
      )
    ] })
  ] });
};
export {
  x as default
};
