"use client";

import { Check } from "lucide-react";
import {
  AnimatePresence,
  type HTMLMotionProps,
  LayoutGroup,
  motion,
  useInView,
  useReducedMotion,
  type Variants,
} from "motion/react";
import * as React from "react";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// Vite palette
// ---------------------------------------------------------------------------

const VITE_COLORS = ["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"] as const;

// ---------------------------------------------------------------------------
// Animation variants (matching comparison-vite vocabulary)
// ---------------------------------------------------------------------------

const headingContainerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.1,
    },
  },
};

const wordVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 20,
    filter: "blur(8px)",
  },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.5,
      ease: [0.25, 0.4, 0.25, 1],
    },
  },
};

const gridContainerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.15,
    },
  },
};

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 260,
      damping: 24,
    },
  },
};

// ---------------------------------------------------------------------------
// AnimatedWords (scroll-triggered, from comparison-vite)
// ---------------------------------------------------------------------------

function AnimatedWords({ children, className }: { children: string; className?: string }) {
  const ref = React.useRef<HTMLSpanElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });
  const words = children.split(" ");

  return (
    <motion.span
      animate={isInView ? "visible" : "hidden"}
      className={cn("inline-flex flex-wrap", className)}
      initial="hidden"
      ref={ref}
      variants={headingContainerVariants}
    >
      {words.map((word, index) => (
        <motion.span className="mr-[0.25em] inline-block" key={index} variants={wordVariants}>
          {word}
        </motion.span>
      ))}
    </motion.span>
  );
}

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface PricingViteTier {
  name: string;
  id: string;
  price: { monthly: string; yearly: string };
  description: string;
  features: string[];
  cta: string;
  featured?: boolean;
}

// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

interface PricingViteContextValue {
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  description?: React.ReactNode;
  tiers: PricingViteTier[];
  isYearly: boolean;
  setIsYearly: React.Dispatch<React.SetStateAction<boolean>>;
}

const PricingViteContext = React.createContext<PricingViteContextValue | undefined>(undefined);

function usePricingViteContext() {
  const ctx = React.useContext(PricingViteContext);
  if (!ctx) {
    throw new Error("PricingVite components must be used within PricingViteRoot");
  }
  return ctx;
}

export function usePricingVite() {
  return usePricingViteContext();
}

// ---------------------------------------------------------------------------
// Default data
// ---------------------------------------------------------------------------

const defaultTiers: PricingViteTier[] = [
  {
    name: "Starter",
    id: "starter",
    price: { monthly: "$29", yearly: "$290" },
    description: "Perfect for small teams and startups",
    features: ["Up to 10 team members", "Basic analytics", "24/7 email support", "API access", "Community access"],
    cta: "Get Started",
  },
  {
    name: "Pro",
    id: "pro",
    price: { monthly: "$79", yearly: "$790" },
    description: "Best for growing businesses",
    features: [
      "Unlimited team members",
      "Advanced analytics",
      "24/7 priority support",
      "API access",
      "Custom integrations",
      "Advanced security",
      "Team training",
      "Custom branding",
      "SLA guarantee",
    ],
    cta: "Get Pro",
    featured: true,
  },
  {
    name: "Enterprise",
    id: "enterprise",
    price: { monthly: "Custom", yearly: "Custom" },
    description: "For large organizations",
    features: [
      "Everything in Pro",
      "Dedicated account manager",
      "Custom development",
      "On-premise deployment",
      "Enterprise SSO",
      "Advanced compliance",
      "Custom SLA",
      "24/7 phone support",
    ],
    cta: "Contact Sales",
  },
];

// ---------------------------------------------------------------------------
// PricingViteRoot
// ---------------------------------------------------------------------------

export interface PricingViteRootProps extends Omit<React.ComponentPropsWithoutRef<"section">, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  description?: React.ReactNode;
  tiers?: PricingViteTier[];
  defaultYearly?: boolean;
}

