"use client";
import { useEffect, type ReactNode } from "react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
/**
* As peças da página de Assinatura. Superfície branca, borda fina, uma cor
* de acento (o violeta da marca) e mais nada: o que se move é o anel enchendo
* e o número chegando — o resto fica parado para a informação falar.
*
* O Natan recusou a versão com cartões em degradê ("muita cara de IA"): aqui
* não entra gradiente, nem mancha desfocada, nem selo translúcido.
*/
export function Painel({ children, className = "", atraso = 0 }: { children: ReactNode; className?: string; atraso?: number }) {
const parado = useReducedMotion();
return (
{children}
);
}
export function CabecalhoDoPainel({ titulo, texto, children }: { titulo: string; texto?: string; children?: ReactNode }) {
return (
{titulo}
{texto ?
{texto}
: null}
{children}
);
}
export function Eyebrow({ children }: { children: ReactNode }) {
return {children}
;
}
/** Anel de progresso: enche até a fração quando entra na tela. */
export function Anel({
fracao,
tamanho = 96,
espessura = 9,
children,
atraso = 0.1,
}: {
fracao: number;
tamanho?: number;
espessura?: number;
children?: ReactNode;
atraso?: number;
}) {
const parado = useReducedMotion();
const raio = (tamanho - espessura) / 2;
const circunferencia = 2 * Math.PI * raio;
const cheio = Math.min(1, Math.max(0, fracao));
const alvo = circunferencia * (1 - cheio);
return (
);
}
/** Número que chega ao valor em vez de aparecer pronto. */
export function NumeroAnimado({ valor, className = "" }: { valor: number; className?: string }) {
const parado = useReducedMotion();
const vivo = useMotionValue(parado ? valor : 0);
const texto = useTransform(vivo, (v) => Math.round(v).toLocaleString("pt-BR"));
useEffect(() => {
if (parado) {
vivo.set(valor);
return;
}
const controle = animate(vivo, valor, { duration: 0.9, ease: [0.22, 1, 0.36, 1] });
return () => controle.stop();
}, [vivo, valor, parado]);
return {texto};
}
/**
* Uma opção para escolher (plano, pacote): cartão com rádio no canto. A
* escolhida ganha a borda da marca; o botão de ação fica fora, um só para o
* grupo, e diz o que vai acontecer com a opção marcada.
*/
export function Opcao({
selecionada,
aoEscolher,
titulo,
etiqueta,
children,
className = "",
}: {
selecionada: boolean;
aoEscolher: () => void;
titulo: string;
etiqueta?: ReactNode;
children: ReactNode;
className?: string;
}) {
const parado = useReducedMotion();
return (
{/* Título nunca quebra; a etiqueta desce de linha quando não cabe ao lado. */}
{selecionada ? (
) : null}
{titulo}
{etiqueta}
{children}
);
}
/** Etiqueta curta e sem fundo, para não competir com o preço. */
export function Etiqueta({ children }: { children: ReactNode }) {
return {children};
}
/** Preço grande com a unidade pequena ao lado. */
export function Preco({ valor, unidade, className = "" }: { valor: string; unidade: string; className?: string }) {
return (
{valor}
{unidade}
);
}
/** A faixa de ação do painel: resumo da escolha à esquerda, botão à direita. */
export function FaixaDeAcao({ resumo, children }: { resumo: ReactNode; children: ReactNode }) {
return (
);
}