"use client";
import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { useRef as l } from "react";
import n from "gsap";
import { useGSAP as J } from "@gsap/react";
import { ScrollTrigger as _ } from "../../node_modules/.pnpm/gsap@3.13.0/node_modules/gsap/ScrollTrigger.es.js";
import Q from "../../utils/debounce.es.js";
import r from "../../modules/CallToAction/callToAction.module.css";
import { EAnalyticsEventType as U, EAnalyticsEvent as Y } from "../../types/analytics/analytics.es.js";
import { HighlightedTitle as w } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
import { Typography as h } from "../../components/Typography/Typography.es.js";
import { Icon as P } from "../../components/Icon/Icon.es.js";
import { EIconName as W } from "../../components/Icon/constants.es.js";
import { Button as Z } from "../../components/Button/Button.es.js";
n.registerPlugin(_);
const pe = ({
  subtitle: q,
  titleTop: x,
  scrollableLabels: E,
  titleBottom: X,
  description: z,
  hsaText: F,
  buttonText: O,
  buttonLink: m,
  backgroundImage: j
}) => {
  const u = l(null), c = l(null), V = l(null), y = l(null), b = l(null), C = l(null), g = l(null), v = l(null), N = l(null), D = () => {
    var a;
    (a = window.eventBus) == null || a.emit("analytics", {
      event: Y.ctaClicked,
      type: U.interaction,
      component: "CallToAction",
      element: "primary_button",
      payload: {
        link: m
      }
    });
  };
  return J(() => {
    var H, M, S;
    const a = u.current && u.current.getBoundingClientRect().top < window.innerHeight * 0.8, p = (H = V.current) == null ? void 0 : H.querySelector("p"), T = (M = C.current) == null ? void 0 : M.querySelector("p"), $ = [
      p,
      y.current,
      c.current,
      b.current,
      T,
      g.current,
      v.current,
      N.current
    ].filter(Boolean);
    n.set($, {
      clipPath: "inset(0% 0% 100% 0%)",
      yPercent: 100
    });
    const f = n.to(
      [
        p,
        y.current,
        c.current,
        b.current,
        T,
        g.current,
        v.current,
        N.current
      ],
      {
        clipPath: "inset(0% 0% 0% 0%)",
        yPercent: 0,
        duration: 1,
        ease: "power2.out",
        delay: 0.3,
        stagger: {
          amount: 1,
          from: "start"
        },
        paused: !0
        // Start paused, we'll control when it plays
      }
    );
    _.create({
      trigger: u.current,
      start: "top 80%",
      end: "+=500",
      onEnter: () => f.play(),
      onEnterBack: () => f.play(),
      onLeaveBack: () => f.reverse()
    }), a && n.delayedCall(0.1, () => {
      f.play();
    });
    const t = (S = c.current) == null ? void 0 : S.querySelector("ul");
    if (!t) return;
    const k = t.innerHTML;
    let i = null, L = !0;
    const A = () => {
      i && i.kill(), t.innerHTML = k, n.set(t, { y: 0 });
      const o = Array.from(t.querySelectorAll("li"));
      if (o.length <= 1) return;
      const R = o[0].clientHeight;
      if (!R) return;
      n.set(c.current, { height: () => R, overflow: "hidden" });
      const B = Array.from(o);
      B.forEach((I) => {
        t.appendChild(I.cloneNode(!0));
      });
      const G = L && !a ? 0.3 : 0;
      i = n.timeline({
        repeat: -1,
        delay: G,
        onRepeat: () => {
          n.set(t, { y: 0 });
        }
      }), B.forEach((I, K) => {
        i && i.to({}, { duration: 2 }).to(t, {
          y: `-${(K + 1) * R}`,
          duration: 0.5,
          ease: "power1.inOut"
        });
      }), L = !1;
    }, d = Q(A, 200);
    return A(), window.addEventListener("resize", d), () => {
      var o;
      window.removeEventListener("resize", d), (o = d.kill) == null || o.call(d), i && i.kill(), t && (t.innerHTML = k, n.set(t, { y: 0 }));
    };
  }, [E]), /* @__PURE__ */ s("section", { ref: u, className: r.root, children: [
    /* @__PURE__ */ e("div", { className: r.backgroundImage, style: { backgroundImage: `url(${j})` } }),
    /* @__PURE__ */ s("div", { className: r.container, children: [
      /* @__PURE__ */ e("div", { className: r.leftContent, children: /* @__PURE__ */ s("div", { className: r.content, children: [
        /* @__PURE__ */ e("div", { ref: y, children: /* @__PURE__ */ e(
          w,
          {
            defaultVariant: "displayXl",
            mobileVariant: "displayMd",
            as: "div",
            className: r.title,
            title: x
          }
        ) }),
        /* @__PURE__ */ e("div", { ref: c, className: r.scrollableLabelsWrapper, children: /* @__PURE__ */ e("ul", { className: r.scrollableLabels, children: E.map((a, p) => /* @__PURE__ */ e("li", { className: r.scrollableLabel, children: /* @__PURE__ */ e(h, { defaultVariant: "displayXl", mobileVariant: "displayMd", as: "span", children: a }) }, p)) }) }),
        /* @__PURE__ */ e("div", { ref: b, children: /* @__PURE__ */ e(
          w,
          {
            defaultVariant: "displayXl",
            mobileVariant: "displayMd",
            as: "div",
            className: r.title,
            title: X
          }
        ) })
      ] }) }),
      /* @__PURE__ */ e("div", { ref: V, className: r.subtitleWrapper, children: /* @__PURE__ */ e(
        w,
        {
          defaultVariant: "labelMd",
          mobileVariant: "labelSm",
          as: "div",
          className: r.subtitle,
          title: q
        }
      ) }),
      /* @__PURE__ */ e("div", { ref: C, className: r.arrowWrapper, children: /* @__PURE__ */ s(
        h,
        {
          defaultVariant: "labelMd",
          mobileVariant: "labelXs",
          emphasis: !0,
          className: r.arrow,
          as: "p",
          children: [
            "(",
            /* @__PURE__ */ e(P, { name: W.ARROW_FORWARD }),
            ")"
          ]
        }
      ) }),
      /* @__PURE__ */ e("div", { className: r.rightContent, children: /* @__PURE__ */ s("div", { className: r.descriptionWrapper, children: [
        /* @__PURE__ */ e("div", { ref: g, children: /* @__PURE__ */ e(
          h,
          {
            as: "p",
            defaultVariant: "bodyLg",
            mobileVariant: "bodyMd",
            className: r.description,
            children: z
          }
        ) }),
        /* @__PURE__ */ e("div", { ref: v, className: r.buttonWrapper, children: m && /* @__PURE__ */ e(
          Z,
          {
            as: m ? "a" : "button",
            href: m,
            variant: "secondary",
            size: "lg",
            onClick: D,
            children: O
          }
        ) }),
        /* @__PURE__ */ s("div", { ref: N, className: r.hsaEligible, children: [
          /* @__PURE__ */ e(P, { name: W.CIRCLE_CHECK_FILL, className: r.checkIcon }),
          /* @__PURE__ */ e(
            h,
            {
              as: "p",
              defaultVariant: "bodySm",
              mobileVariant: "bodySm",
              className: r.hsaText,
              children: F
            }
          )
        ] })
      ] }) })
    ] })
  ] });
};
export {
  pe as CallToAction
};
