Pricing

Tabela de preços com toggle mensal/anual.

---

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Badge, Button, Switch } from '@halfbyte-labs/maka'

const annual   = ref(false)
const proPrice = computed(() => annual.value ? 'R$79' : 'R$99')
</script>

<template>
  <section class="pricing">
    <header>
      <Badge variant="lime">Planos</Badge>
      <h2>Simples. Transparente. Justo.</h2>

      <div class="toggle">
        <span>Mensal</span>
        <Switch v-model="annual" />
        <span>Anual</span>
        <Badge v-if="annual" variant="lime">-20%</Badge>
      </div>
    </header>

    <div class="grid">
      <!-- Starter, Pro (highlight), Team -->
      <PricingCard
        v-for="plan in plans"
        :key="plan.name"
        v-bind="plan"
        :price="plan.dynamic ? proPrice : plan.price"
      />
    </div>
  </section>
</template>