// ============================================================
// SEMANA 1 O PLANEJAMENTO DA REVOLUÇÃO
// "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 2º ano passam em média 4h/dia em redes sociais sem filtrar informações",
  afeta: "estudantes da minha escola",
  impacto: "desinformação, ansiedade, queda no rendimento escolar",
  dados: "pesquisa informal com 30 colegas mostrou que 80% não verificam fontes",
  // 👆 Se não tem dado, não tem problema. Se não tem história, não tem dor.
  historia: "A Maria quase reprovou porque acreditou numa fake news sobre o Enem"
};

// ============================================================
// PASSO 2: Aplique os 4 PILARES para estruturar sua solução
// ============================================================
const pilares = {
  abstracao: {
    oQueEssencial: "Um sistema que mostra se uma notícia é confiável ou não",
    oQuePodeEsperar: "Sistema de recomendação, chat comunitário, gamificação",
    // Cortar dói. Mas é necessário.
    // Um MVP não é um projeto incompleto é um projeto COMPLETO na sua versão mais simples.
    mantra: "Feito é melhor que perfeito. Perfeito é inimigo do feito."
  },
  decomposicao: {
    estrutura: "HTML cabeçalho, formulário, resultados, rodapé",
    estilo: "CSS cores que transmitem confiança, tipografia limpa",
    interatividade: "JS verificar fonte, mostrar resultado, contador de verificações",
    design: "Wireframe no papel antes de codificar",
    conteudo: "Base de dados com fontes confiáveis e não confiáveis"
  },
  reconhecimentoDePadroes: {
    exemplos: "Sites como 'Fake News Checker', 'Lupa', 'Aos Fatos'",
    oQueFunciona: "Mostrar a fonte original, dar selo de confiabilidade",
    oQueNaoFunciona: "Textão explicativo que ninguém lê",
    // 👆 Aprenda com os erros dos outros. É mais barato.
    licao: "Design não é sobre ser bonito. É sobre ser INTENCIONAL."
  },
  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: [
    "Página com formulário para inserir link da notícia",
    "Botão 'Verificar' que executa a análise",
    "Exibição do resultado (confiável / não confiável / duvidoso)",
    "Design responsivo (funciona no celular)"
  ],
  desejavel: [
    "Histórico de verificações",
    "Compartilhamento do resultado",
    "Ranking de fontes mais confiáveis"
  ],
  corte: "Gamificação e sistema de pontos isso fica para a versão 2.0",
  // 👆 Cortar dói. Mas é necessário.
  // Um MVP não é um projeto incompleto é um projeto COMPLETO na sua versão mais simples.
};

// ============================================================
// PASSO 4: Perguntas que vão salvar seu projeto
// Responda isso com seu grupo. Sem enrolação.
// ============================================================
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?",
  // 👆 Plano B não é fraqueza. É inteligência.
  "Por que VOCÊS se importam com isso? (Se não for por paixão, desistam agora)"
];

