// ================================================================
// SEMANA 1 O ÚLTIMO PLANEJAMENTO
// "Se você não sabe onde quer chegar, qualquer caminho serve."
// E qualquer caminho te leva a lugar nenhum.
// ================================================================

// ================================================================
// PASSO 1: Defina o PROBLEMA que você quer resolver
// Não vale problema genérico. Vale problema que DÓI.
// ================================================================

const problema = {
  descricao: "Os alunos do 3º ano passam em média 5h/dia em redes sociais, com impactos na saúde mental e no rendimento escolar.",
  afeta: "estudantes do último ano do Ensino Médio",
  impacto: "ansiedade, depressão, queda no rendimento, isolamento social",
  dados: "pesquisa com 50 colegas mostrou que 85% se sentem ansiosos após 2h de rolagem",
  historia: "A Ana deixou de estudar para o vestibular porque passava 6h por dia no TikTok"
};

// ================================================================
// PASSO 2: Aplique os 4 PILARES para estruturar sua solução
// ================================================================

const pilares = {
  abstracao: {
    oQueEssencial: "Um sistema que monitora e limita o tempo de tela com gamificação",
    oQuePodeEsperar: "Sistema de recomendação de conteúdo saudável, chat comunitário",
    mantra: "Feito é melhor que perfeito. Perfeito é inimigo do feito."
  },
  decomposicao: {
    estrutura: "HTML cabeçalho, dashboard, configurações, rodapé",
    estilo: "CSS cores calmas, tipografia amigável, interface minimalista",
    interatividade: "JS temporizador, bloqueio de apps, relatórios de uso",
    design: "Wireframe no papel antes de codificar",
    conteudo: "Base de dados com atividades alternativas saudáveis"
  },
  reconhecimentoDePadroes: {
    exemplos: "Apps como Forest, Digital Wellbeing, Space",
    oQueFunciona: "Gamificação, feedback visual, recompensas",
    oQueNaoFunciona: "Textão explicativo, interfaces complexas"
  },
  algoritmos: {
    passo1: "Semana 1-2: Planejamento e estrutura HTML",
    passo2: "Semana 3: Estilização CSS",
    passo3: "Semana 4-6: Lógica JS e interatividade",
    passo4: "Semana 7-8: Arrays e funções",
    passo5: "Semana 9: Testes e correções",
    passo6: "Semana 10: Apresentação"
  }
};

// ================================================================
// PASSO 3: Defina o MVP (Produto Mínimo Viável)
// ================================================================

const mvp = {
  obrigatorio: [
    "Dashboard com tempo de tela atual",
    "Botão 'Iniciar Bloqueio' que ativa um temporizador",
    "Exibição de estatísticas (tempo total, média diária)",
    "Design responsivo (funciona no celular)"
  ],
  desejavel: [
    "Histórico de uso diário",
    "Ranking de 'dias de sucesso'",
    "Notificações de alerta"
  ],
  corte: "Gamificação avançada e sistema de recompensas fica para a versão 2.0"
};

// ================================================================
// PASSO 4: Perguntas que vão salvar seu projeto
// ================================================================

const perguntasQueDoem = [
  "Qual é a pergunta que seu projeto responde?",
  "Quem vai usar isso? (E não vale 'todo mundo' todo mundo é ninguém)",
  "O que acontece se o usuário fizer TUDO ERRADO? Seu projeto sobrevive?",
  "Qual é a parte mais difícil de fazer? (Encare ela primeiro)",
  "O que vocês vão fazer se não conseguirem fazer a parte mais difícil?",
  "Por que VOCÊS se importam com isso?"
];

// ================================================================
// PASSO 5: Cultura Digital Por que isso importa?
// ================================================================

const culturaDigital = {
  oQueE: "Não é sobre usar tecnologia. É sobre ENTENDER tecnologia.",
  porQueImporta: "Porque tecnologia não é neutra. Ela reflete valores. Como afirma o RCP-PR, a Cultura Digital envolve 'as relações humanas que são fortemente mediadas pelas tecnologias e comunicações digitais'.",
  oQueVocesVaoFazer: "Construir algo que NÃO controla as pessoas, mas as LIBERTA.",
  desafio: "Seu projeto vai vigiar ou vai proteger? Vai manipular ou vai conscientizar?"
};

console.log("🚀 PLANEJAMENTO CONCLUÍDO. AGORA É MÃO NA MASSA.");
console.log("⚠️ Lembre-se: o planejamento não é o fim é o COMEÇO.");
console.log("🔥 A revolução não vai ser televisionada. Vai ser CODIFICADA.");

<!-- ============================================================
SEMANA 2 HTML: A ESTRUTURA DO ADEUS
"Sem estrutura, o site é uma ameba disforme."
============================================================ -->

<!-- PASSO 1: A ESTRUTURA MÍNIMA OBRIGATÓRIA -->
<!DOCTYPE html>
<!-- ↑ Diz ao navegador: "Isso é HTML5, não brinca comigo" -->
<html lang="pt-BR">
<!-- ↑ lang é para acessibilidade. Leitores de tela usam isso.
O RCP-PR reforça que a acessibilidade é um pilar da Cultura Digital. -->
<head>
  <!-- O <head> é o "backstage" do site. O usuário não vê, mas sem ele o site não funciona. -->
  <meta charset="UTF-8">
  <!-- ↑ Define a codificação de caracteres. Sem isso, acentos viram símbolos estranhos. -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ↑ ESSENCIAL para responsividade. Sem isso, seu site fica horrível no celular. -->
  <title>🚀 Meu Último Projeto A Revolução</title>
  <!-- ↑ O título aparece na aba do navegador. É a primeira impressão. Capriche. -->
  <link rel="stylesheet" href="style.css">
  <!-- ↑ Conecta o CSS. Sem isso, é só texto preto no fundo branco. -->
</head>
<body>
  <!-- ============================================================
  PASSO 2: Use TAGS SEMÂNTICAS
  Não é sobre ser bonito. É sobre ser CORRETO.
  ============================================================ -->
  <header>
    <!-- Cabeçalho: logotipo, título, navegação principal -->
    <h1>🚀 Meu Último Projeto</h1>
    <!-- ↑ Use UM <h1> por página. É o título principal. -->
    <nav>
      <!-- Navegação: o "menu" do site -->
      <ul>
        <li><a href="sobre">Sobre</a></li>
        <li><a href="projeto">Projeto</a></li>
        <li><a href="dashboard">Dashboard</a></li>
        <li><a href="contato">Contato</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <!-- CONTEÚDO PRINCIPAL. Só DEVE haver um <main> por página. -->
    <section id="sobre">
      <h2>📖 Sobre o Projeto</h2>
      <p>Este é o meu projeto final do Ensino Médio. Aqui eu aplico tudo o que aprendi sobre HTML, CSS e JavaScript.</p>
    </section>
    <section id="projeto">
      <h2>🎯 O Projeto</h2>
      <p>Descreva aqui o que seu projeto faz e por que ele é importante.</p>
      <!-- Área interativa (será preenchida pelo JS) -->
      <div id="area-interativa">
        <p>⚠️ Aguardando interação...</p>
      </div>
    </section>
    <section id="dashboard">
      <h2>📊 Dashboard</h2>
      <!-- Aqui vão os dados e estatísticas do projeto -->
      <div id="estatisticas">
        <p>Carregando dados...</p>
      </div>
    </section>
  </main>
  <footer>
    <!-- Rodapé: informações de copyright, contato, links úteis -->
    <p>&copy; 2026 Turma do 3º Ano. A revolução foi codificada.</p>
  </footer>
  <!-- ============================================================
  PASSO 3: Conecte o JavaScript
  O JS fica no final do <body> para não bloquear o carregamento
  ============================================================ -->
  <script src="script.js"></script>
