Cta 1

"use client";

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

const spring = { type: "spring" as const, duration: 0.3, bounce: 0 };

export function CtaBentoSection() {
	const reduceMotion = useReducedMotion();
	const ref = useRef<HTMLElement>(null);
	const inView = useInView(ref, motionViewport);

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

	return (
		<SectionShell spacingMode="section" className="bg-muted/30 shadow-[0_-1px_0_rgba(0,0,0,0.03)] dark:shadow-[0_-1px_0_rgba(255,255,255,0.04)]" ref={ref}>
			<motion.div
				animate={inView ? "visible" : "hidden"}
				className="mx-auto flex w-full max-w-5xl flex-col items-start justify-between gap-8 md:flex-row md:items-center md:gap-12"
				initial="hidden"
				variants={{
					hidden: {},
					visible: { transition: { staggerChildren: motionStagger.item, delayChildren: 0.04 } },
				}}
			>
				<motion.div className="max-w-xl" variants={itemVariants}>
					<p className="font-medium text-primary text-xs uppercase tracking-[0.22em]">
						Registry
					</p>
					<h2 className="mt-3 text-balance font-medium text-2xl tracking-tight md:text-3xl lg:text-4xl">
						Install motion blocks into your repo
					</h2>
					<p className="mt-4 text-pretty text-muted-foreground text-sm md:text-base">
						Preview live on Nusaiba, copy prompts, and add sections with one shadcn
						command — keep every file.
					</p>
				</motion.div>
				<motion.div
					className="flex w-full shrink-0 flex-col gap-3 sm:w-auto sm:flex-row"
					variants={itemVariants}
				>
					<Link
						className={cn(buttonVariants(), "active:scale-[0.96] transition-transform")}
						href="/blocks"
					>
						Browse blocks
						<ArrowRightIcon data-icon="inline-end" />
					</Link>
					<Link
						className={cn(
							buttonVariants({ variant: "outline" }),
							"active:scale-[0.96] transition-transform",
						)}
						href="/pricing"
					>
						View pricing
					</Link>
				</motion.div>
			</motion.div>
		</SectionShell>
	);
}