const headerElement = document.querySelector('header');
const footerElement = document.querySelector('footer');

async function loadHeaderFooter() {
  try {
    const headerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/header-snippet.html');
    if (!headerResponse.ok) throw new Error('Failed to load header');
    const headerHTML = await headerResponse.text();
    headerElement.innerHTML = headerHTML;

    const footerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/footer-snippet.html');
    if (!footerResponse.ok) throw new Error('Failed to load footer');
    const footerHTML = await footerResponse.text();
    footerElement.innerHTML = footerHTML;
  } catch (error) {
    console.error('Error loading header/footer:', error);
  }
}