"use client";
import { jsx as n, jsxs as j } from "react/jsx-runtime";
import { useGSAP as U } from "@gsap/react";
import e from "gsap";
import { ScrollTrigger as z } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/ScrollTrigger.es.js";
import { CustomEase as J } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/CustomEase.es.js";
import { useState as K, useRef as f, useCallback as Q } from "react";
import { cn as S } from "../../utils/cn/cn.es.js";
import Y from "./allInOneData.es.js";
import r from "../../modules/AllInOne/allInOne.module.css";
import { useIsMobile as Z } from "../../utils/useIsMobile.es.js";
import { CallToAction as _ } from "../CallToAction/CallToAction.es.js";
import { HighlightedTitle as A } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
import { Typography as ee } from "../../components/Typography/Typography.es.js";
e.registerPlugin(z);
e.registerPlugin(J);
const {
  subtitle: te,
  titleTop: re,
  scrollableLabels: ie,
  titleBottom: oe,
  description: ne,
  descriptionText: se,
  hsaText: le,
  buttonText: ae,
  buttonLink: ce,
  backgroundImage: pe,
  title1: de,
  title2: ue,
  scrollLabels: D,
  images: I
} = Y, ke = () => {
  const [M, B] = K(!1), C = 1300, X = Z(C), h = f(null), c = f(null), v = f(null), m = f(null), g = f(null), b = f(null), p = f(null), H = f(!1), L = e.matchMedia(), V = Q(() => {
    if (!c.current || !v.current || !h.current || !m.current || !g.current || !b.current || !p.current)
      return;
    const i = h.current, o = c.current, l = m.current, s = g.current, d = b.current, P = p.current, k = d.querySelectorAll("p");
    if (k.length === 0) return;
    k.forEach((a, t) => {
      a.style.zIndex = String(k.length - t);
    });
    const x = o.querySelectorAll('[data-type="image"]'), N = x.length;
    x.forEach((a, t) => {
      a.style.zIndex = String(N - t);
    });
    const y = i.scrollHeight / N, E = 0.7;
    N > 0 && x.forEach((a, t) => {
      const w = t * y, R = (t + 1) * y - E * y;
      e.fromTo(
        [a, k[t]],
        { opacity: 1 },
        {
          opacity: 0,
          scrollTrigger: {
            trigger: i,
            start: () => `top+=${w} top`,
            end: () => `top+=${R} top`,
            scrub: !0
          }
        }
      );
    });
    const $ = o.getBoundingClientRect(), O = v.current.getBoundingClientRect(), q = l.getBoundingClientRect(), F = i.getBoundingClientRect();
    e.set(d, {
      y: () => `${$.bottom - F.top + 20}px`
    }), L.add(
      {
        isMobile: `(max-width: ${C - 1}px)`,
        isDesktop: `(min-width: ${C}px)`
      },
      (a) => {
        const t = a.conditions, w = t == null ? void 0 : t.isMobile;
        (t == null ? void 0 : t.isDesktop) && (e.set(l, {
          x: () => `${$.left - q.width - 50}px`
        }), e.set(s, {
          x: () => `${$.right + 25}px`
        })), w && (e.set(l, {
          top: `${$.top - O.top - s.clientHeight - 40}px`
        }), e.set(s, {
          top: `${$.top - O.top - s.clientHeight}px`
        }));
      }
    ), e.to(o, {
      scale: 1,
      ease: "power1.in",
      scrollTrigger: {
        trigger: i,
        start: "top top",
        end: "100% bottom",
        scrub: !0,
        onUpdate: (a) => {
          if (!c.current || !p.current || !l || !s)
            return;
          const t = o.getBoundingClientRect();
          L.add(
            {
              isMobile: `(max-width: ${C - 1}px)`,
              isDesktop: `(min-width: ${C}px)`
            },
            (R) => {
              const u = R.conditions, T = u == null ? void 0 : u.isMobile;
              (u == null ? void 0 : u.isDesktop) && (e.set(l, {
                x: () => `${t.left - q.width - 50}px`
              }), e.set(s, {
                x: () => `${t.right + 25}px`
              })), T && (e.set(l, {
                top: () => `${t.top - s.clientHeight - 50}px`
              }), e.set(s, {
                top: () => `${t.top - 50}px`
              }));
            }
          ), e.set(d, {
            y: `${t.bottom + 20}px`
          });
          const w = p.current.getBoundingClientRect();
          if (t.bottom + 60 >= w.top ? e.to(P, { opacity: 0, duration: 0.3 }) : e.to(P, { opacity: 1, duration: 0.3 }), a.progress >= 0.99)
            e.to(o, {
              borderRadius: 0,
              duration: 0.3,
              ease: "power1.inOut"
            }), e.to(l, { opacity: 1 }), e.to(s, { opacity: 1 }), H.current || (H.current = !0, B(!0), e.to([x, d.querySelectorAll("p")], {
              opacity: 0,
              duration: 0.8,
              delay: 0.2,
              ease: "power2.out",
              overwrite: !0
            }));
          else if (e.to(o, {
            borderRadius: 999,
            duration: 0.3,
            ease: "power1.inOut"
          }), e.to(l, { opacity: 1 }), e.to(s, { opacity: 1 }), H.current) {
            H.current = !1, B(!1), e.set(o, { borderRadius: 999 }), e.killTweensOf([x, d.querySelectorAll("p")]);
            const R = d.querySelectorAll("p");
            x.forEach((u, T) => {
              const W = T * y, G = (T + 1) * y - E * y;
              e.fromTo(
                [u, R[T]],
                { opacity: 1 },
                {
                  opacity: 0,
                  scrollTrigger: {
                    trigger: i,
                    start: () => `top+=${W} top`,
                    end: () => `top+=${G} top`,
                    scrub: !0
                  }
                }
              );
            }), z.refresh();
          }
        }
      }
    });
  }, [
    c,
    m,
    g,
    b,
    p,
    M
  ]);
  return U(
    () => {
      if (!c.current || !h.current || !m.current || !g || !b.current || !p.current)
        return;
      const i = c.current, o = m.current, l = g.current, s = b.current, d = p.current;
      return X ? e.set(i, {
        aspectRatio: `${window.innerWidth} / ${window.innerHeight}`,
        scale: 0.5
      }) : e.set(i, {
        scale: 0.3,
        aspectRatio: `${window.innerWidth} / ${window.innerHeight}`
      }), V(), () => {
        e.killTweensOf([i, s, o, l, d]);
      };
    },
    {
      scope: h,
      dependencies: [
        h,
        c,
        m,
        g,
        b,
        V
      ]
    }
  ), /* @__PURE__ */ n("div", { className: r.root, children: /* @__PURE__ */ n("div", { ref: h, className: r.container, children: /* @__PURE__ */ j("div", { ref: v, className: r.pillContainerWrapper, children: [
    /* @__PURE__ */ j("div", { ref: c, className: S("pillContainer", r.pillContainer), children: [
      I == null ? void 0 : I.map((i, o) => /* @__PURE__ */ n(
        "div",
        {
          className: r.imageBlock,
          "data-type": "image",
          style: { backgroundImage: `url(${i})` }
        },
        o
      )),
      /* @__PURE__ */ n("div", { className: r.callToActionContainer, children: M && /* @__PURE__ */ n(
        _,
        {
          subtitle: te,
          titleTop: re,
          scrollableLabels: ie,
          titleBottom: oe,
          description: se,
          hsaText: le,
          buttonText: ae,
          buttonLink: ce,
          backgroundImage: pe
        }
      ) })
    ] }),
    /* @__PURE__ */ n("div", { ref: m, className: r.fixedHeader, children: /* @__PURE__ */ n(
      A,
      {
        className: r.title1,
        as: "div",
        defaultVariant: "displayXs",
        title: de
      }
    ) }),
    /* @__PURE__ */ n("div", { ref: g, className: r.fixedHeader, children: /* @__PURE__ */ n(
      A,
      {
        className: r.title2,
        as: "div",
        defaultVariant: "displayXs",
        title: ue
      }
    ) }),
    /* @__PURE__ */ n("div", { ref: b, className: S("scrollableLabels", r.scrollableLabels), children: D == null ? void 0 : D.map((i, o) => /* @__PURE__ */ n(
      ee,
      {
        as: "p",
        defaultVariant: "labelLg",
        mobileVariant: "labelSm",
        className: r.scrollLabel,
        children: i
      },
      o
    )) }),
    /* @__PURE__ */ n("div", { ref: p, className: S("description", r.description), children: /* @__PURE__ */ n(
      A,
      {
        as: "div",
        defaultVariant: "preambleMd",
        mobileVariant: "preambleSm",
        title: ne,
        className: r.descriptionText
      }
    ) })
  ] }) }) });
};
export {
  ke as AllInOne
};
