@anywayseo/tools 2.5.1 → 3.0.0

package/dist/index-HmqLMmGf.js

@@ -0,0 +1,1036 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react$1 = require("@chakra-ui/react");
+const reactI18next = require("react-i18next");
+const index = require("./index-Cte2-g6s.js");
+const i18n = require("./index-Biz1dDqA.js");
+require("@ctrl/tinycolor");
+const react = require("react");
+const icons = require("@chakra-ui/icons");
+const index$1 = require("./index-IpSV-c71.js");
+const react$2 = require("@mdx-js/react");
+const index$2 = require("./index-BhsXlbd8.js");
+const i18n$1 = require("i18next");
+const gatsby = require("gatsby");
+const Markdown = require("react-markdown");
+const ONE_LINE_HEIGHT = 24;
+const Bio = ({ content, maxLines = 1 }) => {
+  const ref = react.useRef(null);
+  const [showToggle, setShowToggle] = react.useState(false);
+  const [isExpanded, setIsExpanded] = react.useState(false);
+  const { t } = reactI18next.useTranslation("author");
+  react.useLayoutEffect(() => {
+    if (ref.current) {
+      const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
+      const isClamped = scrollWidth > clientWidth || scrollHeight > clientHeight;
+      setShowToggle(isClamped);
+    }
+    return () => {
+      setShowToggle(false);
+    };
+  }, []);
+  function handleClick() {
+    setIsExpanded((prev) => !prev);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isExpanded, startingHeight: ONE_LINE_HEIGHT * maxLines, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { ref, fontSize: "md", noOfLines: isExpanded ? void 0 : maxLines, children: content }) }),
+    showToggle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { size: "sm", variant: "link", colorScheme: "blue", onClick: handleClick, children: isExpanded ? t("action.collapse") : t("action.expand") })
+  ] });
+};
+const Author = ({ author, variant }) => {
+  const { name, role, bio, avatar } = author;
+  const imageComponent = typeof avatar === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: avatar, alt: name, rounded: "full" }) : avatar;
+  if (variant === "short") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "article", align: "center", gap: 4, children: [
+      !!imageComponent && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: 12, h: 12, children: imageComponent }),
+      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { fontWeight: "semibold", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.500", children: role })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !!imageComponent && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: imageComponent }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { w: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontSize: "lg", fontWeight: 600, children: [
+        name,
+        ", ",
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", color: "gray.500", children: role })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Bio, { content: bio })
+    ] }) })
+  ] });
+};
+const Center = ({ children, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Center, { ...boxProps, children });
+};
+const defaultColumns = { base: 1, sm: 2, md: 3, lg: 4, xl: 5 };
+const Grid = ({ items, columns = defaultColumns, gap, render, getKey, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ul", columns, spacing: gap, p: 0, m: 0, listStyleType: "none", ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index2)) });
+};
+const LinkButton = ({ label, url, width = "auto", ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Button,
+    {
+      as: react$1.Link,
+      href: url,
+      w: width,
+      bg: "brand.600",
+      textTransform: "uppercase",
+      _hover: { textDecoration: "none", bg: "brand.300" },
+      _active: { transform: "scale(0.95)" },
+      ...boxProps,
+      children: label
+    }
+  );
+};
+const ColorMap = {
+  light: "gray.200",
+  dark: "gray.700"
+};
+const PulseButton = ({ label, colorScheme = "light", to, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Button,
+    {
+      size: { base: "sm", md: "lg" },
+      color: ColorMap[colorScheme],
+      bgColor: "brand.500",
+      animation: `${index.Animation.pulse} 2s infinite linear`,
+      _hover: { bgColor: "brand.200", color: "gray.700" },
+      ...to ? { as: react$1.Link, href: to } : { onClick },
+      children: label
+    }
+  );
+};
+const AuthorCard = ({ author, ...boxProps }) => {
+  const { t } = reactI18next.useTranslation("author");
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "filled", ...boxProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.CardHeader, { pb: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { size: "md", children: t("title") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.CardBody,
+      {
+        display: "flex",
+        flexDirection: { base: "column", sm: "row" },
+        alignItems: { base: "center", sm: "flex-start" },
+        gap: 4,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "full" })
+      }
+    )
+  ] });
+};
+const BonusCardContent = ({ content }) => {
+  const { t } = reactI18next.useTranslation("author");
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Popover, { autoFocus: false, isLazy: true, lazyBehavior: "keepMounted", children: ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { size: "sm", variant: "link", color: "white", children: isOpen ? t("action.collapse") : t("action.expand") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverBody, { children: Array.isArray(content) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { children: content.map((paragraph, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: paragraph }, index2)) }) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: content }) }) }) })
+  ] }) });
+};
+const BonusCardTitle = ({ content }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Text,
+    {
+      as: "h3",
+      display: "inline-block",
+      py: 1,
+      px: 2,
+      borderRadius: "md",
+      bg: "yellow",
+      color: "black",
+      fontWeight: "bold",
+      fontSize: "lg",
+      children: content
+    }
+  );
+};
+const BonusCard = ({ title, subtitle, content, link, image, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.Card,
+    {
+      as: "article",
+      h: "full",
+      color: "whiteAlpha.900",
+      bg: "linear-gradient(90deg, #3b1f47, #731d58)",
+      _before: image ? {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        w: "100%",
+        h: "100%",
+        bgImage: `url(${image})`,
+        bgSize: "cover",
+        bgPosition: "center",
+        filter: "blur(0.05em) opacity(50%)",
+        zIndex: 0
+      } : void 0,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardBody, { as: "section", pb: 0, flex: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BonusCardTitle, { content: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
+          /* @__PURE__ */ jsxRuntime.jsx(BonusCardContent, { content })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link, width: "full" }) })
+      ]
+    }
+  );
+};
+const ContactForm = ({ ...boxProps }) => {
+  const toast = react$1.useToast();
+  const { t } = reactI18next.useTranslation("contactForm");
+  function handleSubmit(event) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const formData = new FormData(form);
+    const name = formData.get("name");
+    const email = formData.get("email");
+    const message = formData.get("message");
+    if (name && email && message) {
+      form.reset();
+      toast({
+        title: t("notification.title", { name }),
+        description: t("notification.description", { email }),
+        colorScheme: "brand",
+        status: "success",
+        duration: 5e3,
+        isClosable: true
+      });
+    } else {
+      console.error("Please fill out both fields");
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Box,
+    {
+      as: "form",
+      borderRadius: "lg",
+      p: 8,
+      color: react$1.useColorModeValue("gray.700", "whiteAlpha.900"),
+      bg: react$1.useColorModeValue("white", "gray.700"),
+      shadow: "base",
+      onSubmit: handleSubmit,
+      ...boxProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.VStack, { spacing: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.name.label") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(react$1.InputGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                fill: "currentColor",
+                className: "bi bi-person-fill",
+                viewBox: "0 0 16 16",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.Input, { type: "text", name: "name", placeholder: t("field.name.placeholder") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.email.label") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(react$1.InputGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.EmailIcon, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.Input, { type: "email", name: "email", placeholder: t("field.email.placeholder") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.message.label") }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Textarea, { name: "message", placeholder: t("field.message.placeholder"), rows: 6, resize: "none" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { type: "submit", colorScheme: "brand", width: "full", children: t("action.send") })
+      ] })
+    }
+  );
+};
+const Faq = ({ items, ...boxProps }) => {
+  const { bgColor, color } = index$1.usePrimaryColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Accordion, { allowToggle: true, ...boxProps, children: items.map(({ question, answer }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.AccordionItem, { border: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "h3", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.AccordionButton, { _hover: { color, bgColor }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "bold", children: question }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionIcon, {})
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionPanel, { children: answer })
+    ] }, question);
+  }) });
+};
+const FeatureCard = ({ title, description }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "outline", textAlign: "center", h: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardHeader, { as: "header", display: "flex", alignItems: "center", justifyContent: "center", gap: 2, pb: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.StarIcon, { w: 8, h: 8, color: "yellow.400" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: 600, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(icons.StarIcon, { w: 8, h: 8, color: "yellow.400" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.200", children: description }) })
+  ] });
+};
+const Features = ({ features, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Grid,
+    {
+      items: features,
+      columns: { base: 1, md: 2, lg: 3 },
+      gap: 10,
+      getKey: ({ title }) => title,
+      render: (item) => /* @__PURE__ */ jsxRuntime.jsx(FeatureCard, { ...item }),
+      ...boxProps
+    }
+  );
+};
+const GameCard = ({ name, description, image, link, height = "auto" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.LinkBox,
+    {
+      as: "article",
+      rounded: "md",
+      borderWidth: 1,
+      transition: "transform 0.2s ease",
+      cursor: link ? "pointer" : "default",
+      overflow: "hidden",
+      bg: "blackAlpha.200",
+      height,
+      _hover: { transform: "scale(1.1)" },
+      children: [
+        typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: "100%", aspectRatio: "16/9", children: image }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { as: "section", rounded: "md", p: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: link ? /* @__PURE__ */ jsxRuntime.jsx(react$1.LinkOverlay, { href: link, children: name }) : name }),
+          !!description && /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "sm", color: "gray.600", children: description })
+        ] })
+      ]
+    }
+  );
+};
+const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
+  const { t } = reactI18next.useTranslation("gameDemo");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.Box,
+      {
+        as: "iframe",
+        src,
+        sandbox: "allow-scripts allow-same-origin",
+        loading: "lazy",
+        w: "100%",
+        h: "100%",
+        allowFullScreen: true,
+        onLoad,
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("warning") })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.IconButton,
+      {
+        icon: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLinkIcon, { w: 4, h: 4 }),
+        size: "sm",
+        variant: "outline",
+        title: t(isFullscreen ? "action.deactivateFullscreen" : "action.activateFullscreen"),
+        "aria-label": "Fullscreen mode Toggle",
+        isRound: true,
+        disabled: !isLoaded,
+        position: "absolute",
+        top: 2,
+        left: 2,
+        border: "none",
+        color: "white",
+        _hover: { bgColor: "whiteAlpha.400" },
+        onClick: onToggleFullscreen
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
+  ] });
+};
+const GameDemoPreview = ({ image, alt, imageFit = "contain", onPlay }) => {
+  const { t } = reactI18next.useTranslation("gameDemo");
+  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: image, alt, objectFit: imageFit }) : image;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    imageComponent,
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(PulseButton, { label: t("action.playForFree"), onClick: onPlay }) })
+  ] });
+};
+const GameDemo = ({ name, src, previewImage, previewImageFit, ...boxProps }) => {
+  const [isRunning, setIsRunning] = react.useState(false);
+  const [isLoaded, setIsLoaded] = react.useState(false);
+  const { isOpen: isFullscreen, onToggle } = react$1.useDisclosure({ defaultIsOpen: false });
+  function handlePlay() {
+    setIsRunning(true);
+  }
+  function onLoad() {
+    setIsLoaded(true);
+  }
+  function handleToggleFullscreen() {
+    document.body.style.overflowY = isFullscreen ? "auto" : "hidden";
+    onToggle();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Box,
+    {
+      as: "article",
+      display: "grid",
+      w: "100%",
+      aspectRatio: "16/9 auto",
+      ...isFullscreen ? { zIndex: 100, inset: 0, position: "fixed", h: "100dvh" } : { position: "relative" },
+      ...boxProps,
+      children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(
+        GameDemoContent,
+        {
+          src,
+          isFullscreen,
+          isLoaded,
+          onLoad,
+          onToggleFullscreen: handleToggleFullscreen
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(GameDemoPreview, { image: previewImage, alt: name, imageFit: previewImageFit, onPlay: handlePlay })
+    }
+  );
+};
+const GameInfoItem = ({ title, value }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { w: "50%", color: "gray.500", textTransform: "capitalize", children: [
+      title,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { w: "50%", textTransform: "capitalize", children: value })
+  ] });
+};
+const VISIBLE_LANGUAGE_NUMBER = 5;
+function stringifyHasFeature(value) {
+  return i18n$1.t(`gameInfo:value.boolean.${value}`);
+}
+function stringifyVolatility(value) {
+  return i18n$1.t(`gameInfo:value.volatility.${value}`);
+}
+function stringifyArray(array) {
+  return array.join(", ");
+}
+function stringifyLanguageArray(languages) {
+  return languages.length > VISIBLE_LANGUAGE_NUMBER ? `${stringifyArray(languages.slice(0, VISIBLE_LANGUAGE_NUMBER))}, +${languages.length - VISIBLE_LANGUAGE_NUMBER}` : stringifyArray(languages);
+}
+function getGameInfoItemValue(key, value, currency) {
+  let formattedValue = "";
+  if (typeof value !== "string") {
+    if (key === i18n.GameCharacteristic.Rtp) {
+      formattedValue = index.formatNumber(value, { percent: "real", precision: 3 });
+    }
+    if (key === i18n.GameCharacteristic.MinBet || key === i18n.GameCharacteristic.MaxBet || key === i18n.GameCharacteristic.MaxWin) {
+      if (Array.isArray(currency)) {
+        const [primary, ...secondaries] = currency || ["USD"];
+        const primaryValue = index.formatNumber(value, { currency: primary });
+        formattedValue = secondaries.length ? `${primaryValue} (${secondaries.map((currency2) => index.getCurrencySymbol(currency2)).join(", ")})` : primaryValue;
+      } else {
+        formattedValue = index.formatNumber(value, { currency });
+      }
+    }
+    if (key === i18n.GameCharacteristic.Compatibility || key === i18n.GameCharacteristic.BonusFeatures) {
+      formattedValue = stringifyArray(value);
+    }
+    if (key === i18n.GameCharacteristic.Languages) {
+      formattedValue = stringifyLanguageArray(value);
+    }
+    if (typeof value === "boolean") {
+      formattedValue = stringifyHasFeature(value);
+    }
+  }
+  if (key === i18n.GameCharacteristic.ReleaseDate) {
+    formattedValue = index.formatDate({ value, options: { year: "numeric", month: "long" } });
+  }
+  if (key === i18n.GameCharacteristic.Volatility) {
+    formattedValue = stringifyVolatility(value);
+  }
+  if (!formattedValue) {
+    formattedValue = value.toLocaleString();
+  }
+  return formattedValue;
+}
+const GameInfo = ({ info }) => {
+  const { metadata } = index$2.useSiteContext();
+  const { currency } = metadata;
+  const { t } = reactI18next.useTranslation("gameInfo");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Box,
+    {
+      as: "aside",
+      float: { base: "none", lg: "right" },
+      w: { base: "100%", lg: "xs" },
+      ml: { base: 0, lg: 4 },
+      mb: { base: 0, lg: 4 },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "outline", h: "100%", p: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardHeader, { as: "header", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h2", fontSize: "xl", children: t("title") }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", p: 0, children: Object.entries(info).map(([group, items]) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Divider, { my: 2 }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: "semibold", mb: 2, children: t(`group.${group}`) }),
+          Object.entries(items).map(([itemKey, itemValue]) => {
+            const feature = itemKey;
+            const value = getGameInfoItemValue(feature, itemValue, currency);
+            return /* @__PURE__ */ jsxRuntime.jsx(GameInfoItem, { title: t(`feature.${feature}`), value }, itemKey);
+          })
+        ] }, group)) })
+      ] })
+    }
+  );
+};
+const HowTo = ({ steps, ...boxProps }) => {
+  const { color, bgColor } = index$1.usePrimaryColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description, thumbnail }, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index2 + 1) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { flex: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "lg", fontWeight: "bold", children: title }),
+      typeof thumbnail === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: thumbnail, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : thumbnail,
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: description })
+    ] })
+  ] }, index2)) });
+};
+const Container = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Container, { maxW: "container.xl", children });
+};
+const Content = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", py: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children }) });
+};
+const Logo = () => {
+  const { metadata } = index$2.useSiteContext();
+  const { logo } = metadata;
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: logo, alt: "Logo", objectFit: "contain" }) : logo });
+};
+const Brand$1 = ({ brand }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { position: "relative", my: 2, py: 8, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { display: "flex", bgColor: react$1.useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsxRuntime.jsx(gatsby.Link, { to: "/", children: brand }) })
+  ] });
+};
+const Copyright = () => {
+  const { metadata } = index$2.useSiteContext();
+  const { name: siteName } = metadata;
+  const { t } = reactI18next.useTranslation("footer");
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "small", colorScheme: "gray", display: "flex", align: "center", justifyContent: "center", children: t("copyright", { year: index.getCurrentYear(), siteName }) });
+};
+const Disclaimer = () => {
+  const { metadata } = index$2.useSiteContext();
+  const { name: siteName } = metadata;
+  const { t } = reactI18next.useTranslation("footer");
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "small", colorScheme: "gray", fontSize: "sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", fontWeight: "bold", color: "red.600", children: t("disclaimer.title") }),
+    t("disclaimer.description", { siteName })
+  ] });
+};
+const Extra = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", my: 2, children });
+};
+const Navigation$1 = ({ menu }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.SimpleGrid,
+    {
+      as: "ul",
+      columns: { base: 1, sm: 2, md: 4 },
+      mt: 4,
+      mb: 6,
+      p: 0,
+      spacing: 4,
+      justifyItems: { base: "flex-start", md: "center" },
+      justifyContent: "space-between",
+      children: menu.map(({ path, label }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.Text,
+        {
+          as: gatsby.Link,
+          to: path,
+          fontSize: "md",
+          fontWeight: "semibold",
+          colorScheme: "gray",
+          _hover: { textDecoration: "none", color: "brand.400" },
+          children: label
+        },
+        path
+      ) }, index2))
+    }
+  );
+};
+const Footer = () => {
+  var _a, _b, _c;
+  const { configs } = index$2.useSiteContext();
+  const navigation = ((_a = configs == null ? void 0 : configs.footer) == null ? void 0 : _a.navigation) ?? [];
+  const extra = (_b = configs == null ? void 0 : configs.footer) == null ? void 0 : _b.extra;
+  const showDisclaimer = ((_c = configs == null ? void 0 : configs.footer) == null ? void 0 : _c.showDisclaimer) ?? true;
+  const hasNavigation = !!navigation.length;
+  const hasExtra = !!extra;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Box,
+    {
+      as: "footer",
+      bg: react$1.useColorModeValue("gray.50", "gray.900"),
+      color: react$1.useColorModeValue("gray.700", "gray.200"),
+      py: 4,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+        hasNavigation && /* @__PURE__ */ jsxRuntime.jsx(Navigation$1, { menu: navigation }),
+        hasExtra && /* @__PURE__ */ jsxRuntime.jsx(Extra, { children: extra }),
+        showDisclaimer && /* @__PURE__ */ jsxRuntime.jsx(Disclaimer, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(Brand$1, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Copyright, {})
+      ] })
+    }
+  );
+};
+const Brand = ({ brand }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(gatsby.Link, { to: "/", children: brand });
+};
+const NavLink = react.forwardRef(({ path, label }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Text,
+    {
+      ref,
+      as: gatsby.Link,
+      to: path,
+      p: 2,
+      fontWeight: "semibold",
+      _hover: { textDecoration: "none", color: "brand.400" },
+      children: label
+    }
+  );
+});
+NavLink.displayName = "NavLink";
+const NavList$1 = ({ path, label, children }) => {
+  const background = react$1.useColorModeValue("white", "gray.800");
+  const backgroundHover = react$1.useColorModeValue("brand.50", "gray.900");
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Popover, { trigger: "hover", placement: "bottom-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.Text,
+      {
+        p: 2,
+        fontWeight: "semibold",
+        cursor: "pointer",
+        tabIndex: 0,
+        _hover: { textDecoration: "none", color: "brand.400" },
+        children: label
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { p: 2, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, role: "group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.Flex,
+        {
+          flex: 1,
+          justify: "flex-end",
+          align: "center",
+          opacity: 0,
+          transition: "all .3s ease",
+          transform: "translateX(-10px)",
+          _groupHover: { opacity: 1, transform: "translateX(0)" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { as: icons.ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
+        }
+      )
+    ] }) }, index2)) }) })
+  ] });
+};
+const DesktopNavigation = ({ menu }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "ul", role: "list", gap: 2, p: 0, display: { base: "none", md: "flex" }, children: menu.map((item, index2) => {
+    var _a;
+    return /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, index2);
+  }) });
+};
+const CHEVRON_DOWN_ICON_SIZE = "1.5rem";
+const NavList = ({ path, label, children, isExpanded, onExpand }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { flex: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      react$1.Flex,
+      {
+        as: "button",
+        p: 2,
+        pr: "3px",
+        align: "center",
+        justifyContent: "space-between",
+        _hover: { textDecoration: "none", color: "brand.400" },
+        onClick: onExpand,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { isTruncated: true, fontWeight: 600, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            icons.ChevronDownIcon,
+            {
+              w: CHEVRON_DOWN_ICON_SIZE,
+              h: CHEVRON_DOWN_ICON_SIZE,
+              transform: isExpanded ? "rotate(180deg)" : "",
+              transition: "all .25s ease-in-out"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { ml: 2, pl: 0, borderLeft: 1, borderStyle: "solid", borderColor: react$1.useColorModeValue("gray.200", "gray.700"), children: children == null ? void 0 : children.map((child, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: gatsby.Link, to: `${path}${child.path}`, p: 2, fontSize: "sm", children: child.label }) }, index2)) }) })
+  ] });
+};
+const CLOSE_ICON_SIZE = "0.75rem";
+const HAMBURGER_ICON_SIZE = "1rem";
+const MobileNavigation = ({ menu }) => {
+  const [expanded, setExpanded] = react.useState(null);
+  const { isOpen, onToggle } = react$1.useDisclosure();
+  const background = react$1.useColorModeValue("gray.50", "gray.900");
+  function handleExpand(index2) {
+    return () => {
+      setExpanded((prev) => prev === index2 ? null : index2);
+    };
+  }
+  function handleClick() {
+    setExpanded(null);
+    onToggle();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { display: { base: "block", md: "none" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.IconButton,
+      {
+        icon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: CLOSE_ICON_SIZE, h: CLOSE_ICON_SIZE }) : /* @__PURE__ */ jsxRuntime.jsx(icons.HamburgerIcon, { w: HAMBURGER_ICON_SIZE, h: HAMBURGER_ICON_SIZE }),
+        size: "sm",
+        variant: "ghost",
+        "aria-label": `${isOpen ? "Close" : "Open"} navigation menu`,
+        "aria-expanded": isOpen,
+        onClick: handleClick
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.List,
+      {
+        spacing: 2,
+        p: 2,
+        boxShadow: "md",
+        borderWidth: "1px",
+        borderColor: react$1.useColorModeValue("gray.200", "gray.700"),
+        borderRadius: "md",
+        bg: background,
+        children: menu.map((item, index2) => {
+          var _a;
+          return /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx(NavList, { ...item, isExpanded: index2 === expanded, onExpand: handleExpand(index2) }) : /* @__PURE__ */ jsxRuntime.jsx(NavLink, { ...item }) }, index2);
+        })
+      }
+    ) }) })
+  ] });
+};
+const Navigation = ({ menu }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DesktopNavigation, { menu }),
+    /* @__PURE__ */ jsxRuntime.jsx(MobileNavigation, { menu })
+  ] });
+};
+const Header = () => {
+  var _a, _b;
+  const { configs } = index$2.useSiteContext();
+  const navigation = ((_a = configs == null ? void 0 : configs.header) == null ? void 0 : _a.navigation) ?? [];
+  const toolbar = (_b = configs == null ? void 0 : configs.header) == null ? void 0 : _b.toolbar;
+  const hasToolbar = !!toolbar;
+  const hasNavigation = !!navigation.length;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Box,
+    {
+      as: "header",
+      position: "sticky",
+      top: 0,
+      bg: react$1.useColorModeValue("white", "gray.900"),
+      color: react$1.useColorModeValue("gray.700", "gray.200"),
+      boxShadow: "sm",
+      zIndex: 100,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "nav", gap: 2, py: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Brand, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
+        (hasNavigation || hasToolbar) && /* @__PURE__ */ jsxRuntime.jsxs(
+          react$1.Flex,
+          {
+            as: "section",
+            flex: 1,
+            flexDir: { base: "row-reverse", md: "row" },
+            justifyContent: "end",
+            align: "center",
+            gap: 2,
+            children: [
+              hasNavigation && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { flex: { base: 0, md: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Navigation, { menu: navigation }) }),
+              hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { gap: 2, flex: { base: 1, md: 0 }, justifyContent: "flex-end", children: toolbar })
+            ]
+          }
+        )
+      ] }) })
+    }
+  );
+};
+const Hero = ({ title, subtitle, content, link, image }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", bg: "gray.900", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { direction: { base: "column", md: "row" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { align: "center", justify: { base: "center", md: "flex-start" }, flex: 1, py: 8, pe: 8, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 6, w: "full", maxW: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Heading, { as: "h1", fontSize: { base: "3xl", md: "4xl", lg: "5xl" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", display: "block", children: [
+          title,
+          " —"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", display: "block", color: "brand.400", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: { base: "md", lg: "lg" }, color: "gray.500", children: content }),
+      !!link && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { direction: { base: "column", md: "row" }, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link }) })
+    ] }) }),
+    image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { display: { base: "none", md: "flex" }, flex: 1, children: image })
+  ] }) }) });
+};
+const Main = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Flex,
+    {
+      as: "main",
+      direction: "column",
+      flexGrow: 1,
+      bg: react$1.useColorModeValue("white", "gray.800"),
+      color: react$1.useColorModeValue("gray.700", "gray.200"),
+      children
+    }
+  );
+};
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = react.useState(false);
+  react.useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+    window.addEventListener("scroll", toggleVisibility);
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+  function handleClick() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Box,
+    {
+      position: "fixed",
+      bottom: { base: 4, md: 8, lg: 16 },
+      right: { base: 4, md: 8, lg: 16 },
+      zIndex: "1000",
+      opacity: isVisible ? 1 : 0,
+      transform: isVisible ? "translateY(0)" : "translateY(0.5rem)",
+      transition: "opacity 0.4s ease, transform 0.4s ease",
+      pointerEvents: isVisible ? "auto" : "none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.IconButton,
+        {
+          "aria-label": "Scroll to top",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, { w: 6, h: 6 }),
+          size: "lg",
+          shadow: "lg",
+          colorScheme: "brand",
+          isRound: true,
+          onClick: handleClick
+        }
+      )
+    }
+  );
+};
+const Layout = ({ children }) => {
+  const content = typeof children === "function" ? children({ Hero, Content }) : /* @__PURE__ */ jsxRuntime.jsx(Content, { children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 0, position: "relative", w: "100%", minH: "100dvh", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Main, { children: content }),
+    /* @__PURE__ */ jsxRuntime.jsx(Footer, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollToTop, {})
+  ] });
+};
+const List = ({ items, bullet = "—", render, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { pl: 0, ml: 2, mb: 4, ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { children: bullet }),
+    render ? render(item) : item
+  ] }, index2)) });
+};
+const NotFound = () => {
+  const { t } = reactI18next.useTranslation("pageNotFound");
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h1", children: t("title") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontSize: "xl", children: [
+      t("description"),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { as: gatsby.Link, to: "/", variant: "link", colorScheme: "brand", fontSize: "xl", children: t("action") })
+    ] })
+  ] });
+};
+const TitleMap = {
+  pros: "advantages",
+  cons: "disadvantages"
+};
+const IconMap = {
+  pros: icons.CheckCircleIcon,
+  cons: icons.WarningIcon
+};
+const IconColorMap = {
+  pros: "green.500",
+  cons: "red.500"
+};
+const BgColorMap = {
+  pros: "green",
+  cons: "red"
+};
+const ProsConsCard = ({ itemType, items }) => {
+  const { t } = reactI18next.useTranslation("prosCons");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.Card,
+    {
+      as: "article",
+      flex: 1,
+      p: 2,
+      bgColor: react$1.useColorModeValue(`${BgColorMap[itemType]}.100`, `${BgColorMap[itemType]}.800`),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.CardHeader,
+          {
+            as: "header",
+            p: 2,
+            borderTopRadius: "md",
+            bgColor: react$1.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h3", textTransform: "uppercase", fontSize: "xl", children: t(TitleMap[itemType]) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.CardBody,
+          {
+            as: "section",
+            p: 2,
+            borderBottomRadius: "md",
+            bgColor: react$1.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { spacing: 4, p: 0, children: items.map(({ title, description }) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react$1.ListIcon, { as: IconMap[itemType], w: 6, h: 6, color: IconColorMap[itemType] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontWeight: "semibold", fontSize: "md", children: [
+                title,
+                !!description && /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", fontWeight: "normal", children: [
+                  ": ",
+                  description
+                ] })
+              ] })
+            ] }, title)) })
+          }
+        )
+      ]
+    }
+  );
+};
+const ProsCons = ({ items, ...boxProps }) => {
+  const { pros, cons } = items;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "section", direction: { base: "column", md: "row" }, gap: 4, ...boxProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ProsConsCard, { itemType: "pros", items: pros }),
+    /* @__PURE__ */ jsxRuntime.jsx(ProsConsCard, { itemType: "cons", items: cons })
+  ] });
+};
+const RichTextRenderer = ({ content }) => {
+  const components = react$2.useMDXComponents();
+  return /* @__PURE__ */ jsxRuntime.jsx(Markdown, { components, children: content });
+};
+function replacePlaceholders(text, placeholders) {
+  Object.entries(placeholders).forEach(([placeholder, replacement]) => {
+    const regex = new RegExp(`{{${placeholder}}}`, "g");
+    text = text.replace(regex, replacement);
+  });
+  return text;
+}
+const Seo = ({ children, siteMetadata, title, description, lang }) => {
+  const { name: siteName, lang: defaultLang, seo } = siteMetadata;
+  const { title: defaultTitle, description: defaultDescription } = seo;
+  const placeholders = react.useMemo(
+    () => ({
+      siteName,
+      currentYear: index.getCurrentYear(),
+      currentMonth: index.getCurrentMonth()
+    }),
+    [siteName]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("html", { lang: lang ?? defaultLang }),
+    /* @__PURE__ */ jsxRuntime.jsx("title", { children: title ? typeof title === "string" ? replacePlaceholders(title, placeholders) : title(placeholders) : defaultTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "meta",
+      {
+        name: "description",
+        content: description ? typeof description === "string" ? replacePlaceholders(description, placeholders) : description(placeholders) : defaultDescription
+      }
+    ),
+    children
+  ] });
+};
+const Table = ({
+  columnNumber,
+  items,
+  caption,
+  bordered = false,
+  striped = true,
+  scrollable,
+  ...boxProps
+}) => {
+  const headerItems = items.slice(0, columnNumber);
+  const bodyItems = items.slice(columnNumber);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.TableContainer,
+    {
+      border: bordered ? void 0 : "none",
+      ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
+      ...boxProps,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Table, { variant: striped ? "striped" : "simple", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: headerItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Th, { children: item }, index2)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Tbody, { children: Array.from({ length: Math.ceil(bodyItems.length / columnNumber) }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: Array.from({ length: columnNumber }, (_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Td, { children: bodyItems[rowIndex * columnNumber + colIndex] || "" }, colIndex)) }, rowIndex)) }),
+        !!caption && /* @__PURE__ */ jsxRuntime.jsx(react$1.TableCaption, { children: caption })
+      ] })
+    }
+  );
+};
+const Tabs = ({ items, render, ...boxProps }) => {
+  const { tabs, panels } = react.useMemo(() => {
+    const tabs2 = [];
+    const panels2 = [];
+    items.forEach(({ content, ...tab }) => {
+      tabs2.push(tab);
+      panels2.push(content);
+    });
+    return { tabs: tabs2, panels: panels2 };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Tabs, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanel, { children: render ? render(panel) : panel }, index2)) })
+  ] });
+};
+const Tip = ({ tip, author = null, ...boxProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.Card,
+    {
+      variant: "filled",
+      p: 4,
+      borderLeft: "4px solid gray",
+      gap: 4,
+      _before: {
+        content: '"❛❛"',
+        position: "absolute",
+        top: -8,
+        left: -2,
+        fontSize: "6rem",
+        fontStyle: "italic",
+        color: react$1.useColorModeValue("blackAlpha.300", "whiteAlpha.300")
+      },
+      ...boxProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "blockquote", p: 0, fontStyle: "italic", children: tip }),
+        !!author && /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { alignItems: "center", justify: "flex-end", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Author, { author, variant: "short" }) })
+      ]
+    }
+  );
+};
+exports.Author = Author;
+exports.AuthorCard = AuthorCard;
+exports.BonusCard = BonusCard;
+exports.Center = Center;
+exports.ContactForm = ContactForm;
+exports.Faq = Faq;
+exports.FeatureCard = FeatureCard;
+exports.Features = Features;
+exports.GameCard = GameCard;
+exports.GameDemo = GameDemo;
+exports.GameInfo = GameInfo;
+exports.Grid = Grid;
+exports.HowTo = HowTo;
+exports.Layout = Layout;
+exports.LinkButton = LinkButton;
+exports.List = List;
+exports.NotFound = NotFound;
+exports.ProsCons = ProsCons;
+exports.PulseButton = PulseButton;
+exports.RichTextRenderer = RichTextRenderer;
+exports.Seo = Seo;
+exports.Table = Table;
+exports.Tabs = Tabs;
+exports.Tip = Tip;