</body>
</html>

<!-- ============================================================
CHECKLIST DO HTML PERFEITO:
[x] DOCTYPE declarado
[x] lang="pt-BR" no html
[x] meta charset="UTF-8"
[x] meta viewport
[x] title descritivo
[x] Pelo menos UM <main>
[x] Tags semânticas (header, nav, section, footer)
[x] labels conectados a inputs (se houver)
[x] alt em imagens (se houver)
[x] Código indentado e comentado
============================================================ -->

/* ================================================================
SEMANA 3 CSS: O ESTILO DA DESPEDIDA
"Primeiro impacto é visual. Faça valer."
================================================================ */

/* ================================================================
PASSO 1: VARIÁVEIS CSS O DESIGN SYSTEM
Defina suas cores e fontes UMA VEZ. Use em TODO LUGAR.
================================================================ */

:root {
  /* Cores principais a identidade visual do projeto */
  --cor-primaria: 2D2D44; /* Roxo escuro sofisticação */
  --cor-secundaria: 6C63FF; /* Roxo vibrante ação */
  --cor-destaque: FF6B6B; /* Vermelho alerta, urgência */
  --cor-sucesso: 4ECDC4; /* Verde-água confiança */
  --cor-fundo: F8F9FA; /* Cinza claro base limpa */
  --cor-texto: 1A1A2E; /* Quase preto legibilidade */

  /* Tipografia a voz do seu projeto */
  --fonte-principal: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-titulo: 'Montserrat', 'Segoe UI', sans-serif;

  /* Espaçamento consistência é tudo */
  --espacamento-padrao: 1rem;
  --espacamento-grande: 2rem;
  --raio-borda: 12px;
  --sombra-padrao: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ================================================================
PASSO 2: RESET Limpe antes de construir
"Um bom arquiteto não constrói sobre terreno sujo."
================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* ↑ ESSENCIAL: faz com que padding e border não aumentem o tamanho do elemento. */
}

/* ================================================================
PASSO 3: ESTILOS GLOBAIS
================================================================ */

body {
  font-family: var(--fonte-principal);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
  padding: var(--espacamento-padrao);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ================================================================
PASSO 4: LAYOUT COM FLEXBOX
"Flexbox é vida. Quem não usa, está preso em 2010."
================================================================ */

header {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  color: white;
  padding: var(--espacamento-grande);
  border-radius: var(--raio-borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--espacamento-grande);
  box-shadow: var(--sombra-padrao);
}

header h1 {
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  letter-spacing: -0.5px;
}

/* ================================================================
PASSO 5: NAVEGAÇÃO
================================================================ */

nav ul {
  display: flex;
  gap: var(--espacamento-padrao);
  list-style: none;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  /* ↑ Pequena animação: o link "sobe" quando o mouse passa. Detalhes que fazem diferença. */
}

/* ================================================================
PASSO 6: SEÇÕES
================================================================ */

main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--espacamento-padrao);
}

section {
  background: white;
  padding: var(--espacamento-grande);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-padrao);
  margin-bottom: var(--espacamento-grande);
}

section h2 {
  font-family: var(--fonte-titulo);
  color: var(--cor-primaria);
  margin-bottom: var(--espacamento-padrao);
  border-bottom: 3px solid var(--cor-secundaria);
  padding-bottom: 0.5rem;
}

/* ================================================================
PASSO 7: RESPONSIVIDADE @media QUERIES
"Seu site tem que funcionar no celular. Ponto."
================================================================ */

@media (max-width: 768px) {
  header {
    flex-direction: column;
    text-align: center;
    gap: var(--espacamento-padrao);
  }

  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  section {
    padding: var(--espacamento-padrao);
  }
}

/* ================================================================
CHECKLIST DO CSS PERFEITO:
[x] Reset com box-sizing: border-box
[x] Variáveis CSS definidas
[x] Layout com Flexbox ou Grid
[x] Pelo menos uma transição ou animação
[x] Pelo menos uma @media query
[x] Cores consistentes (design system)
[x] Código comentado e organizado
================================================================ */

// ================================================================
// SEMANA 4 JAVASCRIPT: A MÁGICA QUE NÃO ACABA
// "HTML é o esqueleto, CSS é a roupa, JS é o CÉREBRO."
// ================================================================

// ================================================================
// PASSO 1: VARIÁVEIS As caixas onde guardamos as coisas
// ================================================================

let nomeDoUsuario = "Visitante"; // string texto
let contadorDeCliques = 0; // number número
const URL_BASE = "https://meusite.com"; // const NÃO muda
const COR_PADRAO = "6C63FF";
let estaLogado = false; // boolean true/false
let listaVazia = []; // array lista (vamos ver na semana 7)

// ================================================================
// PASSO 2: CONSOLE.LOG() Seu melhor amigo
// "Se você não sabe o que está acontecendo, console.log()"
// ================================================================

console.log("🚀 O JavaScript está funcionando!");
console.log("O nome do usuário é:", nomeDoUsuario);
console.log("Contador de cliques:", contadorDeCliques);

// ================================================================
// PASSO 3: FUNÇÕES Receitas que fazem coisas
// ================================================================

// Função que NÃO recebe parâmetros e NÃO retorna nada
function saudacaoSimples() {
  alert("Olá, visitante! Bem-vindo ao projeto.");
}

// Função que RECEBE parâmetros
function saudacaoPersonalizada(nome) {
  let mensagem = "Olá, " + nome + "! Seja bem-vindo!";
  console.log(mensagem);
  return mensagem; // return devolve o valor para quem chamou
}

// Função que faz algo com o DOM (Document Object Model)
function mudarTextoDoBotao() {
  let botao = document.getElementById("botaoPrincipal");
  if (botao) {
    botao.textContent = "Você clicou! 🎉";
    botao.style.backgroundColor = "4ECDC4";
    botao.style.color = "white";
  } else {
    console.error("❌ Botão não encontrado! Verifique o ID.");
  }
}

// ================================================================
// PASSO 4: EXEMPLO PRÁTICO Contador de Cliques
// ================================================================

let contador = 0;

function incrementarContador() {
  contador = contador + 1; // ou contador++
  let display = document.getElementById("displayContador");
  if (display) {
    display.textContent = "Cliques: " + contador;
  }
  console.log("Contador atual:", contador);
}

function resetarContador() {
  contador = 0;
  let display = document.getElementById("displayContador");
  if (display) {
    display.textContent = "Cliques: 0";
  }
  console.log("Contador resetado!");
}

// ================================================================
// PASSO 5: ESTRUTURAS CONDICIONAIS Tomando decisões
// ================================================================

function verificarIdade() {
  let input = document.getElementById("idadeInput");
  if (!input) return;
  let idade = Number(input.value);
  if (isNaN(idade) || idade <= 0) {
    alert("Por favor, digite uma idade válida.");
    return;
  }
  let resultado;
  if (idade < 18) {
    resultado = "Você é menor de idade. A revolução espera por você!";
  } else if (idade >= 18 && idade < 60) {
    resultado = "Você está no auge. A revolução precisa de você AGORA!";
  } else {
    resultado = "Você tem experiência. A revolução precisa da sua sabedoria!";
  }
  let elemento = document.getElementById("resultadoIdade");
  if (elemento) {
    elemento.textContent = resultado;
  }
}

// ================================================================
// PASSO 6: CULTURA DIGITAL Por que isso importa?
// ================================================================

const reflexaoInteratividade = {
  pergunta: "Como a interatividade pode ser usada para manipular?",
  exemplo: "Redes sociais usam 'likes' para prender sua atenção.",
  desafio: "Seu projeto vai usar interatividade para prender ou para libertar?",
  conclusao: "Interatividade é poder. Use com responsabilidade."
};

