"use client";
import { jsxs as g, jsx as n } from "react/jsx-runtime";
import { useMemo as S, useRef as d, useEffect as Y } from "react";
import { useIsMobile as F } from "../../utils/useIsMobile.es.js";
import p from "./assets/hero1.jpg.es.js";
import u from "./assets/hero2.jpg.es.js";
import x from "./assets/hero3.jpg.es.js";
import w from "./assets/hero4.jpg.es.js";
import I from "./assets/hero5.jpg.es.js";
import z from "./assets/hero6.jpg.es.js";
import b from "./assets/hero7.jpg.es.js";
import y from "./assets/hero8.jpg.es.js";
import N from "./assets/hero9.jpg.es.js";
import o from "../../pageComponents/OurCompanyHero/ourCompanyHero.module.css";
import { HighlightedTitle as W } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
const M = {
  desktop: [
    { left: -120, width: 360, height: 480, zIndex: 1, src: w },
    { left: 180, width: 360, height: 240, zIndex: 3, src: p },
    { left: 450, width: 270, height: 360, zIndex: 1, src: I },
    { left: 690, width: 120, height: 160, zIndex: 2, src: b },
    { left: 780, width: 360, height: 480, zIndex: 1, src: u },
    { left: 1021, width: 360, height: 288, zIndex: 2, src: z },
    { left: 1321, width: 270, height: 360, zIndex: 2, src: x },
    { left: 1501, width: 270, height: 216, zIndex: 3, src: N },
    { left: 1724, width: 203, height: 270, zIndex: 3, src: y }
  ],
  mobile: [
    { left: -120, width: 180, height: 240, zIndex: 1, src: w },
    { left: 30, width: 180, height: 120, zIndex: 3, src: p },
    { left: 165, width: 135, height: 180, zIndex: 1, src: u },
    { left: 285, width: 60, height: 80, zIndex: 2, src: z },
    { left: 330, width: 180, height: 240, zIndex: 1, src: x },
    { left: 450, width: 180, height: 144, zIndex: 2, src: N },
    { left: 600, width: 140, height: 180, zIndex: 3, src: I },
    { left: 720, width: 180, height: 120, zIndex: 3, src: y },
    { left: 880, width: 140, height: 180, zIndex: 3, src: b }
  ]
};
function $(l) {
  const e = l[0].left, t = l[l.length - 1];
  return t.left + t.width - e;
}
const B = () => {
  const e = F() ? M.mobile : M.desktop, t = S(() => $(e), [e]), f = d(null), i = d(0), a = d(typeof window != "undefined" ? window.scrollY : 0), h = d(null), R = 0.5;
  return Y(() => {
    let r = !0;
    const s = () => {
      if (!r) return;
      const c = window.scrollY, m = c - a.current;
      a.current = c, i.current += m * R, i.current < 0 && (i.current += t), i.current >= t && (i.current -= t), f.current && (f.current.style.transform = `translateX(-${i.current}px)`), h.current = requestAnimationFrame(s);
    };
    return h.current = requestAnimationFrame(s), () => {
      r = !1, h.current && cancelAnimationFrame(h.current);
    };
  }, [t]), /* @__PURE__ */ g("section", { className: o.bgWrapper, "data-type": "hero", children: [
    /* @__PURE__ */ n("div", { className: o.topContainer, children: /* @__PURE__ */ n(
      W,
      {
        colorScheme: "dark",
        title: /* @__PURE__ */ g("p", { children: [
          "Going beyond lifespan. ",
          /* @__PURE__ */ n("b", { children: "We’re Healthspan." })
        ] }),
        defaultVariant: "displayLg",
        mobileVariant: "displayXs",
        className: o.title
      }
    ) }),
    /* @__PURE__ */ n("div", { className: o.heroScrollOuter, children: /* @__PURE__ */ n("div", { className: o.heroScrollInner, ref: f, style: { transform: "translateX(0px)" }, children: [...e, ...e, ...e].map((r, s) => {
      const c = Math.floor(s / e.length), m = r.left + c * t;
      return /* @__PURE__ */ n(
        "img",
        {
          src: r.src,
          className: o.heroCard,
          alt: "Our company hero",
          draggable: !1,
          style: {
            left: `${m}px`,
            width: `${r.width}px`,
            height: `${r.height}px`,
            zIndex: r.zIndex
          }
        },
        s
      );
    }) }) })
  ] });
};
export {
  B as OurCompanyHero
};