// ============================================================
// PASSO 5: Cultura Digital Por que isso importa?
// ============================================================
const culturaDigital = {
  // A BNCC define Cultura Digital como a capacidade de
  // "utilizar e criar tecnologias digitais de informação e comunicação
  // de forma crítica, significativa, reflexiva e ética"
  oQueE: "Não é sobre usar tecnologia. É sobre ENTENDER tecnologia.",
  porQueImporta: "Porque tecnologia não é neutra. Ela reflete valores.",
  oQueVocesVaoFazer: "Construir algo que NÃO controla as pessoas, mas as LIBERTA.",
  // 👆 Isso é revolucionário. E é por isso que vocês estão aqui.
  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 DA RESISTÊNCIA
"Sem estrutura, o site é uma ameba disforme."
============================================================ -->

<!-- ============================================================
PASSO 1: A ESTRUTURA MÍNIMA OBRIGATÓRIA
Todo site precisa disso. Não é opcional. É lei.
============================================================ -->
<!DOCTYPE html>
<!-- ↑ Diz ao navegador: "Isso é HTML5, não brinca comigo" -->
<html lang="pt-BR">
<!-- ↑ lang é para acessibilidade. Leitores de tela usam isso.
Se você não coloca, você está excluindo alguém. -->
<head>
  <!-- ========================================================
  O <head> é o "backstage" do site. O usuário não vê,
  mas sem ele o site não funciona direito.
  ======================================================== -->
  <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>🔍 VerificaFake A Revolução Digital</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>
  <!-- ========================================================
  O <body> é onde TUDO que o usuário vê vai estar.
  É o palco. O resto é bastidor.
  ======================================================== -->

  <!-- ============================================================
  PASSO 2: Use TAGS SEMÂNTICAS
  Não é sobre ser bonito. É sobre ser CORRETO.
  ============================================================ -->
  <header>
    <!-- Cabeçalho: logotipo, título, navegação principal -->
    <h1>🔍 VerificaFake</h1>
    <!-- ↑ Use UM <h1> por página. É o título principal.
    O Google usa isso para entender do que a página trata. -->
    <nav>
      <!-- Navegação: o "menu" do site -->
      <ul>
        <li><a href="sobre">Sobre</a></li>
        <li><a href="verificar">Verificar</a></li>
        <li><a href="historico">Histórico</a></li>
        <li><a href="contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- CONTEÚDO PRINCIPAL.
    Só DEVE haver um <main> por página.
    É o coração do site. -->
    <section id="sobre">
      <!-- <section> é para agrupar conteúdo relacionado -->
      <h2>Sobre o Projeto</h2>
      <p>Nosso projeto ajuda você a identificar se uma notícia é confiável ou não.</p>
    </section>

    <section id="verificar">
      <h2>Verificar Notícia</h2>
      <form id="formVerificacao">
        <!-- action="" por enquanto. Depois a gente mexe. -->
        <label for="urlNoticia">Cole o link da notícia:</label>
        <!-- ↑ label é ESSENCIAL para acessibilidade.
        O "for" conecta ao input pelo ID. -->
        <input type="url" id="urlNoticia" placeholder="https://..." required>
        <!-- ↑ type="url" valida se é uma URL.
        required impede envio vazio. -->
        <button type="submit">Verificar</button>
      </form>
      <div id="resultado">
        <!-- O resultado da verificação vai aparecer aqui -->
        <p>⚠️ Aguardando verificação...</p>
      </div>
    </section>

    <section id="historico">
      <h2>Histórico de Verificações</h2>
      <ul id="listaHistorico">
        <li>Nenhuma verificação ainda.</li>
      </ul>
    </section>
  </main>

  <footer>
    <!-- Rodapé: informações de copyright, contato, links úteis -->
    <p>&copy; 2026 Turma do 2º Ano. A revolução será codificada.</p>
    <!-- &copy; é o símbolo de copyright.
    Pequeno detalhe que faz diferença. -->
  </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
[x] alt em imagens (se houver)
[x] Código indentado e comentado
[x] Estrutura que conta uma história
============================================================ -->

/* ================================================================
SEMANA 3 CSS: O ESTILO DA REVOLUÇÃO
"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
================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* ↑ ESSENCIAL: faz com que padding e border não aumentem o tamanho do elemento.
  Sem isso, seu layout vai quebrar. SEMPRE. */
}

/* ================================================================
PASSO 3: ESTILOS GLOBAIS
================================================================ */
body {
  font-family: var(--fonte-principal);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
  /* ↑ Espaçamento entre linhas.
  Leitura confortável = 1.5 a 1.8. Menos que isso é sufocante. */
  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));
  /* ↑ Gradiente: de uma cor para outra.
  Dá profundidade sem precisar de imagem. */
  color: white;
  padding: var(--espacamento-grande);
  border-radius: var(--raio-borda);
  display: flex;
  justify-content: space-between;
  /* ↑ Espaça os itens: título de um lado, nav do outro */
  align-items: center;
  /* ↑ Alinha verticalmente ao centro */
  flex-wrap: wrap;
  /* ↑ Permite que os itens quebrem para a linha de baixo em telas pequenas */
  margin-bottom: var(--espacamento-grande);
  box-shadow: var(--sombra-padrao);
}

header h1 {
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  /* ↑ Use REM, não PX. REM é relativo ao tamanho da fonte do navegador.
  Isso respeita as preferências de acessibilidade do usuário. */
  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);
}

/* ================================================================
PASSO 6: 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);
  }
  button {
    align-self: stretch;
  }
}

/* ================================================================
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
[x] Design que conta uma história
================================================================ */