console.log("✅ JavaScript carregado com sucesso!");
console.log("🔥 A revolução não vai ser televisionada. Vai ser CODIFICADA.");

// ================================================================
// SEMANA 5 DOM: O CONTROLE REMOTO DO FIM
// "O DOM é a árvore. Você é o jardineiro."
// ================================================================

console.log("🌳 DOM carregado. Pronto para manipulação.");

// ================================================================
// PASSO 1: MÉTODOS DE SELEÇÃO Como encontrar elementos
// "Se você não consegue encontrar, você não consegue manipular."
// ================================================================

// 1. getElementById() O MAIS RÁPIDO
const tituloPrincipal = document.getElementById("titulo");

// 2. querySelector() O MAIS FLEXÍVEL
const primeiroBotao = document.querySelector(".botao-principal");
const formulario = document.querySelector("formulario");
const primeiroParagrafo = document.querySelector("p");

// 3. querySelectorAll() PARA VÁRIOS ELEMENTOS
const todosOsBotoes = document.querySelectorAll("button");
console.log(`Encontrados ${todosOsBotoes.length} botões`);

// ================================================================
// PASSO 2: MANIPULAÇÃO DE CLASSES Vestindo o elemento
// ================================================================

function alternarTema() {
  const body = document.querySelector("body");
  if (!body) return;
  body.classList.toggle("tema-escuro");
  console.log("Tema alternado!");
}

function destacarElemento(id) {
  const elemento = document.getElementById(id);
  if (!elemento) {
    console.error(`❌ Elemento "${id}" não encontrado.`);
    return;
  }
  elemento.classList.add("destaque");
  setTimeout(() => {
    elemento.classList.remove("destaque");
  }, 2000);
}

// ================================================================
// PASSO 3: MANIPULAÇÃO DE ESTILOS Mudando a aparência na hora
// ================================================================

function mudarCorFundo(cor) {
  const body = document.querySelector("body");
  if (body) {
    body.style.backgroundColor = cor;
  }
}

function animarBotao(id) {
  const botao = document.getElementById(id);
  if (!botao) return;
  botao.style.transform = "scale(1.1)";
  botao.style.transition = "transform 0.3s ease";
  botao.style.boxShadow = "0 8px 16px rgba(0,0,0,0.2)";
  setTimeout(() => {
    botao.style.transform = "scale(1)";
    botao.style.boxShadow = "none";
  }, 500);
}

// ================================================================
// PASSO 4: CRIAÇÃO DE ELEMENTOS Fazendo do nada
// ================================================================

function adicionarItemNaLista(texto) {
  // PASSO 1: Criar o elemento
  const novoItem = document.createElement("li");
  // PASSO 2: Adicionar conteúdo
  novoItem.textContent = texto;
  novoItem.classList.add("item-lista");
  novoItem.style.padding = "0.5rem";
  // PASSO 3: Encontrar o pai e adicionar
  const lista = document.getElementById("minhaLista");
  if (!lista) {
    console.error("❌ Lista não encontrada!");
    return;
  }
  lista.appendChild(novoItem);
  console.log(`✅ Item "${texto}" adicionado à lista.`);
}

function criarCard(titulo, conteudo) {
  const card = document.createElement("div");
  card.className = "card";
  const tituloEl = document.createElement("h3");
  tituloEl.textContent = titulo;
  const conteudoEl = document.createElement("p");
  conteudoEl.textContent = conteudo;
  const botaoEl = document.createElement("button");
  botaoEl.textContent = "Saiba mais";
  botaoEl.onclick = function() {
    alert(`Você clicou no card: ${titulo}`);
  };
  card.appendChild(tituloEl);
  card.appendChild(conteudoEl);
  card.appendChild(botaoEl);
  return card;
}

function adicionarCardNoContainer() {
  const container = document.getElementById("containerCards");
  if (!container) {
    console.error("❌ Container não encontrado!");
    return;
  }
  const novoCard = criarCard("Revolução Digital", "O futuro é codificado.");
  container.appendChild(novoCard);
}

// ================================================================
// PASSO 5: REMOÇÃO DE ELEMENTOS O poder de destruir
// ================================================================

function removerUltimoItem() {
  const lista = document.getElementById("minhaLista");
  if (!lista) {
    console.error("❌ Lista não encontrada!");
    return;
  }
  if (lista.children.length === 0) {
    alert("A lista já está vazia!");
    return;
  }
  const ultimoItem = lista.lastElementChild;
  lista.removeChild(ultimoItem);
  console.log("🗑️ Último item removido.");
}

function removerElementoPorId(id) {
  const elemento = document.getElementById(id);
  if (!elemento) {
    console.error(`❌ Elemento "${id}" não encontrado.`);
    return;
  }
  elemento.remove(); // Método moderno não precisa do pai
  console.log(`🗑️ Elemento "${id}" removido.`);
}

// ================================================================
// PASSO 6: EXEMPLO PRÁTICO To-Do List Dinâmica
// ================================================================

let tarefas = [];

function adicionarTarefa() {
  const input = document.getElementById("inputTarefa");
  if (!input) return;
  const texto = input.value.trim();
  if (texto === "") {
    alert("Digite uma tarefa!");
    return;
  }
  tarefas.push(texto);
  const lista = document.getElementById("listaTarefas");
  if (!lista) return;
  const item = document.createElement("li");
  item.textContent = texto;
  const btnRemover = document.createElement("button");
  btnRemover.textContent = "✕";
  btnRemover.style.marginLeft = "1rem";
  btnRemover.onclick = function() {
    lista.removeChild(item);
    const index = tarefas.indexOf(texto);
    if (index > -1) {
      tarefas.splice(index, 1);
    }
    console.log("Tarefas restantes:", tarefas);
  };
  item.appendChild(btnRemover);
  lista.appendChild(item);
  input.value = "";
  input.focus();
  console.log(`✅ Tarefa "${texto}" adicionada. Total: ${tarefas.length}`);
}

// ================================================================
// PASSO 7: CULTURA DIGITAL O poder de criar
// ================================================================

const reflexaoDOM = {
  pergunta: "O que significa ter o poder de criar e destruir elementos?",
  reflexao: "Com grandes poderes vêm grandes responsabilidades.",
  desafio: "Como você pode usar esse poder para incluir, não excluir?",
  conclusao: "Criar é revolucionário. Destruir também, quando necessário."
};

console.log("✅ DOM manipulador carregado. Poder ativado.");
console.log("⚠️ Com grandes poderes vêm grandes responsabilidades.");

// ================================================================
// SEMANA 6 EVENTOS: QUANDO O USUÁRIO TOCA NO FIM
// "Detectar → Processar → Reagir. O ciclo da vida digital."
// ================================================================

console.log("👂 Ouvindo eventos. Pronto para reagir.");

// ================================================================
// PASSO 1: addEventListener() A forma REVOLUCIONÁRIA
// ================================================================

// Exemplo 1: Click em um botão (com função anônima)
const botaoAlerta = document.getElementById("botaoAlerta");
if (botaoAlerta) {
  botaoAlerta.addEventListener('click', function() {
    alert("Você clicou no botão! 🚀");
  });
}

// Exemplo 2: Usando uma função nomeada (mais organizado)
function mostrarMensagem() {
  console.log("Botão clicado!");
  const mensagem = document.getElementById("mensagemEvento");
  if (mensagem) {
    mensagem.textContent = "Evento detectado! O botão foi clicado.";
    mensagem.style.color = "6C63FF";
  }
}
const botaoMensagem = document.getElementById("botaoMensagem");
if (botaoMensagem) {
  botaoMensagem.addEventListener('click', mostrarMensagem);
}

// ================================================================
// PASSO 2: O OBJETO EVENT Informações sobre o que aconteceu
// ================================================================

