"use client";
import { jsx as e, jsxs as l, Fragment as N } from "react/jsx-runtime";
import b, { useState as m, useEffect as y } from "react";
import { Button as u } from "../../components/Button/Button.es.js";
import { cn as t } from "../../utils/cn/cn.es.js";
import x from "./assets/prod1.png.es.js";
import V from "./assets/prod2.png.es.js";
import I from "./assets/prod3.png.es.js";
import T from "./assets/pill1.jpg.es.js";
import C from "./assets/pill2.jpg.es.js";
import E from "./assets/pill3.jpg.es.js";
import S from "./assets/graph1.svg.es.js";
import M from "./assets/graph2.svg.es.js";
import O from "./assets/graph3.svg.es.js";
import a from "../../pageComponents/PersonalizedProtocolHero/personalizedProtocolHero.module.css";
import { EAnalyticsEventType as G, EAnalyticsEvent as P } from "../../types/analytics/analytics.es.js";
import { HighlightedTitle as k } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
import { Typography as o } from "../../components/Typography/Typography.es.js";
const d = [
  {
    pill: T,
    product: x,
    protocol: "ENERGY",
    dosage: { text: "Oxytocin Nasal Spray", value: "3MG" },
    goal: "REDUCE STRESS",
    svg: S
  },
  {
    pill: C,
    product: V,
    protocol: "METABOLISM",
    dosage: { text: "Metformin", value: "3MG" },
    goal: "AUTOPHAGY INDUCTION",
    svg: M
  },
  {
    pill: E,
    product: I,
    protocol: "SENESCENCE",
    dosage: { text: "Rapamycin", value: "3MG" },
    goal: "LONGEVITY",
    svg: O
  }
], K = () => {
  const [c, g] = m(0), [f, v] = m(0), [r, p] = m(!1);
  y(() => {
    const s = setInterval(() => {
      const n = (c + 1) % d.length;
      g(n), setTimeout(() => {
        p(!0), setTimeout(() => {
          v(n), p(!1);
        }, 200);
      }, 200);
    }, 2500);
    return () => clearInterval(s);
  }, [c]);
  const i = d[f], h = () => {
    var s;
    (s = window.eventBus) == null || s.emit("analytics", {
      event: P.ctaClicked,
      type: G.interaction,
      component: "PersonalizedProtocolHero",
      payload: {
        link: "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948"
      }
    });
  };
  return /* @__PURE__ */ e("section", { className: a.root, "data-type": "hero", children: /* @__PURE__ */ l("div", { className: a.container, children: [
    /* @__PURE__ */ l("div", { className: a.leftContent, children: [
      /* @__PURE__ */ e("div", { className: a.title, children: /* @__PURE__ */ e(
        k,
        {
          as: "p",
          colorScheme: "dark",
          defaultVariant: "displayMd",
          mobileVariant: "displayXs",
          title: /* @__PURE__ */ l(N, { children: [
            "A longevity protocol that's ",
            /* @__PURE__ */ e("b", { children: "all you" })
          ] })
        }
      ) }),
      /* @__PURE__ */ e(o, { className: a.description, as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: "There's nothing more personal than your health, which is why your Healthspan care team works closely with you — using lab testing, data, and coaching — to design and optimize a protocol to fit your unique goals." }),
      /* @__PURE__ */ e("div", { className: t(a.buttonWrap, a.mobile), children: /* @__PURE__ */ e(
        u,
        {
          as: "a",
          href: "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",
          variant: "secondary",
          size: "md",
          onClick: h,
          children: "Join Healthspan"
        }
      ) }),
      /* @__PURE__ */ e("div", { className: t(a.buttonWrap, a.desktop), children: /* @__PURE__ */ e(
        u,
        {
          as: "a",
          href: "https://app.gethealthspan.com/#/product/signup/6896e50bc0af7d4d26738948",
          variant: "secondary",
          size: "lg",
          onClick: h,
          children: "Join Healthspan"
        }
      ) })
    ] }),
    /* @__PURE__ */ e("div", { className: a.pillContainer, children: d.map((s, n) => /* @__PURE__ */ e(
      "img",
      {
        src: s.pill,
        className: t(
          a.pillImage,
          n === c && a.active,
          n === (c - 1 + d.length) % d.length && a.exiting
        ),
        alt: "Pill"
      },
      n
    )) }),
    /* @__PURE__ */ l("div", { className: a.textContainer, children: [
      /* @__PURE__ */ l("div", { className: a.protocolContainer, children: [
        /* @__PURE__ */ e(
          o,
          {
            className: a.protocolText,
            as: "p",
            defaultVariant: "labelMd",
            mobileVariant: "labelXs",
            children: "Protocol"
          }
        ),
        /* @__PURE__ */ e("div", { className: t(a.protocolFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
          o,
          {
            className: a.protocolValue,
            as: "p",
            defaultVariant: "labelSm",
            mobileVariant: "labelXs",
            emphasis: !0,
            children: i.protocol
          }
        ) })
      ] }),
      /* @__PURE__ */ l("div", { className: a.dosageContainer, children: [
        /* @__PURE__ */ e("div", { className: t(a.dosageImageFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e("img", { src: i.product, className: a.dosageItem, alt: "Product" }) }),
        /* @__PURE__ */ l("div", { className: a.dosageTextBlock, children: [
          /* @__PURE__ */ e("div", { className: t(a.dosageTextFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
            o,
            {
              className: a.dosageText,
              as: "p",
              defaultVariant: "labelMd",
              mobileVariant: "labelXs",
              children: i.dosage.text
            }
          ) }),
          /* @__PURE__ */ e("div", { className: t(a.dosageValueFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
            o,
            {
              className: a.dosageValue,
              as: "p",
              defaultVariant: "labelSm",
              mobileVariant: "labelXs",
              emphasis: !0,
              children: i.dosage.value
            }
          ) })
        ] })
      ] }),
      /* @__PURE__ */ l("div", { className: a.goalContainer, children: [
        /* @__PURE__ */ e(o, { className: a.goalText, as: "p", defaultVariant: "labelMd", mobileVariant: "labelXs", children: "Goal" }),
        /* @__PURE__ */ e("div", { className: t(a.goalFade, r ? a.fadeOut : a.fadeIn), children: /* @__PURE__ */ e(
          o,
          {
            className: a.goalValue,
            as: "p",
            defaultVariant: "labelSm",
            mobileVariant: "labelXs",
            emphasis: !0,
            children: i.goal
          }
        ) })
      ] }),
      /* @__PURE__ */ e("div", { className: a.svgContainer, children: /* @__PURE__ */ e("div", { className: t(a.svgFade, r ? a.fadeOut : a.fadeIn), children: b.createElement(i.svg, {
        className: a.svg
      }) }) })
    ] })
  ] }) });
};
export {
  K as PersonalizedProtocolHero
};
