"use client";

import * as React from "react";

import { ColumnDef } from "@tanstack/react-table";

import { cn } from "@/lib/utils";

import { AuroraButton } from "@/components/ui/aurora-button";
import { ShimmerButton } from "@/components/ui/shimmer-button";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { CursorSpotlight } from "@/components/ui/cursor-spotlight";
import { DragToScrollGallery } from "@/components/ui/drag-scroll-gallery";
import { InteractiveBentoGrid } from "@/components/ui/interactive-bento-grid";
import { RippleButton } from "@/components/ui/ripple-button";
import { BorderBeamButton } from "@/components/ui/border-beam-button";
import { FloatingInput } from "@/components/ui/floating-input";
import { GlowInput } from "@/components/ui/glow-input";
import { OTPInput } from "@/components/ui/otp-input";
import { PinInput } from "@/components/ui/pin-input";
import { PasswordInput } from "@/components/ui/password-input";
import { MultiSelect } from "@/components/ui/multi-select";
import { SearchableSelect } from "@/components/ui/searchable-select";
import { ComboboxMulti } from "@/components/ui/combobox-multi";
import { DateRangePicker } from "@/components/ui/date-range-picker";
import { DateTimePicker } from "@/components/ui/date-time-picker";
import { FileUpload } from "@/components/ui/file-upload";
import { FileDropzone } from "@/components/ui/file-dropzone";
import { TagInput } from "@/components/ui/tag-input";
import { RichTextEditor } from "@/components/ui/rich-text-editor";
import { RichTextInput } from "@/components/ui/rich-text-input";
import { ColorPicker } from "@/components/ui/color-picker";
import { RatingStars } from "@/components/ui/rating-stars";
import { RatingInput } from "@/components/ui/rating-input";
import { InlineEdit } from "@/components/ui/inline-edit";
import { SortableList, type SortableListItem } from "@/components/ui/sortable-list";
import { SwipeCards } from "@/components/ui/swipe-cards";
import { CommandMenu } from "@/components/ui/command-menu";
import { Dock } from "@/components/ui/dock";
import { FloatingToolbar } from "@/components/ui/floating-toolbar";
import { Breadcrumbs } from "@/components/ui/breadcrumbs";
import { Pagination } from "@/components/ui/pagination";
import { Stepper } from "@/components/ui/stepper";
import { GradientCard } from "@/components/ui/gradient-card";
import { GlassCard } from "@/components/ui/glass-card";
import { SpotlightCard } from "@/components/ui/spotlight-card";
import { SpotlightHoverCard } from "@/components/ui/spotlight-hover-card";
import { MeteorsBackground } from "@/components/ui/meteors-background";
import { NoiseTextureBackground } from "@/components/ui/noise-texture-background";
import { DotPatternBackground } from "@/components/ui/dot-pattern-background";
import { HoverBorderGradientCard } from "@/components/ui/hover-border-gradient-card";
import { AnimatedGradientBorderCard } from "@/components/ui/animated-gradient-border-card";
import { GlowCardStack } from "@/components/ui/glow-card-stack";
import { AmbientGlowCard } from "@/components/ui/ambient-glow-card";
import { TiltCard } from "@/components/ui/tilt-card";
import { ExpandableCard } from "@/components/ui/expandable-card";
import { StackCards } from "@/components/ui/stack-cards";
import { Button } from "@/components/ui/button";
import { TestimonialCard } from "@/components/ui/testimonial-card";
import { TypewriterText } from "@/components/ui/typewriter-text";
import { MorphText } from "@/components/ui/morph-text";
import { NumberCounter } from "@/components/ui/number-counter";
import { AnimatedCounter } from "@/components/ui/animated-counter";
import { CircularProgress } from "@/components/ui/circular-progress";
import { Timeline } from "@/components/ui/timeline";
import { Accordion } from "@/components/ui/accordion";
import { MotionTabs } from "@/components/ui/motion-tabs";
import { SearchInput } from "@/components/ui/search-input";
import { BentoCard } from "@/components/ui/bento-card";
import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
import { PricingCard } from "@/components/ui/pricing-card";
import { GradientText } from "@/components/ui/gradient-text";
import { ScrollRevealText } from "@/components/ui/scroll-reveal-text";
import { ParallaxSection } from "@/components/ui/parallax-section";
import { ScrollProgressBar } from "@/components/ui/scroll-progress-bar";
import { StickyRevealCards } from "@/components/ui/sticky-reveal-cards";
import { TextHighlightOnScroll } from "@/components/ui/text-highlight-on-scroll";
import { ScrambleText } from "@/components/ui/scramble-text";
import { TypingDeleteText } from "@/components/ui/typing-delete-text";
import { WordRotateText } from "@/components/ui/word-rotate-text";
import { FeatureCard } from "@/components/ui/feature-card";
import { FeatureChecklist } from "@/components/ui/feature-checklist";
import { StatsCard } from "@/components/ui/stats-card";
import { StatCard } from "@/components/ui/stat-card";
import { DataTableSimple } from "@/components/ui/data-table-simple";
import { MetricBar } from "@/components/ui/metric-bar";
import { KeyValueList } from "@/components/ui/key-value-list";
import { ChangelogEntry } from "@/components/ui/changelog-entry";
import { DataTable } from "@/components/ui/data-table";
import { ComparisonTable } from "@/components/ui/comparison-table";
import { PricingToggle } from "@/components/ui/pricing-toggle";
import { SparklineChart } from "@/components/ui/sparkline-chart";
import { KanbanBoard } from "@/components/ui/kanban-board";
import { TreeView } from "@/components/ui/tree-view";
import { VirtualList } from "@/components/ui/virtual-list";
import { CalendarGrid } from "@/components/ui/calendar-grid";
import { StatusAvatar } from "@/components/ui/avatar-status";
import { Badge } from "@/components/ui/badge";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Switch } from "@/components/ui/switch";
import { Slider } from "@/components/ui/slider";
import { Progress } from "@/components/ui/progress";
import { Skeleton } from "@/components/ui/skeleton";
import { HeroGrid } from "@/components/blocks/hero-grid";
import { HeroFloating } from "@/components/blocks/hero-floating";
import { HeroSplit } from "@/components/blocks/hero-split";
import { HeroMesh } from "@/components/blocks/hero-mesh";
import { FeaturesBentoGrid } from "@/components/blocks/features-bento-grid";
import { FeaturesCardGrid } from "@/components/blocks/features-card-grid";
import { FeaturesTabs } from "@/components/blocks/features-tabs";
import { FeaturesComparisonTable } from "@/components/blocks/features-comparison-table";
import { LogoCarousel } from "@/components/blocks/logo-carousel";
import { TestimonialsCarousel } from "@/components/blocks/testimonials-carousel";
import { StatsCounterSection } from "@/components/blocks/stats-counter-section";
import { TrustBadgesRow } from "@/components/blocks/trust-badges-row";
import { CtaEmailCapture } from "@/components/blocks/cta-email-capture";
import { CtaGradientBanner } from "@/components/blocks/cta-gradient-banner";
import { NewsletterSignup } from "@/components/blocks/newsletter-signup";
import { ContactForm } from "@/components/blocks/contact-form";
import { SaasLandingPageLayout } from "@/components/layouts/saas-landing-page";
import { WaitlistPageLayout } from "@/components/layouts/waitlist-page";
import { LoginPageLayout } from "@/components/layouts/login-page";
import { SignupPageLayout } from "@/components/layouts/signup-page";
import { DashboardShellLayout } from "@/components/layouts/dashboard-shell";
import { SettingsPageLayout } from "@/components/layouts/settings-page";
import { Marquee } from "@/components/ui/marquee";
import { FlipCard } from "@/components/ui/flip-card";
import { Confetti, ConfettiButton } from "@/components/ui/confetti";
import { MorphingBlob, MorphingBlobBackground } from "@/components/ui/morphing-blob";
import { ParticleField } from "@/components/ui/particle-field";
import { AnimatedMarqueeStrip } from "@/components/ui/animated-marquee-strip";
import { AnimatedBeamConnectors } from "@/components/ui/animated-beam-connectors";
import { PulseLoader } from "@/components/ui/pulse-loader";
import { OrbitSpinner } from "@/components/ui/orbit-spinner";
import { WaveLoader } from "@/components/ui/wave-loader";
import { SkeletonShimmer } from "@/components/ui/skeleton-shimmer";
import { SkeletonCard } from "@/components/ui/skeleton-card";
import { NotificationToast } from "@/components/ui/notification-toast";
import { ProgressSteps } from "@/components/ui/progress-steps";
import { ProgressBar } from "@/components/ui/progress-bar";
import { ShimmerEffect } from "@/components/ui/shimmer-effect";
import { PulseRing } from "@/components/ui/pulse-ring";
import { ConfettiBurst } from "@/components/ui/confetti-burst";
import { CopyButton } from "@/components/ui/copy-button";
import { ShareMenu } from "@/components/ui/share-menu";
import { ThemeToggle } from "@/components/ui/theme-toggle";
import {
  Zap,
  Palette,
  Shield,
  Sparkles,
  Layers,
  Orbit,
  Command,
  LayoutGrid,
  FileText,
  Home,
  Mail,
  Search,
  Settings,
  User,
} from "lucide-react";