const botaoInfo = document.getElementById("botaoInfo");
if (botaoInfo) {
  botaoInfo.addEventListener('click', function(evento) {
    console.log("Tipo do evento:", evento.type);
    console.log("Elemento alvo:", evento.target);
    console.log("Coordenadas X:", evento.clientX);
    console.log("Coordenadas Y:", evento.clientY);
    const info = document.getElementById("infoEvento");
    if (info) {
      info.innerHTML = `
        Evento: ${evento.type}

        Elemento: ${evento.target.tagName}

        Posição: (${evento.clientX}, ${evento.clientY})
      `;
    }
  });
}

// ================================================================
// PASSO 3: EVENTOS DE TECLADO Quando o usuário digita
// ================================================================

const inputTeclado = document.getElementById("inputTeclado");
if (inputTeclado) {
  // keydown quando a tecla é pressionada
  inputTeclado.addEventListener('keydown', function(evento) {
    console.log(`Tecla pressionada: ${evento.key} (código: ${evento.code})`);
    if (evento.key === 'Enter') {
      evento.preventDefault(); // Impede o comportamento padrão
      const valor = evento.target.value;
      alert(`Você digitou: "${valor}" e pressionou Enter!`);
      evento.target.value = ""; // Limpa o campo
    }
  });
  // keyup quando a tecla é solta
  inputTeclado.addEventListener('keyup', function(evento) {
    const preview = document.getElementById("previewTeclado");
    if (preview) {
      preview.textContent = `Digitando: ${evento.target.value || "(vazio)"}`;
    }
  });
}

// Atalho de teclado global (Ctrl+Shift+R)
document.addEventListener('keydown', function(evento) {
  if (evento.ctrlKey && evento.shiftKey && evento.key === 'R') {
    evento.preventDefault();
    alert("Atalho ativado! Revolução em andamento. 🚀");
  }
});

// ================================================================
// PASSO 4: EVENTOS DE MOUSE Interações com o ponteiro
// ================================================================

const elementoMouse = document.getElementById("elementoMouse");
if (elementoMouse) {
  elementoMouse.addEventListener('mouseover', function() {
    this.style.backgroundColor = "6C63FF";
    this.style.color = "white";
    this.textContent = "🐭 O mouse está AQUI!";
    console.log("Mouse entrou no elemento");
  });
  elementoMouse.addEventListener('mouseout', function() {
    this.style.backgroundColor = "f0f0f0";
    this.style.color = "333";
    this.textContent = "Passe o mouse aqui 👆";
    console.log("Mouse saiu do elemento");
  });
}

// ================================================================
// PASSO 5: EVENTOS DE FORMULÁRIO Quando o usuário envia
// ================================================================

const formulario = document.getElementById("formularioEvento");
if (formulario) {
  formulario.addEventListener('submit', function(evento) {
    evento.preventDefault(); // Impede o recarregamento da página
    console.log("Formulário enviado!");
    const nome = document.getElementById("nomeForm")?.value || "";
    const email = document.getElementById("emailForm")?.value || "";
    if (nome.trim() === "" || email.trim() === "") {
      alert("Preencha todos os campos!");
      return;
    }
    alert(`Formulário enviado com sucesso!\nNome: ${nome}\nEmail: ${email}`);
    formulario.reset();
  });
}

// ================================================================
// PASSO 6: DELEGAÇÃO DE EVENTOS Uma técnica poderosa
// ================================================================

const listaDelegacao = document.getElementById("listaDelegacao");
if (listaDelegacao) {
  listaDelegacao.addEventListener('click', function(evento) {
    const item = evento.target.closest('li');
    if (item) {
      alert(`Você clicou no item: ${item.textContent}`);
      item.style.backgroundColor = "FF6B6B";
      setTimeout(() => {
        item.style.backgroundColor = "";
      }, 500);
    }
  });
}

// ================================================================
// PASSO 7: EXEMPLO PRÁTICO Jogo de Clique
// ================================================================

let pontos = 0;
let jogoAtivo = false;

function iniciarJogo() {
  jogoAtivo = true;
  pontos = 0;
  atualizarPlacar();
  const botaoAlvo = document.getElementById("botaoAlvo");
  if (botaoAlvo) {
    botaoAlvo.style.display = "block";
    botaoAlvo.textContent = "Clique aqui! 🎯";
    botaoAlvo.style.backgroundColor = "4ECDC4";
  }
  console.log("Jogo iniciado!");
}

function clicarAlvo() {
  if (!jogoAtivo) return;
  pontos++;
  atualizarPlacar();
  const botao = document.getElementById("botaoAlvo");
  if (botao) {
    // Move o botão para uma posição aleatória
    const maxX = window.innerWidth - 150;
    const maxY = window.innerHeight - 150;
    const x = Math.random() * maxX;
    const y = Math.random() * maxY;
    botao.style.position = "fixed";
    botao.style.left = x + "px";
    botao.style.top = y + "px";
    // Muda a cor do botão aleatoriamente
    const cores = ["FF6B6B", "4ECDC4", "6C63FF", "FFD93D", "FF8A5C"];
    botao.style.backgroundColor = cores[Math.floor(Math.random() * cores.length)];
  }
}

function atualizarPlacar() {
  const placar = document.getElementById("placarJogo");
  if (placar) {
    placar.textContent = `Pontos: ${pontos}`;
  }
}

function finalizarJogo() {
  jogoAtivo = false;
  const botaoAlvo = document.getElementById("botaoAlvo");
  if (botaoAlvo) {
    botaoAlvo.style.display = "none";
  }
  alert(`Fim de jogo! Você fez ${pontos} pontos! 🏆`);
}

// ================================================================
// PASSO 8: CULTURA DIGITAL A voz do usuário
// ================================================================

const reflexaoEventos = {
  pergunta: "O que significa dar voz ao usuário?",
  reflexao: "Eventos são a ponte entre o humano e a máquina.",
  desafio: "Como você pode usar eventos para criar experiências mais humanas?",
  conclusao: "Interação é diálogo. E diálogo é o que nos torna humanos."
};

console.log("✅ Eventos configurados. O usuário agora tem voz.");
console.log("🎮 Jogo de clique disponível. Use 'iniciarJogo()' para começar.");

// ================================================================
// SEMANA 7 DADOS E ARRAYS: A BIBLIOTECA DO CAOS
// "Dados sem estrutura são ruído. Arrays dão estrutura ao ruído."
// ================================================================

// ================================================================
// PASSO 1: O QUE SÃO ARRAYS?
// Arrays são listas ordenadas de valores. O PRIMEIRO índice é 0.
// ================================================================

// Criando um array vazio
const listaVazia = [];

// Criando um array com valores
const frutas = ["Maçã", "Banana", "Laranja", "Uva"];
// Índices:         0       1         2         3
console.log("Frutas:", frutas);
console.log("Primeira fruta:", frutas[0]); // "Maçã"
console.log("Última fruta:", frutas[frutas.length - 1]); // "Uva"
console.log("Total de frutas:", frutas.length); // 4

// Arrays podem ter diferentes tipos de dados
const misturado = ["Texto", 42, true, null, { nome: "João" }];
console.log("Array misturado:", misturado);

// ================================================================
// PASSO 2: MÉTODOS DE ADIÇÃO Colocando coisas no array
// ================================================================

const tarefas = [];

// push() adiciona no FINAL
tarefas.push("Estudar JavaScript");
tarefas.push("Fazer o projeto");
tarefas.push("Revisar o código");
console.log("Tarefas (após push):", tarefas);
// Resultado: ["Estudar JavaScript", "Fazer o projeto", "Revisar o código"]

// unshift() adiciona no INÍCIO
tarefas.unshift("Tomar café");
console.log("Tarefas (após unshift):", tarefas);
// Resultado: ["Tomar café", "Estudar JavaScript", "Fazer o projeto", "Revisar o código"]

