`;
headerContainer.innerHTML = headerHTML;
footerContainer.innerHTML = footerHTML;
initHeaderScripts();
initFooterScripts();
}
function initHeaderScripts() {
const menuToggle = document.querySelector('[data-menu-toggle]');
const mobileMenu = document.querySelector('[data-mobile-menu]');
if (menuToggle && mobileMenu) {
menuToggle.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
}
const authButtons = document.querySelectorAll('[data-auth]');
const authModal = document.querySelector('[data-auth-modal]');
const modalClose = document.querySelector('[data-modal-close]');
const authTitle = document.querySelector('[data-auth-title]');
if (authButtons.length && authModal) {
authButtons.forEach(btn => {
btn.addEventListener('click', () => {
authTitle.textContent = btn.dataset.auth === 'login' ? 'Welcome back' : 'Create account';
authModal.classList.remove('hidden');
authModal.classList.add('flex');
});
});
}
if (modalClose && authModal) {
modalClose.addEventListener('click', () => {
authModal.classList.remove('flex');
authModal.classList.add('hidden');
});
}
const themeBtn = document.querySelector('[data-theme-toggle]');
if (themeBtn) {
themeBtn.addEventListener('click', () => {
document.body.classList.toggle('bg-[#2f2119]');
document.body.classList.toggle('text-[#f4ede3]');
});
}
}
function initFooterScripts() {
const banner = document.querySelector('[data-cookie-banner]');
const closeBtn = document.querySelector('[data-cookie-close]');
if (banner && closeBtn) {
const consentKey = 'motionstead-cookie-consent';
function showBanner() { if (!localStorage.getItem(consentKey)) banner.style.display = 'flex'; }
function hideBanner() { localStorage.setItem(consentKey, 'true'); banner.style.display = 'none'; }
closeBtn.addEventListener('click', hideBanner);
showBanner();
}
}
function initContactForm() {
const form = document.querySelector('#contact-form');
const errorModal = document.querySelector('#form-error-modal');
const errorText = document.querySelector('#form-errors');
const closeError = document.querySelector('[data-close-error]');
form.addEventListener('submit', function(event) {
const errors = [];
if (!form.name.value.trim()) errors.push('Please enter your name.');
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.value)) errors.push('Please enter a valid email address.');
if (!form.message.value.trim() || form.message.value.trim().length < 15) errors.push('Please write at least 15 characters in your message.');
if (errors.length) {
event.preventDefault();
errorText.textContent = errors.join(' ');
errorModal.classList.remove('hidden');
errorModal.classList.add('flex');
}
});
if (closeError && errorModal) {
closeError.addEventListener('click', () => {
errorModal.classList.remove('flex');
errorModal.classList.add('hidden');
});
errorModal.addEventListener('click', (e) => {
if (e.target === errorModal) {
errorModal.classList.remove('flex');
errorModal.classList.add('hidden');
}
});
}
}
loadComponents().then(() => initContactForm());