// ================================================================
// SEMANA 4 JAVASCRIPT: A MÁGICA DA INTERATIVIDADE
// "HTML é o esqueleto, CSS é a roupa, JS é o CÉREBRO."
// ================================================================

// ================================================================
// PASSO 1: VARIÁVEIS As caixas onde guardamos as coisas
// ================================================================
// let pode mudar de valor (variável)
let nomeDoUsuario = "Visitante";
let contadorDeCliques = 0;

// const NÃO pode mudar de valor (constante)
const URL_BASE = "https://meusite.com";
const COR_PADRAO = "#6C63FF";

// Tipos de dados:
let texto = "Olá, mundo!";    // string texto
let numero = 42;              // number número
let estaLogado = false;       // boolean verdadeiro ou falso
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;
}

// 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: MANIPULAÇÃO DE STRINGS Texto é poder
// ================================================================
function mostrarMensagemPersonalizada() {
  let input = document.getElementById("nomeInput");
  if (!input) {
    console.error("❌ Input não encontrado!");
    return;
  }
  let nome = input.value;
  if (nome.trim() === "") {
    nome = "Visitante";
  }
  let mensagem = `Olá, ${nome}! Você está oficialmente na revolução. 🚀`;
  let mensagemElemento = document.getElementById("mensagemPersonalizada");
  if (mensagemElemento) {
    mensagemElemento.textContent = mensagem;
    mensagemElemento.style.color = "#6C63FF";
    mensagemElemento.style.fontWeight = "bold";
  }
}

// ================================================================
// PASSO 6: 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 7: CULTURA DIGITAL Por que isso importa?
// ================================================================
const reflexaoInteratividade = {
  // A BNCC define Cultura Digital como a capacidade de
  // "utilizar e criar tecnologias digitais de informação e comunicação
  // de forma crítica, significativa, reflexiva e ética"
  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?",
  // 👆 Essa é a pergunta que separa os que constroem dos que controlam.
  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 DA SUA PÁGINA
// "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) {
  const novoItem = document.createElement("li");
  novoItem.textContent = texto;
  novoItem.classList.add("item-lista");
  novoItem.style.padding = "0.5rem";
  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();
  console.log(`🗑️ Elemento "${id}" removido.`);
}

// ================================================================
// PASSO 6: EXEMPLO PRÁTICO TODO 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 NA TELA
// "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
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();
      const valor = evento.target.value;
      alert(`Você digitou: "${valor}" e pressionou Enter!`);
      evento.target.value = "";
    }
  });
  // 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'); // closest procura o ancestral mais próximo
    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) {
    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";
    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 DA REVOLUÇÃO
// "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. Cada valor tem um índice.
// O PRIMEIRO índice é 0 (ZERO). Isso é importante.
// ================================================================
// 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
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); // Adiciona 35 e 36 no índice 2
console.log("Numeros após adição:", numeros); // [10, 20, 35, 36, 40, 50]

// Substituir elementos
numeros.splice(3, 2, 37, 38); // Remove 2 a partir do índice 3 e adiciona 37, 38
console.log("Numeros após substituição:", numeros); // [10, 20, 35, 37, 38, 50]

// ================================================================
// PASSO 5: PERCORRENDO ARRAYS ForEach e For
// ================================================================
const cores = ["Vermelho", "Azul", "Verde", "Amarelo"];

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

// forEach com arrow function (forma moderna)
console.log("=== forEach (arrow) ===");
cores.forEach((cor, indice) => {
  console.log(`${indice}: ${cor}`);
});

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

// for...of forma moderna (mais simples)
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)
console.log(`Índice do 99: ${numeros2.indexOf(99)}`); // -1 (não encontrado)

// 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
// ================================================================
// Array de objetos (cada objeto representa algo)
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(), // ID único baseado no timestamp
    descricao: descricao,
    prioridade: prioridade, // "alta", "normal", "baixa"
    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:");
console.log(" - adicionarTarefa(descricao, prioridade)");
console.log(" - listarTarefas()");
console.log(" - concluirTarefa(id)");
console.log(" - removerTarefa(id)");

