"use client";
import { jsx as i, jsxs as o } from "react/jsx-runtime";
import { useState as N } from "react";
import { EAnalyticsEventType as M, EAnalyticsEvent as H } from "../../types/analytics/analytics.es.js";
import { useIsMobile as D } from "../../utils/useIsMobile.es.js";
import E from "../Comparison/assets/company-logo.svg.es.js";
import { isHealthspan as k } from "../Comparison/utils.es.js";
import e from "../../modules/ComparisonV2/comparisonV2.module.css";
import { cn as c } from "../../utils/cn/cn.es.js";
import { HighlightedTitle as B } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
import { Typography as m } from "../../components/Typography/Typography.es.js";
import { ComparisonV2Tooltip as x } from "./components/ComparisonV2Tooltip/ComparisonV2Tooltip.es.js";
import { Icon as O } from "../../components/Icon/Icon.es.js";
import { EIconName as j } from "../../components/Icon/constants.es.js";
import { Button as A } from "../../components/Button/Button.es.js";
const U = ({
  title: v,
  description: f,
  ctaBlock: u,
  getStartedLink: p,
  comparisonV2Columns: b
}) => {
  const [t, d] = N(null), [h, s] = N(null), T = D(768), g = (a) => {
    var n;
    (n = window.eventBus) == null || n.emit("analytics", {
      event: H.ctaClicked,
      type: M.interaction,
      component: "Comparison V2",
      payload: {
        link: p
      }
    });
  }, y = (a) => {
    T && (t === a ? (s(a), setTimeout(() => {
      d(null), s(null);
    }, 250)) : t ? (s(t), setTimeout(() => {
      s(null), d(a);
    }, 250)) : d(a));
  }, V = (a) => {
    a == null || a.stopPropagation(), t && (s(t), setTimeout(() => {
      d(null), s(null);
    }, 250));
  };
  return /* @__PURE__ */ i("div", { className: e.root, children: /* @__PURE__ */ o("div", { className: e.container, children: [
    /* @__PURE__ */ o("div", { className: e.header, children: [
      /* @__PURE__ */ i(
        B,
        {
          title: v,
          defaultVariant: "displayMd",
          mobileVariant: "headingXl",
          className: e.title
        }
      ),
      f && /* @__PURE__ */ i(
        m,
        {
          as: "p",
          defaultVariant: "bodyLg",
          mobileVariant: "bodySm",
          className: e.description,
          children: f
        }
      )
    ] }),
    /* @__PURE__ */ o("div", { className: e.tableContainer, children: [
      /* @__PURE__ */ i("div", { className: e.table, children: b.map((a, n) => /* @__PURE__ */ o(
        "div",
        {
          className: c(e.alternativeCol, {
            [e.featuredCol]: a.featured
          }),
          children: [
            /* @__PURE__ */ i(
              "div",
              {
                className: c(e.alternativeHeaderCell, {
                  [e.featuredHeaderCell]: a.featured
                }),
                children: k(a.comparisonV2Header.type) ? /* @__PURE__ */ i(E, { className: e.logo, "aria-label": "Healthspan logo" }) : /* @__PURE__ */ i(
                  m,
                  {
                    as: "h3",
                    defaultVariant: "headingLg",
                    mobileVariant: "preambleMd",
                    className: e.headerText,
                    children: a.comparisonV2Header.title
                  }
                )
              }
            ),
            a.comparisonV2Cells.map((r, C) => {
              const l = `comparison-${n}-${C}`;
              return /* @__PURE__ */ o(
                "div",
                {
                  className: e.alternativeContent,
                  onClick: () => y(l),
                  children: [
                    (t === l || h === l) && /* @__PURE__ */ i(
                      x,
                      {
                        title: r.title,
                        description: r.description || "",
                        onClose: V,
                        isOpening: t === l && !h,
                        isClosing: h === l
                      }
                    ),
                    /* @__PURE__ */ i(
                      m,
                      {
                        as: "p",
                        defaultVariant: "preambleMd",
                        mobileVariant: "bodyXl",
                        className: c(e.alternativeTitle, {
                          [e.activeTitle]: t === l
                        }),
                        children: r.title
                      }
                    ),
                    r.description && /* @__PURE__ */ o("div", { className: e.rowDescriptionContainer, children: [
                      /* @__PURE__ */ i(
                        m,
                        {
                          as: "p",
                          defaultVariant: "bodyMd",
                          mobileVariant: "bodySm",
                          className: c(e.featuredDescription, e.hideMobile),
                          children: r.description
                        }
                      ),
                      /* @__PURE__ */ i(
                        O,
                        {
                          name: j.DOT,
                          className: c(e.dot, e.hideDesktop, {
                            [e.activeDot]: t === l
                          })
                        }
                      )
                    ] })
                  ]
                },
                C
              );
            })
          ]
        },
        n
      )) }),
      u && p && /* @__PURE__ */ i("div", { className: e.ctaContainer, children: /* @__PURE__ */ o("div", { className: e.ctaBlock, children: [
        /* @__PURE__ */ i(m, { as: "p", defaultVariant: "preambleMd", className: e.ctaText, children: u }),
        /* @__PURE__ */ i("div", { className: e.ctaButton, children: /* @__PURE__ */ i(A, { as: "a", href: p || "#", size: "lg", onClick: g, children: "Get started" }) })
      ] }) })
    ] })
  ] }) });
};
export {
  U as ComparisonV2
};
