Documentation

"use client"

import { useState } from "react"
import { PaywallBanner } from "@/components/paywallBanner/paywall-banner"

export function LaunchAnnouncement() {
  const [open, setOpen] = useState(true)

  async function handleTrial() {
    const response = await fetch("/api/trials", { method: "POST" })
    if (!response.ok) throw new Error("Unable to start trial")
  }

  return (
    <PaywallBanner
      open={open}
      onOpenChange={setOpen}
      variant="upgrade"
      badge="New feature"
      title="Workflow automation just shipped"
      description="Upgrade to the Scale plan to unlock automated handoffs, SLAs, and export scheduling."
      storageKey="workflow-automation-banner"
      ctaLabel="Start trial"
      ctaPendingLabel="Launching..."
      onCtaClick={handleTrial}
      onCtaSuccess={() => setOpen(false)}
      onCtaError={(error) => console.error(error)}
      secondaryLabel="Read release notes"
      secondaryHref="/changelog#workflow-automation"
    />
  )
}

"use client"

import { FeatureTooltip } from "@/components/featureTooltip/feature-tooltip"
import { Lock } from "lucide-react"

export function InlineUpsell() {
  return (
    <FeatureTooltip
      title="Unlock scheduled exports"
      description="Upgrade to automate CSV delivery to your stakeholders."
      highlights={[
        "Send summaries to unlimited recipients",
        "Choose daily, weekly, or monthly cadence",
        "Attach filtered dashboards",
      ]}
      ctaLabel="Upgrade"
      ctaHref="/pricing"
    >
      <button className="inline-flex items-center gap-2 rounded-lg border border-primary/20 px-3 py-2 text-sm font-medium text-muted-foreground hover:border-primary/40 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40">
        <Lock className="size-4" aria-hidden="true" />
        Scheduled exports (Pro)
      </button>
    </FeatureTooltip>
  )
}

"use client"

import { Button } from "@/components/ui/button"
import { UpgradeModal } from "@/components/upgradeModal/upgrade-modal"

export function PlanComparison() {
  async function startGrowthCheckout() {
    const response = await fetch("/api/checkout/growth", { method: "POST" })
    if (!response.ok) throw new Error("Unable to start checkout")
  }

  return (
    <UpgradeModal
      trigger={
        <Button variant="outline">
          Compare plans
        </Button>
      }
      subtitle="Scale with confidence"
      finePrint="Prices listed in USD. Cancel anytime."
      supportEmail="sales@feature-lock.dev"
      onPlanSelected={(planId) => console.log("Selected plan:", planId)}
      plans={[
        {
          id: "growth",
          name: "Growth",
          price: "$79",
          period: "month",
          highlight: "Everything in Free, plus",
          features: [
            "Unlimited dashboards",
            "Team benchmarks",
            { label: "Priority support", footnote: "1 business-day response time" },
          ],
          ctaLabel: "Upgrade to Growth",
          onSelect: startGrowthCheckout,
        },
        {
          id: "scale",
          name: "Scale",
          recommended: true,
          badge: "Most popular",
          price: "$129",
          period: "month",
          features: [
            "AI churn forecasts",
            "Custom roles & permissions",
            "Dedicated onboarding manager",
          ],
          ctaLabel: "Talk to sales",
          ctaHref: "/contact",
        },
      ]}
    />
  )
}

"use client"

import { UsageProgress } from "@/components/usageProgress/usage-progress"

export function UsageOverview() {
  return (
    <UsageProgress
      title="Your workspace usage"
      subtitle="Quotas reset on the 1st of each month."
      tracks={[
        {
          label: "API requests",
          value: 92_300,
          limit: 100_000,
          status: "warning",
          badge: "92% used",
          trend: "up",
          description: "Scale plan adds 500k requests / month",
        },
        {
          label: "Seats",
          value: 28,
          limit: 30,
          status: "critical",
          badge: "2 remaining",
        },
      ]}
      summaryValue="Scale plan unlocks 500k requests & 100 seats"
      summaryMessage="Upgrade before May 1 to avoid throttling."
      ctaLabel="Upgrade usage"
      ctaPendingLabel="Launching checkout..."
      onCtaClick={async () => {
        const response = await fetch("/api/checkout/scale", { method: "POST" })
        if (!response.ok) throw new Error("Unable to start checkout")
      }}
      secondaryLabel="Contact sales"
      onSecondaryClick={() => window.open("mailto:sales@feature-lock.dev")}
      note="Need custom limits? Book a call with sales."
    />
  )
}