// ================================================================
// PASSO 3: MÉTODOS DE REMOÇÃO Tirando coisas do array
// ================================================================

// pop() remove o ÚLTIMO elemento e o retorna
const ultimaTarefa = tarefas.pop();
console.log("Tarefa removida (pop):", ultimaTarefa);
console.log("Tarefas (após pop):", tarefas);
// Resultado: ["Tomar café", "Estudar JavaScript", "Fazer o projeto"]

// shift() remove o PRIMEIRO elemento e o retorna
const primeiraTarefa = tarefas.shift();
console.log("Tarefa removida (shift):", primeiraTarefa);
console.log("Tarefas (após shift):", tarefas);
// Resultado: ["Estudar JavaScript", "Fazer o projeto"]

// ================================================================
// PASSO 4: MÉTODOS DE MANIPULAÇÃO Mexendo no meio do array
// ================================================================

// splice() remove, adiciona ou substitui elementos
// splice(índice, quantidadeRemover, ...itensAdicionar)
const numeros = [10, 20, 30, 40, 50];
console.log("Numeros original:", numeros);

// Remove 1 elemento a partir do índice 2 (o número 30)
const removido = numeros.splice(2, 1);
console.log("Elemento removido:", removido); // [30]
console.log("Numeros após splice:", numeros); // [10, 20, 40, 50]

// Adicionar elementos no meio
numeros.splice(2, 0, 35, 36);
console.log("Numeros após adição:", numeros); // [10, 20, 35, 36, 40, 50]

// ================================================================
// PASSO 5: PERCORRENDO ARRAYS ForEach e For
// ================================================================

const cores = ["Vermelho", "Azul", "Verde", "Amarelo"];

// forEach() executa uma função para cada item (forma moderna)
console.log("=== forEach ===");
cores.forEach(function(cor, indice) {
  console.log(`Cor ${indice + 1}: ${cor}`);
});

// for loop forma clássica (mais controle, mais flexível)
console.log("=== for loop ===");
for (let i = 0; i < cores.length; i++) {
  console.log(`Índice ${i}: ${cores[i]}`);
}

// for...of forma moderna e simples (menos controle, mais legível)
console.log("=== for...of ===");
for (const cor of cores) {
  console.log(cor);
}

// ================================================================
// PASSO 6: MÉTODOS ÚTEIS Busca, filtro, transformação
// ================================================================

const numeros2 = [5, 12, 8, 130, 44, 8];

// indexOf() encontra o índice de um elemento
const posicao = numeros2.indexOf(8);
console.log(`Índice do 8: ${posicao}`); // 2 (primeiro 8)

// includes() verifica se existe
console.log(`Tem 44? ${numeros2.includes(44)}`); // true
console.log(`Tem 100? ${numeros2.includes(100)}`); // false

// filter() cria um novo array com elementos que passam no teste
const maioresQue10 = numeros2.filter(function(numero) {
  return numero > 10;
});
console.log("Maiores que 10:", maioresQue10); // [12, 130, 44]

// map() transforma cada elemento em algo novo
const dobrados = numeros2.map(function(numero) {
  return numero * 2;
});
console.log("Dobrados:", dobrados); // [10, 24, 16, 260, 88, 16]

// ================================================================
// PASSO 7: ARRAYS DE OBJETOS Dados estruturados de verdade
// ================================================================

const usuarios = [
  { id: 1, nome: "Ana", idade: 17 },
  { id: 2, nome: "Bruno", idade: 18 },
  { id: 3, nome: "Carla", idade: 16 },
  { id: 4, nome: "Daniel", idade: 19 }
];

// Percorrendo e acessando propriedades
usuarios.forEach(usuario => {
  console.log(`${usuario.nome} tem ${usuario.idade} anos`);
});

// Filtrar maiores de idade
const maioresDeIdade = usuarios.filter(usuario => usuario.idade >= 18);
console.log("Maiores de idade:", maioresDeIdade);

// Encontrar um usuário específico
const usuarioEncontrado = usuarios.find(usuario => usuario.id === 3);
console.log("Usuário ID 3:", usuarioEncontrado);

// ================================================================
// PASSO 8: EXEMPLO PRÁTICO Lista de Tarefas com Array
// ================================================================

let listaTarefas = [];

function adicionarTarefa(descricao, prioridade = "normal") {
  const novaTarefa = {
    id: Date.now(),
    descricao: descricao,
    prioridade: prioridade,
    concluida: false,
    dataCriacao: new Date().toLocaleString()
  };
  listaTarefas.push(novaTarefa);
  console.log(`✅ Tarefa adicionada: "${descricao}"`);
  return novaTarefa;
}

function listarTarefas() {
  if (listaTarefas.length === 0) {
    console.log("📭 Nenhuma tarefa cadastrada.");
    return;
  }
  console.log("=== LISTA DE TAREFAS ===");
  listaTarefas.forEach((tarefa, indice) => {
    const status = tarefa.concluida ? "✅" : "⬜";
    console.log(`${indice + 1}. ${status} ${tarefa.descricao} (${tarefa.prioridade})`);
  });
  console.log(`Total: ${listaTarefas.length} tarefas`);
}

function concluirTarefa(id) {
  const tarefa = listaTarefas.find(t => t.id === id);
  if (tarefa) {
    tarefa.concluida = true;
    console.log(`✅ Tarefa "${tarefa.descricao}" concluída!`);
  } else {
    console.log(`❌ Tarefa com ID ${id} não encontrada.`);
  }
}

function removerTarefa(id) {
  const indice = listaTarefas.findIndex(t => t.id === id);
  if (indice !== -1) {
    const removida = listaTarefas.splice(indice, 1)[0];
    console.log(`🗑️ Tarefa "${removida.descricao}" removida.`);
  } else {
    console.log(`❌ Tarefa com ID ${id} não encontrada.`);
  }
}

// ================================================================
// PASSO 9: CULTURA DIGITAL Dados são poder
// ================================================================

const reflexaoArrays = {
  pergunta: "O que acontece com seus dados quando você usa a internet?",
  reflexao: "Empresas coletam, armazenam e vendem seus dados.",
  desafio: "Como você pode usar arrays para proteger, não explorar, dados?",
  conclusao: "Dados são poder. Use esse poder para libertar, não para controlar."
};

console.log("✅ Arrays carregados. Dados organizados.");
console.log("📊 Use as funções para gerenciar tarefas.");

// ================================================================
// SEMANA 8 FUNÇÕES: O EXÉRCITO DO ADEUS
// "Função é uma receita de bolo. Escreva uma vez, use várias."
// ================================================================

console.log("🧠 Funções carregadas. Prontas para serem usadas.");

// ================================================================
// PASSO 1: O QUE SÃO FUNÇÕES?
// Estrutura básica:
// function nomeDaFuncao(parametro1, parametro2) {
//   // corpo da função
//   return resultado;
// }
// ================================================================

// Exemplo 1: Função simples (sem parâmetros, sem retorno)
function saudacao() {
  console.log("Olá, revolucionário! 🚀");
}
saudacao();

// Exemplo 2: Função com parâmetros (sem retorno)
function saudacaoPersonalizada(nome) {
  console.log(`Olá, ${nome}! A revolução precisa de você.`);
}
saudacaoPersonalizada("Ana");
saudacaoPersonalizada("Bruno");

// Exemplo 3: Função com parâmetros e retorno
function calcularDobro(numero) {
  return numero * 2;
}
const resultado = calcularDobro(10);
console.log("O dobro de 10 é:", resultado); // 20

