{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"pricing-com-tres-planos","type":"registry:block","title":"Pricing com três planos","description":"Toggle mensal/anual, três planos com o do meio em destaque.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":["badge","button","label","switch"],"files":[{"path":"components/blocks/pricing-com-tres-planos.tsx","type":"registry:component","content":"'use client'\n\nimport { useState } from 'react'\nimport { Check } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Switch } from '@/components/ui/switch'\nimport { Label } from '@/components/ui/label'\n\nconst PLANS = [\n  { name: 'Starter', monthly: 97, yearly: 77, desc: 'Para quem está começando.', features: ['1 número de WhatsApp', '2 usuários', 'CRM básico', 'Suporte por e-mail'] },\n  { name: 'Pro', monthly: 297, yearly: 237, desc: 'Para times em crescimento.', features: ['3 números', '10 usuários', 'Automações ilimitadas', 'IA de qualificação', 'Relatórios avançados'], highlight: true },\n  { name: 'Scale', monthly: 797, yearly: 637, desc: 'Para operações grandes.', features: ['Números ilimitados', 'Usuários ilimitados', 'SLA e onboarding', 'API e webhooks', 'Gerente de conta'] },\n]\n\nexport default function PricingTresPlanos() {\n  const [yearly, setYearly] = useState(true)\n  return (\n    <section className=\"w-full px-6 py-20\">\n      <div className=\"mx-auto max-w-6xl\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">Planos simples, sem surpresa</h2>\n          <p className=\"mt-3 text-muted-foreground\">Troque de plano quando quiser. Anual sai 20% mais barato.</p>\n          <div className=\"mt-6 flex items-center justify-center gap-3\">\n            <Label htmlFor=\"billing\" className={!yearly ? 'text-foreground' : 'text-muted-foreground'}>\n              Mensal\n            </Label>\n            <Switch id=\"billing\" checked={yearly} onCheckedChange={(v) => setYearly(Boolean(v))} />\n            <Label htmlFor=\"billing\" className={yearly ? 'text-foreground' : 'text-muted-foreground'}>\n              Anual <Badge variant=\"secondary\" className=\"ml-1\">-20%</Badge>\n            </Label>\n          </div>\n        </div>\n        <div className=\"mt-12 grid gap-6 lg:grid-cols-3\">\n          {PLANS.map((p) => (\n            <div key={p.name} className={`relative flex flex-col rounded-2xl border p-6 ${p.highlight ? 'border-primary bg-card shadow-lg' : 'bg-card'}`}>\n              {p.highlight && <Badge className=\"absolute -top-3 left-6\">Mais escolhido</Badge>}\n              <h3 className=\"text-lg font-medium\">{p.name}</h3>\n              <p className=\"text-sm text-muted-foreground\">{p.desc}</p>\n              <div className=\"mt-6 flex items-baseline gap-1\">\n                <span className=\"text-4xl font-semibold tabular-nums\">R$ {yearly ? p.yearly : p.monthly}</span>\n                <span className=\"text-sm text-muted-foreground\">/mês</span>\n              </div>\n              <Button className=\"mt-6\" variant={p.highlight ? 'default' : 'outline'}>\n                Assinar {p.name}\n              </Button>\n              <ul className=\"mt-6 space-y-2.5 text-sm\">\n                {p.features.map((f) => (\n                  <li key={f} className=\"flex items-start gap-2\">\n                    <Check className=\"mt-0.5 size-4 shrink-0 text-emerald-500\" /> {f}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n"}]}