document.addEventListener('DOMContentLoaded', () => {
    // Get filename like "aubrey.html"
    const filename = window.location.pathname.split('/').pop();
    const personName = filename.replace('.html', '').toLowerCase();
  
    // Get all the target elements
    const businessCard = document.getElementById('businessCard');
    const nameElement = document.getElementById('name');
    const titleElement = document.getElementById('title');
    const phoneLinkElement = document.getElementById('phone');
    const emailLinkElement = document.getElementById('email');
    const websiteLinkElement = document.getElementById('website');
    const addressElement = document.getElementById('address');
    const photoElement = document.getElementById('photo');
    const profileElement = document.getElementById('profile');
    const balloonElement = document.getElementById('balloon');
  
    fetch('data.json')
      .then(response => response.json())
      .then(data => {
        // Try to match the filename to the employee's name (case-insensitive)
        const employee = data.find(emp => emp.name.toLowerCase() === personName);
  
        // If no match found, optionally show an error or fallback
        if (!employee) {
          businessCard.innerHTML = `<p style="color:red">No data found for "${personName}".</p>`;
          return;
        }
  
        // Populate card with employee data
        nameElement.textContent = employee.name;
        titleElement.textContent = employee.title;
        addressElement.textContent = employee.address;
        profileElement.src = employee.profile;
        photoElement.src = employee.photo;
        balloonElement.src = employee.balloon;
  
        // Phone
        phoneLinkElement.innerHTML = '';
        const phoneLink = document.createElement('a');
        phoneLink.href = `tel:${employee.phone}`;
        phoneLink.textContent = employee.phone;
        phoneLinkElement.appendChild(phoneLink);
  
        // Email
        emailLinkElement.innerHTML = '';
        const emailLink = document.createElement('a');
        emailLink.href = `mailto:${employee.email}`;
        emailLink.textContent = employee.email;
        emailLinkElement.appendChild(emailLink);
  
        // Website
        websiteLinkElement.innerHTML = '';
        const websiteLink = document.createElement('a');
        websiteLink.href = `https://${employee.website}`;
        websiteLink.textContent = employee.website;
        websiteLinkElement.appendChild(websiteLink);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        businessCard.innerHTML = '<p>Error loading data. Check the console.</p>';
      });
  });