// Exemplo 4: Função com múltiplos parâmetros
function calcularMedia(nota1, nota2, nota3) {
  const soma = nota1 + nota2 + nota3;
  const media = soma / 3;
  return media;
}
const mediaAluno = calcularMedia(7, 8, 9);
console.log("Média do aluno:", mediaAluno);

// ================================================================
// PASSO 2: PARÂMETROS VS ARGUMENTOS
// ================================================================

function saudacaoCompleta(nome, saudacao = "Olá") {
  return `${saudacao}, ${nome}!`;
}
console.log(saudacaoCompleta("Maria")); // "Olá, Maria!"
console.log(saudacaoCompleta("João", "Bem-vindo")); // "Bem-vindo, João!"

function potencia(base, expoente = 2) {
  return Math.pow(base, expoente);
}
console.log(potencia(3)); // 9 (3²)
console.log(potencia(3, 3)); // 27 (3³)

// ================================================================
// PASSO 3: ESCOPO DE VARIÁVEIS Onde as variáveis "vivem"
// ================================================================

let variavelGlobal = "Estou em todo lugar!";

function exemploEscopo() {
  let variavelLocal = "Estou só dentro da função!";
  console.log("Dentro da função:");
  console.log("- Global:", variavelGlobal);
  console.log("- Local:", variavelLocal);
}
exemploEscopo();
console.log("Fora da função:");
console.log("- Global:", variavelGlobal);
// console.log(variavelLocal); // ERRO! variavelLocal não existe aqui

// ================================================================
// PASSO 4: FUNÇÕES COM RETORNO O que elas devolvem
// ================================================================

function calcularIMC(peso, altura) {
  return peso / (altura * altura);
}

function classificarIMC(imc) {
  if (imc < 18.5) return "Abaixo do peso";
  if (imc < 25) return "Peso normal";
  if (imc < 30) return "Sobrepeso";
  if (imc < 35) return "Obesidade grau I";
  if (imc < 40) return "Obesidade grau II";
  return "Obesidade grau III";
}

function avaliarPeso(peso, altura) {
  const imc = calcularIMC(peso, altura);
  const classificacao = classificarIMC(imc);
  return `IMC: ${imc.toFixed(1)} ${classificacao}`;
}
console.log(avaliarPeso(70, 1.75)); // "IMC: 22.9 Peso normal"

// ================================================================
// PASSO 5: FUNÇÕES QUE CHAMAM OUTRAS FUNÇÕES Composição
// ================================================================

function formatarNome(nome) {
  return nome.trim().toUpperCase();
}

function gerarSaudacao(nome) {
  return `Olá, ${formatarNome(nome)}!`;
}

function gerarDespedida(nome) {
  return `Até logo, ${formatarNome(nome)}!`;
}

function interagirComUsuario(nome, acao) {
  const nomeFormatado = formatarNome(nome);
  if (acao === "saudacao") {
    return gerarSaudacao(nomeFormatado);
  } else if (acao === "despedida") {
    return gerarDespedida(nomeFormatado);
  } else {
    return `Olá, ${nomeFormatado}! O que você deseja?`;
  }
}
console.log(interagirComUsuario(" ana ", "saudacao")); // "Olá, ANA!"
console.log(interagirComUsuario(" carlos ", "despedida")); // "Até logo, CARLOS!"

// ================================================================
// PASSO 6: FUNÇÕES ANÔNIMAS E ARROW FUNCTIONS Formas modernas
// ================================================================

// Função anônima (sem nome) atribuída a uma variável
const somar = function(a, b) {
  return a + b;
};
console.log("Soma (anônima):", somar(5, 3));

// Arrow function forma moderna, mais concisa
const multiplicar = (a, b) => {
  return a * b;
};
console.log("Multiplicação (arrow):", multiplicar(5, 3));

// Arrow function com retorno implícito (sem {} e sem return)
const dividir = (a, b) => a / b;
console.log("Divisão (arrow implícita):", dividir(10, 2));

// Arrow function com um parâmetro (pode omitir parênteses)
const quadrado = x => x * x;
console.log("Quadrado:", quadrado(5));

// ================================================================
// PASSO 7: REFATORAÇÃO Transformando código repetido em funções
// ================================================================

// ANTES: Código repetido (problema!)
function antes() {
  const lado1 = 5;
  const area1 = lado1 * lado1;
  console.log("Área 1:", area1);
  const lado2 = 7;
  const area2 = lado2 * lado2;
  console.log("Área 2:", area2);
  const lado3 = 3;
  const area3 = lado3 * lado3;
  console.log("Área 3:", area3);
}

// DEPOIS: Código refatorado (solução!)
function calcularAreaQuadrado(lado) {
  return lado * lado;
}
function depois() {
  const areas = [5, 7, 3];
  areas.forEach((lado, indice) => {
    const area = calcularAreaQuadrado(lado);
    console.log(`Área ${indice + 1}:`, area);
  });
}
console.log("\n--- ANTES DA REFATORAÇÃO ---");
antes();
console.log("\n--- DEPOIS DA REFATORAÇÃO ---");
depois();

// ================================================================
// PASSO 8: EXEMPLO PRÁTICO Sistema de Tarefas com Funções
// ================================================================

let tarefasSistema = [];

function criarTarefa(descricao, prioridade = "normal") {
  const novaTarefa = {
    id: Date.now(),
    descricao: descricao,
    prioridade: prioridade,
    concluida: false,
    dataCriacao: new Date().toLocaleString()
  };
  tarefasSistema.push(novaTarefa);
  return novaTarefa;
}

function listarTarefas(filtro = null) {
  let lista = tarefasSistema;
  if (filtro === "concluidas") {
    lista = tarefasSistema.filter(t => t.concluida);
  } else if (filtro === "pendentes") {
    lista = tarefasSistema.filter(t => !t.concluida);
  } else if (filtro === "alta") {
    lista = tarefasSistema.filter(t => t.prioridade === "alta");
  }
  return lista;
}

function atualizarTarefa(id, novosDados) {
  const tarefa = tarefasSistema.find(t => t.id === id);
  if (!tarefa) return null;
  if (novosDados.descricao) tarefa.descricao = novosDados.descricao;
  if (novosDados.prioridade) tarefa.prioridade = novosDados.prioridade;
  if (novosDados.concluida !== undefined) tarefa.concluida = novosDados.concluida;
  return tarefa;
}

function deletarTarefa(id) {
  const indice = tarefasSistema.findIndex(t => t.id === id);
  if (indice === -1) return false;
  tarefasSistema.splice(indice, 1);
  return true;
}

// ================================================================
// PASSO 9: CULTURA DIGITAL Código colaborativo
// ================================================================

const reflexaoFuncoes = {
  pergunta: "Como funções permitem que equipes trabalhem juntas?",
  reflexao: "Cada pessoa pode escrever uma função diferente.",
  desafio: "Como você pode dividir o trabalho do seu projeto em funções?",
  conclusao: "Funções são a base da colaboração. E colaboração é a base da revolução."
};

console.log("✅ Funções carregadas. Exército pronto para a batalha.");

// ================================================================
// SEMANA 9 DEBUG E POLIMENTO: A BATALHA FINAL
// "Debug é o processo de remover bugs. Programação é o processo de colocá-los."
// ================================================================

console.log("🐛 Caçadores de bugs, preparem-se!");

// ================================================================
// PASSO 1: TIPOS DE ERRO Conheça seu inimigo
// ================================================================

// 1. ERRO DE SINTAXE Você escreveu algo errado
// Exemplo: falta de fechamento de parênteses
// function minhaFuncao() { // ← ESSA LINHA DARIA ERRO
//   console.log("Olá"
// } // ← Faltou fechar o parêntese do console.log

// 2. ERRO DE REFERÊNCIA Você usou algo que não existe
function exemploReferencia() {
  try {
    console.log(variavelInexistente); // ReferenceError!
  } catch (erro) {
    console.error("❌ Erro de referência:", erro.message);
    console.log("💡 Solução: A variável não foi declarada.");
  }
}
exemploReferencia();

