import { jsxs as h, jsx as a, Fragment as b } from "react/jsx-runtime";
import { ax as N, ay as L, az as S, au as j, aA as T, aq as U, J as p, B as _, aB as A, q as R, aC as I, aD as w, ar as y, aE as $, aF as V, aG as z, an as F } from "./index-T-3isYi5.js";
import { memo as G, useState as Q } from "react";
var q = Math.floor, E = Math.random;
function P(e, s) {
  return e + q(E() * (s - e + 1));
}
var O = P, W = O;
function Z(e, s) {
  var m = -1, n = e.length, o = n - 1;
  for (s = s === void 0 ? n : s; ++m < s; ) {
    var i = W(m, o), u = e[i];
    e[i] = e[m], e[m] = u;
  }
  return e.length = s, e;
}
var C = Z, D = N, H = C;
function J(e) {
  return H(D(e));
}
var K = J, Y = L;
function M(e, s) {
  return Y(s, function(m) {
    return e[m];
  });
}
var X = M, B = X, ee = S;
function te(e) {
  return e == null ? [] : B(e, ee(e));
}
var ie = te, ae = C, se = ie;
function re(e) {
  return ae(se(e));
}
var le = re, oe = K, de = le, ce = T;
function ne(e) {
  var s = ce(e) ? oe : de;
  return s(e);
}
var me = ne;
const ue = /* @__PURE__ */ j(me), v = A("", {
  // Variants won't have any style by default. Style will only be applied if the variants are combined.
  // So, style is defined in compoundVariants.
  variants: {
    variant: {
      basic: "",
      ProfileCard: "",
      SidebarCard: "",
      NewLaunchSidebarCard: ""
    },
    structure: {
      image: "",
      card: "",
      title: "",
      description: ""
    }
  },
  compoundVariants: [
    // Style for Basic Variants types
    {
      variant: "basic",
      structure: "image",
      className: "w-10 h-auto"
    },
    {
      variant: "basic",
      structure: "card",
      className: "p-5 bg-default"
    },
    {
      variant: "basic",
      structure: "title",
      className: "text-base mt-4"
    },
    {
      variant: "basic",
      structure: "description",
      className: "text-sm leading-[18px] text-subtle font-normal"
    },
    // Style for ProfileCard Variant Types
    {
      variant: "ProfileCard",
      structure: "image",
      className: "w-9 h-auto rounded-full mb-4s"
    },
    {
      variant: "ProfileCard",
      structure: "card",
      className: "w-80 p-4 hover:bg-subtle bg-default"
    },
    {
      variant: "ProfileCard",
      structure: "title",
      className: "text-base"
    },
    {
      variant: "ProfileCard",
      structure: "description",
      className: "text-sm leading-[18px] text-subtle font-normal"
    },
    // Style for SidebarCard Variant Types
    {
      variant: "SidebarCard",
      structure: "image",
      className: "w-9 h-auto rounded-full mb-4s"
    },
    {
      variant: "SidebarCard",
      structure: "card",
      className: "w-full p-3 border border-subtle bg-default"
    },
    {
      variant: "SidebarCard",
      structure: "title",
      className: "text-sm font-cal"
    },
    {
      variant: "SidebarCard",
      structure: "description",
      className: "text-xs text-default line-clamp-2"
    },
    // Style for NewLaunchSidebarCard Variant Types
    {
      variant: "NewLaunchSidebarCard",
      structure: "image",
      className: "w-9 h-auto rounded-full mb-4s"
    },
    {
      variant: "NewLaunchSidebarCard",
      structure: "card",
      className: "w-full p-3 border border-subtle bg-launch-dark text-white"
    },
    {
      variant: "NewLaunchSidebarCard",
      structure: "title",
      className: "text-sm font-cal text-white"
    },
    {
      variant: "NewLaunchSidebarCard",
      structure: "description",
      className: "text-xs text-white"
    }
  ]
});
function he({
  image: e,
  title: s,
  icon: m,
  description: n,
  variant: o,
  actionButton: i,
  containerProps: u,
  imageProps: d,
  mediaLink: t,
  thumbnailUrl: r,
  learnMore: l,
  coverPhoto: c,
  buttonClassName: f,
  mediaLinkOnClick: k
}) {
  var g;
  const x = (g = l == null ? void 0 : l.href) != null && g.startsWith("https") ? "a" : U;
  return /* @__PURE__ */ h(
    "div",
    {
      className: p(
        u == null ? void 0 : u.className,
        "border-subtle text-default bg-default flex flex-col justify-between rounded-md border",
        v({ variant: o, structure: "card" })
      ),
      "data-testid": "card-container",
      ...u,
      children: [
        /* @__PURE__ */ h("div", { children: [
          m && m,
          e && /* @__PURE__ */ a(
            "img",
            {
              src: e,
              alt: d == null ? void 0 : d.alt,
              className: p(
                d == null ? void 0 : d.className,
                v({ variant: o, structure: "image" })
              ),
              ...d
            }
          ),
          /* @__PURE__ */ a(
            "h5",
            {
              title: s,
              className: p(
                "text-emphasis line-clamp-1 font-bold leading-5",
                v({ variant: o, structure: "title" })
              ),
              children: s
            }
          ),
          n && /* @__PURE__ */ a(
            "p",
            {
              title: n.toString(),
              className: p(v({ variant: o, structure: "description" }), "pt-1"),
              children: n
            }
          )
        ] }),
        o === "SidebarCard" && t && /* @__PURE__ */ h(
          "a",
          {
            onClick: k,
            target: "_blank",
            rel: "noreferrer noopener",
            href: t,
            "data-testid": i == null ? void 0 : i["data-testid"],
            className: "group relative my-3 flex aspect-video items-center overflow-hidden rounded",
            children: [
              /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-black/50 transition group-hover:bg-black/40" }),
              /* @__PURE__ */ h(
                "svg",
                {
                  className: "text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg transition-all hover:-mt-px",
                  viewBox: "0 0 32 32",
                  fill: "none",
                  xmlns: "http://www.w3.org/2000/svg",
                  children: [
                    /* @__PURE__ */ a(
                      "path",
                      {
                        d: "M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z",
                        fill: "white"
                      }
                    ),
                    /* @__PURE__ */ a(
                      "path",
                      {
                        d: "M12.1667 8.5L23.8334 16L12.1667 23.5V8.5Z",
                        fill: "#111827",
                        stroke: "#111827",
                        strokeWidth: "1.5",
                        strokeLinecap: "round",
                        strokeLinejoin: "round"
                      }
                    )
                  ]
                }
              ),
              /* @__PURE__ */ a("img", { alt: "play feature video", src: r })
            ]
          }
        ),
        o === "NewLaunchSidebarCard" && c && /* @__PURE__ */ a("img", { alt: "cover", className: "mt-3 w-full", src: c }),
        o === "basic" && i && /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
          _,
          {
            color: "secondary",
            href: i == null ? void 0 : i.href,
            className: "mt-10",
            EndIcon: "arrow-right",
            "data-testid": i["data-testid"],
            children: i == null ? void 0 : i.child
          }
        ) }),
        (o === "SidebarCard" || o === "NewLaunchSidebarCard") && /* @__PURE__ */ h("div", { className: "mt-2 flex items-center justify-between", children: [
          l && /* @__PURE__ */ a(b, { children: l.href ? /* @__PURE__ */ a(
            x,
            {
              href: l.href,
              target: "_blank",
              rel: "noreferrer",
              onClick: l.onClick,
              className: p("text-default text-xs font-medium cursor-pointer", f),
              children: l.text
            }
          ) : l.onClick ? /* @__PURE__ */ a(
            "button",
            {
              type: "button",
              color: "minimal",
              onClick: l.onClick,
              className: p("cursor-pointer text-default text-xs font-medium", f),
              children: l.text
            }
          ) : void 0 }),
          (i == null ? void 0 : i.child) && /* @__PURE__ */ a(
            "button",
            {
              className: p(
                "text-default hover:text-emphasis p-0 text-xs font-normal cursor-pointer",
                f
              ),
              color: "minimal",
              "data-testid": i == null ? void 0 : i["data-testid"],
              onClick: i == null ? void 0 : i.onClick,
              children: i == null ? void 0 : i.child
            }
          )
        ] })
      ]
    }
  );
}
function pe() {
  const { t: e } = R(), s = I((t) => t.open), n = [...ue([
    {
      id: 18,
      thumbnailUrl: "https://img.youtube.com/vi/J8HsK-8W39U/0.jpg",
      mediaLink: "https://go.cal.com/rbac-video",
      title: "Roles & Permissions",
      description: "Manage team access with roles & permissions",
      onClick: () => s($.RolesAndPermissions)
    },
    {
      id: 17,
      thumbnailUrl: "https://img.youtube.com/vi/fMHW6jYPIb8/0.jpg",
      mediaLink: "https://go.cal.com/embed-video",
      title: "Embed",
      description: "Embed your booking page on your website",
      href: "https://go.cal.com/embed-video"
    },
    {
      id: 16,
      thumbnailUrl: "https://img.youtube.com/vi/xopxmk2H4Ng/0.jpg",
      mediaLink: "https://go.cal.com/paid-booking",
      title: "Paid Bookings",
      description: "Charge for your time with Cal.com's paid bookings",
      href: "https://go.cal.com/paid-booking"
    },
    {
      id: 15,
      thumbnailUrl: "https://img.youtube.com/vi/ZjSD1yPgLLQ/0.jpg",
      mediaLink: "https://go.cal.com/instant-meetings-video",
      title: "Instant Meetings",
      description: "Book meetings instantly with a link",
      href: "https://go.cal.com/instant-meetings-video"
    },
    {
      id: 14,
      thumbnailUrl: "https://img.youtube.com/vi/IZ4-nUiIpvY/0.jpg",
      mediaLink: "https://go.cal.com/custom-attributes",
      title: "Custom Attributes",
      description: "Define roles and attributes for your teams",
      href: "https://go.cal.com/custom-attributes"
    },
    {
      id: 13,
      thumbnailUrl: "https://img.youtube.com/vi/TTAASLLPKk0/0.jpg",
      mediaLink: "https://go.cal.com/ooo-video",
      title: "ooo.new",
      description: "Easily go out-of-office",
      href: "https://go.cal.com/ooo-video"
    },
    {
      id: 12,
      thumbnailUrl: "https://cal.com/og-image-cal-ai.jpg",
      mediaLink: "https://go.cal.com/cal-ai",
      title: "Cal.ai",
      description: "Your personal AI scheduling assistant",
      href: "https://go.cal.com/cal-ai"
    },
    {
      id: 11,
      thumbnailUrl: "https://img.youtube.com/vi/KTg_qzA9NEc/0.jpg",
      mediaLink: "https://go.cal.com/insights",
      title: "Insights",
      description: "Get a better understanding of your business",
      href: "https://go.cal.com/insights"
    },
    {
      id: 10,
      thumbnailUrl: "https://img.youtube.com/vi/jvaBafzVUQc/0.jpg",
      mediaLink: "https://go.cal.com/video",
      title: "Cal Video",
      description: "Free video conferencing with recording",
      href: "https://go.cal.com/video"
    },
    {
      id: 9,
      thumbnailUrl: "https://img.youtube.com/vi/93iOmzHieCU/0.jpg",
      mediaLink: "https://go.cal.com/round-robin",
      title: "Round-Robin",
      description: "Create advanced group meetings with round-robin",
      href: "https://go.cal.com/round-robin"
    },
    {
      id: 8,
      thumbnailUrl: "https://img.youtube.com/vi/piKlAiibAFo/0.jpg",
      mediaLink: "https://go.cal.com/workflows",
      title: "Automate Workflows",
      description: "Make time work for you and automate tasks",
      href: "https://go.cal.com/workflows"
    },
    {
      id: 7,
      thumbnailUrl: "https://img.youtube.com/vi/UVXgo12cY4g/0.jpg",
      mediaLink: "https://go.cal.com/routing-forms",
      title: "Routing Forms",
      description: "Ask questions and route to the correct person",
      href: "https://go.cal.com/routing-forms"
    },
    {
      id: 6,
      thumbnailUrl: "https://img.youtube.com/vi/yGiZo1Ry5-8/0.jpg",
      mediaLink: "https://go.cal.com/recurring-video",
      title: "Recurring Bookings",
      description: "Learn how to create a recurring schedule",
      href: "https://go.cal.com/recurring-video"
    },
    {
      id: 5,
      thumbnailUrl: "https://img.youtube.com/vi/0v_nQtpxC_4/0.jpg",
      mediaLink: "https://go.cal.com/payments-video",
      title: "Accept Payments",
      description: "Charge for your time with Cal.com's Stripe App",
      href: "https://app.cal.com/apps/stripe"
    },
    {
      id: 4,
      thumbnailUrl: "https://img.youtube.com/vi/zGr_s-fG84k/0.jpg",
      mediaLink: "https://go.cal.com/confirmation-video",
      title: "Requires Confirmation",
      description: "Learn how to be in charge of your bookings",
      href: "https://cal.com/resources/feature/opt-in"
    },
    {
      id: 3,
      thumbnailUrl: "https://img.youtube.com/vi/-L8MCiT6uhQ/0.jpg",
      mediaLink: "https://youtu.be/-L8MCiT6uhQ?si=DRJzRNhN85hqAwBl",
      title: "Routing Forms, Workflows",
      description: "Ask screening questions of potential bookers to connect them with the right person",
      href: "https://youtu.be/-L8MCiT6uhQ?si=DRJzRNhN85hqAwBl"
    },
    {
      id: 2,
      thumbnailUrl: "https://img.youtube.com/vi/EAc46SPL6iA/0.jpg",
      mediaLink: "https://go.cal.com/teams-video",
      title: "How to set up Teams",
      description: "Learn how to use round-robin and collective events.",
      href: "https://cal.com/teams"
    },
    {
      id: 1,
      thumbnailUrl: "https://img.youtube.com/vi/VZ5PfQzzxBw/0.jpg",
      mediaLink: "https://youtu.be/VZ5PfQzzxBw?si=oB0LPSxG8dWIwg5a",
      title: "Dynamic booking links",
      description: "Booking link that allows people to quickly schedule meetings.",
      href: "https://youtu.be/VZ5PfQzzxBw?si=oB0LPSxG8dWIwg5a"
    }
  ]).slice(0).reverse()], [o, i] = Q(() => {
    if (typeof window > "u")
      return n;
    try {
      const t = w.getItem("removedTipsIds");
      if (t !== null) {
        const r = t.split(",").map((c) => parseInt(c, 10));
        return n.filter((c) => r.indexOf(c.id) === -1);
      } else
        return n;
    } catch {
      return n;
    }
  }), u = (t) => {
    i((r) => {
      const l = w.getItem("removedTipsIds") || "", c = r.findIndex((f) => f.id === t);
      return c === -1 ? [...r] : (w.setItem(
        "removedTipsIds",
        `${r[c].id.toString()}${l.length > 0 ? `,${l}` : ""}`
      ), r.splice(c, 1), [...r]);
    });
  }, d = o.slice(0).reverse();
  return /* @__PURE__ */ a(b, { children: /* @__PURE__ */ a(
    "div",
    {
      className: "hidden pb-4 pt-8 lg:grid",
      style: {
        gridTemplateColumns: "1fr"
      },
      children: o.map((t) => {
        const r = d.indexOf(t) === 0;
        return /* @__PURE__ */ a(
          "div",
          {
            className: "relative",
            style: {
              gridRowStart: 1,
              gridColumnStart: 1
            },
            children: /* @__PURE__ */ a(
              "div",
              {
                className: "relative",
                style: {
                  transform: `scale(${1 - d.indexOf(t) / 20})`,
                  top: -d.indexOf(t) * 10,
                  opacity: `${1 - d.indexOf(t) / 7}`
                },
                children: /* @__PURE__ */ a(
                  he,
                  {
                    variant: t.variant ?? "SidebarCard",
                    thumbnailUrl: t.thumbnailUrl,
                    coverPhoto: t.coverPhoto,
                    mediaLink: r ? t.mediaLink : void 0,
                    mediaLinkOnClick: r ? () => {
                      y.capture("tip_video_clicked", t), t.onClick && t.onClick();
                    } : void 0,
                    title: e(t.title),
                    description: e(t.description),
                    learnMore: r ? {
                      href: t.href,
                      text: e("learn_more"),
                      onClick: () => {
                        y.capture("tip_learn_more_clicked", t), t.onClick && t.onClick();
                      }
                    } : void 0,
                    actionButton: r ? {
                      onClick: () => {
                        y.capture("tip_dismiss_clicked", t), u(t.id);
                      },
                      child: e("dismiss")
                    } : void 0,
                    containerProps: {
                      tabIndex: r ? void 0 : -1,
                      "aria-hidden": r ? void 0 : "true"
                    }
                  }
                )
              }
            )
          },
          t.id
        );
      })
    }
  ) });
}
const ve = G(pe);
function ke({
  title: e,
  description: s,
  background: m,
  features: n,
  buttons: o,
  isParentLoading: i,
  children: u,
  plan: d
}) {
  const { resolvedTheme: t } = V(), { isPending: r, hasTeamPlan: l } = z(), { data: c } = F.viewer.teams.getUpgradeable.useQuery(), f = `${m}${t === "dark" ? "-dark" : ""}.jpg`, k = !1, x = !!(c != null && c[0]);
  return d === "team" && (l || x) ? /* @__PURE__ */ a(b, { children: u }) : d === "enterprise" && k ? /* @__PURE__ */ a(b, { children: u }) : r ? /* @__PURE__ */ a(b, { children: i }) : /* @__PURE__ */ h(b, { children: [
    /* @__PURE__ */ h("div", { className: "relative flex min-h-[295px] w-full items-center justify-between overflow-hidden rounded-lg pb-10", children: [
      /* @__PURE__ */ h("picture", { className: "absolute min-h-[295px] w-full rounded-lg object-cover", children: [
        /* @__PURE__ */ a("source", { srcSet: f, media: "(prefers-color-scheme: dark)" }),
        /* @__PURE__ */ a(
          "img",
          {
            className: "absolute min-h-[295px] w-full select-none rounded-lg object-cover object-left md:object-center",
            src: f,
            loading: "lazy",
            alt: e
          }
        )
      ] }),
      /* @__PURE__ */ h("div", { className: "relative my-4 px-8 pb-4 sm:px-14", children: [
        /* @__PURE__ */ a("h1", { className: p("font-cal mt-4 text-3xl"), children: e }),
        /* @__PURE__ */ a("p", { className: p("mb-8 mt-4 max-w-sm"), children: s }),
        o
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "mt-4 grid-cols-3 md:grid md:gap-4", children: n.map((g) => /* @__PURE__ */ h("div", { className: "bg-cal-muted mb-4 min-h-[180px] w-full rounded-md  p-8 md:mb-0", children: [
      g.icon,
      /* @__PURE__ */ a("h2", { className: "font-cal text-emphasis mt-4 text-lg", children: g.title }),
      /* @__PURE__ */ a("p", { className: "text-default", children: g.description })
    ] }, g.title)) })
  ] });
}
export {
  ve as Tips,
  ke as UpgradeTip
};