// ================================================================
// SEMANA 8 FUNÇÕES: O EXÉRCITO DA REVOLUÇÃO
// "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?
// Funções são blocos de código que realizam uma tarefa específica.
// Elas podem receber dados (parâmetros) e devolver resultados (return).
// ================================================================
// 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
}

// 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);
  }
}
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
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 3: Iniciando soma...");
  for (let i = 0; i < notas.length; i++) {
    console.log(` - Adicionando notas[${i}] = ${notas[i]}`);
    soma += notas[i];
  }
  console.log("🔍 PASSO 4: Soma total =", soma);
  const media = soma / notas.length;
  console.log("🔍 PASSO 5: Média calculada =", media);
  return media;
}

// ================================================================
// PASSO 4: VALIDAÇÃO DE DADOS Prevenindo bugs antes deles acontecerem
// ================================================================
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 sem mudar o comportamento
// ================================================================
// ANTES: Código confuso
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
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: CULTURA DIGITAL Qualidade é respeito
// ================================================================
const reflexaoDebug = {
  pergunta: "O que significa entregar um produto de qualidade?",
  reflexao: "Qualidade é respeito pelo usuário.",
  desafio: "O que você pode fazer para garantir que seu projeto seja confiável?",
  conclusao: "Um projeto sem bugs é um projeto que respeita seus usuários."
};

console.log("✅ Debug finalizado. Código polido e pronto.");

// ================================================================
// 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."
// ================================================================

// ================================================================
// 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].",
  solucao: "Nossa solução é [DESCRIÇÃO DA SOLUÇÃO].",
  demonstracao: "Vamos demonstrar como funciona.",
  impacto: "O impacto que queremos gerar é [IMPACTO DESEJADO].",
  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.",
  voz: "Fale devagar. Projete a voz. Pausas são poderosas.",
  demonstracao: "Mostre o projeto funcionando. Se algo der errado, respire e continue.",
  perguntas: "Escute a pergunta completa. Pense antes de responder. Não invente se não souber.",
  tempo: "3 minutos é pouco. Seja direto. Corte o que não é essencial.",
  paixao: "Mostre que você se importa. Paixão é contagiante."
};
console.table(dicasApresentacao);

// ================================================================
// PASSO 3: AUTOAVALIAÇÃO Refletindo sobre o processo
// ================================================================
function autoavaliacao() {
  console.log("📝 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("🎬 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");
  console.log("\n🔹 O PROBLEMA (30 segundos)");
  console.log("- Qual problema vocês identificaram?");
  console.log("- Por que esse problema é importante?");
  console.log("- Quem ele afeta?");
  console.log("\n🔹 A SOLUÇÃO (30 segundos)");
  console.log("- O que vocês criaram?");
  console.log("- Como funciona? (explicação breve)");
  console.log("- Quais tecnologias usaram?");
  console.log("\n🔹 DEMONSTRAÇÃO (60 segundos)");
  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?");
  console.log("- O que vocês aprenderam?");
  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");
  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."
  },
  {
    pergunta: "Qual foi a maior dificuldade técnica?",
    dica: "Seja honesto. Mostre que você aprendeu com os desafios."
  },
  {
    pergunta: "O que vocês fariam diferente?",
    dica: "Reflita sobre o processo. Ninguém é perfeito. O importante é aprender."
  },
  {
    pergunta: "Como isso pode ser usado na prática?",
    dica: "Dê um exemplo concreto. Mostre que você pensou no usuário."
  },
  {
    pergunta: "O que vocês mais aprenderam?",
    dica: "Conte uma história. Aprendizado é mais interessante que código."
  },
  {
    pergunta: "Se tivessem mais tempo, o que adicionariam?",
    dica: "Mostre que você tem visão de futuro. Um projeto nunca está 100% pronto."
  }
];
console.log("❓ 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.");
}

// ================================================================
// PASSO 7: CULTURA DIGITAL Protagonismo
// ================================================================
const reflexaoProtagonismo = {
  pergunta: "O que significa ser um criador digital?",
  reflexao: "Vocês não são mais usuários. São criadores.",
  desafio: "Como você vai usar esse poder para construir um mundo melhor?",
  conclusao: "A revolução não vai ser televisionada. Vai ser codificada. E vocês são os codificadores."
};

console.log("🎤 Apresentação carregada. Pronto para brilhar.");