import { jsxs as c, jsx as i, Fragment as f } from "react/jsx-runtime";
import { av as S, aw as j, ax as T, as as U, ay as A, az as R, Z as u, z as I, aA as _, y as w, aB as x, aC as $, aD as V, R as z } from "./index-ykl8OQ78.js";
import { memo as Q, useState as q } from "react";
var M = Math.floor, Z = Math.random;
function E(t, s) {
  return t + M(Z() * (s - t + 1));
}
var D = E, F = D;
function G(t, s) {
  var o = -1, n = t.length, a = n - 1;
  for (s = s === void 0 ? n : s; ++o < s; ) {
    var e = F(o, a), r = t[e];
    t[e] = t[o], t[o] = r;
  }
  return t.length = s, t;
}
var C = G, W = S(), O = C;
function H(t) {
  return O(W(t));
}
var P = H, K = j;
function Y(t, s) {
  return K(s, function(o) {
    return t[o];
  });
}
var J = Y, X = J, B = T();
function ee(t) {
  return t == null ? [] : X(t, B(t));
}
var te = ee, ie = C, se = te;
function re(t) {
  return ie(se(t));
}
var ae = re, le = P, oe = ae, de = A;
function ne(t) {
  var s = de(t) ? le : oe;
  return s(t);
}
var ce = ne;
const me = /* @__PURE__ */ U(ce), g = _("", {
  // 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: ""
    },
    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"
    },
    {
      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"
    },
    {
      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"
    },
    {
      variant: "SidebarCard",
      structure: "title",
      className: "text-sm font-cal"
    },
    {
      variant: "SidebarCard",
      structure: "description",
      className: "text-xs text-default line-clamp-2"
    }
  ]
});
function he({
  image: t,
  title: s,
  icon: o,
  description: n,
  variant: a,
  actionButton: e,
  containerProps: r,
  imageProps: l,
  mediaLink: d,
  thumbnailUrl: h,
  learnMore: m
}) {
  const v = m && m.href.startsWith("https") ? "a" : R;
  return /* @__PURE__ */ c(
    "div",
    {
      className: u(
        r == null ? void 0 : r.className,
        g({ variant: a, structure: "card" }),
        "bg-default border-subtle text-default flex flex-col justify-between rounded-md border"
      ),
      "data-testid": "card-container",
      ...r,
      children: [
        /* @__PURE__ */ c("div", { children: [
          o && o,
          t && /* @__PURE__ */ i(
            "img",
            {
              src: t,
              alt: l == null ? void 0 : l.alt,
              className: u(
                l == null ? void 0 : l.className,
                g({ variant: a, structure: "image" })
              ),
              ...l
            }
          ),
          /* @__PURE__ */ i(
            "h5",
            {
              title: s,
              className: u(
                g({ variant: a, structure: "title" }),
                "text-emphasis line-clamp-1 font-bold leading-5"
              ),
              children: s
            }
          ),
          n && /* @__PURE__ */ i(
            "p",
            {
              title: n.toString(),
              className: u(g({ variant: a, structure: "description" }), "pt-1"),
              children: n
            }
          )
        ] }),
        a === "SidebarCard" && /* @__PURE__ */ c(
          "a",
          {
            onClick: e == null ? void 0 : e.onClick,
            target: "_blank",
            rel: "noreferrer",
            href: d,
            "data-testid": e == null ? void 0 : e["data-testid"],
            className: "group relative my-3 flex aspect-video items-center overflow-hidden rounded",
            children: [
              /* @__PURE__ */ i("div", { className: "absolute inset-0 bg-black bg-opacity-50 transition group-hover:bg-opacity-40" }),
              /* @__PURE__ */ c(
                "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__ */ i(
                      "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__ */ i(
                      "path",
                      {
                        d: "M12.1667 8.5L23.8334 16L12.1667 23.5V8.5Z",
                        fill: "#111827",
                        stroke: "#111827",
                        strokeWidth: "1.5",
                        strokeLinecap: "round",
                        strokeLinejoin: "round"
                      }
                    )
                  ]
                }
              ),
              /* @__PURE__ */ i("img", { alt: "play feature video", src: h })
            ]
          }
        ),
        a === "basic" && e && /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
          I,
          {
            color: "secondary",
            href: e == null ? void 0 : e.href,
            className: "mt-10",
            EndIcon: "arrow-right",
            "data-testid": e["data-testid"],
            children: e == null ? void 0 : e.child
          }
        ) }),
        a === "SidebarCard" && /* @__PURE__ */ c("div", { className: "mt-2 flex items-center justify-between", children: [
          m && /* @__PURE__ */ i(
            v,
            {
              href: m.href,
              onClick: e == null ? void 0 : e.onClick,
              target: "_blank",
              rel: "noreferrer",
              className: "text-default text-xs font-medium",
              children: m.text
            }
          ),
          (e == null ? void 0 : e.child) && /* @__PURE__ */ i(
            "button",
            {
              className: "text-default hover:text-emphasis p-0 text-xs font-normal",
              color: "minimal",
              "data-testid": e == null ? void 0 : e["data-testid"],
              onClick: e == null ? void 0 : e.onClick,
              children: e == null ? void 0 : e.child
            }
          )
        ] })
      ]
    }
  );
}
const ue = [
  {
    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/docs/enterprise-features/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"
  }
], b = me(ue).slice(0).reverse();
function pe() {
  const { t } = w(), [s, o] = q(() => {
    if (typeof window > "u")
      return b;
    try {
      const e = x.getItem("removedTipsIds");
      if (e !== null) {
        const r = e.split(",").map((d) => parseInt(d, 10));
        return b.filter((d) => r.indexOf(d.id) === -1);
      } else
        return b;
    } catch {
      return b;
    }
  }), n = (e) => {
    o((r) => {
      const l = x.getItem("removedTipsIds") || "", d = r.findIndex((h) => h.id === e);
      return d === -1 ? [...r] : (x.setItem(
        "removedTipsIds",
        `${r[d].id.toString()}${l.length > 0 ? `,${l}` : ""}`
      ), r.splice(d, 1), [...r]);
    });
  }, a = s.slice(0).reverse();
  return /* @__PURE__ */ i(
    "div",
    {
      className: "hidden pb-4 pt-8 lg:grid",
      style: {
        gridTemplateColumns: "1fr"
      },
      children: s.map((e) => /* @__PURE__ */ i(
        "div",
        {
          className: "relative",
          style: {
            gridRowStart: 1,
            gridColumnStart: 1
          },
          children: /* @__PURE__ */ i(
            "div",
            {
              className: "relative",
              style: {
                transform: `scale(${1 - a.indexOf(e) / 20})`,
                top: -a.indexOf(e) * 10,
                opacity: `${1 - a.indexOf(e) / 7}`
              },
              children: /* @__PURE__ */ i(
                he,
                {
                  variant: "SidebarCard",
                  thumbnailUrl: e.thumbnailUrl,
                  mediaLink: e.mediaLink,
                  title: e.title,
                  description: e.description,
                  learnMore: { href: e.href, text: t("learn_more") },
                  actionButton: { onClick: () => n(e.id), child: t("dismiss") }
                }
              )
            }
          )
        },
        e.id
      ))
    }
  );
}
const ve = Q(pe);
function ke({
  title: t,
  description: s,
  background: o,
  features: n,
  buttons: a,
  isParentLoading: e,
  children: r,
  plan: l
}) {
  const { resolvedTheme: d } = $(), { t: h } = w(), { isPending: m, hasTeamPlan: v } = V(), { data: k } = z.viewer.teams.getUpgradeable.useQuery(), y = `${o}${d === "dark" ? "-dark" : ""}.jpg`, N = !1, L = !!(k != null && k[0]);
  return l === "team" && (v || L) ? /* @__PURE__ */ i(f, { children: r }) : l === "enterprise" && N ? /* @__PURE__ */ i(f, { children: r }) : m ? /* @__PURE__ */ i(f, { children: e }) : /* @__PURE__ */ c(f, { children: [
    /* @__PURE__ */ c("div", { className: "relative flex min-h-[295px] w-full items-center justify-between overflow-hidden rounded-lg pb-10", children: [
      /* @__PURE__ */ c("picture", { className: "absolute min-h-[295px] w-full rounded-lg object-cover", children: [
        /* @__PURE__ */ i("source", { srcSet: y, media: "(prefers-color-scheme: dark)" }),
        /* @__PURE__ */ i(
          "img",
          {
            className: "absolute min-h-[295px] w-full select-none rounded-lg object-cover object-left md:object-center",
            src: y,
            loading: "lazy",
            alt: t
          }
        )
      ] }),
      /* @__PURE__ */ c("div", { className: "relative my-4 px-8 sm:px-14", children: [
        /* @__PURE__ */ i("h1", { className: u("font-cal mt-4 text-3xl"), children: h(t) }),
        /* @__PURE__ */ i("p", { className: u("mb-8 mt-4 max-w-sm"), children: h(s) }),
        a
      ] })
    ] }),
    /* @__PURE__ */ i("div", { className: "mt-4 grid-cols-3 md:grid md:gap-4", children: n.map((p) => /* @__PURE__ */ c("div", { className: "bg-muted mb-4 min-h-[180px] w-full rounded-md  p-8 md:mb-0", children: [
      p.icon,
      /* @__PURE__ */ i("h2", { className: "font-cal text-emphasis mt-4 text-lg", children: p.title }),
      /* @__PURE__ */ i("p", { className: "text-default", children: p.description })
    ] }, p.title)) })
  ] });
}
export {
  ve as Tips,
  ke as UpgradeTip
};
