oraculo-ui 0.1.10 → 0.1.12

package/dist/chunk-MC4XEBI3.mjs

@@ -0,0 +1,1277 @@
+import {
+  OraculoSeccionClubOlimpo_default
+} from "./chunk-THUJNRMX.mjs";
+import {
+  OraculoSeccionCasinoEnVivo_default
+} from "./chunk-WTK2IT5O.mjs";
+import {
+  OraculoCarousel_default,
+  OraculoSeccionBonoBienvenida_default
+} from "./chunk-PYHDJZX3.mjs";
+import {
+  OraculoButton
+} from "./chunk-IGAIIVJZ.mjs";
+import {
+  __glob
+} from "./chunk-XNMUIY72.mjs";
+
+// src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
+import { useRef as useRef3, useState as useState4 } from "react";
+
+// ../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
+import { createSvgIcon } from "@mui/material/utils";
+
+// ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChevronLeftRounded_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
+  d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41"
+}), "ChevronLeftRounded");
+
+// ../node_modules/@mui/icons-material/esm/ChevronRightRounded.js
+import { jsx as _jsx2 } from "react/jsx-runtime";
+var ChevronRightRounded_default = createSvgIcon(/* @__PURE__ */ _jsx2("path", {
+  d: "M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"
+}), "ChevronRightRounded");
+
+// src/atoms/OraculoSectionTitle/OraculoSectionTitle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OraculoSectionTitle({
+  title,
+  iconUrl,
+  size = "md",
+  className = ""
+}) {
+  const sizeClass = size ? `orc-section-title--${size}` : "";
+  const wrapperClass = [
+    "orc-section-title",
+    sizeClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    iconUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: iconUrl,
+        alt: "",
+        className: "orc-section-title__icon"
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { className: "orc-section-title__title", children: title })
+  ] });
+}
+
+// src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
+import Box2 from "@mui/material/Box";
+
+// src/molecules/OraculoGameCard/OraculoGameCard.tsx
+import Box from "@mui/material/Box";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OraculoGameCard = ({
+  imageUrl,
+  onClick,
+  size = "sm",
+  fillParent = false
+}) => {
+  const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
+  const handleButtonClick = (e) => {
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick();
+  };
+  const sizeStyles = fillParent ? { width: "100%", height: "100%" } : { width: `${dim.w}px`, height: `${dim.h}px` };
+  return /* @__PURE__ */ jsxs2(
+    Box,
+    {
+      onClick,
+      role: "button",
+      sx: {
+        position: "relative",
+        borderRadius: "12px",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        transition: "transform .15s ease, box-shadow .15s ease",
+        ...sizeStyles,
+        "&:hover": {
+          transform: "translateY(-2px)",
+          boxShadow: 8,
+          cursor: "pointer"
+        },
+        "&:hover .oraculo-game-card-overlay": {
+          opacity: 1
+        },
+        "&:hover .oraculo-game-card-btn": {
+          opacity: 1,
+          transform: "translate(-50%, -50%) scale(1)",
+          pointerEvents: "auto"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "img",
+          {
+            src: imageUrl,
+            alt: "Juego de casino",
+            loading: "lazy",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block",
+              borderRadius: "inherit"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            className: "oraculo-game-card-overlay",
+            sx: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.45)",
+              opacity: 0,
+              transition: "opacity .15s ease",
+              pointerEvents: "none",
+              zIndex: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Box,
+          {
+            className: "oraculo-game-card-btn",
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              zIndex: 2,
+              transform: "translate(-50%, -50%) scale(0.95)",
+              opacity: 0,
+              transition: "opacity .15s ease, transform .15s ease",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx2(OraculoButton, { variant: "primary", size: "md", onClick: handleButtonClick, children: "JUGAR" })
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoGameCard_default = OraculoGameCard;
+
+// src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function OraculoGameRankCard({
+  imageUrl,
+  orden = 1,
+  onClick,
+  sizes = {
+    xs: { w: 104, h: 112, r: 18, font: 48 },
+    md: { w: 186, h: 264, r: 22.6, font: 64 }
+  }
+}) {
+  var _a, _b, _c, _d;
+  const getVal = (k, def) => {
+    var _a2, _b2, _c2, _d2;
+    return {
+      xs: (_b2 = (_a2 = sizes.xs) == null ? void 0 : _a2[k]) != null ? _b2 : def,
+      md: (_d2 = (_c2 = sizes.md) == null ? void 0 : _c2[k]) != null ? _d2 : def
+    };
+  };
+  const W = getVal("w", 186);
+  const H = getVal("h", 264);
+  const R = getVal("r", 22.6);
+  const F = getVal("font", 64);
+  const hang = {
+    xs: Math.round(((_b = (_a = sizes.xs) == null ? void 0 : _a.font) != null ? _b : 64) * 0.28),
+    md: Math.round(((_d = (_c = sizes.md) == null ? void 0 : _c.font) != null ? _d : 64) * 0.28)
+  };
+  return /* @__PURE__ */ jsxs3(
+    Box2,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: { xs: `${W.xs}px`, md: `${W.md}px` },
+        aspectRatio: {
+          xs: `${W.xs}/${H.xs}`,
+          md: `${W.md}/${H.md}`
+        },
+        borderRadius: { xs: `${R.xs}px`, md: `${R.md}px` },
+        boxSizing: "border-box",
+        overflow: "visible",
+        pb: { xs: `${hang.xs}px`, md: `${hang.md}px` }
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx3(
+              OraculoGameCard_default,
+              {
+                imageUrl,
+                onClick,
+                size: "lg",
+                fillParent: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              left: 8,
+              bottom: {
+                xs: `-${hang.xs}px`,
+                md: `-${hang.md}px`
+              },
+              fontFamily: "secondary",
+              fontSize: {
+                xs: `${F.xs}px`,
+                md: `${F.md}px`
+              },
+              lineHeight: 1,
+              color: "#3CC666",
+              WebkitTextStroke: "1px #9ee86e",
+              zIndex: 3,
+              userSelect: "none"
+            },
+            children: orden
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/molecules/OraculoGameSlide/OraculoGameSlide.tsx
+import Box3 from "@mui/material/Box";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var GAP = 12;
+var OraculoGameSlide = ({
+  items,
+  layout = "grid",
+  onClick
+}) => {
+  var _a;
+  if (layout === "mosaic") {
+    const big = items[0];
+    const smalls = items.slice(1, 5);
+    return /* @__PURE__ */ jsxs4(
+      Box3,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateRows: {
+            xs: `repeat(2, 112px)`,
+            md: `repeat(2, 168px)`
+          },
+          gridTemplateColumns: {
+            xs: `184px`,
+            md: `280px`
+          },
+          gridAutoFlow: "column",
+          gridAutoColumns: {
+            xs: `104px`,
+            md: `152px`
+          },
+          columnGap: `${GAP}px`,
+          rowGap: `${GAP}px`,
+          alignItems: "stretch",
+          justifyItems: "stretch"
+        },
+        children: [
+          big && /* @__PURE__ */ jsx4(
+            Box3,
+            {
+              sx: {
+                width: { xs: 184, md: 280 },
+                height: { xs: 234, md: 352 },
+                gridRow: "1 / span 2",
+                overflow: "hidden",
+                borderRadius: 2
+              },
+              children: /* @__PURE__ */ jsx4(
+                OraculoGameCard_default,
+                {
+                  imageUrl: `https://olimpo.bet${(_a = big.imageUrl) != null ? _a : ""}`,
+                  size: "lg",
+                  fillParent: true,
+                  onClick: () => onClick == null ? void 0 : onClick(big, 0)
+                }
+              )
+            }
+          ),
+          smalls.map((it, index) => {
+            var _a2;
+            return /* @__PURE__ */ jsx4(
+              Box3,
+              {
+                sx: {
+                  width: { xs: 104, md: 152 },
+                  height: { xs: 112, md: 168 },
+                  overflow: "hidden",
+                  borderRadius: 2
+                },
+                children: /* @__PURE__ */ jsx4(
+                  OraculoGameCard_default,
+                  {
+                    imageUrl: `https://olimpo.bet${(_a2 = it.imageUrl) != null ? _a2 : ""}`,
+                    size: "sm",
+                    fillParent: true,
+                    onClick: () => onClick == null ? void 0 : onClick(it, index + 1)
+                  }
+                )
+              },
+              it.id
+            );
+          })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    Box3,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: `repeat(2, 104px)`,
+          md: `repeat(2, 152px)`
+        },
+        gridTemplateRows: {
+          xs: `repeat(2, 112px)`,
+          md: `repeat(2, 168px)`
+        },
+        gap: `${GAP}px`,
+        gridAutoFlow: "column"
+      },
+      children: items.map((it, index) => {
+        var _a2, _b;
+        return /* @__PURE__ */ jsx4(
+          Box3,
+          {
+            sx: {
+              overflow: "hidden",
+              borderRadius: 2
+            },
+            children: /* @__PURE__ */ jsx4(
+              OraculoGameCard_default,
+              {
+                imageUrl: `https://olimpo.bet${(_b = it.imageUrl) != null ? _b : ""}`,
+                size: "sm",
+                fillParent: true,
+                onClick: () => onClick == null ? void 0 : onClick(it, index)
+              }
+            )
+          },
+          (_a2 = it.id) != null ? _a2 : index
+        );
+      })
+    }
+  );
+};
+var OraculoGameSlide_default = OraculoGameSlide;
+
+// src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+import { useMemo } from "react";
+import Stack from "@mui/material/Stack";
+import Box4 from "@mui/material/Box";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function OraculoSeccionTopJuegos({
+  items,
+  title = "Top Juegos",
+  iconUrl,
+  onCardClick
+}) {
+  const normalizedItems = useMemo(
+    () => items.map((item, index) => {
+      var _a;
+      return {
+        ...item,
+        // si no viene orden, usamos el índice (1-based)
+        orden: (_a = item.orden) != null ? _a : index + 1,
+        _originalIndex: index
+      };
+    }).sort((a, b) => {
+      if (a.orden != null && b.orden != null) return a.orden - b.orden;
+      return a._originalIndex - b._originalIndex;
+    }),
+    [items]
+  );
+  return /* @__PURE__ */ jsx5("section", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs5(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsx5(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+    /* @__PURE__ */ jsx5(
+      Box4,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "repeat(3, minmax(0, 1fr))",
+            md: "repeat(6, minmax(0, 1fr))"
+          },
+          gap: { xs: 1.5, md: 2 },
+          justifyItems: "center",
+          width: "100%"
+        },
+        children: normalizedItems.slice(0, 6).map((juego) => {
+          var _a;
+          return /* @__PURE__ */ jsx5(
+            OraculoGameRankCard,
+            {
+              imageUrl: `https://olimpo.bet${(_a = juego.logo) != null ? _a : ""}`,
+              orden: juego.orden,
+              onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
+            },
+            juego.machine
+          );
+        })
+      }
+    )
+  ] }) });
+}
+
+// src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
+import { useRef, useState } from "react";
+import Stack2 from "@mui/material/Stack";
+import Box5 from "@mui/material/Box";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var buildCasinoSlides = (games, mosaicFirst = true, gridSize = 4) => {
+  const baseItems = games.map((g, idx) => {
+    var _a, _b, _c;
+    return {
+      id: (_b = (_a = g.orden) != null ? _a : g.machine) != null ? _b : idx,
+      imageUrl: (_c = g.logo) != null ? _c : ""
+    };
+  });
+  if (!baseItems.length) return [];
+  const slides = [];
+  let start = 0;
+  if (mosaicFirst) {
+    const take = Math.min(baseItems.length, 5);
+    slides.push({
+      id: "mosaic-0",
+      kind: "mosaic",
+      items: baseItems.slice(0, take)
+    });
+    start = take;
+  }
+  while (start < baseItems.length) {
+    const end = Math.min(start + gridSize, baseItems.length);
+    slides.push({
+      id: `grid-${start}`,
+      kind: "grid",
+      items: baseItems.slice(start, end)
+    });
+    start = end;
+  }
+  return slides;
+};
+var OraculoSeccionCasino = ({
+  items,
+  title = "Casino",
+  iconUrl = "/assets/img/home/Casino/diamante.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4
+}) => {
+  const carouselRef = useRef(null);
+  const [navState, setNavState] = useState({ isStart: true, isEnd: false });
+  const slides = buildCasinoSlides(items, mosaicFirst, gridSize);
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  return /* @__PURE__ */ jsx6("section", { children: /* @__PURE__ */ jsxs6(Stack2, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsxs6(
+      Box5,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 1.5,
+          rowGap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            Box5,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ jsx6(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ jsx6(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ jsx6(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6(Box5, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx6(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items: slides,
+        perPage: 1,
+        gap: "0px",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start"
+        },
+        renderItem: (slide) => /* @__PURE__ */ jsx6("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx6(
+          OraculoGameSlide_default,
+          {
+            items: slide.items,
+            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
+            onClick: (itm) => {
+              const game = items.find(
+                (g, idx) => {
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
+                }
+              );
+              if (game) onItemClick == null ? void 0 : onItemClick(game);
+            }
+          }
+        ) }),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] }) });
+};
+var OraculoSeccionCasino_default = OraculoSeccionCasino;
+
+// src/organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx
+import { useRef as useRef2, useState as useState2 } from "react";
+import Stack3 from "@mui/material/Stack";
+import Box6 from "@mui/material/Box";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var buildVirtualSlides = (games, mosaicFirst = true, gridSize = 4) => {
+  const baseItems = games.map((g, idx) => {
+    var _a, _b;
+    return {
+      id: (_a = g.orden) != null ? _a : idx,
+      imageUrl: (_b = g.logo) != null ? _b : ""
+    };
+  });
+  if (!baseItems.length) return [];
+  const slides = [];
+  let start = 0;
+  if (mosaicFirst) {
+    const take = Math.min(baseItems.length, 5);
+    slides.push({
+      id: "mosaic-0",
+      kind: "mosaic",
+      items: baseItems.slice(0, take)
+    });
+    start = take;
+  }
+  while (start < baseItems.length) {
+    const end = Math.min(start + gridSize, baseItems.length);
+    slides.push({
+      id: `grid-${start}`,
+      kind: "grid",
+      items: baseItems.slice(start, end)
+    });
+    start = end;
+  }
+  return slides;
+};
+var OraculoSeccionVirtuales = ({
+  items,
+  title = "Virtuales",
+  iconUrl = "/assets/img/home/Virtuales/virtuales.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4
+}) => {
+  const carouselRef = useRef2(null);
+  const [navState, setNavState] = useState2({ isStart: true, isEnd: false });
+  const slides = buildVirtualSlides(items, mosaicFirst, gridSize);
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  return /* @__PURE__ */ jsx7("section", { children: /* @__PURE__ */ jsxs7(Stack3, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsxs7(
+      Box6,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 1.5,
+          rowGap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx7(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ jsxs7(
+            Box6,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ jsx7(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ jsx7(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(Box6, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx7(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items: slides,
+        perPage: 1,
+        gap: "0",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start",
+          perMove: 1
+        },
+        renderItem: (slide) => /* @__PURE__ */ jsx7("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx7(
+          OraculoGameSlide_default,
+          {
+            items: slide.items,
+            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
+            onClick: (itm) => {
+              const game = items.find(
+                (g, idx) => {
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
+                }
+              );
+              if (game) onItemClick == null ? void 0 : onItemClick(game);
+            }
+          }
+        ) }),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] }) });
+};
+var OraculoSeccionVirtuales_default = OraculoSeccionVirtuales;
+
+// src/templates/OraculoPageLanding.tsx
+import {
+  Container,
+  Stack as Stack4
+} from "@mui/material";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function OraculoPageLanding({ props }) {
+  const listaDestacados = [
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      // aquí puedes usar la ruta que antes estaba en href
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+      // summary_image: "/lo-que-sea.png", // opcional
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    }
+  ];
+  return /* @__PURE__ */ jsxs8(Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
+    /* @__PURE__ */ jsx8(
+      OraculoSeccionBonoBienvenida_default,
+      {
+        headline: props.bonos.headline,
+        items: props.bonos.items
+      }
+    ),
+    /* @__PURE__ */ jsxs8(Stack4, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ jsx8(
+        OraculoSeccionTopJuegos,
+        {
+          items: props.topJuegos.items,
+          title: props.topJuegos.title,
+          iconUrl: props.topJuegos.iconUrl,
+          onCardClick: props.topJuegos.onCardClick
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        OraculoSeccionCasino_default,
+        {
+          items: props.casino.items,
+          title: props.casino.title,
+          iconUrl: props.casino.iconUrl,
+          onItemClick: props.casino.onItemClick,
+          onViewMore: props.casino.onViewMore
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8(
+      OraculoSeccionCasinoEnVivo_default,
+      {
+        items: props.casinoEnVivo.items,
+        title: props.casinoEnVivo.title,
+        subtitle: props.casinoEnVivo.subtitle,
+        backgroundMobileUrl: props.casinoEnVivo.backgroundMobileUrl,
+        backgroundDesktopUrl: props.casinoEnVivo.backgroundDesktopUrl,
+        onCardClick: props.casinoEnVivo.onCardClick,
+        onViewMore: props.casinoEnVivo.onViewMore
+      }
+    ),
+    /* @__PURE__ */ jsxs8(Stack4, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ jsx8(
+        OraculoSeccionVirtuales_default,
+        {
+          items: props.virtuales.items,
+          title: props.virtuales.title,
+          iconUrl: props.virtuales.iconUrl,
+          onItemClick: props.virtuales.onItemClick,
+          onViewMore: props.virtuales.onViewMore
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        OraculoSeccionDestacados,
+        {
+          items: listaDestacados,
+          title: "Destacados",
+          iconUrl: "/assets/img/home/Destacados/starIcon.svg",
+          onViewMore: () => console.log("Ver m\xE1s clickeado")
+        }
+      ),
+      /* @__PURE__ */ jsx8(OraculoSeccionClubOlimpo_default, { items: props.clubOlimpo })
+    ] })
+  ] });
+}
+
+// src/templates/OraculoPageLandingPreview.tsx
+import React4, { useEffect, useMemo as useMemo2, useState as useState3 } from "react";
+import { Container as Container2, Stack as Stack5 } from "@mui/material";
+import { jsx as jsx9 } from "react/jsx-runtime";
+
+// import("../organisms/**/*/**/*") in src/templates/OraculoPageLandingPreview.tsx
+var globImport_organisms = __glob({
+  "../organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx": () => import("./OraculoSeccionBonoBienvenida-6L54EBL3.mjs"),
+  "../organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx": () => import("./OraculoSeccionCasino-FHD2WBDU.mjs"),
+  "../organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx": () => import("./OraculoSeccionCasinoEnVivo-EPVIACRV.mjs"),
+  "../organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.css": () => import("./OraculoSeccionClubOlimpo-BLUJXLUC.mjs"),
+  "../organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx": () => import("./OraculoSeccionClubOlimpo-63QCT4A2.mjs"),
+  "../organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx": () => import("./OraculoSeccionDestacados-5RFVEBFL.mjs"),
+  "../organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx": () => import("./OraculoSeccionTopJuegos-K6CHEKEP.mjs"),
+  "../organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx": () => import("./OraculoSeccionVirtuales-NEIWD2BT.mjs")
+});
+
+// src/templates/OraculoPageLandingPreview.tsx
+var HttpError = class extends Error {
+  constructor(status, url, statusText) {
+    super(`HTTP ${status} ${statusText}`);
+    this.status = status;
+    this.url = url;
+    this.statusText = statusText;
+    this.name = "HttpError";
+  }
+};
+var OraculoPageLandingPreview = ({
+  sectionsOverride
+}) => {
+  const [componentMap, setComponentMap] = useState3({});
+  const [sectionDataMap, setSectionDataMap] = useState3({});
+  const [sectionLoadingMap, setSectionLoadingMap] = useState3({});
+  const [sectionErrorMap, setSectionErrorMap] = useState3({});
+  const fetchSectionData = async (section) => {
+    const rawUrl = (section.apiUrl || "").trim();
+    if (!rawUrl) return void 0;
+    const method = section.apiMethod || "GET";
+    const params = section.apiParams || [];
+    let url = rawUrl;
+    let body;
+    let headers;
+    if (method === "GET") {
+      const u = new URL(
+        rawUrl,
+        typeof window !== "undefined" ? window.location.origin : "http://localhost"
+      );
+      params.forEach((p) => {
+        if (!p.key) return;
+        u.searchParams.set(p.key, p.value);
+      });
+      url = u.toString();
+    } else {
+      const encoded = new URLSearchParams();
+      params.forEach((p) => {
+        if (!p.key) return;
+        encoded.append(p.key, p.value);
+      });
+      body = encoded.toString();
+      headers = {
+        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
+      };
+    }
+    const res = await fetch(url, {
+      method,
+      headers,
+      body
+    });
+    if (!res.ok) throw new HttpError(res.status, url, res.statusText);
+    return res.json();
+  };
+  const effectiveSections = useMemo2(
+    () => sectionsOverride ? sectionsOverride.slice() : [],
+    [sectionsOverride]
+  );
+  const fetchedKeysRef = React4.useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const fetchables = effectiveSections.map((s) => ({ s, url: (s.apiUrl || "").trim() })).filter(({ url }) => !!url);
+    if (!fetchables.length) return;
+    for (const { s, url } of fetchables) {
+      const key = `${s.id}|${url}`;
+      if (fetchedKeysRef.current.has(key)) continue;
+      fetchedKeysRef.current.add(key);
+      setSectionLoadingMap((prev) => ({ ...prev, [s.id]: true }));
+      setSectionErrorMap((prev) => ({ ...prev, [s.id]: "" }));
+      (async () => {
+        try {
+          const json = await fetchSectionData(s);
+          setSectionDataMap((prev) => ({ ...prev, [s.id]: json }));
+        } catch (err) {
+          let message = "Error desconocido";
+          if (err instanceof HttpError) {
+            message = `Error HTTP ${err.status} (${err.statusText}) en ${err.url}`;
+          } else if (err instanceof SyntaxError) {
+            message = "Respuesta no es JSON v\xE1lido";
+          } else if (err instanceof TypeError) {
+            message = "Fallo de red / CORS / conexi\xF3n";
+          } else if (typeof err === "string") {
+            message = err.toString();
+          }
+          setSectionErrorMap((prev) => ({ ...prev, [s.id]: message }));
+        } finally {
+          setSectionLoadingMap((prev) => ({ ...prev, [s.id]: false }));
+        }
+      })();
+    }
+  }, [effectiveSections]);
+  const orderedVisible = useMemo2(
+    () => effectiveSections.filter((s) => s.visible).sort((a, b) => a.order - b.order),
+    [effectiveSections]
+  );
+  const toManualArray = (items) => {
+    if (!Array.isArray(items)) return [];
+    return items.map((it) => {
+      const obj = {};
+      for (const f of it.fields || []) {
+        const t = (f.type || "string").toLowerCase();
+        if (t === "number") obj[f.name] = Number(f.value);
+        else if (t === "boolean")
+          obj[f.name] = String(f.value).toLowerCase() === "true";
+        else if (t === "function") {
+          const body = String(f.value || "").trim();
+          obj[f.name] = () => {
+            if (!body) return;
+            try {
+              const fn = new Function(body);
+              return fn();
+            } catch (e) {
+              console.error("Error funci\xF3n manual", e);
+            }
+          };
+        } else obj[f.name] = f.value;
+      }
+      return obj;
+    });
+  };
+  const toManualScalars = (fields) => {
+    const out = {};
+    if (!Array.isArray(fields)) return out;
+    for (const f of fields) {
+      if (!f.name) continue;
+      const t = (f.type || "string").toLowerCase();
+      if (t === "number") out[f.name] = Number(f.value);
+      else if (t === "boolean")
+        out[f.name] = String(f.value).toLowerCase() === "true";
+      else if (t === "function") {
+        const body = String(f.value || "").trim();
+        out[f.name] = () => {
+          if (!body) return;
+          try {
+            const fn = new Function(body);
+            return fn();
+          } catch (e) {
+            console.error("Error funci\xF3n escalar manual", e);
+          }
+        };
+      } else out[f.name] = f.value;
+    }
+    return out;
+  };
+  const mapPayloadToProps = (payload, manual, base) => {
+    const merged = base ? { ...base } : {};
+    if (manual) {
+      const name = (manual.variableName || "items").trim() || "items";
+      merged[name] = manual.arr || [];
+      return merged;
+    }
+    const pl = payload;
+    const isArr = Array.isArray(pl);
+    const obj = !isArr && typeof pl === "object" && pl !== null ? pl : void 0;
+    const arrData = obj && Array.isArray(obj.lobby || obj.items) ? obj.lobby || obj.items : void 0;
+    const choose = (fallback) => isArr ? pl : arrData || fallback;
+    merged.items = choose(arrData || []);
+    return merged;
+  };
+  const lazyLoadComponent = (rawKey) => {
+    globImport_organisms(`../organisms/${rawKey}/${rawKey}`).then((mod) => {
+      var _a;
+      const ns = mod;
+      const C = (_a = ns.default) != null ? _a : ns[rawKey];
+      if (C) setComponentMap((prev) => ({ ...prev, [rawKey]: C }));
+    }).catch((e) => {
+      console.error(`Error cargando componente en OP ${rawKey}:`, e);
+    });
+  };
+  const buildCompProps = (s) => {
+    var _a;
+    const hasUrl = !!((_a = s.apiUrl) == null ? void 0 : _a.trim());
+    const payload = hasUrl ? sectionDataMap[s.id] : void 0;
+    let compProps = s.props ? { ...s.props } : {};
+    if (hasUrl) compProps = mapPayloadToProps(payload, null, compProps);
+    else if (s.dataMode === "manual") {
+      const arr = toManualArray(s.manualItems);
+      compProps = mapPayloadToProps(
+        null,
+        { arr, variableName: s.variableName },
+        compProps
+      );
+      const scalars = toManualScalars(s.manualScalarFields);
+      compProps = { ...compProps, ...scalars };
+    }
+    return compProps;
+  };
+  const renderStatusBox = (key, type, message) => {
+    const colorMap = {
+      loading: "bg-blue-100 text-blue-800",
+      error: "bg-red-100 text-red-800",
+      component: "bg-yellow-100 text-yellow-800"
+    };
+    return /* @__PURE__ */ jsx9("div", { className: `mx-4 p-4 rounded ${colorMap[type]}`, children: message }, key);
+  };
+  const renderSingleSection = (s) => {
+    var _a;
+    const rawKey = s.componentKey;
+    const Comp = componentMap[rawKey];
+    const hasUrl = !!((_a = s.apiUrl) == null ? void 0 : _a.trim());
+    const payload = hasUrl ? sectionDataMap[s.id] : void 0;
+    const loadingSec = hasUrl ? !!sectionLoadingMap[s.id] : false;
+    const errorSec = hasUrl ? sectionErrorMap[s.id] : "";
+    if (!Comp) {
+      lazyLoadComponent(rawKey);
+      return renderStatusBox(
+        s.id,
+        "component",
+        `Cargando componente "${rawKey}"...`
+      );
+    }
+    if (hasUrl) {
+      if (loadingSec && !payload)
+        return renderStatusBox(
+          s.id,
+          "loading",
+          `Cargando datos desde ${s.apiUrl}...`
+        );
+      if (errorSec && !payload)
+        return renderStatusBox(
+          s.id,
+          "error",
+          `Error cargando ${s.apiUrl}: ${errorSec}`
+        );
+    }
+    const compProps = buildCompProps(s);
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        style: {
+          paddingLeft: 16,
+          paddingRight: 16,
+          width: "100%",
+          boxSizing: "border-box"
+        },
+        children: /* @__PURE__ */ jsx9(Comp, { ...compProps })
+      },
+      s.id
+    );
+  };
+  if (!sectionsOverride || sectionsOverride.length === 0) {
+    return /* @__PURE__ */ jsx9("div", { className: "text-xs text-gray-500", children: "Sin secciones para mostrar (sectionsOverride vac\xEDo)" });
+  }
+  return /* @__PURE__ */ jsx9(
+    Container2,
+    {
+      className: "oli-font",
+      maxWidth: false,
+      disableGutters: true,
+      sx: {
+        backgroundColor: "#121212",
+        position: "relative",
+        pb: 5,
+        pt: 5,
+        width: "100%",
+        maxWidth: "100%",
+        overflowX: "hidden"
+      },
+      children: /* @__PURE__ */ jsx9(Stack5, { direction: "column", spacing: 8, useFlexGap: true, children: orderedVisible.map(renderSingleSection) })
+    }
+  );
+};
+var OraculoPageLandingPreview_default = OraculoPageLandingPreview;
+
+// src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function OraculoSeccionDestacados({
+  items,
+  title = "Destacados",
+  iconUrl,
+  onViewMore,
+  className = ""
+}) {
+  const carouselRef = useRef3(null);
+  const [navState, setNavState] = useState4({ isStart: true, isEnd: false });
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+    console.log("items: ", items);
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  const sectionClassName = className || void 0;
+  return /* @__PURE__ */ jsxs9("section", { className: sectionClassName, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs9(
+      "header",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 12,
+          rowGap: 8,
+          marginBottom: 16
+        },
+        children: [
+          /* @__PURE__ */ jsx10(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsx10(
+              OraculoButton,
+              {
+                ariaLabel: "Anterior",
+                variant: "secondary",
+                iconOnly: true,
+                leftIcon: /* @__PURE__ */ jsx10(ChevronLeftRounded_default, {}),
+                onClick: handlePrev,
+                disabled: navState.isStart
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              OraculoButton,
+              {
+                ariaLabel: "Siguiente",
+                variant: "secondary",
+                iconOnly: true,
+                rightIcon: /* @__PURE__ */ jsx10(ChevronRightRounded_default, {}),
+                onClick: handleNext,
+                disabled: navState.isEnd
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx10(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items,
+        perPage: 3.395,
+        gap: "16px",
+        options: { autoWidth: false },
+        breakpoints: {
+          768: { perPage: 1.15, focus: "start" },
+          1024: { perPage: 2.5, focus: "start" }
+        },
+        renderItem: (item) => /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: 16
+            },
+            children: /* @__PURE__ */ jsx10(
+              "img",
+              {
+                src: `https://olimpo.bet${item.image !== "" ? item.image : item.summary_image}`,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  // minHeight: "150px",
+                  // maxHeight: "150px",
+                  height: "150px",
+                  borderRadius: 8,
+                  display: "block"
+                }
+              }
+            )
+          },
+          `${item.title}-${item.image}`
+        ),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] });
+}
+
+export {
+  OraculoSectionTitle,
+  OraculoGameCard_default,
+  OraculoGameRankCard,
+  OraculoGameSlide_default,
+  OraculoSeccionDestacados,
+  OraculoSeccionTopJuegos,
+  OraculoSeccionCasino_default,
+  OraculoSeccionVirtuales_default,
+  OraculoPageLanding,
+  OraculoPageLandingPreview_default
+};
+//# sourceMappingURL=chunk-MC4XEBI3.mjs.map