# Pricing

> Section pricing 3-tier ready-to-use — title + subtitle + grid 3 tiers với featured tier highlighted. Self-contained cho landing.

**Archetype mapping:** C (Landing) — section bắt buộc cho landing có offer/subscription.

## API

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `ReactNode` | — | Heading section |
| `subtitle` | `ReactNode` | — | Subheading |
| `tiers` | `PricingTier[]` | required | Mảng tiers (lý tưởng 3, nhưng grid responsive với bất kỳ số) |
| `className` | `string` | — | Override section |

### `PricingTier`

| Field | Type | Description |
|---|---|---|
| `name` | `string` | Tên gói (vd "Basic", "Pro") |
| `price` | `ReactNode` | Giá (text-4xl font-bold tab-num) — accept ReactNode để format custom |
| `period` | `string?` | Đơn vị thời gian (vd "tháng", "năm") — hiển thị sau `/` |
| `description` | `string?` | Mô tả 1 dòng dưới tên |
| `features` | `string[]` | Danh sách feature — mỗi item có icon check xanh |
| `cta` | `{ label, href }` | Button CTA cuối card |
| `featured` | `boolean?` | Highlight tier (border-primary + ring + shadow-lg, CTA filled) |
| `badge` | `string?` | Pill badge phía trên card (vd "Phổ biến", "Tiết kiệm 20%") |

## Variants

- **Featured tier**: bg-surface + border-primary + ring-1 + shadow-lg, CTA bg-primary
- **Standard tier**: bg-surface + border-border, CTA outlined

Layout grid `md:grid-cols-3` mặc định — tự stack vertical mobile.

## Composition

Standalone — không có sub-component. Tier là plain object.

## States

- **Default tier**: standard style
- **Featured**: full highlight + badge optional
- **Hover CTA**: bg-primary-hover (featured) hoặc bg-surface-2 (standard)

## Usage

```tsx
import { Pricing } from '@cowork/ui';

<Pricing
  title="Chọn gói phù hợp với bạn"
  subtitle="Linh hoạt — đổi gói bất cứ lúc nào"
  tiers={[
    {
      name: 'Trải nghiệm',
      price: '299K',
      period: 'buổi',
      description: 'Lớp đơn dùng thử',
      features: ['1 buổi Reformer', 'HLV cá nhân', 'Linh hoạt giờ học'],
      cta: { label: 'Đặt lớp', href: '/booking?plan=trial' },
    },
    {
      name: 'Gói 10 buổi',
      price: '2.5M',
      period: 'gói',
      description: 'Phổ biến nhất — tiết kiệm 17%',
      features: ['10 buổi Reformer', 'Hạn 3 tháng', 'Chuyển 1 lần', 'Đặt trước 7 ngày'],
      cta: { label: 'Mua gói', href: '/checkout?plan=10' },
      featured: true,
      badge: 'Phổ biến',
    },
    {
      name: 'Membership 6 tháng',
      price: '12M',
      period: '6 tháng',
      description: 'Unlimited cho người tập đều',
      features: ['Unlimited lớp', '6 tháng', 'Ưu đãi event member', 'Refund 30 ngày'],
      cta: { label: 'Đăng ký', href: '/checkout?plan=member' },
    },
  ]}
/>
```

## Real-world example

- KHI Wellness pricing page: 3 tier (Trial / Gói 10 / Membership) — featured là Gói 10 vì revenue cao nhất.
- A-Kryphan Cowork DNA landing: 3 tier service (Starter / Pro / Enterprise) — featured Pro.
- An Nhien chưa dùng (e-commerce không subscription) — có thể dùng cho gift card tiers tương lai.

## Accessibility

- CTA `<a>` link native — keyboard accessible
- Feature list `<ul>` semantic
- Check icon SVG có color-coded (text-success) — không phải duy nhất tín hiệu vì có text bên cạnh
- Badge là `<span>` text — screen reader đọc
- Featured tier có ring color → contrast OK

## Responsive behavior

- Container `max-w-7xl px-4 md:px-6 py-16 md:py-24`
- Grid `grid-cols-1 md:grid-cols-3 gap-6` — stack mobile, 3-col desktop
- Tier padding `p-6 md:p-8` responsive
- Title `text-3xl md:text-4xl`
- Mobile: featured tier vẫn nổi bật vì có shadow + ring kể cả khi stack vertical

## Related

- [[FAQ]] — section sau Pricing để answer purchase objections
- [[Hero]] — section trước Pricing trong landing flow
- [[Card]] — primitive cơ bản, Pricing tier là specialization

## Source

`react/src/organisms/Pricing.tsx`