@burdenoff/website-sdk 0.0.0-dev

package/dist/components/pricing.js

@@ -0,0 +1,813 @@
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactHelmetAsync = require('react-helmet-async');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/client/security.ts
+var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "::1"]);
+var RESERVED_HEADERS = /* @__PURE__ */ new Set([
+  "authorization",
+  "cookie",
+  "x-actor-id",
+  "x-actor-type",
+  "x-consent-granted-by",
+  "x-consent-scope",
+  "x-consent-granted-at",
+  "x-consent-expires-at"
+]);
+function validateGatewayUrl(value) {
+  let url;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new Error("Gateway URL must be a valid absolute URL");
+  }
+  if (url.protocol === "https:") {
+    return url.toString();
+  }
+  if (url.protocol === "http:" && LOOPBACK_HOSTS.has(url.hostname.toLowerCase())) {
+    return url.toString();
+  }
+  throw new Error("Gateway URL must use HTTPS unless it targets localhost");
+}
+function sanitizeHeaders(headers) {
+  if (!headers) return void 0;
+  return Object.fromEntries(
+    Object.entries(headers).filter(
+      ([key]) => !RESERVED_HEADERS.has(key.toLowerCase())
+    )
+  );
+}
+
+// src/client/graphql-client.ts
+var _WebSDKClient = class _WebSDKClient {
+  constructor(config) {
+    __publicField(this, "config");
+    __publicField(this, "queryCache", /* @__PURE__ */ new Map());
+    __publicField(this, "inflight", /* @__PURE__ */ new Map());
+    this.config = {
+      ...config,
+      gatewayUrl: validateGatewayUrl(config.gatewayUrl),
+      headers: sanitizeHeaders(config.headers)
+    };
+  }
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Execute a GraphQL query (with deduplication and caching)
+   */
+  async query(query, variables) {
+    const cacheKey = JSON.stringify({ query, variables });
+    const cached = this.queryCache.get(cacheKey);
+    if (cached) {
+      if (Date.now() - cached.ts < _WebSDKClient.CACHE_TTL) {
+        return cached.data;
+      }
+      this.queryCache.delete(cacheKey);
+    }
+    const existing = this.inflight.get(cacheKey);
+    if (existing) {
+      return existing;
+    }
+    const promise = this.request(query, variables).then((result) => {
+      if (result.data && !result.errors?.length) {
+        if (this.queryCache.size >= _WebSDKClient.MAX_CACHE_ENTRIES) {
+          const oldestEntry = this.queryCache.keys().next().value;
+          if (oldestEntry) {
+            this.queryCache.delete(oldestEntry);
+          }
+        }
+        this.queryCache.set(cacheKey, { data: result, ts: Date.now() });
+      }
+      return result;
+    }).finally(() => {
+      this.inflight.delete(cacheKey);
+    });
+    this.inflight.set(cacheKey, promise);
+    return promise;
+  }
+  /**
+   * Execute a GraphQL mutation
+   */
+  async mutate(mutation, variables) {
+    return this.request(mutation, variables);
+  }
+  async request(query, variables) {
+    try {
+      const response = await fetch(this.config.gatewayUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-product-id": this.config.productId,
+          ...this.config.headers
+        },
+        body: JSON.stringify({ query, variables })
+      });
+      if (!response.ok) {
+        console.error(
+          "[WebSDK] GraphQL request failed",
+          response.status,
+          response.statusText
+        );
+        return {
+          errors: [
+            {
+              message: `HTTP ${response.status}: ${response.statusText}`,
+              extensions: { code: `HTTP_${response.status}` }
+            }
+          ]
+        };
+      }
+      return await response.json();
+    } catch (error) {
+      console.error(
+        "[WebSDK] Network error",
+        error instanceof Error ? error.message : "unknown error"
+      );
+      return {
+        errors: [
+          {
+            message: error instanceof Error ? error.message : "Network error",
+            extensions: { code: "NETWORK_ERROR" }
+          }
+        ]
+      };
+    }
+  }
+};
+__publicField(_WebSDKClient, "CACHE_TTL", 5 * 60 * 1e3);
+// 5 minutes
+__publicField(_WebSDKClient, "MAX_CACHE_ENTRIES", 100);
+var WebSDKContext = React.createContext(null);
+function useWebSDK() {
+  const client = React.useContext(WebSDKContext);
+  if (!client) {
+    throw new Error("useWebSDK must be used within a WebSDKProvider");
+  }
+  return client;
+}
+function useWebSDKConfig() {
+  const client = useWebSDK();
+  return client.getConfig();
+}
+function PageHead({
+  title,
+  description,
+  productName,
+  keywords,
+  image,
+  url,
+  favicon,
+  robots = "index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",
+  locale = "en_US",
+  twitterHandle,
+  themeColor = "#000000",
+  structuredData,
+  additionalMeta
+}) {
+  const fullTitle = productName && !title.includes(productName) ? `${title} | ${productName}` : title;
+  const fullImageUrl = image && !image.startsWith("http") && url ? `${url.replace(/\/$/, "")}${image}` : image;
+  const structuredDataItems = structuredData ? Array.isArray(structuredData) ? structuredData : [structuredData] : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactHelmetAsync.Helmet, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("title", { children: fullTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "description", content: description }),
+    keywords && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "keywords", content: keywords }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "author", content: "Burdenoff Consultancy Services Pvt Ltd" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "robots", content: robots }),
+    url && /* @__PURE__ */ jsxRuntime.jsx("link", { rel: "canonical", href: url }),
+    favicon && /* @__PURE__ */ jsxRuntime.jsx("link", { rel: "icon", href: favicon }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:type", content: "website" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:image", content: fullImageUrl }),
+    url && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:url", content: url }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:locale", content: locale }),
+    productName && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:site_name", content: productName }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:card", content: "summary_large_image" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:image", content: fullImageUrl }),
+    twitterHandle && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:creator", content: twitterHandle }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "theme-color", content: themeColor }),
+    structuredDataItems.map((data, index) => /* @__PURE__ */ jsxRuntime.jsx("script", { type: "application/ld+json", children: JSON.stringify(data) }, `ld-${index}`)),
+    additionalMeta?.map((meta, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "meta",
+      {
+        ...meta.name ? { name: meta.name } : {},
+        ...meta.property ? { property: meta.property } : {},
+        content: meta.content
+      },
+      `meta-${index}`
+    ))
+  ] });
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var GET_PLANS_QUERY = `
+  query GetPublicPlans($productId: String!) {
+    publicPlans(productId: $productId) {
+      id
+      name
+      price
+      currency
+      currencyPrices
+      duration
+      features {
+        id
+        quotaId
+        quota {
+          id
+          name
+          limits
+        }
+      }
+      isActive
+      productID
+      createdAt
+    }
+  }
+`;
+function formatPrice(price, currencyCode = "USD", currencies) {
+  const defaultCurrencies = {
+    USD: { code: "USD", symbol: "$", position: "prefix" },
+    EUR: { code: "EUR", symbol: "\u20AC", position: "prefix" },
+    GBP: { code: "GBP", symbol: "\xA3", position: "prefix" },
+    INR: { code: "INR", symbol: "\u20B9", position: "prefix" }
+  };
+  const currencyMap = currencies || defaultCurrencies;
+  const currency = currencyMap[currencyCode] || {
+    symbol: currencyCode,
+    position: "prefix"
+  };
+  const formattedNumber = price % 1 === 0 ? price.toString() : price.toFixed(2);
+  return currency.position === "prefix" ? `${currency.symbol}${formattedNumber}` : `${formattedNumber}${currency.symbol}`;
+}
+function formatInterval(duration, billingIntervals) {
+  const defaultIntervals = {
+    monthly: "/month",
+    yearly: "/year"
+  };
+  const intervals = billingIntervals || defaultIntervals;
+  return intervals[duration] || `/${duration}`;
+}
+function isEnterprisePlan(planName) {
+  const name = planName.toLowerCase();
+  return name.includes("team") || name.includes("business") || name.includes("enterprise");
+}
+function detectPlanTier(planName) {
+  const name = planName.toLowerCase();
+  if (name.includes("free") || name.includes("basic") || name.includes("starter") || name.includes("hobby")) {
+    return "basic";
+  } else if (name.includes("pro") || name.includes("professional") || name.includes("premium") || name.includes("team")) {
+    return "professional";
+  } else if (name.includes("enterprise") || name.includes("business")) {
+    return "enterprise";
+  }
+  return null;
+}
+function getFallbackFeaturesForTier(tier, fallbackFeatures) {
+  return [...fallbackFeatures?.[tier] || []];
+}
+function getMetadataForPlan(planName, planMetadata) {
+  const normalizedName = planName.toLowerCase();
+  if (planMetadata?.[normalizedName]) {
+    const meta = planMetadata[normalizedName];
+    return {
+      tier: meta.tier || "basic",
+      displayName: meta.displayName || planName,
+      defaultDescription: meta.defaultDescription || "Choose this plan",
+      popular: meta.popular ?? false,
+      ctaText: meta.ctaText || "Get Started",
+      ctaType: meta.ctaType || "signup",
+      features: meta.features
+    };
+  }
+  const tier = detectPlanTier(planName);
+  if (tier) {
+    return {
+      tier,
+      displayName: planName,
+      defaultDescription: "Choose this plan",
+      popular: tier === "professional",
+      ctaText: tier === "enterprise" ? "Contact Sales" : "Get Started",
+      ctaType: tier === "enterprise" ? "contact" : "signup"
+    };
+  }
+  return {
+    tier: "basic",
+    displayName: planName,
+    defaultDescription: "Choose this plan",
+    popular: false,
+    ctaText: "Get Started",
+    ctaType: "signup"
+  };
+}
+function humanizeQuotaName(name) {
+  const parts = name.split(".");
+  const resource = parts.length >= 3 ? parts[parts.length - 2] : parts[parts.length - 1];
+  return resource.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function transformQuotaToFeature(quota) {
+  const { name, limits } = quota;
+  if (!limits || typeof limits !== "object") {
+    return humanizeQuotaName(name);
+  }
+  const limitsObj = limits;
+  const value = limitsObj.value;
+  const unit = limitsObj.unit;
+  const type = limitsObj.type;
+  const description = limitsObj.description;
+  if (typeof description === "string" && description) {
+    if (type === "number" && typeof value === "number") {
+      return `${value.toLocaleString()} ${description}`;
+    }
+    return description;
+  }
+  if (typeof unit === "string" && unit) {
+    if (typeof value === "number") {
+      return `${value.toLocaleString()} ${unit}`;
+    }
+    return `${unit}`;
+  }
+  const label = humanizeQuotaName(name);
+  if (type === "boolean") {
+    return label;
+  }
+  if (typeof value === "number") {
+    return `${value.toLocaleString()} ${label}`;
+  }
+  return label;
+}
+function extractDisplayFeatures(features, planName, fallbackFeatures) {
+  const tier = detectPlanTier(planName);
+  if (tier) {
+    const tierFeatures = getFallbackFeaturesForTier(tier, fallbackFeatures);
+    if (tierFeatures.length > 0) {
+      return tierFeatures;
+    }
+  }
+  const quotaFeatures = features.filter((f) => f.quota).map((f) => transformQuotaToFeature(f.quota));
+  if (quotaFeatures.length > 0) {
+    return quotaFeatures;
+  }
+  return [];
+}
+function transformToDisplayCard(plan, props) {
+  const metadata = getMetadataForPlan(plan.name, props.planMetadata);
+  const formattedPrice = formatPrice(
+    plan.price,
+    plan.currency,
+    props.currencies
+  );
+  const interval = formatInterval(plan.duration, props.billingIntervals);
+  const features = metadata.features && metadata.features.length > 0 ? metadata.features : extractDisplayFeatures(
+    plan.features,
+    plan.name,
+    props.fallbackFeatures
+  );
+  const contactUrl = props.contactUrl || "/contact";
+  const ctaLink = metadata.ctaType === "contact" ? contactUrl : props.appLoginUrl;
+  return {
+    id: plan.id,
+    name: plan.name,
+    description: metadata.defaultDescription,
+    price: formattedPrice,
+    priceRaw: plan.price,
+    interval,
+    duration: plan.duration,
+    features,
+    popular: metadata.popular,
+    ctaText: metadata.ctaText,
+    ctaLink,
+    tier: metadata.tier
+  };
+}
+function PricingSection(props) {
+  const {
+    sectionHeading = "Pricing Plans",
+    sectionSubtitle = "Choose the perfect plan for your needs",
+    id,
+    className = ""
+  } = props;
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const resolvedProductId = props.productId || config.productId;
+  const [allPlans, setAllPlans] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [billingCycle, setBillingCycle] = React.useState(
+    "monthly"
+  );
+  const [audience, setAudience] = React.useState(
+    "individual"
+  );
+  React.useEffect(() => {
+    let cancelled = false;
+    async function loadPlans() {
+      try {
+        setLoading(true);
+        const response = await client.query(GET_PLANS_QUERY, {
+          productId: resolvedProductId
+        });
+        if (cancelled) return;
+        if (response.errors && response.errors.length > 0) {
+          throw new Error(response.errors[0].message);
+        }
+        if (!response.data?.publicPlans) {
+          throw new Error("No plans data received");
+        }
+        const cards = response.data.publicPlans.filter((plan) => plan.isActive).map((plan) => transformToDisplayCard(plan, props)).sort((a, b) => a.priceRaw - b.priceRaw);
+        setAllPlans(cards);
+        setError(null);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Failed to load plans:", err);
+        setError("Unable to load pricing information. Please try again later.");
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    loadPlans();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, resolvedProductId]);
+  const individualAllPlans = allPlans.filter((p) => !isEnterprisePlan(p.name));
+  const enterpriseApiPlans = allPlans.filter((p) => isEnterprisePlan(p.name));
+  const individualPlans = individualAllPlans.filter(
+    (plan) => billingCycle === "monthly" ? plan.duration === "monthly" : plan.duration === "yearly"
+  );
+  const enterpriseCards = enterpriseApiPlans.map((p) => {
+    if (p.priceRaw === 0 && p.name.toLowerCase().includes("enterprise")) {
+      return {
+        ...p,
+        price: "Custom",
+        interval: "",
+        ctaText: "Contact Sales",
+        ctaLink: props.contactUrl || "/contact"
+      };
+    }
+    return p;
+  });
+  const hasApiEnterprisePlans = enterpriseCards.length > 0;
+  const defaultEnterpriseCard = {
+    name: "Enterprise",
+    subtitle: "For organizations that need more",
+    description: "For organizations that need more",
+    price: "Custom",
+    period: "",
+    interval: "",
+    button: "Contact Sales",
+    buttonLink: props.contactUrl || "/contact",
+    ctaText: "Contact Sales",
+    ctaLink: props.contactUrl || "/contact",
+    popular: false,
+    features: props.fallbackFeatures?.enterprise || [
+      "Unlimited everything",
+      "SSO & SAML",
+      "Audit logs",
+      "Dedicated support",
+      "Self-hosted option"
+    ]
+  };
+  const resolvedEnterprisePlans = hasApiEnterprisePlans ? enterpriseCards : props.enterprisePlans ? props.enterprisePlans : [defaultEnterpriseCard];
+  const plans = props.showAudienceTabs && audience === "enterprise" ? [] : individualPlans;
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { id, className: `py-12 sm:py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto px-4 sm:px-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8 sm:mb-12", children: [
+        sectionHeading ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4", children: sectionHeading }) : (
+          // Visually hidden but DOM-present heading so axe's heading-order
+          // rule still sees an h2 between the consumer's hero h1 and the
+          // h3 plan-card titles. See `getMetadataForPlan` for why a falsy
+          // sectionHeading is the canonical "no visible heading" signal.
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sr-only", children: "Pricing" })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm sm:text-base md:text-lg", children: "Loading pricing information..." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-3 gap-6 sm:gap-8", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "bg-card border rounded-lg p-6 animate-pulse",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 bg-muted rounded w-1/2 mb-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-3/4 mb-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 bg-muted rounded w-1/3 mb-6" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 mb-6", children: [1, 2, 3, 4].map((j) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded" }, j)) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 bg-muted rounded" })
+          ]
+        },
+        i
+      )) })
+    ] }) });
+  }
+  if (error && plans.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { id, className: `py-12 sm:py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 sm:px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      sectionHeading ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-4", children: sectionHeading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sr-only", children: "Pricing" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-8", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => window.location.reload(), children: "Retry" })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { id, className: `py-12 sm:py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto px-4 sm:px-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8 sm:mb-12", children: [
+      sectionHeading ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4", children: sectionHeading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sr-only", children: "Pricing" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm sm:text-base md:text-lg mb-6", children: sectionSubtitle }),
+      props.showAudienceTabs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center bg-muted p-1.5 rounded-xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAudience("individual"),
+            className: `px-6 sm:px-8 py-2.5 rounded-lg text-sm font-semibold transition-all ${audience === "individual" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+            children: "Individual"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAudience("enterprise"),
+            className: `px-6 sm:px-8 py-2.5 rounded-lg text-sm font-semibold transition-all ${audience === "enterprise" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+            children: "Enterprise"
+          }
+        )
+      ] }) }),
+      (audience === "individual" || !props.showAudienceTabs) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center bg-muted/60 p-1.5 rounded-xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setBillingCycle("monthly"),
+            className: `px-5 sm:px-6 py-2 rounded-lg text-sm font-medium transition-all ${billingCycle === "monthly" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+            children: "Monthly"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setBillingCycle("yearly"),
+            className: `px-5 sm:px-6 py-2 rounded-lg text-sm font-medium transition-all ${billingCycle === "yearly" ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+            children: "Yearly"
+          }
+        )
+      ] }) })
+    ] }),
+    props.showAudienceTabs && audience === "enterprise" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl sm:text-2xl font-bold text-foreground", children: props.enterpriseHeading || "Enterprise Solutions" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-muted-foreground", children: props.enterpriseSubtitle || "Built for teams, agencies, and organizations that need advanced collaboration, security, support, and scale." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto items-stretch", children: props.showAudienceTabs && audience === "enterprise" ? (
+      /* Enterprise cards — from API, static prop, or built-in default */
+      resolvedEnterprisePlans.map((ep) => {
+        const subtitle = ep.subtitle || ep.description || "";
+        const btnText = ep.button || ep.ctaText || "Get Started";
+        const btnLink = ep.buttonLink || ep.ctaLink || props.appLoginUrl;
+        const period = ep.period || ep.interval || "";
+        const note = ep.note || "";
+        const badge = ep.badge || "";
+        const isPopular = ep.popular;
+        const features = ep.features || [];
+        const price = String(ep.price);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `bg-card rounded-xl p-6 sm:p-8 transition-all duration-300 flex flex-col ${isPopular ? "border-2 border-primary shadow-xl ring-1 ring-primary/20" : "border hover:shadow-lg hover:border-primary/50"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-6", children: [
+                isPopular && badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block bg-primary text-primary-foreground px-4 py-1 rounded-full text-xs font-semibold mb-3", children: badge }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl sm:text-2xl font-bold mb-2", children: ep.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: subtitle })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-2", children: [
+                price === "Custom" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl sm:text-4xl font-bold", children: "Custom" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl sm:text-5xl font-extrabold", children: price }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-lg", children: period })
+                ] }),
+                note && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm font-medium text-primary", children: note })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3 mb-8 mt-6 flex-1", children: features.map((feature) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  className: "text-sm flex items-start gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary mt-0.5 flex-shrink-0", children: "\u2713" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature })
+                  ]
+                },
+                feature
+              )) }),
+              btnLink.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  className: "w-full h-11",
+                  variant: isPopular ? "default" : "outline",
+                  size: "lg",
+                  asChild: true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: btnLink,
+                      onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }),
+                      children: btnText
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  className: "w-full h-11",
+                  variant: isPopular ? "default" : "outline",
+                  size: "lg",
+                  asChild: true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: btnLink,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      children: btnText
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          ep.name
+        );
+      })
+    ) : (
+      /* Individual API-fetched cards */
+      plans.map((plan) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `bg-card rounded-xl p-6 sm:p-8 transition-all duration-300 flex flex-col ${plan.popular ? "border-2 border-primary shadow-xl ring-1 ring-primary/20" : "border hover:shadow-lg hover:border-primary/50"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-6", children: [
+              plan.popular && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block bg-primary text-primary-foreground px-4 py-1 rounded-full text-xs font-semibold mb-3", children: "Most Popular" }),
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl sm:text-2xl font-bold mb-2", children: plan.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: plan.description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mb-8", children: plan.price === "Custom" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl sm:text-4xl font-bold", children: "Custom" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl sm:text-5xl font-bold", children: plan.price }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-lg", children: plan.interval })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3 mb-8 flex-1", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                className: "text-sm flex items-start gap-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary mt-0.5 flex-shrink-0", children: "\u2713" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature })
+                ]
+              },
+              index
+            )) }),
+            plan.ctaLink.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                className: "w-full h-11",
+                variant: plan.popular ? "default" : "outline",
+                size: "lg",
+                asChild: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: plan.ctaLink,
+                    onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }),
+                    children: plan.ctaText
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                className: "w-full h-11",
+                variant: plan.popular ? "default" : "outline",
+                size: "lg",
+                asChild: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: plan.ctaLink,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: plan.ctaText
+                  }
+                )
+              }
+            )
+          ]
+        },
+        plan.id
+      ))
+    ) })
+  ] }) });
+}
+function PricingPage(props) {
+  const {
+    productName,
+    heroHeading = "Simple, Transparent Pricing",
+    heroSubtitle = "Choose the plan that's right for you. No hidden fees, no surprises.",
+    seoTitle,
+    seoDescription,
+    seoKeywords,
+    seoImage,
+    seoUrl
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    seoTitle && /* @__PURE__ */ jsxRuntime.jsx(
+      PageHead,
+      {
+        title: seoTitle,
+        description: seoDescription || heroSubtitle,
+        productName,
+        keywords: seoKeywords,
+        image: seoImage,
+        url: seoUrl
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "bg-gradient-to-b from-background to-muted/20 py-12 sm:py-16 md:py-20 lg:py-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-3xl mx-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6", children: heroHeading }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg sm:text-xl text-muted-foreground leading-relaxed", children: heroSubtitle })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PricingSection, { ...props })
+  ] });
+}
+
+exports.PricingPage = PricingPage;
+exports.PricingSection = PricingSection;
+//# sourceMappingURL=pricing.js.map
+//# sourceMappingURL=pricing.js.map