export const PricingViteRoot = React.forwardRef<HTMLElement, PricingViteRootProps>(
  (
    {
      className,
      children,
      title = "Choose the right plan",
      subtitle = "for your business",
      description,
      tiers = defaultTiers,
      defaultYearly = false,
      ...props
    },
    ref
  ) => {
    const [isYearly, setIsYearly] = React.useState(defaultYearly);

    const contextValue = React.useMemo<PricingViteContextValue>(
      () => ({ title, subtitle, description, tiers, isYearly, setIsYearly }),
      [title, subtitle, description, tiers, isYearly]
    );

    return (
      <PricingViteContext.Provider value={contextValue}>
        <section
          className={cn("relative w-full overflow-hidden", className)}
          data-slot="pricing-vite-root"
          ref={ref}
          {...props}
        >
          {children}
        </section>
      </PricingViteContext.Provider>
    );
  }
);
PricingViteRoot.displayName = "PricingViteRoot";

// ---------------------------------------------------------------------------
// PricingViteContainer
// ---------------------------------------------------------------------------

export function PricingViteContainer({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn(
        "container relative z-10 mx-auto flex max-w-6xl flex-col gap-10 px-4 py-16 sm:gap-12 sm:py-20 lg:gap-14 lg:py-28",
        className
      )}
      data-slot="pricing-vite-container"
      {...props}
    />
  );
}

// ---------------------------------------------------------------------------
// PricingViteHeading
// ---------------------------------------------------------------------------

export interface PricingViteHeadingProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  headingClassName?: string;
}

export function PricingViteHeading({
  className,
  title,
  subtitle,
  headingClassName,
  children,
  ...props
}: PricingViteHeadingProps) {
  const context = usePricingViteContext();
  const resolvedTitle = title ?? context.title;
  const resolvedSubtitle = subtitle ?? context.subtitle;

  return (
    <div className={cn("text-center", className)} data-slot="pricing-vite-heading-wrap" {...props}>
      {children ?? (
        <div
          aria-hidden="true"
          className={cn(
            "text-balance font-medium text-3xl tracking-[-0.04em] sm:text-4xl md:text-5xl lg:tracking-[-0.06em]",
            headingClassName
          )}
          data-slot="pricing-vite-heading"
        >
          {typeof resolvedTitle === "string" ? <AnimatedWords>{resolvedTitle}</AnimatedWords> : resolvedTitle}
          {resolvedSubtitle && (
            <span className="text-foreground/50">
              {" "}
              {typeof resolvedSubtitle === "string" ? (
                <AnimatedWords>{resolvedSubtitle}</AnimatedWords>
              ) : (
                resolvedSubtitle
              )}
            </span>
          )}
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// PricingViteDescription
// ---------------------------------------------------------------------------

export interface PricingViteDescriptionProps extends Omit<HTMLMotionProps<"div">, "values"> {
  description?: React.ReactNode;
  descriptionClassName?: string;
}

export function PricingViteDescription({
  className,
  description,
  descriptionClassName,
  children,
  ...props
}: PricingViteDescriptionProps) {
  const context = usePricingViteContext();
  const resolvedDescription = description ?? context.description;

  const hasContent = resolvedDescription || children;
  if (!hasContent) {
    return null;
  }

  return (
    <motion.div
      animate={{ opacity: 1, y: 0 }}
      className={cn("-mt-4 text-center", className)}
      data-slot="pricing-vite-description"
      initial={{ opacity: 0, y: 16 }}
      transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.4, 0.25, 1] as const }}
      {...props}
    >
      {children ?? (
        <p
          className={cn(
            "mx-auto max-w-2xl text-base text-muted-foreground leading-relaxed sm:text-lg",
            descriptionClassName
          )}
        >
          {resolvedDescription}
        </p>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// PricingViteToggle
// ---------------------------------------------------------------------------

export interface PricingViteToggleProps extends Omit<
  React.ComponentPropsWithoutRef<"div">,
  "children" | "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"
> {
  monthlyLabel?: string;
  yearlyLabel?: string;
  savingsLabel?: string;
}

export function PricingViteToggle({
  className,
  monthlyLabel = "Monthly",
  yearlyLabel = "Annual",
  savingsLabel = "Save 20%",
  ...props
}: PricingViteToggleProps) {
  const { isYearly, setIsYearly } = usePricingViteContext();
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      animate={{ opacity: 1, y: 0 }}
      className={cn("flex items-center justify-center", className)}
      data-slot="pricing-vite-toggle"
      initial={{ opacity: 0, y: 12 }}
      transition={{ duration: 0.5, delay: 0.3, ease: [0.25, 0.4, 0.25, 1] as const }}
      {...props}
    >
      <LayoutGroup>
        <div
          className={cn(
            "relative inline-flex items-center gap-1 rounded-full p-1",
            "bg-muted/60 dark:bg-muted/40",
            "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.06),0px_8px_20px_-6px_rgba(0,0,0,0.08)]",
            "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_8px_20px_-6px_rgba(0,0,0,0.32)]"
          )}
        >
          <button
            className={cn(
              "relative z-10 rounded-full px-4 py-1.5 font-medium text-sm transition-colors duration-150",
              isYearly ? "text-muted-foreground" : "text-foreground"
            )}
            onClick={() => setIsYearly(false)}
            type="button"
          >
            {!isYearly && (
              <motion.div
                className={cn(
                  "absolute inset-0 rounded-full bg-background",
                  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.06),0px_6px_14px_-4px_rgba(0,0,0,0.06)]",
                  "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_6px_14px_-4px_rgba(0,0,0,0.25)]"
                )}
                layoutId="pricing-vite-toggle-pill"
                transition={shouldReduceMotion ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 30 }}
              />
            )}
            <span className="relative z-10">{monthlyLabel}</span>
          </button>

          <button
            className={cn(
              "relative z-10 flex items-center gap-2 rounded-full px-4 py-1.5 font-medium text-sm transition-colors duration-150",
              isYearly ? "text-foreground" : "text-muted-foreground"
            )}
            onClick={() => setIsYearly(true)}
            type="button"
          >
            {isYearly && (
              <motion.div
                className={cn(
                  "absolute inset-0 rounded-full bg-background",
                  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.06),0px_6px_14px_-4px_rgba(0,0,0,0.06)]",
                  "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.08),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_6px_14px_-4px_rgba(0,0,0,0.25)]"
                )}
                layoutId="pricing-vite-toggle-pill"
                transition={shouldReduceMotion ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 30 }}
              />
            )}
            <span className="relative z-10">{yearlyLabel}</span>
            <span className="relative z-10 bg-gradient-to-r from-[#ed40b3] via-[#b054de] to-[#6ef7cc] bg-clip-text font-mono text-[10px] text-transparent uppercase tracking-[0.12em]">
              {savingsLabel}
            </span>
          </button>
        </div>
      </LayoutGroup>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// PricingViteGrid
