// ============================================================
// script.js - E-fólios A e B: Mitigação de Ataques Cibernéticos
// JavaScript puro (Vanilla JS) - 3 funcionalidades obrigatórias
// ============================================================

/*
 * ============================================================
 * 1. CONTADOR DE VISITAS E SAUDAÇÃO DINÂMICA
 * ============================================================
 * Utiliza localStorage para persistir o número de visitas.
 * Apresenta uma saudação baseada na hora do sistema.
 */

function initSaudacao() {
    // Obter a hora atual do sistema
    var hora = new Date().getHours();
    var saudacao = '';

    // Determinar a saudação conforme a hora do dia
    if (hora >= 6 && hora < 12) {
        saudacao = 'Bom dia';
    } else if (hora >= 12 && hora < 18) {
        saudacao = 'Boa tarde';
    } else {
        saudacao = 'Boa noite';
    }

    // Contador de visitas - ler, incrementar e guardar no localStorage
    var visitas = parseInt(localStorage.getItem('efolio-visitas')) || 0;
    visitas++;
    localStorage.setItem('efolio-visitas', visitas);

    // Inserir a saudação e o contador no elemento #saudacao
    var elSaudacao = document.getElementById('saudacao');
    if (elSaudacao) {
        elSaudacao.textContent = saudacao + '! Proteja os seus dados. Esta é a sua visita n.º ' + visitas + ' ao site.';
    }
}

/*
 * ============================================================
 * 2. ALTERNAR TEMA (DARK/LIGHT MODE)
 * ============================================================
 * Adiciona/remove a classe 'dark-mode' no <body>.
 * Persiste a escolha no localStorage para manter a preferência
 * ao navegar entre as 6 páginas do site.
 */

function initTema() {
    var btnTema = document.getElementById('btn-tema');
    var corpo = document.body;

    // Verificar se já existe preferência guardada no localStorage
    var temaGuardado = localStorage.getItem('efolio-tema');
    if (temaGuardado === 'dark') {
        corpo.classList.add('dark-mode');
    }

    // Atualizar o texto do botão conforme o tema ativo
    atualizarTextoBotao();

    // Registar o evento de clique no botão de alternar tema
    if (btnTema) {
        btnTema.addEventListener('click', function () {
            // Alternar a classe dark-mode no body
            corpo.classList.toggle('dark-mode');

            // Verificar o estado atual e guardar no localStorage
            var eDarkMode = corpo.classList.contains('dark-mode');
            localStorage.setItem('efolio-tema', eDarkMode ? 'dark' : 'light');

            // Atualizar o texto do botão
            atualizarTextoBotao();
        });
    }
}

/*
 * Atualiza o texto do botão de alternar tema conforme o estado atual.
 * Mostra "Modo Claro" se estiver em dark mode, "Modo Escuro" se em light mode.
 */
function atualizarTextoBotao() {
    var btnTema = document.getElementById('btn-tema');
    if (btnTema) {
        var eDarkMode = document.body.classList.contains('dark-mode');
        btnTema.textContent = eDarkMode ? '☀️ Modo Claro' : '🌙 Modo Escuro';
    }
}

/*
 * ============================================================
 * 3. MODAL DE IMAGEM AUMENTADA
 * ============================================================
 * Ao clicar numa imagem com a classe .img-conteudo, abre um modal
 * sobreposto com a versão aumentada da imagem.
 * O modal fecha ao clicar na área exterior ou com a tecla Escape.
 */

function initModal() {
    var modal = document.getElementById('modal-imagem');
    var modalImg = modal ? modal.querySelector('img') : null;

    // Selecionar todas as imagens com a classe .img-conteudo
    var imagens = document.querySelectorAll('.img-conteudo');

    // Adicionar evento de clique a cada imagem
    imagens.forEach(function (img) {
        img.addEventListener('click', function () {
            if (modal && modalImg) {
                // Copiar o src e o alt da imagem clicada para o modal
                modalImg.src = this.src;
                modalImg.alt = this.alt;
                // Mostrar o modal adicionando a classe 'visivel'
                modal.classList.add('visivel');
            }
        });
    });

    // Fechar o modal ao clicar no fundo escuro (fora da imagem)
    if (modal) {
        modal.addEventListener('click', function (e) {
            // Se o clique foi na área de fundo (não na imagem), fechar
            if (e.target === modal) {
                modal.classList.remove('visivel');
            }
        });
    }

    // Fechar o modal com a tecla Escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && modal && modal.classList.contains('visivel')) {
            modal.classList.remove('visivel');
        }
    });
}

/*
 * ============================================================
 * INICIALIZAÇÃO - Executar quando o DOM estiver completamente carregado
 * ============================================================
 */
document.addEventListener('DOMContentLoaded', function () {
    initSaudacao();
    initTema();
    initModal();
});