document.addEventListener('DOMContentLoaded', () => {
    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 => {
            // If using the multiple employee format, choose the employee to display.
            // For example, to display the first employee:
            const employee = data[0]; // Or choose by ID or other criteria.

            nameElement.textContent = employee.name;
            titleElement.textContent = employee.title;
            addressElement.textContent = employee.address;
            profileElement.src = employee.profile;
            photoElement.src = employee.photo;
            balloonElement.src = employee.balloon;

            // Create phone link
            const phoneLink = document.createElement('a');
            phoneLink.href = `tel:${employee.phone}`;
            phoneLink.textContent = employee.phone;
            phoneLinkElement.appendChild(phoneLink);

            // Create email link
            const emailLink = document.createElement('a');
            emailLink.href = `mailto:${employee.email}`;
            emailLink.textContent = employee.email;
            emailLinkElement.appendChild(emailLink);

            // Create website link
            const websiteLink = document.createElement('a');
            websiteLink.href = 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>'; // Display an error message
        });
});