function SwitchDemo() {
  const [enabled, setEnabled] = React.useState(false);

  return (
    <div className="flex items-center gap-3">
      <Switch checked={enabled} onCheckedChange={setEnabled} />
      <span className="text-sm text-muted-foreground">
        {enabled ? "On" : "Off"}
      </span>
    </div>
  );
}

function ConfettiBurstDemo() {
  const [active, setActive] = React.useState(false);

  const triggerBurst = () => {
    setActive(false);
    setTimeout(() => setActive(true), 10);
  };

  return (
    <div className="flex flex-col items-center gap-4">
      <ConfettiBurst active={active} pieces={20} />
      <Button size="sm" onClick={triggerBurst}>
        Trigger Burst
      </Button>
    </div>
  );
}

function SkeletonCardDemo() {
  return (
    <div className="w-full max-w-md space-y-4">
      <SkeletonCard rows={4} />
      <SkeletonCard rows={2} showAvatar={false} />
    </div>
  );
}

function NotificationToastDemo() {
  const [visible, setVisible] = React.useState(true);

  return (
    <div className="w-full max-w-sm space-y-4">
      <NotificationToast
        title="Sync complete"
        description="Your dashboard is ready with the latest data."
        variant="success"
        actionLabel="View"
        onAction={() => setVisible(false)}
        open={visible}
        onDismiss={() => setVisible(false)}
        duration={2500}
      />
      <Button size="sm" variant="outline" onClick={() => setVisible(true)}>
        Show toast
      </Button>
    </div>
  );
}

function ProgressStepsDemo() {
  const [layout, setLayout] = React.useState<"horizontal" | "vertical">(
    "horizontal"
  );

  return (
    <div className="w-full max-w-xl space-y-4">
      <div className="flex flex-wrap gap-2">
        <Button
          size="sm"
          variant={layout === "horizontal" ? "default" : "outline"}
          onClick={() => setLayout("horizontal")}
        >
          Horizontal
        </Button>
        <Button
          size="sm"
          variant={layout === "vertical" ? "default" : "outline"}
          onClick={() => setLayout("vertical")}
        >
          Vertical
        </Button>
      </div>
      <ProgressSteps
        layout={layout}
        currentStep={2}
        steps={[
          { title: "Account", description: "Profile details" },
          { title: "Workspace", description: "Team preferences" },
          { title: "Launch", description: "Invite collaborators" },
        ]}
      />
    </div>
  );
}

function ScrollRevealTextDemo() {
  const scrollContainerRef = React.useRef<HTMLDivElement>(null);

  return (
    <div
      ref={scrollContainerRef}
      className="h-[400px] w-full max-w-xl overflow-y-auto rounded-lg border border-border/50 bg-background/5"
    >
      {/* Spacer above - scroll past this to reveal text */}
      <div className="flex h-[250px] items-end justify-center pb-8">
        <p className="text-sm text-muted-foreground/60 animate-pulse">
          Scroll down to reveal
        </p>
      </div>

      {/* The actual scroll reveal text - centered */}
      <div className="px-6 text-center">
        <ScrollRevealText
          text="Every word arrives with its own moment. Scroll to reveal the story."
          className="text-2xl font-semibold"
          container={scrollContainerRef}
        />
      </div>

      {/* Spacer below - needed to complete the scroll */}
      <div className="h-[250px]" />
    </div>
  );
}

function TextHighlightOnScrollDemo() {
  return (
    <div className="w-full max-w-xl space-y-4">
      <TextHighlightOnScroll
        text="Scroll-driven emphasis can guide the reader toward the most important ideas without breaking the flow."
        className="text-xl font-medium"
      />
      <p className="text-sm text-muted-foreground">
        Scroll the page to see each word highlight in sequence.
      </p>
    </div>
  );
}

function MultiSelectDemo() {
  const [selected, setSelected] = React.useState<string[]>(["design", "motion"]);

  return (
    <div className="w-full max-w-sm">
      <MultiSelect
        label="Focus areas"
        placeholder="Choose focus areas"
        value={selected}
        onChange={setSelected}
        options={[
          {
            label: "Design systems",
            value: "design",
            description: "Tokens, components, and patterns",
          },
          {
            label: "Motion",
            value: "motion",
            description: "Delightful interactions",
          },
          {
            label: "Accessibility",
            value: "a11y",
            description: "Inclusive defaults",
          },
          {
            label: "Performance",
            value: "perf",
            description: "Speed and polish",
          },
        ]}
      />
    </div>
  );
}

function SearchableSelectDemo() {
  const [value, setValue] = React.useState<string[]>(["analytics", "growth"]);

  return (
    <div className="w-full max-w-sm">
      <SearchableSelect
        multiple
        options={[
          {
            label: "Analytics",
            value: "analytics",
            description: "Dashboards and insights",
          },
          {
            label: "Growth",
            value: "growth",
            description: "Lifecycle and acquisition",
          },
          {
            label: "Operations",
            value: "ops",
            description: "Process and tooling",
          },
          {
            label: "Customer",
            value: "customer",
            description: "Support and retention",
          },
        ]}
        value={value}
        onChange={(nextValue) => setValue(nextValue as string[])}
      />
    </div>
  );
}

function ComboboxMultiDemo() {
  const [value, setValue] = React.useState<string[]>(["react", "typescript"]);

  return (
    <div className="w-full max-w-sm">
      <ComboboxMulti
        options={[
          { label: "React", value: "react", description: "UI library" },
          { label: "TypeScript", value: "typescript", description: "Type safety" },
          { label: "Tailwind", value: "tailwind", description: "Utility CSS" },
          { label: "Next.js", value: "nextjs", description: "React framework" },
          { label: "Vite", value: "vite", description: "Build tool" },
        ]}
        value={value}
        onChange={setValue}
        placeholder="Select technologies..."
      />
    </div>
  );
}

function DateRangePickerDemo() {
  const [range, setRange] = React.useState<{
    start: Date | null;
    end: Date | null;
  }>({ start: null, end: null });

  return (
    <div className="w-full max-w-sm">
      <DateRangePicker value={range} onChange={setRange} />
    </div>
  );
}

function DateTimePickerDemo() {
  const [dateTime, setDateTime] = React.useState<Date | null>(null);

  return (
    <div className="w-full max-w-sm">
      <DateTimePicker value={dateTime} onChange={setDateTime} />
    </div>
  );
}

function FileUploadDemo() {
  return (
    <div className="w-full">
      <FileUpload accept="image/*" multiple />
    </div>
  );
}

function FileDropzoneDemo() {
  return (
    <div className="w-full">
      <FileDropzone accept="image/*,.pdf" multiple />
    </div>
  );
}

function TagInputDemo() {
  const [tags, setTags] = React.useState(["Design", "UX"]);

  return (
    <TagInput
      value={tags}
      onChange={setTags}
      suggestions={[
        "Design",
        "UX",
        "UI",
        "Motion",
        "Research",
        "Prototype",
        "Accessibility",
        "Frontend",
      ]}
    />
  );
}

function RichTextEditorDemo() {
  const [content, setContent] = React.useState(
    "<p>Capture your ideas and format them with the toolbar.</p>"
  );

  return <RichTextEditor value={content} onChange={setContent} />;
}