// ---------------------------------------------------------------------------

export function PricingViteGrid({ className, children }: { className?: string; children?: React.ReactNode }) {
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });
  const context = usePricingViteContext();

  return (
    <motion.div
      animate={isInView ? "visible" : "hidden"}
      className={cn("grid grid-cols-1 gap-4 sm:gap-6 lg:grid-cols-3", className)}
      data-slot="pricing-vite-grid"
      initial="hidden"
      ref={ref}
      variants={gridContainerVariants}
    >
      {children ?? context.tiers.map((tier) => <PricingViteCard key={tier.id} tier={tier} />)}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// PricingViteCard
// ---------------------------------------------------------------------------

export interface PricingViteCardProps {
  tier: PricingViteTier;
  className?: string;
  ctaClassName?: string;
  onCtaClick?: (tier: PricingViteTier) => void;
}

export function PricingViteCard({ tier, className, ctaClassName, onCtaClick }: PricingViteCardProps) {
  const { isYearly } = usePricingViteContext();
  const shouldReduceMotion = useReducedMotion();
  const isFeatured = tier.featured === true;
  const isCustom = tier.price.monthly === "Custom";

  return (
    <motion.div
      className={cn(
        "relative flex flex-col overflow-hidden rounded-xl p-6 sm:p-8",
        "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.08),0px_8px_24px_-4px_rgba(0,0,0,0.08)]",
        "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_8px_24px_-4px_rgba(0,0,0,0.35)]",
        isFeatured ? "bg-[#6ef7cc]/[0.02] dark:bg-[#6ef7cc]/[0.04]" : "bg-card",
        className
      )}
      data-featured={isFeatured || undefined}
      data-slot="pricing-vite-card"
      variants={cardVariants}
    >
      <div className="mb-6 flex items-center justify-between gap-3">
        <h3 className="font-semibold text-lg tracking-tight">{tier.name}</h3>
        {isFeatured && (
          <span className="rounded-full bg-gradient-to-r from-[#ed40b3] via-[#b054de] to-[#6ef7cc] px-3 py-1 font-mono text-[10px] text-white uppercase tracking-[0.2em]">
            Most popular
          </span>
        )}
      </div>

      <p className="mb-6 text-muted-foreground text-sm">{tier.description}</p>

      {/* Price */}
      <div className="mb-8 flex items-baseline gap-1">
        <AnimatePresence initial={false} mode="popLayout">
          <motion.span
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            className="font-bold text-4xl tabular-nums tracking-tight"
            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -12, filter: "blur(4px)" }}
            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 12, filter: "blur(4px)" }}
            key={isYearly ? "yearly" : "monthly"}
            transition={{ duration: 0.3, ease: [0.25, 0.4, 0.25, 1] }}
          >
            {isYearly ? tier.price.yearly : tier.price.monthly}
          </motion.span>
        </AnimatePresence>
        {!isCustom && <span className="text-muted-foreground text-sm">/{isYearly ? "year" : "month"}</span>}
      </div>

      {/* CTA */}
      <button
        className={cn(
          "mb-8 w-full rounded-lg py-2.5 font-medium text-sm transition-all duration-150",
          isFeatured
            ? "bg-foreground text-background hover:opacity-90"
            : cn(
                "bg-transparent",
                "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.1),0px_2px_6px_-2px_rgba(0,0,0,0.08),0px_8px_20px_-6px_rgba(0,0,0,0.08)] hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.14),0px_4px_8px_-2px_rgba(0,0,0,0.1),0px_12px_28px_-6px_rgba(0,0,0,0.1)]",
                "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_2px_6px_-2px_rgba(255,255,255,0.05),0px_8px_20px_-6px_rgba(0,0,0,0.35)] dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.16),0px_4px_8px_-2px_rgba(255,255,255,0.06),0px_12px_28px_-6px_rgba(0,0,0,0.45)]",
                "hover:bg-muted/50"
              ),
          ctaClassName
        )}
        onClick={() => onCtaClick?.(tier)}
        type="button"
      >
        {tier.cta}
      </button>

      {/* Features */}
      <ul className="flex flex-col gap-3">
        {tier.features.map((feature) => (
          <li className="flex items-start gap-3 text-sm" key={feature}>
            <div
              className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full"
              style={{
                backgroundColor: "rgba(110, 247, 204, 0.12)",
                color: VITE_COLORS[1],
              }}
            >
              <Check className="size-3" strokeWidth={2.5} />
            </div>
            <span className="text-muted-foreground">{feature}</span>
          </li>
        ))}
      </ul>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// PricingVite -- convenience composed component
// ---------------------------------------------------------------------------

export interface PricingViteProps extends PricingViteRootProps {
  containerClassName?: string;
  headingWrapClassName?: string;
  headingClassName?: string;
  toggleClassName?: string;
  gridClassName?: string;
  onCtaClick?: (tier: PricingViteTier) => void;
}

export function PricingVite({
  containerClassName,
  headingWrapClassName,
  headingClassName,
  toggleClassName,
  gridClassName,
  onCtaClick,
  ...rootProps
}: PricingViteProps) {
  return (
    <PricingViteRoot {...rootProps}>
      <PricingViteContainer className={containerClassName}>
        <PricingViteHeading className={headingWrapClassName} headingClassName={headingClassName} />
        <PricingViteDescription />
        <PricingViteToggle className={toggleClassName} />
        <PricingViteGrid className={gridClassName} />
      </PricingViteContainer>
    </PricingViteRoot>
  );
}

export default PricingVite;
Download Block

Add UI Components

Alternative Options

Download Block

Add UI Components

Alternative Options