// 3. ERRO DE LÓGICA O código roda, mas faz a coisa ERRADA
function calcularMediaErrada(notas) {
  let soma = 0;
  for (let i = 0; i <= notas.length; i++) { // <= é o problema!
    soma += notas[i];
  }
  return soma / notas.length; // Vai dar NaN ou valor errado
}
// Versão corrigida:
function calcularMediaCorreta(notas) {
  let soma = 0;
  for (let i = 0; i < notas.length; i++) {
    soma += notas[i];
  }
  return soma / notas.length;
}

// 4. ERRO DE RUNTIME O código quebra durante a execução
function dividirPorZero() {
  try {
    const objeto = null;
    console.log(objeto.propriedade); // TypeError!
  } catch (erro) {
    console.error("❌ Erro de runtime:", erro.message);
    console.log("💡 Solução: Verifique se o objeto não é null antes de acessar propriedades.");
  }
}
dividirPorZero();

// ================================================================
// PASSO 2: FERRAMENTAS DE DEBUG O arsenal do caçador
// ================================================================

// 1. console.log() O MAIS USADO
console.log("🔍 Isso é um log normal.");
console.warn("⚠️ Isso é um aviso.");
console.error("❌ Isso é um erro.");
console.info("ℹ️ Isso é uma informação.");

// 2. console.table() Mostra arrays/objetos em tabela (MUITO útil)
const usuariosDebug = [
  { nome: "Ana", idade: 17 },
  { nome: "Bruno", idade: 18 },
  { nome: "Carla", idade: 16 }
];
console.table(usuariosDebug);

// 3. console.group() Agrupa logs relacionados
console.group("🔍 Debug da Função Soma");
console.log("Parâmetros recebidos:", 5, 3);
console.log("Resultado calculado:", 5 + 3);
console.log("Resultado esperado:", 8);
console.groupEnd();

// 4. debugger Pausa a execução (se o DevTools estiver aberto)
function funcaoComDebugger(a, b) {
  debugger; // A execução PARA aqui. Você pode inspecionar variáveis.
  const resultado = a + b;
  console.log("Resultado:", resultado);
  return resultado;
}

// 5. try...catch Captura erros graciosamente
function executarComSeguranca(funcao) {
  try {
    return funcao();
  } catch (erro) {
    console.error("❌ Algo deu errado:", erro.message);
    console.log("💡 Mas não se preocupe o programa continua!");
    return null;
  }
}
const resultadoSeguro = executarComSeguranca(() => {
  return variavelQueNaoExiste;
});
console.log("Resultado seguro:", resultadoSeguro);

// ================================================================
// PASSO 3: ESTRATÉGIAS DE DEBUG Como encontrar o bug
// ================================================================

function encontrarBug(notas) {
  console.log("🔍 PASSO 1: Verificando entrada:", notas);
  if (!Array.isArray(notas) || notas.length === 0) {
    console.warn("⚠️ Lista de notas inválida!");
    return 0;
  }
  let soma = 0;
  console.log("🔍 PASSO 2: Iniciando soma...");
  for (let i = 0; i < notas.length; i++) {
    console.log(` - Adicionando notas[${i}] = ${notas[i]}`);
    soma += notas[i];
  }
  console.log("🔍 PASSO 3: Soma total =", soma);
  const media = soma / notas.length;
  console.log("🔍 PASSO 4: Média calculada =", media);
  return media;
}

// ================================================================
// PASSO 4: VALIDAÇÃO DE DADOS Prevenindo bugs
// ================================================================

function validarNumero(valor, nome = "valor") {
  if (typeof valor !== "number") {
    throw new Error(`${nome} deve ser um número. Recebido: ${typeof valor}`);
  }
  if (isNaN(valor)) {
    throw new Error(`${nome} não pode ser NaN (Not a Number)`);
  }
  if (!isFinite(valor)) {
    throw new Error(`${nome} não pode ser infinito`);
  }
  return true;
}

function processarDadosSeguro(nome, idade) {
  try {
    if (typeof nome !== "string" || nome.trim() === "") {
      throw new Error("Nome deve ser uma string não vazia");
    }
    validarNumero(idade, "Idade");
    if (idade < 0 || idade > 150) {
      throw new Error("Idade deve estar entre 0 e 150 anos");
    }
    return `Usuário ${nome} tem ${idade} anos. Válido! ✅`;
  } catch (erro) {
    console.error("❌ Erro de validação:", erro.message);
    return null;
  }
}
console.log(processarDadosSeguro("Ana", 17)); // ✅
console.log(processarDadosSeguro("", 17)); // ❌
console.log(processarDadosSeguro("Bruno", -5)); // ❌

// ================================================================
// PASSO 5: REFATORAÇÃO Melhorando o código
// ================================================================

// ANTES: Código confuso, difícil de entender
function antesRefatoracao(array) {
  let a = 0;
  for (let i = 0; i < array.length; i++) {
    if (array[i] > 0) {
      a = a + array[i];
    }
  }
  let b = a / array.length;
  return b;
}

// DEPOIS: Código claro, cada parte faz uma coisa
function calcularMediaPositivos(numeros) {
  const positivos = numeros.filter(num => num > 0);
  if (positivos.length === 0) return 0;
  const soma = positivos.reduce((acumulador, num) => acumulador + num, 0);
  return soma / positivos.length;
}
console.log("Média dos positivos:", calcularMediaPositivos([-5, 10, -3, 8, 12]));

// ================================================================
// PASSO 6: CHECKLIST DE POLIMENTO O que revisar antes de lançar
// ================================================================

const checklistPolimento = {
  codigo: [
    "✅ Removeu todos os console.log() de debug (ou deixou apenas os importantes)?",
    "✅ Nomes de variáveis e funções são claros e descritivos?",
    "✅ Código está indentado e organizado?",
    "✅ Não há código comentado (morto) que deveria ser removido?"
  ],
  design: [
    "✅ O site funciona em celular (responsividade)?",
    "✅ As cores têm contraste suficiente (acessibilidade)?",
    "✅ As fontes são legíveis (tamanho mínimo 16px)?",
    "✅ Os botões são grandes o suficiente para clicar (mínimo 44px)?"
  ],
  usabilidade: [
    "✅ O usuário sabe o que fazer quando entra no site?",
    "✅ Há feedback visual para cada ação do usuário?",
    "✅ Os erros são explicados de forma amigável?"
  ],
  acessibilidade: [
    "✅ As imagens têm alt text?",
    "✅ O HTML usa tags semânticas?",
    "✅ O site pode ser navegado pelo teclado (sem mouse)?"
  ]
};

console.log("✅ Debug finalizado. Código polido e pronto.");
console.log("📋 Use o checklist antes de apresentar!");

// ================================================================
// SEMANA 10 LANÇAMENTO OFICIAL: O MUNDO VAI VER
// "O que importa não é o código. É a história que você tem para contar."
// ================================================================

console.log("🎤 Modo apresentação ativado. Preparem-se para brilhar.");

// ================================================================
// PASSO 1: PREPARAÇÃO PARA O PITCH O roteiro da apresentação
// ================================================================

const estruturaPitch = {
  abertura: "Olá, somos [NOME DO GRUPO] e criamos [NOME DO PROJETO].",
  problema: "O problema que identificamos foi [PROBLEMA REAL com dados e história].",
  solucao: "Nossa solução é [DESCRIÇÃO DA SOLUÇÃO o que faz e como funciona].",
  demonstracao: "Vamos demonstrar como funciona ao vivo.",
  impacto: "O impacto que queremos gerar é [IMPACTO DESEJADO quem vai mudar e como].",
  agradecimento: "Obrigado pela atenção. Estamos abertos a perguntas."
};
console.log("🎤 Estrutura do pitch carregada.");

