import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
import { ay as m, H as p, C as s, a as d, T as l, az as o, aA as i, y as g } from "../index-sdOMz8GW.js";
import { Image as b } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const h = [
  {
    id: "base",
    name: "Base",
    desc: "CSS-only spatial gradient generated with tokens. Used as the default body/window background. No image assets needed — adapts automatically between light and dark modes via CSS custom properties.",
    dimensions: "Fluid (CSS gradient)",
    usage: "Body, root window, app shell background"
  },
  {
    id: "wave",
    name: "Wave",
    desc: "Full-width decorative background with flowing organic shapes. Designed for desktop/tablet viewports as hero sections or immersive landing pages.",
    dimensions: "1512 × 982",
    usage: "Hero sections, landing pages, desktop full-screen"
  },
  {
    id: "wallpaper",
    name: "Wallpaper",
    desc: "Compact landscape format optimized for card-like areas, banners, or contained sections where a spatial background adds depth without covering the full viewport.",
    dimensions: "1080 × 560",
    usage: "Banners, feature sections, contained backgrounds"
  },
  {
    id: "mobile",
    name: "Mobile",
    desc: "Portrait-oriented background asset optimized for mobile viewports and tall narrow containers.",
    dimensions: "402 × 874",
    usage: "Mobile screens, narrow containers, portrait layouts"
  }
], N = () => {
  const { mode: n } = m(), r = n === "dark";
  return /* @__PURE__ */ a(c, { children: [
    /* @__PURE__ */ e(
      p,
      {
        title: "Backgrounds",
        description: "macOS Tahoe provides 4 background types optimized for different viewport sizes and use cases. All adapt between light and dark automatically.",
        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-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50", children: /* @__PURE__ */ e(b, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Background Types", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        l,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
          children: "Each background type is designed for a specific screen context. Choose the appropriate format based on your layout's viewport and orientation requirements."
        }
      ),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: h.map((t) => /* @__PURE__ */ a(
        "div",
        {
          className: "p-4 rounded-xl border border-border space-y-2",
          children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(
                "div",
                {
                  className: "w-3 h-3 rounded-full",
                  style: {
                    backgroundColor: t.id === "base" ? r ? "#0a84ff" : "#007aff" : t.id === "wave" ? r ? "#30d158" : "#34c759" : t.id === "wallpaper" ? r ? "#ff9f0a" : "#ff9500" : r ? "#bf5af2" : "#af52de"
                  }
                }
              ),
              /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: t.name })
            ] }),
            /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t.desc }),
            /* @__PURE__ */ a("div", { className: "pt-2 border-t border-[var(--color-border)] space-y-1", children: [
              /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400", children: t.dimensions }),
              /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400", children: t.usage })
            ] })
          ]
        },
        t.id
      )) })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Base (CSS Spatial Gradient)", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ a(
        l,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
          children: [
            "Generated entirely with CSS custom properties. Currently used as the body background in the demo. Available classes:",
            " ",
            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-aurora" }),
            ",",
            " ",
            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-depth" }),
            ",",
            " ",
            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-demo" })
          ]
        }
      ),
      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: "relative w-full h-40 rounded-xl overflow-hidden border border-border",
              style: {
                backgroundColor: r ? "#131318" : "#f0f2f7"
              },
              children: /* @__PURE__ */ e(
                "div",
                {
                  className: "absolute inset-0 rounded-xl",
                  style: {
                    background: r ? "radial-gradient(circle at 28% 32%, rgba(18, 60, 100, 0.8) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(55, 30, 100, 0.6) 0%, transparent 42%)" : "radial-gradient(circle at 28% 32%, rgba(142, 200, 255, 0.45) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(170, 150, 255, 0.28) 0%, transparent 42%)",
                    filter: "blur(30px)"
                  }
                }
              )
            }
          ),
          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Aurora" }),
          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Animated spatial aurora" })
        ] }),
        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: "w-full h-40 rounded-xl border border-border",
              style: {
                background: r ? "linear-gradient(160deg, #141418 0%, #18181e 40%, #191520 70%, #141418 100%)" : "linear-gradient(160deg, #f0f2f6 0%, #eaedf4 40%, #f2f0f8 70%, #eef2f6 100%)"
              }
            }
          ),
          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Depth" }),
          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Sober, data-focused" })
        ] }),
        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: "w-full h-40 rounded-xl border border-border",
              style: {
                background: r ? "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 60, 160, 0.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(80, 0, 160, 0.4) 0%, transparent 55%), #101014" : "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(100, 180, 255, 0.4) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(160, 120, 255, 0.3) 0%, transparent 55%), #f0f2f7"
              }
            }
          ),
          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Demo" }),
          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Expressive, showcases" })
        ] })
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Wave", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        l,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
          children: "Full-width decorative background for desktop/tablet hero sections."
        }
      ),
      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1512 × 982 — Landscape (desktop full-screen)" }),
      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
        o,
        {
          mode: "absolute",
          variant: "wave",
          className: "rounded-xl !relative !inset-auto !z-auto",
          style: { height: "320px" }
        }
      ) }),
      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
        " ",
        i("wave", r)
      ] }) })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Wallpaper", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        l,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
          children: "Compact landscape format for banners, feature sections, and contained areas."
        }
      ),
      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1080 × 560 — Landscape (contained sections)" }),
      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
        o,
        {
          mode: "absolute",
          variant: "wallpaper",
          className: "rounded-xl !relative !inset-auto !z-auto",
          style: { height: "280px" }
        }
      ) }),
      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
        " ",
        i("wallpaper", r)
      ] }) })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Mobile", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        l,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
          children: "Portrait-oriented asset for mobile viewports and narrow containers."
        }
      ),
      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "402 × 874 — Portrait (mobile screens)" }),
      /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
        "div",
        {
          className: "rounded-xl overflow-hidden border border-border",
          style: { width: "220px", height: "478px" },
          children: /* @__PURE__ */ e(
            o,
            {
              mode: "absolute",
              variant: "mobile",
              className: "rounded-xl w-full h-full !relative !inset-auto !z-auto"
            }
          )
        }
      ) }),
      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
        " ",
        i("mobile", r)
      ] }) })
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Screen Size Mapping", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        l,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
          children: "Recommended background type per viewport breakpoint."
        }
      ),
      /* @__PURE__ */ e(
        g,
        {
          columns: [
            { key: "viewport", label: "Viewport" },
            {
              key: "breakpoint",
              label: "Breakpoint",
              className: "font-mono"
            },
            { key: "background", label: "Background" },
            { key: "asset", label: "Asset", className: "font-mono" }
          ],
          data: [
            {
              viewport: "Mobile",
              breakpoint: "< 640px",
              background: "Mobile",
              asset: `${r ? "dark" : "light"}-mobile.svg`
            },
            {
              viewport: "Tablet",
              breakpoint: "640–1024px",
              background: "Wallpaper",
              asset: `${r ? "dark" : "light"}-wallpaper.svg`
            },
            {
              viewport: "Desktop",
              breakpoint: "> 1024px",
              background: "Wave",
              asset: `${r ? "dark" : "light"}-wave.svg`
            },
            {
              viewport: "Any",
              breakpoint: "All",
              background: "Base (CSS)",
              asset: "No asset needed"
            }
          ],
          hoverable: !0,
          striped: !1
        }
      )
    ] }) }) })
  ] });
};
export {
  N as MacOSBackgroundsSection,
  N as default
};