function RichTextInputDemo() {
  const [content, setContent] = React.useState(
    "<b>Bold</b> and <i>italic</i> text with <a href=\"#\">links</a>."
  );

  return <RichTextInput value={content} onChange={setContent} />;
}

function ColorPickerDemo() {
  const [color, setColor] = React.useState("hsl(var(--primary))");

  return <ColorPicker value={color} onChange={setColor} />;
}

function RatingStarsDemo() {
  const [rating, setRating] = React.useState(4);

  return (
    <div className="flex flex-col gap-2">
      <RatingStars value={rating} onChange={setRating} />
      <p className="text-xs text-muted-foreground">Selected rating: {rating}</p>
    </div>
  );
}

function RatingInputDemo() {
  const [rating, setRating] = React.useState(3.5);

  return (
    <div className="flex flex-col gap-3">
      <RatingInput value={rating} onChange={setRating} allowHalf />
      <RatingInput
        value={rating}
        onChange={setRating}
        icon="heart"
        max={7}
      />
      <p className="text-xs text-muted-foreground">Selected rating: {rating}</p>
    </div>
  );
}

function InlineEditDemo() {
  const [label, setLabel] = React.useState("Click to rename");

  return (
    <div className="flex flex-col gap-2">
      <InlineEdit value={label} onSave={setLabel} />
      <p className="text-xs text-muted-foreground">Saved value: {label}</p>
    </div>
  );
}

function SortableListDemo() {
  const [items, setItems] = React.useState<SortableListItem[]>([
    {
      id: "insights",
      title: "Share insights",
      description: "Capture the key learnings",
      meta: "Today",
    },
    {
      id: "draft",
      title: "Draft recap",
      description: "Summarize next steps",
      meta: "Tomorrow",
    },
    {
      id: "review",
      title: "Review with team",
      description: "Align on priorities",
      meta: "This week",
    },
  ]);

  return (
    <SortableList items={items} onReorder={(nextItems) => setItems(nextItems)} />
  );
}

function SwipeCardsDemo() {
  const [deckKey, setDeckKey] = React.useState(0);
  const cards = [
    {
      id: "focus",
      eyebrow: "Focus",
      title: "Explore the new sprint",
      description: "Swipe to save the items that matter most.",
      footer: "Updated 2 hours ago",
    },
    {
      id: "momentum",
      eyebrow: "Momentum",
      title: "Plan the next release",
      description: "Keep the highest impact stories on top.",
      footer: "Updated yesterday",
    },
    {
      id: "impact",
      eyebrow: "Impact",
      title: "Highlight the wins",
      description: "Capture the moments worth celebrating.",
      footer: "Updated last week",
    },
  ];

  return (
    <div className="space-y-4">
      <SwipeCards key={deckKey} cards={cards} />
      <button
        type="button"
        className="rounded-full border border-border bg-card px-3 py-1 text-xs font-semibold text-foreground transition hover:bg-muted"
        onClick={() => setDeckKey((prev) => prev + 1)}
      >
        Reset deck
      </button>
    </div>
  );
}

function CommandMenuDemo() {
  return (
    <CommandMenu
      triggerLabel="Open command menu"
      items={[
        {
          id: "home",
          label: "Go to dashboard",
          description: "Jump to the overview screen",
          shortcut: ["G", "D"],
          icon: <LayoutGrid className="h-4 w-4" />,
          group: "Navigation",
        },
        {
          id: "files",
          label: "Open files",
          description: "Browse recent documents",
          shortcut: ["O"],
          icon: <FileText className="h-4 w-4" />,
          group: "Navigation",
        },
        {
          id: "inbox",
          label: "Check inbox",
          description: "View new messages",
          shortcut: ["I"],
          icon: <Mail className="h-4 w-4" />,
          group: "Actions",
        },
        {
          id: "profile",
          label: "Account settings",
          description: "Manage your profile",
          shortcut: ["S"],
          icon: <User className="h-4 w-4" />,
          group: "Actions",
        },
        {
          id: "shortcuts",
          label: "Keyboard shortcuts",
          description: "View all commands",
          shortcut: ["?"],
          icon: <Command className="h-4 w-4" />,
          group: "Help",
        },
        {
          id: "preferences",
          label: "Preferences",
          description: "Update workspace settings",
          shortcut: [","],
          icon: <Settings className="h-4 w-4" />,
          group: "Help",
        },
      ]}
    />
  );
}

function DockDemo() {
  return (
    <Dock
      items={[
        {
          id: "home",
          label: "Home",
          icon: <Home className="h-5 w-5" />,
        },
        {
          id: "search",
          label: "Search",
          icon: <Search className="h-5 w-5" />,
        },
        {
          id: "mail",
          label: "Mail",
          icon: <Mail className="h-5 w-5" />,
        },
        {
          id: "profile",
          label: "Profile",
          icon: <User className="h-5 w-5" />,
        },
        {
          id: "settings",
          label: "Settings",
          icon: <Settings className="h-5 w-5" />,
        },
      ]}
    />
  );
}

function BreadcrumbsDemo() {
  return (
    <Breadcrumbs
      maxItems={4}
      items={[
        { label: "Home", href: "#" },
        { label: "Library", href: "#" },
        { label: "Components", href: "#" },
        { label: "Navigation", href: "#" },
        { label: "Breadcrumbs" },
      ]}
    />
  );
}

function PaginationDemo() {
  const [page, setPage] = React.useState(3);

  return (
    <Pagination currentPage={page} totalPages={12} onPageChange={setPage} />
  );
}

function StepperDemo() {
  return (
    <Stepper
      currentStep={2}
      steps={[
        { label: "Discover", description: "Gather requirements" },
        { label: "Design", description: "Craft the experience" },
        { label: "Build", description: "Ship the UI" },
        { label: "Launch", description: "Go live" },
      ]}
    />
  );
}

type DataTableRow = {
  workspace: string;
  plan: string;
  status: "Active" | "Paused" | "Trial";
  seats: number;
  updated: string;
};

const dataTableData: DataTableRow[] = [
  {
    workspace: "Aurora Labs",
    plan: "Enterprise",
    status: "Active",
    seats: 42,
    updated: "2 hours ago",
  },
  {
    workspace: "Northwind",
    plan: "Team",
    status: "Active",
    seats: 18,
    updated: "Yesterday",
  },
  {
    workspace: "Halo Studio",
    plan: "Starter",
    status: "Trial",
    seats: 6,
    updated: "3 days ago",
  },
  {
    workspace: "Nova Supply",
    plan: "Team",
    status: "Paused",
    seats: 12,
    updated: "Last week",
  },
  {
    workspace: "Helix Digital",
    plan: "Enterprise",
    status: "Active",
    seats: 64,
    updated: "1 hour ago",
  },
  {
    workspace: "Signal Ops",
    plan: "Team",
    status: "Active",
    seats: 24,
    updated: "2 days ago",
  },
  {
    workspace: "Crescent",
    plan: "Starter",
    status: "Trial",
    seats: 8,
    updated: "Today",
  },
];

const dataTableColumns: ColumnDef<DataTableRow>[] = [
  {
    accessorKey: "workspace",
    header: "Workspace",
    cell: ({ row }) => (
      <div className="font-medium text-foreground">
        {row.getValue("workspace")}
      </div>
    ),
  },
  {
    accessorKey: "plan",
    header: "Plan",
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => {
      const status = row.getValue("status") as DataTableRow["status"];
      const isActive = status === "Active";

      return (
        <span
          className={cn(
            "inline-flex rounded-full border px-2 py-0.5 text-xs font-semibold",
            isActive
              ? "border-primary/30 bg-muted text-primary"
              : "border-border bg-muted text-muted-foreground"
          )}
        >
          {status}
        </span>
      );
    },
  },
  {
    accessorKey: "seats",
    header: "Seats",
  },
  {
    accessorKey: "updated",
    header: "Last update",
  },
];

const comparisonPlans = [
  {
    id: "starter",
    name: "Starter",
    price: "$12",
    description: "For solo builders",
  },
  {
    id: "team",
    name: "Team",
    price: "$29",
    description: "Collaboration ready",
    highlight: true,
  },
  {
    id: "enterprise",
    name: "Enterprise",
    price: "Custom",
    description: "Scale with support",
  },
];

