// Painel de equipe em KDL demonstrando duas declarações de topo:
//   - `import`: puxa o componente CartaoKdl de outro arquivo .kdl
//   - `style` : carrega uma folha de estilo .gss COM ESCOPO (só vale aqui)
import "CartaoKdl" from="templates/cartao_kdl.kdl"
style "styles/painel_kdl.gss"

// As classes .painel/.titulo/.lista vêm da folha escopada acima e só valem
// no que ESTE componente renderiza diretamente.
Container class="painel" {
    Column class="lista" align=Center spacing=25 {
        Text "Equipe (KDL + .gss escopado)" class="titulo"

        // Cada CartaoKdl é o componente importado; as props viram o contexto
        // dele. O cartão se estiliza por conta própria (atributos inline).
        Column class="lista" {
            CartaoKdl nome="Clara Silva" cargo="Engenheira de Software" inicial="C" cor="#89B4FA"
            CartaoKdl nome="Sophia Martins" cargo="Designer de Interface" inicial="S" cor="#F5C2E7"
            CartaoKdl nome="Mateus Rocha" cargo="Gerente de Produto" inicial="M" cor="#A6E3A1"
        }
    }
}
