PricingCards

import {
  PricingPeriodToggle,
  PricingCards,
  PricingTable,
  type PricingPeriod,
} from "@eidondev/acme-ui/blocks";

const [period, setPeriod] = useState<PricingPeriod>("monthly");

<PricingPeriodToggle value={period} onValueChange={setPeriod} annualHint="-20%" />

<PricingCards
  period={period}
  compareLabel="Comparar precios"
  compareHref="#comparar-planes"
  plans={[
    { id: "starter", name: "Starter", price: "$0", priceSuffix: "/mes",
      features: ["1 proyecto", "1.000 requests/mes"], cta: { label: "Empezar gratis" } },
    { id: "pro", name: "Pro", badge: "Popular", highlighted: true,
      price: { monthly: "$29", annual: "$23" }, priceSuffix: "/mes",
      features: ["10 proyectos", "Analytics"], cta: { label: "Elegir Pro" } },
    { id: "business", name: "Business",
      price: { monthly: "$79", annual: "$63" }, priceSuffix: "/mes",
      features: ["Proyectos ilimitados", "SSO / SAML"], cta: { label: "Elegir Business" } },
  ]}
/>

<div id="comparar-planes">
  <PricingTable period={period} plans={tablePlans} sections={sections} />
</div>