Pricing Plans Grid

"use client";

import { useId, useState, type CSSProperties } from "react";
import { Fraunces } from "next/font/google";
import { AnimatePresence, motion, MotionConfig } from "motion/react";
import { Check } from "@phosphor-icons/react";

const fraunces = Fraunces({
  subsets: ["latin"],
  axes: ["opsz"],
  display: "swap",
  variable: "--font-fraunces",
});

/* ─── PricingPlansGrid ────────────────────────── */

export type BillingCycle = "monthly" | "annual";

export interface PricingPlan {
  id: string;
  name: string;
  tagline: string;
  /** Per-cycle prices. Omit and set priceLabel for non-numeric plans. */
  price?: { monthly: number; annual: number };
  /** Static text rendered instead of a numeric price (e.g. "Free", "Custom"). */
  priceLabel?: string;
  /** Suffix after the amount (e.g. "/mo"). */
  priceSuffix?: string;
  /** Anchor price rendered struck-through beside the amount (e.g. "$39"). */
  originalPrice?: string;
  /** Chip in the card's top-right corner (accent-filled when featured). */
  badge?: string;
  /** Accent note under the badge (e.g. "Save 20%"). */
  discount?: string;
  /** Label on the hover-reveal sleeve behind a featured card. */
  highlight?: string;
  /** Spotlights the plan: accent badge, hover sleeve, solid CTA. */
  featured?: boolean;
  cta: { label: string; href: string };
  features: string[];
}

export interface PricingPlansGridProps {
  title: string;
  plans: PricingPlan[];
  eyebrow?: string;
  description?: string;
  /** Chip inside the annual toggle segment (e.g. "Save 20%"). */
  annualNote?: string;
  footnote?: string;
  defaultCycle?: BillingCycle;
}

const SPRING = { type: "spring", stiffness: 420, damping: 36 } as const;

const ROLL_VARIANTS = {
  enter: (dir: number) => ({
    y: dir > 0 ? "0.85em" : "-0.85em",
    opacity: 0,
    filter: "blur(6px)",
  }),
  center: { y: "0em", opacity: 1, filter: "blur(0px)" },
  exit: (dir: number) => ({
    y: dir > 0 ? "-0.85em" : "0.85em",
    opacity: 0,
    filter: "blur(6px)",
  }),
};

function cx(...classes: Array<string | false | undefined>) {
  return classes.filter(Boolean).join(" ");
}

/**
 * Odometer-style amount: a masked one-line roll where the new value slides
 * in with a blur trail while the old one rolls out in travel direction.
 * @param {number} value - Amount to display [Required]
 * @param {string} className - Font/size classes for the whole figure [Optional]
 */
function PriceRoll({ value, className }: { value: number; className?: string }) {
  const [prevValue, setPrevValue] = useState(value);
  const [dir, setDir] = useState(1);
  if (prevValue !== value) {
    setPrevValue(value);
    setDir(value >= prevValue ? 1 : -1);
  }

  return (
    <span
      className={cx(
        "inline-flex items-end font-serif tabular-nums text-white",
        className,
      )}
    >
      <span className="self-start pt-[0.12em] text-[0.5em] text-zinc-400">
        $
      </span>
      <span className="relative inline-flex h-[1em] items-end overflow-hidden align-bottom">
        <span aria-hidden className="invisible leading-none">
          {value}
        </span>
        <AnimatePresence initial={false} custom={dir}>
          <motion.span
            key={value}
            custom={dir}
            variants={ROLL_VARIANTS}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
            className="absolute inset-0 flex items-end leading-none"
          >
            {value}
          </motion.span>
        </AnimatePresence>
      </span>
    </span>
  );
}

/**
 * Segmented monthly/annual switch with a spring-loaded thumb.
 * @param {BillingCycle} cycle - Currently selected cycle [Required]
 * @param {(cycle: BillingCycle) => void} onChange - Selection handler [Required]
 * @param {string} annualNote - Chip inside the annual segment [Optional]
 */
