Implemente um componente para convidar uma pessoa para uma equipe. 1. Intenção A pessoa responsável pela equipe precisa convidar alguém com o perfil correto e saber se a tentativa deu certo. 2. Contexto A pessoa já está na página de gestão da equipe. O convite é um bloco dessa página, alinhado à esquerda, sem virar uma tela promocional independente. Será usado em computador, celular e por teclado. 3. Decisões já tomadas E-mail obrigatório. Únicos perfis: Leitor (valor 'leitor', padrão) e Editor (valor 'editor'). Hierarquia: 'Gestão de pessoas' como contexto da página; 'Convidar uma pessoa' como título do bloco; ajuda curta, campos, ação e retorno. Conteúdo até 640px. A partir de 720px de viewport, e-mail e perfil ficam na mesma linha, proporção 2:1; abaixo, empilhar. Ação abaixo à esquerda. Reutilize os tokens fornecidos, sem sombra decorativa, hero, sidebar ou avatar inventado. 4. Critérios de aceite C10. Respeitar a composição e os tokens descritos acima. C3. Durante a espera, informar andamento e impedir chamadas duplicadas, inclusive por Enter e cliques rápidos. C6. Em falha@example.com, preservar campos e permitir nova tentativa; primeira chamada falha e segunda funciona. C1. Vazio/inválido não chama API; erro junto ao e-mail, valor preservado e foco no campo. C2. Leitor vem selecionado; só Leitor e Editor. C4. Sucesso mostra e-mail e perfil efetivamente enviados. C5. existe@example.com explica pessoa já cadastrada, preserva campos e permite corrigir. C7. Tab, Shift+Tab e Enter operam o formulário, com foco visível. Não puxar foco de quem saiu do formulário durante uma espera assíncrona. C8. Labels associados; erro relacionado ao e-mail; aria-invalid quando houver erro; região de status presente desde o início para andamento/sucesso. C9. Em 320px e zoom de 200%, não cortar conteúdo nem gerar rolagem horizontal no formulário. D1 escolhida para este exemplo. Depois de sucesso, ao editar e-mail ou perfil, limpar a confirmação anterior. Teste: enviar novo@example.com com Leitor, aguardar sucesso, alterar para Editor e conferir que a confirmação anterior desaparece. 5. Fora de escopo Backend real, e-mail real, autenticação, autorização de servidor, persistência e redesenho de outras partes do produto. O perfil do exercício não implementa segurança de servidor. Use a base HTML abaixo. Preserve literalmente os tokens, o bloco API SIMULADA e o painel do laboratório, incluindo IDs, cenários, latência e registros de chamadas. Use window.apiConvite({ email, perfil }) para a operação, sem rede ou envio real. Entregue um arquivo HTML completo, com CSS e JavaScript no próprio arquivo, sem dependências, fontes remotas ou instalação. Interface e mensagens em português brasileiro. BASE HTML INTEGRAL: Base inicial | Convite para equipe

Base inicial do exercício

Este arquivo contém os tokens visuais e uma API simulada. O formulário ainda não foi implementado. Use esta mesma base nas duas gerações.

Na aula, abra primeiro as saídas A/B salvas. Para gerar uma nova versão, use o arquivo original e preserve a API, o painel e os tokens. Salve a resposta em outro arquivo.

Implemente aqui o convite de uma pessoa para a equipe.