const comparisonRows = [
  { label: "Projects", values: ["3", "Unlimited", "Unlimited"] },
  { label: "Realtime analytics", values: [false, true, true] },
  { label: "Seats", values: ["1", "10", "Unlimited"] },
  { label: "Automations", values: ["Basic", "Advanced", "Custom"] },
  { label: "SLA", values: [false, false, true] },
];

const keyValueItems = [
  { label: "Workspace", value: "Nova Studio" },
  { label: "Plan", value: "Enterprise" },
  { label: "Region", value: "Europe" },
  { label: "Owner", value: "Sasha Lee" },
];

const changelogDetails = [
  "Added exports for CSV and PDF.",
  "Fixed activity feed ordering on slower networks.",
  "Changed access rules for shared dashboards.",
];

const featureChecklistItems = [
  {
    title: "Unified reporting",
    description: "All metrics in one consistent view.",
  },
  {
    title: "Custom dashboards",
    description: "Tailor insights for each team.",
  },
  {
    title: "Granular permissions",
    description: "Keep data visible to the right people.",
  },
  {
    title: "Export ready",
    description: "Send updates to CSV or PDF in seconds.",
  },
];

const kanbanColumns = [
  {
    id: "backlog",
    title: "Backlog",
    cards: [
      {
        id: "card-1",
        title: "Audit analytics",
        description: "Validate tracking coverage",
        tag: "Insights",
      },
      {
        id: "card-2",
        title: "Refresh onboarding",
        description: "Align steps with new flow",
        tag: "Product",
      },
    ],
  },
  {
    id: "in-progress",
    title: "In progress",
    cards: [
      {
        id: "card-3",
        title: "Design usage report",
        description: "Build flexible data views",
        tag: "Design",
      },
    ],
  },
  {
    id: "review",
    title: "Review",
    cards: [
      {
        id: "card-4",
        title: "QA billing checks",
        description: "Verify invoices",
        tag: "Ops",
      },
    ],
  },
  {
    id: "done",
    title: "Done",
    cards: [
      {
        id: "card-5",
        title: "Launch summary",
        description: "Share outcome with team",
        tag: "Comms",
      },
    ],
  },
];

const treeNodes = [
  {
    id: "workspace",
    label: "Workspace",
    children: [
      {
        id: "workspace-design",
        label: "Design",
        children: [
          { id: "workspace-design-brand", label: "Brand" },
          { id: "workspace-design-systems", label: "Systems" },
        ],
      },
      {
        id: "workspace-product",
        label: "Product",
        children: [
          { id: "workspace-product-roadmap", label: "Roadmap" },
          { id: "workspace-product-research", label: "Research" },
        ],
      },
    ],
  },
  {
    id: "shared",
    label: "Shared",
    children: [
      { id: "shared-templates", label: "Templates" },
      { id: "shared-guides", label: "Guides" },
    ],
  },
];

const virtualListItems = Array.from({ length: 120 }, (_, index) => ({
  id: `activity-${index + 1}`,
  title: `Activity ${index + 1}`,
  detail:
    index % 3 === 0
      ? "Updated seconds ago"
      : index % 3 === 1
        ? "Last touched today"
        : "Needs review",
}));

