# WhyChoose

> Componentes / Institucional · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Seção "Por que escolher a Phorte?": chapéu "Diferenciais", título e descrição centrados e quatro diferenciais em grade — Card com o ícone num IconBox, título e frase. Os diferenciais vêm por `itens` (E78), no mesmo formato do FeaturesGrid.

- Função: Institucional
- Também chamado de: diferenciais, por que a Phorte, benefícios, vantagens
- Mora em: `app/components/organisms/WhyChoose.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/WhyChoose](https://phorte-design-system.vercel.app/styleguide/peca/WhyChoose)
- Ficha no Storybook: [components-complex-whychoose](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-whychoose--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/WhyChoose/0](https://phorte-design-system.vercel.app/previa/WhyChoose/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import WhyChoose from '@/app/components/organisms/WhyChoose';

<WhyChoose />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/WhyChoose/0)
2. [Outros diferenciais](https://phorte-design-system.vercel.app/previa/WhyChoose/1)

Na página inicial, depois da vitrine de cursos, para os argumentos institucionais.

### Quando não usar

Para benefícios de um curso numa página de campanha, use o FeaturesGrid. Para números, o StatCard ou o MetricsBanner.

### Faça

- Passe `itens` (`icone`, `titulo`, `descricao`) — o mesmo formato do FeaturesGrid, para trocar uma peça pela outra sem reescrever os dados.
- Mantenha títulos curtos e frases de uma linha.

### Evite

- Mais de quatro diferenciais: a grade é de quatro colunas no computador.

### Anatomia

1. **Título** — Um SectionTitle centrado, com o chapéu "Diferenciais".
2. **Diferencial** — Um Card (E78): o ícone num IconBox `primary` redondo de 64px (E77; o círculo usava o fundo de erro, `--destructive-subtle`), título (`h3`) e frase.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Uma coluna no celular, duas a partir de 768px, quatro a partir de 1024px. |
| Hover | Sombra, e o círculo fica vermelho cheio com ícone branco. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Qualquer interação | Estática: sem links nem foco. |

### Relacionados

- [FeaturesGrid](https://phorte-design-system.vercel.app/styleguide/md/FeaturesGrid.md) — Benefícios de um curso, em campanha.
- [StatCard](https://phorte-design-system.vercel.app/styleguide/md/StatCard.md) — Números em destaque.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `itens` | `Diferencial[]` | `DIFERENCIAIS_PADRAO` | não | Os diferenciais por prop (E78): eram fixos no arquivo. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--background` | #FAFAFA | `bg-background` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |

## Acessibilidade

### Leitor de tela

- Os ícones não têm texto; o sentido está no título de cada diferencial.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

### Achados abertos

- **Hover sem clique.** O círculo muda de cor e a caixa ganha sombra no hover, mas nada é clicável — como no StatCard.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/WhyChoose.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-whychoose--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `fdd10ff` 2026-09-29 — ESTADO: E109 concluida, roteiro final fechado; proximo o merge na main
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/WhyChoose.tsx