Plan Finder Pricing Comparison Table

"use client";

import * as React from "react";
import { Pause, RotateCcw } from "lucide-react";
import { PlanFinderPricingTable } from "@/components/ui/plan-finder-pricing-table";
import type { PlanFinderFeature, PlanFinderPlan } from "@/components/ui/plan-finder-pricing-table";

export const PLAN_FINDER_PLANS: PlanFinderPlan[] = [
  { id: "free", name: "Free", price: 0, cta: "Start free" },
  { id: "pro", name: "Pro", price: 29, cta: "Choose Pro" },
  { id: "business", name: "Business", price: 59, cta: "Choose Business" },
];

export const PLAN_FINDER_FEATURES: PlanFinderFeature[] = [
  { id: "boards", label: "Shared boards", group: "Create together", availability: { free: true, pro: true, business: true } },
  { id: "history", label: "Version history", group: "Create together", availability: { free: "7 days", pro: "90 days", business: "Unlimited" } },
  { id: "automations", label: "Automations", group: "Workflow & control", availability: { free: false, pro: true, business: true } },
  { id: "sso", label: "SAML SSO", group: "Workflow & control", availability: { free: false, pro: false, business: true } },
  { id: "region", label: "Dedicated region", group: "Workflow & control", availability: { free: false, pro: false, business: false } },
];

export default function PlanFinderPricingTableDemo({ autoplay = true }: { autoplay?: boolean }) {
  const [needs, setNeeds] = React.useState([] as string[]);
  const [reduced, setReduced] = React.useState(true);
  const [paused, setPaused] = React.useState(false);
  const [finished, setFinished] = React.useState(false);
  const [run, setRun] = React.useState(0);
  const [choice, setChoice] = React.useState("");
  const playing = autoplay && !reduced && !paused && !finished;

  React.useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => setReduced(media.matches);
    sync();
    media.addEventListener("change", sync);
    return () => media.removeEventListener("change", sync);
  }, []);

  React.useEffect(() => {
    if (!playing) return;
    const steps: [number, () => void][] = [
      [1200, () => setNeeds(["boards"])],
      [2800, () => setNeeds(["boards", "automations"])],
      [4600, () => setNeeds(["boards", "automations", "sso"])],
      [6200, () => setFinished(true)],
    ];
    const timers = steps.map(([delay, action]) => window.setTimeout(action, delay));
    return () => timers.forEach((timer) => window.clearTimeout(timer));
  }, [playing, run]);

  return (
    <main data-plan-finder-demo data-autoplay={autoplay} data-playing={playing} className="flex min-h-svh w-full items-center justify-center bg-background px-4 py-3 text-foreground">
      <div className="w-full max-w-[692px]">
        <header className="mb-3 px-1">
          <div className="mb-1.5 flex items-center justify-between text-[9px] font-medium uppercase tracking-[0.18em] text-muted-foreground"><span>Plan finder</span><span className="rounded-full border border-border px-2 py-0.5 text-[8px] tracking-wider">Sample pricing</span></div>
          <h1 className="text-[25px] font-semibold leading-7 tracking-tight">A plan that checks your boxes.</h1>
          <p className="mt-1 text-xs text-muted-foreground">Choose your must-haves. We’ll find the fit.</p>
        </header>
        <div onPointerDownCapture={() => setPaused(true)} onKeyDownCapture={() => setPaused(true)}>
          <PlanFinderPricingTable plans={PLAN_FINDER_PLANS} features={PLAN_FINDER_FEATURES} needs={needs} onNeedsChange={(next) => { setPaused(true); setNeeds(next); setChoice(""); }} onSelect={(id) => { setPaused(true); setChoice(PLAN_FINDER_PLANS.find((plan) => plan.id === id)?.name ?? id); }} />
        </div>
        <footer className="mt-2 flex min-h-6 items-center justify-between gap-3 px-1 text-[10px] text-muted-foreground">
          <p role="status" aria-live="polite" data-demo-choice>{choice ? `${choice} selected · sample only` : "Sample plans · billed monthly"}</p>
          {autoplay && !reduced ? <button type="button" data-demo-playback onClick={() => {
            if (playing) setPaused(true);
            else { setNeeds([]); setChoice(""); setPaused(false); setFinished(false); setRun((value) => value + 1); }
          }} className="flex items-center gap-1.5 rounded px-1 py-1 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{playing ? <Pause aria-hidden="true" className="size-3" /> : <RotateCcw aria-hidden="true" className="size-3" />}{playing ? "Pause demo" : "Replay demo"}</button> : <span>Pick what matters to you</span>}
        </footer>
      </div>
    </main>
  );
}