const formatCalendarDate = (date: Date) => {
  const year = date.getFullYear();
  const month = `${date.getMonth() + 1}`.padStart(2, "0");
  const day = `${date.getDate()}`.padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const calendarBaseDate = new Date();
const calendarMonth = new Date(
  calendarBaseDate.getFullYear(),
  calendarBaseDate.getMonth(),
  1
);

const calendarEvents = [
  {
    date: formatCalendarDate(
      new Date(calendarBaseDate.getFullYear(), calendarBaseDate.getMonth(), 3)
    ),
    title: "Sprint planning",
    tone: "primary" as const,
  },
  {
    date: formatCalendarDate(
      new Date(calendarBaseDate.getFullYear(), calendarBaseDate.getMonth(), 7)
    ),
    title: "Design review",
    tone: "default" as const,
  },
  {
    date: formatCalendarDate(
      new Date(calendarBaseDate.getFullYear(), calendarBaseDate.getMonth(), 12)
    ),
    title: "Launch check",
    tone: "muted" as const,
  },
  {
    date: formatCalendarDate(
      new Date(calendarBaseDate.getFullYear(), calendarBaseDate.getMonth(), 18)
    ),
    title: "Customer interviews",
    tone: "default" as const,
  },
  {
    date: formatCalendarDate(
      new Date(calendarBaseDate.getFullYear(), calendarBaseDate.getMonth(), 24)
    ),
    title: "Metrics recap",
    tone: "primary" as const,
  },
];

function DataTableDemo() {
  return (
    <div className="w-full max-w-3xl">
      <DataTable columns={dataTableColumns} data={dataTableData} />
    </div>
  );
}

function SparklineChartDemo() {
  const trendUp = [12, 16, 14, 18, 21, 25, 28, 30, 34];
  const trendDown = [32, 30, 28, 24, 22, 20, 18, 16, 14];

  return (
    <div className="flex flex-wrap items-center gap-6">
      <div className="rounded-xl border border-border bg-card px-4 py-3">
        <p className="text-xs text-muted-foreground">Active users</p>
        <div className="flex items-center gap-3">
          <p className="text-lg font-semibold text-foreground">34.2k</p>
          <SparklineChart data={trendUp} />
        </div>
      </div>
      <div className="rounded-xl border border-border bg-card px-4 py-3">
        <p className="text-xs text-muted-foreground">Churn rate</p>
        <div className="flex items-center gap-3">
          <p className="text-lg font-semibold text-foreground">2.1%</p>
          <SparklineChart data={trendDown} className="text-muted-foreground" />
        </div>
      </div>
    </div>
  );
}

function KanbanBoardDemo() {
  return <KanbanBoard initialColumns={kanbanColumns} />;
}

function TreeViewDemo() {
  return (
    <div className="w-full max-w-sm rounded-xl border border-border bg-card p-3">
      <TreeView nodes={treeNodes} defaultExpanded={["workspace"]} />
    </div>
  );
}

function VirtualListDemo() {
  return (
    <div className="w-full max-w-md">
      <VirtualList
        items={virtualListItems}
        height={320}
        itemHeight={56}
        getItemKey={(item) => item.id}
        renderItem={(item, index) => (
          <div className="flex h-full items-center justify-between gap-4">
            <div>
              <p className="text-sm font-semibold text-foreground">{item.title}</p>
              <p className="text-xs text-muted-foreground">{item.detail}</p>
            </div>
            <span className="text-xs text-muted-foreground">#{index + 1}</span>
          </div>
        )}
      />
    </div>
  );
}

function CalendarGridDemo() {
  return (
    <div className="w-full max-w-4xl">
      <CalendarGrid initialMonth={calendarMonth} events={calendarEvents} />
    </div>
  );
}

function AnimatedMarqueeStripDemo() {
  return (
    <div className="w-full max-w-xl">
      <AnimatedMarqueeStrip
        items={[
          {
            title: "Realtime insights",
            description: "Track core metrics as they update.",
            eyebrow: "Analytics",
            icon: <Sparkles className="h-4 w-4" />,
          },
          {
            title: "Smart alerts",
            description: "Stay ahead with instant notifications.",
            eyebrow: "Alerts",
            icon: <Shield className="h-4 w-4" />,
          },
          {
            title: "Workflow automation",
            description: "Connect tools without the overhead.",
            eyebrow: "Ops",
            icon: <Zap className="h-4 w-4" />,
          },
          {
            title: "Design review",
            description: "Collaborate on the final polish.",
            eyebrow: "Studio",
            icon: <Palette className="h-4 w-4" />,
          },
        ]}
        className="bg-card"
        cardClassName="bg-card"
      />
    </div>
  );
}

function AnimatedBeamConnectorsDemo() {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const firstRef = React.useRef<HTMLDivElement>(null);
  const middleRef = React.useRef<HTMLDivElement>(null);
  const lastRef = React.useRef<HTMLDivElement>(null);

  return (
    <div
      ref={containerRef}
      className="relative flex h-40 w-full max-w-md items-center justify-between rounded-xl border border-border bg-card p-6"
    >
      <div
        ref={firstRef}
        className="flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-sm font-semibold text-foreground"
      >
        A
      </div>
      <div
        ref={middleRef}
        className="flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-sm font-semibold text-foreground"
      >
        B
      </div>
      <div
        ref={lastRef}
        className="flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-sm font-semibold text-foreground"
      >
        C
      </div>
      <AnimatedBeamConnectors
        containerRef={containerRef}
        connections={[
          { fromRef: firstRef, toRef: middleRef, curvature: 0.2 },
          { fromRef: middleRef, toRef: lastRef, curvature: -0.2 },
        ]}
      />
    </div>
  );
}

function FloatingToolbarDemo() {
  const [active, setActive] = React.useState("overview");

  return (
    <FloatingToolbar
      items={[
        {
          id: "overview",
          label: "Overview",
          icon: <LayoutGrid className="h-4 w-4" />,
        },
        {
          id: "search",
          label: "Search",
          icon: <Search className="h-4 w-4" />,
        },
        {
          id: "files",
          label: "Files",
          icon: <FileText className="h-4 w-4" />,
        },
        {
          id: "settings",
          label: "Settings",
          icon: <Settings className="h-4 w-4" />,
        },
      ]}
      activeId={active}
      onActiveChange={setActive}
    />
  );
}

function BentoGridDemo() {
  return (
    <BentoGrid className="w-full max-w-4xl">
      <BentoGridItem
        size="2x1"
        eyebrow="Overview"
        title="Realtime insights"
        description="Track product usage, funnel health, and team velocity in one view."
        icon={<Sparkles className="h-5 w-5" />}
      />
      <BentoGridItem
        eyebrow="Automation"
        title="Smart workflows"
        description="Trigger actions and approvals without manual follow ups."
        icon={<Command className="h-5 w-5" />}
      />
      <BentoGridItem
        size="1x1"
        eyebrow="Security"
        title="Guardrails"
        description="Maintain compliance with continuous checks."
        icon={<Shield className="h-5 w-5" />}
      />
      <BentoGridItem
        size="2x1"
        eyebrow="Ops"
        title="Pipeline clarity"
        description="Visualize handoffs and momentum across every stage."
        icon={<Layers className="h-5 w-5" />}
      />
      <BentoGridItem
        eyebrow="Momentum"
        title="Orbit overview"
        description="Stay aligned with the pulse of every project."
        icon={<Orbit className="h-5 w-5" />}
      />
    </BentoGrid>
  );
}

function AmbientGlowCardDemo() {
  return (
    <div className="w-full max-w-md">
      <AmbientGlowCard
        eyebrow="Highlight"
        badge="New"
        title="Ambient glow"
        description="A premium card with an animated aura for feature highlights and launches."
        icon={<Sparkles className="h-5 w-5" />}
      />
    </div>
  );
}

export function ComponentDemo({ slug }: { slug: string }) {
  switch (slug) {
    case "aurora-button":
      return (
        <div className="flex flex-wrap items-center gap-4">
          <AuroraButton size="sm">Small</AuroraButton>
          <AuroraButton size="md">Get Started</AuroraButton>
          <AuroraButton size="lg">Explore Now</AuroraButton>
        </div>
      );
    case "shimmer-button":
      return (
        <div className="flex flex-wrap items-center gap-4">
          <ShimmerButton size="sm">Small</ShimmerButton>
          <ShimmerButton size="md">Shimmer Effect</ShimmerButton>
          <ShimmerButton size="lg">Large Button</ShimmerButton>
        </div>
      );
    case "magnetic-button":
      return (
        <div className="flex flex-wrap items-center gap-4">
          <MagneticButton>Hover Me</MagneticButton>
        </div>
      );
    case "cursor-spotlight":
      return (
        <div className="w-full max-w-2xl">
          <CursorSpotlight
            eyebrow="Spotlight"
            title="Cursor guided focus"
            description="Move your cursor to reveal the highlight and bring focus to key details."
            items={["Real time tracking", "Soft reveal mask", "Premium presentation", "Smooth motion"]}
          />
        </div>
      );
    case "drag-scroll-gallery":
      return (
        <div className="w-full max-w-3xl">
          <DragToScrollGallery />
        </div>
      );
    case "interactive-bento-grid":
      return (
        <div className="w-full">
          <InteractiveBentoGrid />
        </div>
      );
    case "ripple-button":
      return (
        <div className="flex flex-wrap items-center gap-4">
          <RippleButton size="sm">Tap</RippleButton>
          <RippleButton size="md">Ripple Effect</RippleButton>
          <RippleButton size="lg" variant="outline">
            Outline
          </RippleButton>
        </div>
      );
    case "border-beam-button":
      return (
        <div className="flex flex-wrap items-center gap-4">
          <BorderBeamButton>Primary Action</BorderBeamButton>
          <BorderBeamButton variant="ghost">Ghost</BorderBeamButton>
        </div>
      );
    case "floating-input":
      return (
        <div className="flex flex-col gap-4 w-full max-w-sm">
          <FloatingInput label="Email address" type="email" />
          <FloatingInput label="Full name" type="text" />
        </div>
      );
    case "glow-input":
      return (
        <div className="flex flex-col gap-4 w-full max-w-sm">
          <GlowInput placeholder="Focus for glow" />
          <GlowInput placeholder="Secondary field" />
        </div>
      );
    case "otp-input":
      return (
        <div className="flex justify-center">
          <OTPInput length={6} />
        </div>
      );
    case "pin-input":
      return (
        <div className="flex justify-center">
          <PinInput length={6} />
        </div>
      );
    case "password-input":
      return (
        <div className="w-full max-w-sm">
          <PasswordInput placeholder="Enter your password" />
        </div>
      );
    case "gradient-card":
      return (
        <div className="w-full max-w-md">
          <GradientCard 
            title="Gradient Card" 
            description="A beautiful card with gradient background effects."
            eyebrow="Featured"
          />
        </div>
      );
    case "glass-card":
      return (
        <div className="w-full max-w-md">
          <GlassCard
            title="Glass Card"
            description="Layered glass surfaces with soft highlights and depth."
            eyebrow="New"
            highlight="Beta"
            icon={<Sparkles className="h-5 w-5" />}
          />
        </div>
      );
    case "spotlight-card":
      return (
        <div className="w-full max-w-md">
          <SpotlightCard
            title="Spotlight Card"
            description="Tracks your cursor with a glowing spotlight that reveals detail."
            eyebrow="Interactive"
            icon={<Orbit className="h-5 w-5" />}
          />
        </div>
      );
    case "spotlight-hover-card":
      return (
        <div className="w-full max-w-md">
          <SpotlightHoverCard
            title="Spotlight Hover Card"
            description="A cursor-following glow that reveals depth and detail."
            eyebrow="Focus"
            icon={<Sparkles className="h-5 w-5" />}
          />
        </div>
      );
    case "meteors-background":
      return (
        <div className="w-full max-w-md">
          <MeteorsBackground className="rounded-2xl border border-border bg-background p-6">
            <div className="space-y-2">
              <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
                Atmosphere
              </p>
              <h3 className="text-lg font-semibold text-primary">Meteor Drift</h3>
              <p className="text-sm text-muted-foreground">
                Streaking highlights that add motion and energy to sections.
              </p>
            </div>
          </MeteorsBackground>
        </div>
      );
    case "noise-texture-background":
      return (
        <div className="w-full max-w-md">
          <NoiseTextureBackground>
            <div className="space-y-2">
              <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
                Texture
              </p>
              <h3 className="text-lg font-semibold text-foreground">
                Grain Overlay
              </h3>
              <p className="text-sm text-muted-foreground">
                Subtle noise that gives sections a premium tactile feel.
              </p>
            </div>
          </NoiseTextureBackground>
        </div>
      );
    case "dot-pattern-background":
      return (
        <div className="w-full max-w-md">
          <DotPatternBackground>
            <div className="space-y-2">
              <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
                Pattern
              </p>
              <h3 className="text-lg font-semibold text-foreground">
                Dot Wave
              </h3>
              <p className="text-sm text-muted-foreground">
                A dot grid with gentle wave motion for depth.
              </p>
            </div>
          </DotPatternBackground>
        </div>
      );
    case "hover-border-gradient-card":
      return (
        <div className="w-full max-w-md">
          <HoverBorderGradientCard
            title="Hover Border Gradient"
            description="A premium card edge that animates with a soft gradient on hover."
            eyebrow="Hover Glow"
            icon={<Layers className="h-5 w-5" />}
          />
        </div>
      );
    case "animated-gradient-border-card":
      return (
        <div className="w-full max-w-md">
          <AnimatedGradientBorderCard
            title="Animated Gradient Border"
            description="A continuous gradient sweep that frames key content."
            eyebrow="Motion"
          >
            <Button variant="outline" size="sm">
              View Details
            </Button>
          </AnimatedGradientBorderCard>
        </div>
      );
    case "glow-card-stack":
      return (
        <GlowCardStack
          items={[
            {
              title: "Concept Pitch",
              description: "Outline the narrative and visual direction.",
              label: "Layer 1",
            },
            {
              title: "Design Sprint",
              description: "Refine the interaction and motion details.",
              label: "Layer 2",
            },
            {
              title: "Launch Prep",
              description: "Deliver assets and polish the rollout.",
              label: "Layer 3",
            },
          ]}
        />
      );
    case "ambient-glow-card":
      return <AmbientGlowCardDemo />;
    case "tilt-card":
      return (
        <div className="w-full max-w-md">
          <TiltCard
            title="Tilt Card"
            description="A responsive 3D tilt effect with depth and motion."
            eyebrow="3D"
            icon={<Layers className="h-5 w-5" />}
          />
        </div>
      );
    case "expandable-card":
      return (
        <div className="w-full max-w-md">
          <ExpandableCard
            title="Expandable Card"
            description="Click to reveal details and performance stats."
            details="Designed for product highlights, roadmap updates, or feature announcements with rich detail."
            stats={[
              { label: "Latency", value: "120ms" },
              { label: "Uptime", value: "99.9%" },
              { label: "Requests", value: "1.2M" },
            ]}
          />
        </div>
      );
    case "stack-cards":
      return (
        <StackCards
          cards={[
            {
              title: "Launch Preview",
              description: "Review the release plan and timelines.",
              label: "Stage 1",
            },
            {
              title: "Design Review",
              description: "Approve final UI and interaction polish.",
              label: "Stage 2",
            },
            {
              title: "Go Live",
              description: "Deploy and monitor the rollout.",
              label: "Stage 3",
            },
          ]}
        />
      );
    case "button":
      return (
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="default">Default</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="fancy">Fancy</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="ghost">Ghost</Button>
        </div>
      );
    case "testimonial-card":
      return (
        <div className="w-full max-w-md">
          <TestimonialCard
            name="Sarah Chen"
            role="Product Manager"
            company="Acme Inc"
            quote="This component library has completely transformed our development workflow. The attention to detail is incredible."
            rating={5}
            variant="gradient"
          />
        </div>
      );
    case "typewriter-text":
      return (
        <div className="flex flex-col items-center gap-4 text-center">
          <TypewriterText
            text="Welcome to the future of UI components."
            speed={40}
            className="text-xl font-medium text-foreground"
          />
        </div>
      );
    case "morph-text":
      return (
        <div className="flex flex-col items-center gap-3 text-center">
          <p className="text-sm text-muted-foreground">
            Seamless transitions between product highlights.
          </p>
          <h3 className="text-2xl font-semibold text-foreground">
            Build for <MorphText words={["momentum", "clarity", "impact"]} />
          </h3>
        </div>
      );
    case "number-counter":
      return (
        <div className="flex flex-wrap items-center justify-center gap-8">
          <div className="text-center">
            <NumberCounter
              value={10000}
              duration={2500}
              className="text-4xl font-bold text-primary"
            />
            <p className="mt-1 text-sm text-muted-foreground">Users</p>
          </div>
          <div className="text-center">
            <NumberCounter
              value={99.9}
              decimals={1}
              suffix="%"
              duration={2000}
              className="text-4xl font-bold text-primary"
            />
            <p className="mt-1 text-sm text-muted-foreground">Uptime</p>
          </div>
          <div className="text-center">
            <NumberCounter
              value={5000000}
              prefix="$"
              duration={3000}
              className="text-4xl font-bold text-primary"
            />
            <p className="mt-1 text-sm text-muted-foreground">Revenue</p>
          </div>
        </div>
      );
    case "animated-counter":
      return (
        <div className="flex flex-col items-center gap-2 text-center">
          <AnimatedCounter
            value={12800}
            duration={1800}
            prefix="$"
            className="text-4xl font-semibold text-foreground"
          />
          <p className="text-sm text-muted-foreground">Monthly recurring revenue</p>
        </div>
      );
    case "circular-progress":
      return (
        <div className="flex flex-wrap items-center justify-center gap-6">
          <CircularProgress value={72} label="Activation" />
          <CircularProgress value={92} label="Retention" />
        </div>
      );
    case "timeline":
      return (
        <div className="w-full max-w-md">
          <Timeline
            items={[
              {
                title: "Kickoff",
                description: "Align stakeholders and goals",
                time: "Week 1",
                status: "completed",
              },
              {
                title: "Design",
                description: "Finalize interface and states",
                time: "Week 2",
                status: "current",
              },
              {
                title: "Launch",
                description: "Release to early adopters",
                time: "Week 3",
                status: "upcoming",
              },
            ]}
          />
        </div>
      );
    case "accordion":
      return (
        <div className="w-full max-w-md">
          <Accordion
            items={[
              {
                id: "included",
                title: "What is included?",
                content:
                  "You get full access to the component source plus updates.",
              },
              {
                id: "customize",
                title: "Can I customize it?",
                content:
                  "Yes, everything is built with CSS variables and utility classes.",
              },
              {
                id: "support",
                title: "Is support available?",
                content: "Email support is available for all plans.",
              },
            ]}
            defaultValue={["included"]}
          />
        </div>
      );
    case "motion-tabs":
      return (
        <div className="w-full max-w-md">
          <MotionTabs
            tabs={[
              {
                value: "overview",
                label: "Overview",
                content:
                  "Monitor KPIs, customer satisfaction, and usage trends.",
              },
              {
                value: "pipeline",
                label: "Pipeline",
                content:
                  "Track deals moving through each stage in real time.",
              },
              {
                value: "alerts",
                label: "Alerts",
                content:
                  "Stay notified with automated risk and milestone alerts.",
              },
            ]}
          />
        </div>
      );
    case "search-input":
      return (
        <div className="w-full max-w-md">
          <SearchInput placeholder="Search components..." />
        </div>
      );
    case "command-menu":
      return <CommandMenuDemo />;
    case "dock":
      return <DockDemo />;
    case "floating-toolbar":
      return <FloatingToolbarDemo />;
    case "breadcrumbs":
      return <BreadcrumbsDemo />;
    case "pagination":
      return <PaginationDemo />;
    case "stepper":
      return <StepperDemo />;
    case "progress-steps":
      return <ProgressStepsDemo />;
    case "multi-select":
      return <MultiSelectDemo />;
    case "searchable-select":
      return <SearchableSelectDemo />;
    case "combobox-multi":
      return <ComboboxMultiDemo />;
    case "date-range-picker":
      return <DateRangePickerDemo />;
    case "date-time-picker":
      return <DateTimePickerDemo />;
    case "file-upload":
      return <FileUploadDemo />;
    case "file-dropzone":
      return <FileDropzoneDemo />;
    case "tag-input":
      return <TagInputDemo />;
    case "rich-text-editor":
      return <RichTextEditorDemo />;
    case "rich-text-input":
      return <RichTextInputDemo />;
    case "color-picker":
      return <ColorPickerDemo />;
    case "rating-stars":
      return <RatingStarsDemo />;
    case "rating-input":
      return <RatingInputDemo />;
    case "inline-edit":
      return <InlineEditDemo />;
    case "sortable-list":
      return <SortableListDemo />;
    case "swipe-cards":
      return <SwipeCardsDemo />;
    case "bento-card":
      return (
        <div className="grid grid-cols-3 gap-4 w-full max-w-2xl">
          <BentoCard
            size="1x1"
            title="Analytics"
            description="Track your metrics"
            gradient
            gradientVariant="primary"
          />
          <BentoCard
            size="2x1"
            title="Dashboard"
            description="All your data in one place with real-time updates"
            gradient
            gradientVariant="mixed"
          />
        </div>
      );
    case "bento-grid":
      return <BentoGridDemo />;
    case "pricing-card":
      return (
        <div className="flex flex-wrap gap-4 justify-center">
          <PricingCard
            title="Starter"
            price="$9"
            period="/month"
            features={["5 projects", "Basic analytics", "Email support"]}
            ctaText="Start Free"
          />
          <PricingCard
            title="Pro"
            price="$29"
            period="/month"
            features={["Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations"]}
            ctaText="Get Started"
            popular
          />
        </div>
      );
    case "gradient-text":
      return (
        <div className="flex flex-col items-center gap-6">
          <GradientText variant="primary" as="h2" className="text-3xl font-bold">
            Primary Flow
          </GradientText>
          <GradientText variant="accent" as="h2" className="text-3xl font-bold">
            Accent Energy
          </GradientText>
          <GradientText variant="spotlight" as="h2" className="text-3xl font-bold">
            Spotlight Shine
          </GradientText>
          <GradientText variant="muted" as="h2" className="text-3xl font-bold">
            Muted Glow
          </GradientText>
        </div>
      );
    case "scroll-reveal-text":
      return <ScrollRevealTextDemo />;
    case "parallax-section":
      return (
        <div className="w-full max-w-4xl">
          <ParallaxSection />
        </div>
      );
    case "scroll-progress-bar":
      return (
        <div className="grid gap-4 w-full max-w-md">
          <ScrollProgressBar />
          <ScrollProgressBar variant="circle" label="Reading progress" />
        </div>
      );
    case "sticky-reveal-cards":
      return (
        <div className="w-full max-w-lg">
          <StickyRevealCards />
        </div>
      );
    case "text-highlight-on-scroll":
      return <TextHighlightOnScrollDemo />;
    case "scramble-text":
      return (
        <div className="text-center">
          <ScrambleText
            text="Decrypting your next headline"
            className="text-2xl font-semibold"
          />
        </div>
      );
    case "typing-delete-text":
      return (
        <div className="text-center text-2xl font-semibold">
          <TypingDeleteText
            texts={["Launch faster", "Design with confidence", "Ship the wow"]}
          />
        </div>
      );
    case "word-rotate-text":
      return (
        <div className="flex items-center gap-2 text-2xl font-semibold">
          <span className="text-foreground">Built for</span>
          <WordRotateText words={["teams", "founders", "designers", "engineers"]} />
        </div>
      );
    case "feature-card":
      return (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 w-full max-w-4xl">
          <FeatureCard
            icon={<Zap className="h-6 w-6" />}
            title="Lightning Fast"
            description="Built for performance with optimized animations and minimal bundle size."
            variant="default"
          />
          <FeatureCard
            icon={<Palette className="h-6 w-6" />}
            title="Customizable"
            description="Easily adapt to your brand with CSS variables and Tailwind classes."
            variant="gradient"
          />
          <FeatureCard
            icon={<Shield className="h-6 w-6" />}
            title="Accessible"
            description="WCAG compliant with keyboard navigation and screen reader support."
            variant="bordered"
          />
        </div>
      );
    case "stats-card":
      return (
        <div className="grid gap-4 sm:grid-cols-3 w-full max-w-3xl">
          <StatsCard
            value={10000}
            suffix="+"
            label="Happy Users"
            variant="default"
          />
          <StatsCard
            value={99.9}
            suffix="%"
            decimals={1}
            label="Uptime"
            variant="gradient"
          />
          <StatsCard
            value={50}
            prefix="$"
            suffix="M"
            label="Revenue"
            variant="bordered"
          />
        </div>
      );
    case "stat-card":
      return (
        <div className="grid gap-4 sm:grid-cols-2 w-full max-w-2xl">
          <StatCard
            label="Monthly recurring revenue"
            value={128400}
            prefix="$"
            change={12.4}
            sparklineData={[20, 35, 28, 45, 38, 55, 62, 70, 65, 82]}
          />
          <StatCard label="Active workspaces" value={864} change={-3.2} />
          <StatCard label="Conversion rate" value="4.2%" trend="neutral" />
        </div>
      );
    case "data-table-simple":
      return (
        <DataTableSimple
          className="max-w-2xl"
          columns={[
            { key: "name", header: "Name" },
            { key: "status", header: "Status" },
            { key: "revenue", header: "Revenue", align: "right" },
          ]}
          data={[
            { name: "Acme Corp", status: "Active", revenue: "$12,400" },
            { name: "Globex Inc", status: "Pending", revenue: "$8,200" },
            { name: "Initech", status: "Active", revenue: "$24,100" },
            { name: "Umbrella", status: "Inactive", revenue: "$3,500" },
          ]}
          onRowClick={(row) => console.log("Clicked:", row)}
        />
      );
    case "metric-bar":
      return (
        <div className="w-full max-w-md space-y-4">
          <MetricBar label="Storage used" value="42 GB" percent={42} helperText="of 100 GB" />
          <MetricBar label="API calls" value="8,421" percent={84} helperText="of 10,000 limit" />
          <MetricBar label="Team seats" value="3 / 5" percent={60} />
        </div>
      );
    case "key-value-list":
      return (
        <div className="w-full max-w-lg space-y-6">
          <KeyValueList items={keyValueItems} layout="vertical" />
          <KeyValueList items={keyValueItems} layout="horizontal" />
        </div>
      );
    case "changelog-entry":
      return (
        <div className="w-full max-w-xl space-y-4">
          <ChangelogEntry
            version="v2.4.0"
            date="Feb 8, 2026"
            title="Analytics exports and access updates"
            tags={["added", "fixed", "changed"]}
            details={
              <ul className="list-disc space-y-1 pl-4">
                {changelogDetails.map((detail) => (
                  <li key={detail}>{detail}</li>
                ))}
              </ul>
            }
            defaultOpen
          />
          <ChangelogEntry
            version="v2.3.1"
            date="Jan 30, 2026"
            title="Minor fixes for onboarding"
            tags={["fixed"]}
            details={
              <p>
                Updated empty state messaging and resolved a flicker in the
                invite modal.
              </p>
            }
          />
        </div>
      );
    case "feature-checklist":
      return (
        <div className="w-full max-w-2xl">
          <FeatureChecklist
            title="Everything you need to report faster"
            description="Give every team member a clear view of performance."
            items={featureChecklistItems}
            columns={2}
          />
        </div>
      );
    case "comparison-table":
      return (
        <div className="w-full max-w-4xl">
          <ComparisonTable plans={comparisonPlans} rows={comparisonRows} />
        </div>
      );
    case "pricing-toggle":
      return (
        <div className="w-full max-w-lg">
          <PricingToggle
            helperText="Save more when billed annually"
            defaultValue="yearly"
          />
        </div>
      );
    case "data-table":
      return <DataTableDemo />;
    case "sparkline-chart":
      return <SparklineChartDemo />;
    case "kanban-board":
      return <KanbanBoardDemo />;
    case "tree-view":
      return <TreeViewDemo />;
    case "virtual-list":
      return <VirtualListDemo />;
    case "calendar-grid":
      return <CalendarGridDemo />;
    case "avatar-status":
      return (
        <div className="flex items-center gap-4">
          <StatusAvatar alt="Jordan Lee" fallback="JL" status="online" />
          <StatusAvatar alt="Casey" fallback="C" status="away" />
          <StatusAvatar alt="Morgan" fallback="M" status="busy" />
          <StatusAvatar alt="Taylor" fallback="T" status="offline" />
        </div>
      );
    case "badge":
      return (
        <div className="flex flex-wrap items-center gap-3">
          <Badge>New</Badge>
          <Badge variant="secondary">Beta</Badge>
          <Badge variant="outline">Outline</Badge>
          <Badge variant="muted">Muted</Badge>
          <Badge variant="ghost">Ghost</Badge>
        </div>
      );
    case "tooltip":
      return (
        <TooltipProvider>
          <div className="flex flex-wrap items-center gap-4">
            <Tooltip>
              <TooltipTrigger asChild>
                <button className="rounded-md border border-border px-3 py-2 text-sm">
                  Hover me
                </button>
              </TooltipTrigger>
              <TooltipContent>Extra details</TooltipContent>
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
                <button className="rounded-md border border-border px-3 py-2 text-sm">
                  Focus me
                </button>
              </TooltipTrigger>
              <TooltipContent side="bottom">More info</TooltipContent>
            </Tooltip>
          </div>
        </TooltipProvider>
      );
    case "switch":
      return <SwitchDemo />;
    case "slider":
      return (
        <div className="w-full max-w-sm">
          <Slider defaultValue={[45]} max={100} step={1} />
        </div>
      );
    case "progress":
      return (
        <div className="w-full max-w-sm space-y-3">
          <div className="flex items-center justify-between text-sm text-muted-foreground">
            <span>Uploading</span>
            <span>72%</span>
          </div>
          <Progress value={72} />
        </div>
      );
    case "progress-bar":
      return (
        <div className="w-full max-w-sm space-y-3">
          <div className="flex items-center justify-between text-sm text-muted-foreground">
            <span>Streaming</span>
            <span>64%</span>
          </div>
          <ProgressBar value={64} />
        </div>
      );
    case "notification-toast":
      return <NotificationToastDemo />;
    case "skeleton":
      return (
        <div className="w-full max-w-sm space-y-3">
          <div className="flex items-center gap-3">
            <Skeleton className="h-10 w-10 rounded-full" />
            <div className="space-y-2">
              <Skeleton className="h-3 w-32" />
              <Skeleton className="h-3 w-24" />
            </div>
          </div>
          <Skeleton className="h-24 w-full" />
        </div>
      );
    case "skeleton-card":
      return <SkeletonCardDemo />;
    case "skeleton-shimmer":
      return (
        <div className="w-full max-w-sm space-y-3">
          <div className="flex items-center gap-3">
            <SkeletonShimmer className="h-10 w-10 rounded-full" />
            <div className="flex-1 space-y-2">
              <SkeletonShimmer className="h-3 w-3/4" />
              <SkeletonShimmer className="h-3 w-1/2" />
            </div>
          </div>
          <SkeletonShimmer className="h-24 w-full" />
        </div>
      );
    case "shimmer-effect":
      return (
        <div className="w-full max-w-sm space-y-3">
          <div className="flex items-center gap-3">
            <ShimmerEffect className="h-10 w-10 rounded-full" />
            <div className="flex-1 space-y-2">
              <ShimmerEffect className="h-3 w-3/4" />
              <ShimmerEffect className="h-3 w-1/2" />
            </div>
          </div>
          <ShimmerEffect className="h-20 w-full" />
        </div>
      );
    case "pulse-ring":
      return (
        <div className="flex items-center gap-8">
          <PulseRing size={24} dotSize={8} />
          <PulseRing size={32} dotSize={10} ringCount={3} />
          <PulseRing size={40} dotSize={12} duration={2.5} />
        </div>
      );
    case "confetti-burst":
      return <ConfettiBurstDemo />;
    case "pulse-loader":
      return <PulseLoader />;
    case "orbit-spinner":
      return <OrbitSpinner />;
    case "wave-loader":
      return <WaveLoader />;
    case "hero-grid":
      return <HeroGrid />;
    case "hero-floating":
      return <HeroFloating />;
    case "hero-split":
      return <HeroSplit />;
    case "hero-mesh":
      return <HeroMesh />;
    case "features-bento-grid":
      return <FeaturesBentoGrid />;
    case "features-card-grid":
      return <FeaturesCardGrid />;
    case "features-tabs":
      return <FeaturesTabs />;
    case "features-comparison-table":
      return <FeaturesComparisonTable />;
    case "logo-carousel":
      return <LogoCarousel />;
    case "testimonials-carousel":
      return <TestimonialsCarousel />;
    case "stats-counter-section":
      return <StatsCounterSection />;
    case "trust-badges-row":
      return <TrustBadgesRow />;
    case "cta-email-capture":
      return <CtaEmailCapture />;
    case "cta-gradient-banner":
      return <CtaGradientBanner />;
    case "newsletter-signup":
      return <NewsletterSignup />;
    case "contact-form":
      return <ContactForm />;
    case "saas-landing-page":
      return <SaasLandingPageLayout />;
    case "waitlist-page":
      return <WaitlistPageLayout />;
    case "login-page":
      return <LoginPageLayout />;
    case "signup-page":
      return <SignupPageLayout />;
    case "dashboard-shell":
      return <DashboardShellLayout />;
    case "settings-page":
      return <SettingsPageLayout />;
    case "marquee":
      return (
        <div className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-background">
          <Marquee className="py-4" pauseOnHover>
            {["Design", "Develop", "Ship", "Scale", "Iterate"].map((item) => (
              <div
                key={item}
                className="mx-4 rounded-lg border border-border bg-card px-4 py-2 font-medium"
              >
                {item}
              </div>
            ))}
          </Marquee>
        </div>
      );
    case "flip-card":
      return (
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          <FlipCard
            front={
              <div className="space-y-2">
                <Palette className="mx-auto h-8 w-8 text-primary" />
                <h3 className="font-bold">Design</h3>
              </div>
            }
            back={
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">
                  Craft beautiful interfaces with accessible primitives.
                </p>
                <Button size="sm" variant="outline">Learn More</Button>
              </div>
            }
          />
          <FlipCard
            direction="vertical"
            front={
              <div className="space-y-2">
                <Zap className="mx-auto h-8 w-8 text-yellow-500" />
                <h3 className="font-bold">Performance</h3>
              </div>
            }
            back={
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">
                  Optimized for speed and minimal bundle size.
                </p>
              </div>
            }
          />
        </div>
      );
    case "confetti":
      return (
        <div className="flex flex-col items-center gap-4">
          <ConfettiButton>Celebrate!</ConfettiButton>
          <p className="text-sm text-muted-foreground">Click to trigger confetti</p>
        </div>
      );
    case "morphing-blob":
      return (
        <div className="relative h-64 w-full max-w-lg overflow-hidden rounded-xl border border-border bg-background/50">
          <MorphingBlobBackground>
            <div className="flex h-full items-center justify-center p-8">
              <h3 className="text-2xl font-bold backdrop-blur-sm">Morphing Background</h3>
            </div>
          </MorphingBlobBackground>
        </div>
      );
    case "particle-field":
      return (
        <div className="relative h-64 w-full max-w-lg overflow-hidden rounded-xl border border-border bg-background">
          <ParticleField count={30} connected>
            <div className="flex h-full items-center justify-center">
              <span className="rounded-full bg-background/80 px-4 py-2 font-medium backdrop-blur-sm">
                Interactive Particles
              </span>
            </div>
          </ParticleField>
        </div>
      );
    case "animated-marquee-strip":
      return <AnimatedMarqueeStripDemo />;
    case "animated-beam-connectors":
      return <AnimatedBeamConnectorsDemo />;
    case "copy-button":
      return (
        <div className="flex flex-col items-start gap-6">
          <div className="flex flex-wrap items-center gap-4">
            <CopyButton text="npm install ui-destination" size="sm" />
            <CopyButton text="npm install ui-destination" size="md" />
            <CopyButton text="npm install ui-destination" size="lg" />
          </div>
          <div className="flex flex-wrap items-center gap-4">
            <CopyButton text="Copy this text" variant="default" label="Copy" />
            <CopyButton text="Copy this text" variant="outline" label="Copy" />
            <CopyButton text="Copy this text" variant="ghost" label="Copy" />
          </div>
        </div>
      );
    case "share-menu":
      return (
        <div className="flex flex-wrap items-center gap-8">
          <ShareMenu title="Check out UI Destination" align="left" />
          <ShareMenu title="Share this page" align="center" />
          <ShareMenu title="Spread the word" align="right" />
        </div>
      );
    case "theme-toggle":
      return (
        <div className="flex flex-col items-start gap-6">
          <div className="flex flex-wrap items-center gap-4">
            <ThemeToggle size="sm" variant="button" />
            <ThemeToggle size="md" variant="button" />
            <ThemeToggle size="lg" variant="button" />
          </div>
          <div className="flex flex-wrap items-center gap-4">
            <ThemeToggle size="sm" variant="switch" />
            <ThemeToggle size="md" variant="switch" />
            <ThemeToggle size="lg" variant="switch" />
          </div>
        </div>
      );
    default:
      return <div className="text-muted-foreground">No preview available</div>;
  }
}
Component Demos

Dependencies

Files

Installation
