@anywayseo/tools 1.0.0

package/dist/index-Dfw_EKZ6.mjs

@@ -0,0 +1,767 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Box, Collapse, Text, Button, Flex, Stack, Card, CardHeader, Heading, CardBody, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, CardFooter, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SimpleGrid, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container, Popover, PopoverTrigger, PopoverContent, Icon, useBreakpointValue, List, ListItem, ListIcon } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { EmailIcon, StarIcon, CloseIcon, ExternalLinkIcon, ChevronRightIcon, ChevronDownIcon, HamburgerIcon, ChevronUpIcon, WarningIcon, CheckCircleIcon } from "@chakra-ui/icons";
+import { getImage, GatsbyImage } from "gatsby-plugin-image";
+import "@mdx-js/react";
+import { u as useSiteMetadataContext } from "./index-Bs4zA1wD.mjs";
+import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, useEffect } from "react";
+import { u as usePrimaryColors } from "./index-xuSxvz5z.mjs";
+import { a as GameCharacteristic } from "./index-Bh5idiRE.mjs";
+import { t } from "i18next";
+import { b as formatNumber, f as formatDate, c as getDomain, g as getCurrentYear, a as getCurrentMonth } from "./index-BtWxmLHW.mjs";
+import { Link } from "gatsby";
+const ONE_LINE_HEIGHT = 24;
+const Bio = ({ content, maxLines = 1 }) => {
+  const ref = useRef(null);
+  const [showToggle, setShowToggle] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { t: t2 } = useTranslation("author");
+  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__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, startingHeight: ONE_LINE_HEIGHT * maxLines, children: /* @__PURE__ */ jsx(Text, { ref, fontSize: "md", noOfLines: isExpanded ? void 0 : maxLines, children: content }) }),
+    showToggle && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "link", colorScheme: "blue", onClick: handleClick, children: isExpanded ? t2("action.collapse") : t2("action.expand") })
+  ] });
+};
+const Expert = ({ expert, variant }) => {
+  const { firstName, lastName, jobTitle, bio } = expert;
+  const { expertImageData } = useSiteMetadataContext();
+  const image = getImage(expertImageData);
+  const fullName = `${firstName} ${lastName}`;
+  if (variant === "short") {
+    return /* @__PURE__ */ jsxs(Flex, { as: "article", align: "center", gap: 4, children: [
+      !!image && /* @__PURE__ */ jsx(Box, { w: 12, h: 12, children: /* @__PURE__ */ jsx(GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
+      /* @__PURE__ */ jsxs(Box, { fontWeight: "semibold", children: [
+        /* @__PURE__ */ jsx(Text, { children: fullName }),
+        /* @__PURE__ */ jsx(Text, { color: "gray.500", children: expert.jobTitle })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !!image && /* @__PURE__ */ jsx(Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsx(GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
+    /* @__PURE__ */ jsx(Flex, { w: "100%", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Text, { fontSize: "lg", fontWeight: 600, children: [
+        `${fullName}, `,
+        /* @__PURE__ */ jsx(Text, { as: "span", color: "gray.500", children: jobTitle })
+      ] }),
+      /* @__PURE__ */ jsx(Bio, { content: bio })
+    ] }) })
+  ] });
+};
+const Author = ({ author, ...cardProps }) => {
+  const { t: t2 } = useTranslation("author");
+  return /* @__PURE__ */ jsxs(Card, { as: "article", variant: "filled", ...cardProps, children: [
+    /* @__PURE__ */ jsx(CardHeader, { pb: 0, children: /* @__PURE__ */ jsx(Heading, { size: "md", children: t2("title") }) }),
+    /* @__PURE__ */ jsx(
+      CardBody,
+      {
+        display: "flex",
+        flexDirection: { base: "column", sm: "row" },
+        alignItems: { base: "center", sm: "flex-start" },
+        gap: 4,
+        children: /* @__PURE__ */ jsx(Expert, { expert: author, variant: "full" })
+      }
+    )
+  ] });
+};
+const ContactForm = () => {
+  const toast = useToast();
+  const { t: t2 } = 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: t2("notification.title", { name }),
+        description: t2("notification.description", { email }),
+        colorScheme: "brand",
+        status: "success",
+        duration: 5e3,
+        isClosable: true
+      });
+    } else {
+      console.error("Please fill out both fields");
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "form",
+      borderRadius: "lg",
+      p: 8,
+      color: useColorModeValue("gray.700", "whiteAlpha.900"),
+      bg: useColorModeValue("white", "gray.700"),
+      shadow: "base",
+      onSubmit: handleSubmit,
+      children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+        /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: t2("field.name.label") }),
+          /* @__PURE__ */ jsxs(InputGroup, { children: [
+            /* @__PURE__ */ jsx(InputLeftElement, { children: /* @__PURE__ */ 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__ */ 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__ */ jsx(Input, { type: "text", name: "name", placeholder: t2("field.name.placeholder") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: t2("field.email.label") }),
+          /* @__PURE__ */ jsxs(InputGroup, { children: [
+            /* @__PURE__ */ jsx(InputLeftElement, { children: /* @__PURE__ */ jsx(EmailIcon, {}) }),
+            /* @__PURE__ */ jsx(Input, { type: "email", name: "email", placeholder: t2("field.email.placeholder") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(FormControl, { isRequired: true, children: [
+          /* @__PURE__ */ jsx(FormLabel, { children: t2("field.message.label") }),
+          /* @__PURE__ */ jsx(Textarea, { name: "message", placeholder: t2("field.message.placeholder"), rows: 6, resize: "none" })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", colorScheme: "brand", width: "full", children: t2("action.send") })
+      ] })
+    }
+  );
+};
+const ExpertTip = ({ tip, expert, ...boxProps }) => {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "filled",
+      p: 4,
+      borderLeft: "4px solid gray",
+      gap: 4,
+      _before: {
+        content: '"❛❛"',
+        position: "absolute",
+        top: -8,
+        left: -2,
+        fontSize: "6rem",
+        fontStyle: "italic",
+        color: useColorModeValue("blackAlpha.300", "whiteAlpha.300")
+      },
+      ...boxProps,
+      children: [
+        /* @__PURE__ */ jsx(CardBody, { as: "blockquote", p: 0, fontStyle: "italic", children: tip }),
+        !!expert && /* @__PURE__ */ jsx(CardFooter, { alignItems: "center", justify: "flex-end", p: 0, children: /* @__PURE__ */ jsx(Expert, { expert, variant: "short" }) })
+      ]
+    }
+  );
+};
+const Faq = ({ items, mb }) => {
+  const { bgColor, color } = usePrimaryColors();
+  return /* @__PURE__ */ jsx(Accordion, { allowToggle: true, mb, children: items.map(({ question, answer }) => {
+    return /* @__PURE__ */ jsxs(AccordionItem, { border: 0, children: [
+      /* @__PURE__ */ jsx(Box, { as: "h3", children: /* @__PURE__ */ jsxs(AccordionButton, { _hover: { color, bgColor }, children: [
+        /* @__PURE__ */ jsx(Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "bold", children: question }),
+        /* @__PURE__ */ jsx(AccordionIcon, {})
+      ] }) }),
+      /* @__PURE__ */ jsx(AccordionPanel, { children: answer })
+    ] }, question);
+  }) });
+};
+const Features = ({ features, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ul", columns: { base: 1, md: 2, lg: 3 }, spacing: 10, p: 0, ...boxProps, children: features.map(({ title, description }) => /* @__PURE__ */ jsx(Stack, { as: "li", children: /* @__PURE__ */ jsxs(Card, { as: "article", variant: "outline", textAlign: "center", h: "100%", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { as: "header", display: "flex", alignItems: "center", justifyContent: "center", gap: 2, pb: 2, children: [
+      /* @__PURE__ */ jsx(StarIcon, { w: 8, h: 8, color: "yellow.400" }),
+      /* @__PURE__ */ jsx(Text, { fontWeight: 600, children: title }),
+      /* @__PURE__ */ jsx(StarIcon, { w: 8, h: 8, color: "yellow.400" })
+    ] }),
+    /* @__PURE__ */ jsx(CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray.600", children: description }) })
+  ] }) }, title)) });
+};
+const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
+  const { t: t2 } = useTranslation("gameDemo");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "iframe",
+        src,
+        sandbox: "allow-scripts allow-same-origin",
+        loading: "lazy",
+        w: "100%",
+        h: "100%",
+        allowFullScreen: true,
+        onLoad,
+        children: /* @__PURE__ */ jsx("p", { children: t2("warning") })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: isFullscreen ? /* @__PURE__ */ jsx(CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsx(ExternalLinkIcon, { w: 4, h: 4 }),
+        size: "sm",
+        variant: "outline",
+        title: t2(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__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
+  ] });
+};
+const pulsing = "_pulsing_u8aju_1";
+const styles = {
+  pulsing
+};
+const GameDemoPreview = ({ gameName, onPlay }) => {
+  const { gamePreviewImageData } = useSiteMetadataContext();
+  const { t: t2 } = useTranslation("gameDemo");
+  const image = getImage(gamePreviewImageData);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !!image && /* @__PURE__ */ jsx(GatsbyImage, { image, alt: `Play ${gameName} online`, objectFit: "contain" }),
+    /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: { base: "sm", md: "lg" },
+        color: "gray.200",
+        bgColor: "brand.500",
+        _hover: { bgColor: "brand.200", color: "gray.700" },
+        className: styles.pulsing,
+        onClick: onPlay,
+        children: t2("action.playForFree")
+      }
+    ) })
+  ] });
+};
+const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
+  const [isRunning, setIsRunning] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const { isOpen: isFullscreen, onToggle } = useDisclosure({ defaultIsOpen: false });
+  function handlePlay() {
+    setIsRunning(true);
+  }
+  function onLoad() {
+    setIsLoaded(true);
+  }
+  function handleToggleFullscreen() {
+    document.body.style.overflowY = isFullscreen ? "auto" : "hidden";
+    onToggle();
+  }
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(
+        GameDemoContent,
+        {
+          src,
+          isFullscreen,
+          isLoaded,
+          onLoad,
+          onToggleFullscreen: handleToggleFullscreen
+        }
+      ) : /* @__PURE__ */ jsx(GameDemoPreview, { gameName: name, previewImageFit, onPlay: handlePlay })
+    }
+  );
+};
+const GameInfoItem = ({ title, value }) => {
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsxs(Text, { w: "50%", color: "gray.500", textTransform: "capitalize", children: [
+      title,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(Text, { w: "50%", textTransform: "capitalize", children: value })
+  ] });
+};
+const VISIBLE_LANGUAGE_NUMBER = 5;
+function stringifyHasFeature(value) {
+  return t(`gameInfo:value.boolean.${value}`);
+}
+function stringifyVolatility(value) {
+  return 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 (key === GameCharacteristic.Rtp) {
+    formattedValue = formatNumber(value, { percent: "real", precision: 3 });
+  }
+  if (key === GameCharacteristic.MinBet || key === GameCharacteristic.MaxBet || key === GameCharacteristic.MaxWin && typeof value === "number") {
+    formattedValue = formatNumber(value, { currency });
+  }
+  if (key === GameCharacteristic.Compatibility || key === GameCharacteristic.BonusFeatures && typeof value !== "string") {
+    formattedValue = stringifyArray(value);
+  }
+  if (key === GameCharacteristic.Languages) {
+    formattedValue = stringifyLanguageArray(value);
+  }
+  if (key === GameCharacteristic.ReleaseDate) {
+    formattedValue = formatDate({ value, options: { year: "numeric", month: "long" } });
+  }
+  if (key === GameCharacteristic.Volatility) {
+    formattedValue = stringifyVolatility(value);
+  }
+  if (typeof value === "boolean") {
+    formattedValue = stringifyHasFeature(value);
+  }
+  if (!formattedValue) {
+    formattedValue = value.toLocaleString();
+  }
+  return formattedValue;
+}
+const GameInfo = ({ info }) => {
+  const { siteMetadata } = useSiteMetadataContext();
+  const { currency } = siteMetadata;
+  const { t: t2 } = useTranslation("gameInfo");
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs(Card, { as: "article", variant: "outline", h: "100%", p: 2, children: [
+        /* @__PURE__ */ jsx(CardHeader, { as: "header", p: 0, children: /* @__PURE__ */ jsx(Heading, { as: "h2", fontSize: "xl", children: t2("title") }) }),
+        /* @__PURE__ */ jsx(CardBody, { as: "section", p: 0, children: Object.entries(info).map(([group, items]) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(Divider, { my: 2 }),
+          /* @__PURE__ */ jsx(Text, { fontWeight: "semibold", mb: 2, children: t2(`group.${group}`) }),
+          Object.entries(items).map(([itemKey, itemValue]) => {
+            const feature = itemKey;
+            const value = getGameInfoItemValue(feature, itemValue, currency);
+            return /* @__PURE__ */ jsx(GameInfoItem, { title: t2(`feature.${feature}`), value }, itemKey);
+          })
+        ] }, group)) })
+      ] })
+    }
+  );
+};
+const HowTo = ({ steps, ...boxProps }) => {
+  const { color, bgColor } = usePrimaryColors();
+  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description }, index) => /* @__PURE__ */ jsxs(Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
+    /* @__PURE__ */ jsx(Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index + 1) }),
+    /* @__PURE__ */ jsxs(Stack, { flex: 1, children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "lg", fontWeight: "bold", children: title }),
+      /* @__PURE__ */ jsx(Text, { children: description })
+    ] })
+  ] }, index)) });
+};
+const Content = ({ children }) => {
+  return /* @__PURE__ */ jsx(Container, { as: "section", maxW: "container.xl", children });
+};
+const Logo = () => {
+  const { logoImageData } = useSiteMetadataContext();
+  const image = getImage(logoImageData);
+  if (!image) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(GatsbyImage, { image, objectFit: "contain", alt: "Logo" });
+};
+const Brand$1 = ({ brand }) => {
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", my: 2, py: 8, children: [
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AbsoluteCenter, { display: "flex", bgColor: useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsx(Box, { as: Link, to: "/", children: brand }) })
+  ] });
+};
+const Copyright = () => {
+  const { siteMetadata } = useSiteMetadataContext();
+  const { siteUrl } = siteMetadata;
+  const { t: t2 } = useTranslation("footer");
+  return /* @__PURE__ */ jsx(Text, { as: "small", colorScheme: "gray", display: "flex", align: "center", justifyContent: "center", children: t2("copyright", { year: getCurrentYear(), domain: getDomain(siteUrl) }) });
+};
+const Disclaimer = () => {
+  const { siteMetadata } = useSiteMetadataContext();
+  const { siteUrl } = siteMetadata;
+  const { t: t2 } = useTranslation("footer");
+  return /* @__PURE__ */ jsxs(Text, { as: "small", colorScheme: "gray", fontSize: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { as: "span", fontWeight: "bold", color: "red.600", children: t2("disclaimer.title") }),
+    t2("disclaimer.description", { domain: getDomain(siteUrl) })
+  ] });
+};
+const Navigation$1 = () => {
+  const { siteMetadata } = useSiteMetadataContext();
+  const { footerMenuLinks } = siteMetadata;
+  return /* @__PURE__ */ jsx(
+    SimpleGrid,
+    {
+      columns: { base: 1, sm: 2, md: 4 },
+      pt: 4,
+      pb: 6,
+      spacing: 4,
+      justifyItems: { base: "flex-start", md: "center" },
+      justifyContent: "space-between",
+      children: footerMenuLinks.map(({ url, title }) => /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: Link,
+          to: url,
+          fontSize: "md",
+          fontWeight: "semibold",
+          colorScheme: "gray",
+          _hover: { textDecoration: "none", color: "brand.400" },
+          children: title
+        },
+        url
+      ))
+    }
+  );
+};
+const Footer = () => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "footer",
+      bg: useColorModeValue("gray.50", "gray.900"),
+      color: useColorModeValue("gray.700", "gray.200"),
+      py: 4,
+      children: /* @__PURE__ */ jsxs(Content, { children: [
+        /* @__PURE__ */ jsx(Navigation$1, {}),
+        /* @__PURE__ */ jsx(Disclaimer, {}),
+        /* @__PURE__ */ jsx(Brand$1, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
+        /* @__PURE__ */ jsx(Copyright, {})
+      ] })
+    }
+  );
+};
+const Brand = ({ brand }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: Link,
+      to: "/",
+      display: "flex",
+      h: { base: "40px", md: "60px" },
+      fontFamily: "heading",
+      color: useColorModeValue("gray.800", "white"),
+      children: brand
+    }
+  );
+};
+const DesktopNavItem = ({ title, url, children }) => {
+  const background = useColorModeValue("white", "gray.800");
+  const backgroundHover = useColorModeValue("brand.50", "gray.900");
+  return /* @__PURE__ */ jsxs(Popover, { trigger: "hover", placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: Link,
+        to: url,
+        p: 2,
+        fontSize: "sm",
+        fontWeight: 500,
+        _hover: { textDecoration: "none", color: "brand.400" },
+        children: title
+      }
+    ) }),
+    !!children && /* @__PURE__ */ jsx(PopoverContent, { p: 4, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsx(Stack, { as: "ul", children: children.map((child) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "li",
+        role: "group",
+        display: "block",
+        p: 2,
+        cursor: "pointer",
+        rounded: "md",
+        _hover: { bg: backgroundHover },
+        children: /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.title }),
+            !!child.subtitle && /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: child.subtitle })
+          ] }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(Icon, { as: ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
+            }
+          )
+        ] })
+      },
+      child.url
+    )) }) })
+  ] });
+};
+const DesktopNavigation = ({ menu }) => {
+  return /* @__PURE__ */ jsx(Stack, { as: "ul", direction: "row", spacing: 4, children: menu.map((item) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(DesktopNavItem, { ...item }) }, item.url)) });
+};
+const MobileNavItem = ({ title, children, url }) => {
+  const { isOpen, onToggle } = useDisclosure();
+  return /* @__PURE__ */ jsxs(Stack, { w: "100%", p: 2, children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [
+      /* @__PURE__ */ jsx(Text, { as: Link, to: url, isTruncated: true, fontWeight: 600, children: title }),
+      !!children && /* @__PURE__ */ jsx(Flex, { as: "button", onClick: onToggle, children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          as: ChevronDownIcon,
+          w: 6,
+          h: 6,
+          transform: isOpen ? "rotate(180deg)" : "",
+          transition: "all .25s ease-in-out"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(
+      Stack,
+      {
+        as: "ul",
+        pl: 2,
+        borderLeft: 1,
+        borderStyle: "solid",
+        borderColor: useColorModeValue("gray.200", "gray.700"),
+        children: !!children && children.map((child) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(Text, { as: Link, to: `${url}${child.url}`, py: 2, children: child.title }) }, child.url))
+      }
+    ) })
+  ] });
+};
+const MobileNavigation = ({ menu }) => {
+  const { isOpen, onToggle } = useDisclosure();
+  const background = useColorModeValue("white", "gray.800");
+  return menu.length ? /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: isOpen ? /* @__PURE__ */ jsx(CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsx(HamburgerIcon, {}),
+        size: "md",
+        variant: "ghost",
+        "aria-label": "Toggle Navigation",
+        onClick: onToggle
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(Box, { position: "absolute", top: 14, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsx(Stack, { as: "ul", spacing: 2, p: 2, w: "100%", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(MobileNavItem, { ...item }) }, item.url)) }) }) })
+  ] }) : null;
+};
+const Navigation = ({ menu }) => {
+  const isDesktop = useBreakpointValue({ base: false, md: true });
+  return isDesktop ? /* @__PURE__ */ jsx(DesktopNavigation, { menu }) : /* @__PURE__ */ jsx(MobileNavigation, { menu });
+};
+const Navbar = ({ brand }) => {
+  const menu = [];
+  return /* @__PURE__ */ jsxs(Flex, { as: "nav", gap: 2, py: 1, children: [
+    /* @__PURE__ */ jsx(Brand, { brand }),
+    /* @__PURE__ */ jsx(Flex, { as: "section", flex: 1, align: "center", justifyContent: "flex-end", gap: 2, children: /* @__PURE__ */ jsx(Navigation, { menu }) })
+  ] });
+};
+const Header = () => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "header",
+      position: "sticky",
+      top: 0,
+      bg: useColorModeValue("white", "gray.900"),
+      color: useColorModeValue("gray.700", "gray.200"),
+      boxShadow: "sm",
+      zIndex: 100,
+      children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Navbar, { brand: /* @__PURE__ */ jsx(Logo, {}) }) })
+    }
+  );
+};
+const Hero = () => {
+  return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(Content, {}) });
+};
+const Main = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      as: "main",
+      direction: "column",
+      flexGrow: 1,
+      py: 4,
+      bg: useColorModeValue("white", "gray.800"),
+      color: useColorModeValue("gray.700", "gray.200"),
+      children
+    }
+  );
+};
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  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__ */ jsx(
+    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__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "Scroll to top",
+          icon: /* @__PURE__ */ jsx(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__ */ jsx(Content, { children });
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 0, position: "relative", w: "100%", minH: "100dvh", children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsx(Main, { children: content }),
+    /* @__PURE__ */ jsx(Footer, {}),
+    /* @__PURE__ */ jsx(ScrollToTop, {})
+  ] });
+};
+const TitleMap = {
+  pros: "advantages",
+  cons: "disadvantages"
+};
+const IconMap = {
+  pros: CheckCircleIcon,
+  cons: WarningIcon
+};
+const IconColorMap = {
+  pros: "green.500",
+  cons: "red.500"
+};
+const BgColorMap = {
+  pros: "green",
+  cons: "red"
+};
+const ProsConsCard = ({ itemType, items }) => {
+  const { t: t2 } = useTranslation("prosCons");
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      as: "article",
+      flex: 1,
+      p: 2,
+      bgColor: useColorModeValue(`${BgColorMap[itemType]}.100`, `${BgColorMap[itemType]}.800`),
+      children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            as: "header",
+            p: 2,
+            borderTopRadius: "md",
+            bgColor: useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
+            children: /* @__PURE__ */ jsx(Heading, { as: "h3", textTransform: "uppercase", fontSize: "xl", children: t2(TitleMap[itemType]) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardBody,
+          {
+            as: "section",
+            p: 2,
+            borderBottomRadius: "md",
+            bgColor: useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
+            children: /* @__PURE__ */ jsx(List, { spacing: 4, p: 0, children: items.map(({ title, description }) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", children: [
+              /* @__PURE__ */ jsx(ListIcon, { as: IconMap[itemType], w: 6, h: 6, color: IconColorMap[itemType] }),
+              /* @__PURE__ */ jsxs(Text, { fontWeight: "semibold", fontSize: "md", children: [
+                title,
+                !!description && /* @__PURE__ */ jsxs(Text, { as: "span", fontWeight: "normal", children: [
+                  ": ",
+                  description
+                ] })
+              ] })
+            ] }, title)) })
+          }
+        )
+      ]
+    }
+  );
+};
+const ProsCons = ({ items, ...boxProps }) => {
+  const { pros, cons } = items;
+  return /* @__PURE__ */ jsxs(Flex, { as: "section", direction: { base: "column", md: "row" }, gap: 4, ...boxProps, children: [
+    /* @__PURE__ */ jsx(ProsConsCard, { itemType: "pros", items: pros }),
+    /* @__PURE__ */ jsx(ProsConsCard, { itemType: "cons", items: cons })
+  ] });
+};
+const Seo = ({ children, siteMetadata, title, description, lang }) => {
+  const { title: defaultTitle, description: defaultDescription, lang: defaultLang, siteUrl } = siteMetadata;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("html", { lang: lang ?? defaultLang }),
+    /* @__PURE__ */ jsx("title", { children: title ? typeof title === "string" ? title : title({
+      domain: getDomain(siteUrl),
+      currentYear: getCurrentYear(),
+      currentMonth: getCurrentMonth()
+    }) : defaultTitle }),
+    /* @__PURE__ */ jsx(
+      "meta",
+      {
+        name: "description",
+        content: description ? typeof description === "string" ? description : description({
+          domain: getDomain(siteUrl),
+          currentYear: getCurrentYear(),
+          currentMonth: getCurrentMonth()
+        }) : defaultDescription
+      }
+    ),
+    children
+  ] });
+};
+export {
+  Author as A,
+  ContactForm as C,
+  ExpertTip as E,
+  Faq as F,
+  GameDemo as G,
+  HowTo as H,
+  Layout as L,
+  ProsCons as P,
+  Seo as S,
+  Features as a,
+  GameInfo as b
+};