/*
* JavaScript Puro: TCL Reservatórios Premium
* Funções: Menu Mobile, Header Fixo (Sticky) e Scroll Suave.
* Autor: Alquimista do Código 2.0
*/
document.addEventListener('DOMContentLoaded', () => {
// --- 1. Menu Mobile (Hamburguer) ---
const navToggle = document.querySelector('.nav__toggle');
const navList = document.querySelector('.nav__list');
const body = document.body;
if (navToggle && navList) {
navToggle.addEventListener('click', () => {
body.classList.toggle('nav-open');
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
navToggle.setAttribute('aria-expanded', !isExpanded);
});
}
// --- 2. Dropdown (Acessível por Teclado e Click) ---
// Esta lógica é necessária para desktop e mobile
const dropdownToggles = document.querySelectorAll('.nav__link--dropdown-toggle');
dropdownToggles.forEach(toggle => {
toggle.addEventListener('click', (e) => {
// Prevenir o clique no link se for um dropdown (especialmente em mobile)
e.preventDefault();
const parentItem = toggle.closest('.nav__item--dropdown');
parentItem.classList.toggle('dropdown-open');
});
// Adiciona suporte a teclado (Enter)
toggle.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const parentItem = toggle.closest('.nav__item--dropdown');
parentItem.classList.toggle('dropdown-open');
}
});
});
// --- 3. Header Fixo (Sticky on Scroll) ---
const header = document.getElementById('header');
if (header) {
const stickyThreshold = 50; // Distância de scroll para fixar
const handleScroll = () => {
if (window.scrollY > stickyThreshold) {
header.classList.add('header--sticky');
} else {
header.classList.remove('header--sticky');
}
};
window.addEventListener('scroll', handleScroll, { passive: true });
}
// --- 4. Scroll Suave para Âncoras (Ex: CTA do Hero) ---
const anchorLinks = document.querySelectorAll('a[href^="#"]');
anchorLinks.forEach(link => {
link.addEventListener('click', function(e) {
const href = this.getAttribute('href');
// Ignorar links que são apenas '#' ou toggles de dropdown
if (href === '#' || this.classList.contains('nav__link--dropdown-toggle')) return;
const targetElement = document.querySelector(href);
if (targetElement) {
e.preventDefault();
// Fecha o menu mobile se estiver aberto
if (body.classList.contains('nav-open')) {
body.classList.remove('nav-open');
navToggle.setAttribute('aria-expanded', 'false');
}
// Calcula a posição do elemento de destino
const headerOffset = header ? header.offsetHeight : 0;
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
});