function BillingToggle({
  cycle,
  onChange,
  annualNote,
}: {
  cycle: BillingCycle;
  onChange: (cycle: BillingCycle) => void;
  annualNote?: string;
}) {
  const thumbId = useId();
  const segments: { value: BillingCycle; label: string }[] = [
    { value: "monthly", label: "Monthly" },
    { value: "annual", label: "Annual" },
  ];

  return (
    <div
      role="group"
      aria-label="Billing cycle"
      className="inline-flex rounded-full bg-white/[0.04] p-1"
    >
      {segments.map((segment) => {
        const isActive = cycle === segment.value;
        return (
          <button
            key={segment.value}
            type="button"
            aria-pressed={isActive}
            onClick={() => onChange(segment.value)}
            className="relative flex items-center gap-2 rounded-full px-4 py-1 outline-none transition-transform duration-150 focus-visible:ring-2 focus-visible:ring-white/40 active:scale-[0.97]"
          >
            {isActive && (
              <motion.span
                layoutId={thumbId}
                transition={SPRING}
                className="absolute inset-0 rounded-full bg-zinc-50"
              />
            )}
            <span
              className={cx(
                "relative z-10 text-sm font-medium transition-colors duration-200",
                isActive ? "text-zinc-900" : "text-zinc-400 hover:text-white",
              )}
            >
              {segment.label}
            </span>
            {segment.value === "annual" && annualNote && (
              <span className="relative z-10 rounded-full bg-[#7af561] px-2 py-0.5 text-[11px] font-semibold text-black">
                {annualNote}
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}

/**
 * Single plan card: glossy inset-lit surface, header/price/CTA block over a
 * feature list, and — when featured — a hover-revealed accent sleeve with a
 * highlight label rising behind the card.
 * @param {PricingPlan} plan - Plan to render [Required]
 * @param {BillingCycle} cycle - Active billing cycle [Required]
 */
function PlanCard({ plan, cycle }: { plan: PricingPlan; cycle: BillingCycle }) {
  const amount = plan.price ? plan.price[cycle] : null;

  return (
    <div className="group relative flex h-full flex-col pt-8">
      {plan.featured && (
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0 bottom-2 z-0 translate-y-4 rounded-[2rem] bg-[#7af561]/10 opacity-0 shadow-[inset_0_18px_40px_-28px_#7af561,inset_0_-18px_40px_-30px_#7af561] transition-all duration-150 ease-in will-change-transform group-hover:translate-y-0 group-hover:opacity-100 group-hover:duration-500 group-hover:ease-out motion-reduce:transition-none"
        >
          {plan.highlight && (
            <p className="pt-2.5 text-center text-xs font-medium text-[#7af561]">
              {plan.highlight}
            </p>
          )}
        </div>
      )}

      <article className="relative z-10 mx-2 flex flex-1 flex-col overflow-hidden rounded-[1.65rem] bg-[#1b1b1b] shadow-[inset_0_8px_18px_-20px_rgba(250,250,250,0.45),inset_0_-8px_18px_-22px_rgba(250,250,250,0.4)]">
        <div className="border-b border-white/10 p-6">
          <div className="flex min-h-[2.875rem] items-start justify-between gap-4">
            <p className="font-serif text-sm tracking-[0.05em] text-zinc-400 uppercase">
              {plan.name}
            </p>
            <div className="flex flex-col items-end gap-1">
              {plan.badge && (
                <span
                  className={cx(
                    "rounded-full border px-2.5 py-1 text-xs font-medium",
                    plan.featured
                      ? "border-[#7af561] bg-[#7af561] text-[#1a2e05]"
                      : "border-white/10 text-white",
                  )}
                >
                  {plan.badge}
                </span>
              )}
              {plan.discount && (
                <span className="text-xs text-[#7af561]">{plan.discount}</span>
              )}
            </div>
          </div>

          <div className="mt-5 flex items-end gap-2">
            {amount === null ? (
              <span className="font-serif text-5xl leading-none text-white">
                {plan.priceLabel}
              </span>
            ) : (
              <>
                <PriceRoll value={amount} className="text-5xl" />
                {plan.originalPrice && (
                  <span className="pb-1 text-sm text-zinc-500 line-through">
                    {plan.originalPrice}
                  </span>
                )}
                {plan.priceSuffix && (
                  <span className="pb-1 text-sm text-zinc-400">
                    {plan.priceSuffix}
                  </span>
                )}
              </>
            )}
          </div>

          <p className="mt-4 text-sm leading-6 text-zinc-400">{plan.tagline}</p>

          <div className="mt-6">
            <a
              href={plan.cta.href}
              className={cx(
                "inline-flex h-10 w-full items-center justify-center rounded-full px-5 text-sm font-medium transition-all duration-200 outline-none select-none focus-visible:ring-2 focus-visible:ring-white/40 active:scale-[0.98]",
                plan.featured
                  ? "bg-zinc-50 text-zinc-900 hover:bg-zinc-50/90"
                  : "border border-white/10 bg-[#1b1b1b] text-white hover:border-white/25",
              )}
            >
              {plan.cta.label}
            </a>
          </div>
        </div>

        <div className="flex flex-1 flex-col p-6">
          <ul className="space-y-3">
            {plan.features.map((feature) => (
              <li key={feature} className="flex gap-3 text-sm leading-6">
                <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-zinc-50 text-zinc-900">
                  <Check size={13} weight="bold" />
                </span>
                <span className="text-zinc-400">{feature}</span>
              </li>
            ))}
          </ul>
        </div>
      </article>
    </div>
  );
}

/**
 * PricingPlansGrid — centered dark pricing section with a spring-loaded
 * monthly/annual toggle, blur-trail odometer price rolls, glossy inset-lit
 * cards, and a featured plan whose accent sleeve rises on hover.
 * @param {string} title - Section headline [Required]
 * @param {PricingPlan[]} plans - Plans to render, typically three [Required]
 * @param {string} eyebrow - Small-caps kicker above the title [Optional]
 * @param {string} description - Supporting copy under the title [Optional]
 * @param {string} annualNote - Chip inside the annual toggle segment [Optional]
 * @param {string} footnote - Muted line under the grid [Optional]
 * @param {BillingCycle} defaultCycle - Initial cycle [Optional, default: "annual"]
 */
export function PricingPlansGrid({
  title,
  plans,
  eyebrow,
  description,
  annualNote,
  footnote,
  defaultCycle = "annual",
}: PricingPlansGridProps) {
  const [cycle, setCycle] = useState<BillingCycle>(defaultCycle);

  return (
    <MotionConfig reducedMotion="user">
      <section aria-label={title} className="flex flex-col items-center">
        <header className="flex max-w-2xl flex-col items-center gap-4 text-center">
          {eyebrow && (
            <span className="font-serif text-sm tracking-[0.04em] text-[#7af561] uppercase">
              {eyebrow}
            </span>
          )}
          <h2 className="font-serif text-4xl tracking-[-0.02em] text-white">
            {title}
          </h2>
          {description && (
            <p className="text-base text-zinc-400">{description}</p>
          )}
        </header>

        <div className="mt-8">
          <BillingToggle
            cycle={cycle}
            onChange={setCycle}
            annualNote={annualNote}
          />
        </div>

        <div className="mt-10 grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {plans.map((plan) => (
            <PlanCard key={plan.id} plan={plan} cycle={cycle} />
          ))}
        </div>

        {footnote && (
          <p className="mt-10 text-center text-sm text-zinc-500">{footnote}</p>
        )}
      </section>
    </MotionConfig>
  );
}

/* ─── Demo ────────────────────────────────────── */

const DEMO_PLANS: PricingPlan[] = [
  {
    id: "starter",
    name: "Starter",
    tagline: "Everything you need to start shipping.",
    priceLabel: "Free",
    badge: "Starter",
    cta: { label: "Start for free", href: "#" },
    features: [
      "1 workspace",
      "Up to 3 projects",
      "10k events / month",
      "Community support",
    ],
  },
  {
    id: "pro",
    name: "Pro",
    tagline: "For teams that ship to production.",
    price: { monthly: 29, annual: 23 },
    priceSuffix: "/mo",
    originalPrice: "$39",
    badge: "Pro",
    discount: "Save 20%",
    highlight: "Best value",
    featured: true,
    cta: { label: "Start 14-day trial", href: "#" },
    features: [
      "Unlimited projects",
      "1M events / month",
      "Advanced analytics",
      "Priority support",
      "Audit log",
    ],
  },
  {
    id: "max",
    name: "Max",
    tagline: "Compliance, scale, and direct help.",
    priceLabel: "Custom",
    badge: "Max",
    cta: { label: "Talk to sales", href: "#" },
    features: [
      "Everything in Pro",
      "SSO & SCIM",
      "Dedicated region",
      "99.99% uptime SLA",
    ],
  },
];

/** Pricing Plans Grid — dark pricing section with billing toggle, blur-roll prices, glossy cards, and a best-value hover sleeve. */
export default function PricingPlansGridDemo() {
  return (
    <div
      className={cx(
        fraunces.variable,
        "min-h-dvh w-full bg-[#151515] px-4 py-14 sm:px-6 sm:py-20",
      )}
      style={{ "--font-serif": "var(--font-fraunces)" } as CSSProperties}
    >
      <div className="mx-auto max-w-5xl">
        <PricingPlansGrid
          eyebrow="Pricing"
          title="Simple pricing that grows with you"
          description="Start free, then upgrade when you are ready. Switch billing or cancel anytime."
          annualNote="Save 20%"
          footnote="Prices in USD, excluding taxes. Annual plans are billed yearly."
          plans={DEMO_PLANS}
        />
      </div>
    </div>
  );
}