Pricing 8

"use client";

import { useRef } from "react";
import Link from "next/link";
import { motion, useInView, useReducedMotion } from "motion/react";
import { motionStagger, motionViewport } from "@/lib/motion-tokens";
import { cn } from "@/lib/utils";
import { SectionShell, ContentRail } from "@/components/layout-contract";

const tiers = [
	{ name: "Starter", price: "$0", href: "/blocks" },
	{ name: "Pro", price: "$147", href: "/pricing", highlight: true },
	{ name: "Enterprise", price: "Custom", href: "/contact" },
];

export function PricingStripSection() {
	const reduceMotion = useReducedMotion();
	const rowRef = useRef<HTMLUListElement>(null);
	const inView = useInView(rowRef, motionViewport);

	const itemVariants = reduceMotion
		? { hidden: { opacity: 1 }, visible: { opacity: 1 } }
		: {
				hidden: { opacity: 0, filter: "blur(4px)", y: 4 },
				visible: { opacity: 1, filter: "blur(0px)", y: 0 },
			};

	return (
		<SectionShell spacingMode="section" className="bg-background">
			<ContentRail maxWidth="max-w-5xl">
				<motion.ul
					className="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-4"
					initial="hidden"
					ref={rowRef}
					variants={{
						hidden: {},
						visible: {
							transition: { staggerChildren: motionStagger.item, delayChildren: 0.04 },
						},
					}}
					animate={inView ? "visible" : "hidden"}
				>
					<motion.li className="font-medium text-sm tracking-tight" variants={itemVariants}>
						Nusaiba registry
					</motion.li>

					<motion.li
						className="flex flex-wrap items-center justify-center gap-x-6 gap-y-3"
						variants={itemVariants}
					>
						{tiers.map((tier) => (
							<Link
								className={cn(
									"group relative flex min-h-10 items-center gap-2 text-sm transition-transform active:scale-[0.96]",
									"after:absolute after:top-1/2 after:left-1/2 after:size-10 after:-translate-1/2",
									tier.highlight && "text-foreground",
								)}
								href={tier.href}
								key={tier.name}
							>
								<span className="text-muted-foreground group-hover:text-foreground">
									{tier.name}
								</span>
								<span
									className={cn(
										"font-medium tabular-nums tracking-tight",
										tier.highlight && "text-primary",
									)}
								>
									{tier.price}
								</span>
							</Link>
						))}
					</motion.li>

					<motion.li
						className="font-mono text-[10px] text-muted-foreground uppercase tracking-[0.14em]"
						variants={itemVariants}
					>
						Blocks · Motion · CLI
					</motion.li>
				</motion.ul>
			</ContentRail>
		</SectionShell>
	);
}