Pricing

"use client";
import { AiPricing } from "@/components/premium/pricing/ai-pricing";
export function AiPricingPreview() {
  return <AiPricing />;
}

"use client";
import { PricingSharedBenefits } from "@/components/premium/pricing/pricing-shared-benefits";
export function PricingSharedBenefitsPreview() {
  return <PricingSharedBenefits />;
}

"use client";
import { TeamCalculator } from "@/components/premium/pricing/team-calculator";
export function TeamCalculatorPreview() {
  return <TeamCalculator />;
}

"use client";

import { PricingAuroraDuo } from "@/components/premium/pricing";

export function PricingAuroraDuoPreview() {
  return (
    <div className="w-full self-start">
      <PricingAuroraDuo />
    </div>
  );
}

"use client";

import { PricingAuroraFlow } from "@/components/premium/pricing";

export function PricingAuroraFlowPreview() {
  return <PricingAuroraFlow />;
}

"use client";

import { PricingVisualPlans } from "@/components/premium/pricing";

export function PricingVisualPlansPreview() {
  return (
    <div className="w-full self-start">
      <PricingVisualPlans />
    </div>
  );
}

"use client";

import { PricingCommandDeck } from "@/components/premium/pricing";

export function PricingCommandDeckPreview() {
  return <PricingCommandDeck />;
}

"use client";

import { PricingLedger } from "@/components/premium/pricing";

export function PricingLedgerPreview() {
  return (
    <div className="w-full">
      <PricingLedger />
    </div>
  );
}

"use client";

import type { UpgradePlan } from "@/components/premium/pricing";
import { UpgradePanel } from "@/components/premium/pricing";

const plans: UpgradePlan[] = [
  {
    id: "pro",
    name: "Pro",
    monthly: 11,
    yearly: 8,
    heading: "For individuals and indie hackers.",
    description: "Ship faster with every premium component.",
    features: [
      "Everything in Free",
      "All premium components",
      "Copy-paste source",
      "Private registry access",
      "New components monthly",
      "Standard support",
    ],
  },
  {
    id: "max",
    name: "Max",
    monthly: 24,
    yearly: 18,
    heading: "For growing product teams.",
    description: "Shared access and team workflows.",
    features: [
      "Everything in Pro",
      "Up to 10 team seats",
      "Figma sync",
      "Priority support",
      "Early access drops",
      "Expanded license",
    ],
  },
  {
    id: "ultra",
    name: "Ultra",
    monthly: 49,
    yearly: 39,
    heading: "For studios at scale.",
    description: "Full ownership and dedicated help.",
    features: [
      "Everything in Max",
      "Unlimited seats",
      "SSO & SCIM",
      "Source ownership",
      "Dedicated support",
      "Custom components",
    ],
  },
];

export function PricingUpgradePanelPreview() {
  return (
    <div className="w-full max-w-5xl px-4">
      <UpgradePanel productName="beUI" plans={plans} yearlyNote="-27%" />
    </div>
  );
}

"use client";

import type { UsageTier } from "@/components/premium/pricing";
import { UsageSliderPricing } from "@/components/premium/pricing";

const tiers: UsageTier[] = [
  { events: "3", monthly: 19 },
  { events: "5", monthly: 29 },
  { events: "10", monthly: 49 },
  { events: "25", monthly: 89 },
  { events: "50", monthly: 149 },
  { events: "100", monthly: 249 },
  { events: "250", monthly: 449 },
  { events: "500", monthly: 749 },
  { events: "1000", monthly: 1290 },
];

const features = [
  "All premium components & blocks",
  "Copy-paste source access",
  "Private registry access",
  "New components every month",
  "Figma kit & design tokens",
  "TypeScript & Tailwind v4 ready",
  "Priority email support",
];

export function PricingUsageSliderPreview() {
  return (
    <div className="w-full max-w-xl px-4">
      <UsageSliderPricing
        tiers={tiers}
        defaultTierIndex={4}
        unit="seats"
        features={features}
        cta={{
          label: "Start 3-day free trial",
          href: "#",
          note: "No credit card required. Cancel anytime.",
        }}
      />
    </div>
  );
}

"use client";

import type { PricingPlan } from "@/components/premium/pricing";
import { PricingSection } from "@/components/premium/pricing";

const plans: PricingPlan[] = [
  {
    id: "starter",
    name: "Starter",
    tagline: "Everything to ship your first agent.",
    price: { monthly: 0, annual: 0 },
    priceLabel: "Free",
    badge: "Starter",
    cta: { label: "Start free", href: "#" },
    features: [
      "1 project",
      "Community models",
      "5k requests / month",
      "Community support",
    ],
  },
  {
    id: "pro",
    name: "Pro",
    tagline: "For teams building production agents.",
    price: { monthly: 30, annual: 24 },
    priceSuffix: "/mo",
    originalPrice: "$39",
    badge: "Pro",
    discount: "Save 20%",
    featured: true,
    highlight: "Best value",
    cta: { label: "Get started", href: "#" },
    features: [
      "Unlimited projects",
      "Frontier models",
      "250k requests / month",
      "Priority support",
      "Usage analytics",
    ],
  },
  {
    id: "enterprise",
    name: "Enterprise",
    tagline: "Security, scale, and dedicated help.",
    price: { monthly: 0, annual: 0 },
    priceLabel: "Custom",
    badge: "Enterprise",
    cta: { label: "Contact sales", href: "#" },
    features: [
      "Everything in Pro",
      "SSO & SCIM",
      "Dedicated infra",
      "SLA & onboarding",
    ],
  },
];

export function PricingPreview() {
  return (
    <div className="w-full max-w-5xl">
      <PricingSection
        eyebrow="Pricing"
        title="Pricing that scales with your agents"
        description="Start free, then pay only for the throughput you ship. Switch billing anytime."
        plans={plans}
        footnote="Prices in USD. Annual billing is charged yearly."
      />
    </div>
  );
}