// ================================================================
// PASSO 2: GUIAS DE APRESENTAÇÃO Dicas para os apresentadores
// ================================================================

const dicasApresentacao = {
  postura: "Fique em pé. Olhe para a plateia. Respire fundo. Você é o dono da sala.",
  voz: "Fale devagar. Projete a voz. Pausas são poderosas use-as para criar suspense.",
  demonstracao: "Mostre o projeto funcionando. Se algo der errado, respire e continue. O imprevisto faz parte do show.",
  perguntas: "Escute a pergunta completa. Pense antes de responder. Não invente se não souber diga 'não sei, mas vou descobrir'.",
  tempo: "3 minutos é pouco. Seja direto. Corte o que não é essencial. O tempo é seu inimigo vença-o.",
  paixao: "Mostre que você se importa. Paixão é contagiante. Se você não acredita no seu projeto, ninguém vai acreditar."
};
console.table(dicasApresentacao);

// ================================================================
// PASSO 3: AUTOAVALIAÇÃO Refletindo sobre o processo
// ================================================================

function autoavaliacao() {
  console.log("\n📝 AUTOAVALIAÇÃO DO BIMESTRE");
  console.log("==============================");
  const perguntas = [
    "1. O que você aprendeu neste bimestre que não sabia antes?",
    "2. Qual foi o maior desafio que você enfrentou?",
    "3. Como você superou esse desafio?",
    "4. O que você faria diferente se pudesse começar de novo?",
    "5. Qual parte do projeto você mais se orgulha?",
    "6. Como você se sente agora em relação à programação?",
    "7. O que você vai levar deste projeto para sua vida?",
    "8. Você se vê fazendo algo assim no futuro?"
  ];
  perguntas.forEach(pergunta => {
    console.log(`\n${pergunta}`);
    console.log("Resposta: [ESCREVA AQUI SUA REFLEXÃO]");
    console.log("-".repeat(50));
  });
  console.log("\n📊 Nota para si mesmo (0-10): [____]");
  console.log("Justificativa da nota: [ESCREVA AQUI]");
}

// ================================================================
// PASSO 4: A GRANDE ESTREIA Roteiro da apresentação
// ================================================================

function roteiroApresentacao() {
  console.log("\n🎬 ROTEIRO DA APRESENTAÇÃO");
  console.log("==========================");
  console.log("\n🔹 ABERTURA (30 segundos)");
  console.log("- Cumprimente a plateia");
  console.log("- Apresente seu grupo");
  console.log("- Diga o nome do projeto");
  console.log("- Faça uma pergunta que prende a atenção (um gancho emocional)");
  console.log("\n🔹 O PROBLEMA (30 segundos)");
  console.log("- Qual problema vocês identificaram?");
  console.log("- Por que esse problema é importante? (use dados, histórias)");
  console.log("- Quem ele afeta? (público-alvo específico)");
  console.log("\n🔹 A SOLUÇÃO (30 segundos)");
  console.log("- O que vocês criaram? (descrição simples)");
  console.log("- Como funciona? (explicação em alto nível)");
  console.log("- Quais tecnologias usaram? (HTML, CSS, JS)");
  console.log("\n🔹 DEMONSTRAÇÃO (60 segundos) O MOMENTO DA VERDADE");
  console.log("- Mostre o projeto funcionando AO VIVO");
  console.log("- Destaque as funcionalidades principais");
  console.log("- Mostre um caso de uso real");
  console.log("- SE DER ERRADO: respire, continue, mostre que você sabe lidar");
  console.log("\n🔹 IMPACTO E APRENDIZADO (30 segundos)");
  console.log("- Qual o impacto esperado? (na escola, na comunidade, na vida das pessoas)");
  console.log("- O que vocês aprenderam com o processo?");
  console.log("- Como isso mudou vocês?");
  console.log("\n🔹 FECHAMENTO (30 segundos)");
  console.log("- Recapitule os pontos principais");
  console.log("- Agradeça a atenção");
  console.log("- Abra para perguntas (e NÃO diga 'perguntas?' aceite-as como parte do show)");
  console.log("\n⏱️ TOTAL: 3 MINUTOS");
  console.log("⚠️ ENSAIE! TREINE! O ensaio é o que separa o profissional do amador.");
}

// ================================================================
// PASSO 5: PERGUNTAS FREQUENTES Prepare-se para a banca
// ================================================================

const perguntasFrequentes = [
  {
    pergunta: "Por que vocês escolheram esse problema?",
    dica: "Fale sobre a relevância e o impacto real do problema. Conte a história que motivou vocês."
  },
  {
    pergunta: "Qual foi a maior dificuldade técnica?",
    dica: "Seja honesto. Mostre que vocês aprenderam com os desafios. A jornada é mais interessante que o destino."
  },
  {
    pergunta: "O que vocês fariam diferente?",
    dica: "Reflita sobre o processo. Ninguém é perfeito. O importante é aprender e melhorar."
  },
  {
    pergunta: "Como isso pode ser usado na prática?",
    dica: "Dê um exemplo concreto. Mostre que vocês pensaram no usuário final."
  },
  {
    pergunta: "O que vocês mais aprenderam com o projeto?",
    dica: "Conte uma história. Aprendizado é mais interessante que código. Mostre crescimento."
  },
  {
    pergunta: "Se tivessem mais tempo, o que adicionariam?",
    dica: "Mostre que vocês têm visão de futuro. Um projeto nunca está 100% pronto e isso é OK."
  }
];
console.log("\n❓ Prepare-se para as perguntas:");
perguntasFrequentes.forEach(p => {
  console.log(`\nP: ${p.pergunta}`);
  console.log(`Dica: ${p.dica}`);
});

// ================================================================
// PASSO 6: CELEBRAÇÃO Reconhecendo a jornada
// ================================================================

function celebrar() {
  console.log("\n🎉🎊 PARABÉNS! 🎊🎉");
  console.log("=".repeat(50));
  console.log("\nVocês chegaram ao fim de uma jornada incrível!");
  console.log("Não importa se o código tem bugs.");
  console.log("Não importa se o design não ficou perfeito.");
  console.log("O que importa é que VOCÊS FIZERAM.");
  console.log("\nVocês construíram algo do zero.");
  console.log("Vocês aprenderam HTML, CSS e JavaScript.");
  console.log("Vocês planejaram, executaram, erraram e aprenderam.");
  console.log("Vocês são programadores. E programadores mudam o mundo.");
  console.log("\n🚀 O mundo digital nunca mais será o mesmo.");
  console.log("E vocês nunca mais serão os mesmos.");
  console.log("\nA revolução foi codificada.");
  console.log("E vocês foram os criadores.");
  console.log("\n" + "=".repeat(50));
  console.log("🏁 FIM DA JORNADA MAS A REVOLUÇÃO CONTINUA.");
}
console.log("🎤 Apresentação carregada. Pronto para brilhar.");

// ================================================================
// BÔNUS: A frase que você vai ouvir no futuro
// ================================================================

const frasesDoFuturo = [
  "Lembra quando a gente não sabia nem o que era HTML?",
  "Eu nunca imaginei que seria capaz de fazer isso.",
  "O que a gente aprendeu nesse bimestre mudou minha vida.",
  "Eu quero fazer mais projetos assim.",
  "Programar é muito mais legal do que eu pensava.",
  "Eu vou levar isso para a faculdade.",
  "A gente construiu isso. A GENTE."
];
console.log("\n💬 Frases que vocês vão ouvir nos próximos anos:");
frasesDoFuturo.forEach((frase, i) => {
  console.log(`${i + 1}. "${frase}"`);
});