// Find the footer element
const footer = document.querySelector('footer');

// Create a new container for the emails
const emailContainer = document.createElement('div');
emailContainer.style.backgroundColor = 'inherit';
emailContainer.style.padding = '20px';
emailContainer.style.marginTop = '20px';
emailContainer.style.textAlign = 'center';

// Add a title for the email section
const title = document.createElement('h3');
title.textContent = 'Contact Emails';
title.style.color = 'white';
title.style.marginBottom = '15px';
title.style.fontSize = '1.8rem';
title.style.fontWeight = 'bold';
title.style.letterSpacing = '1px';
emailContainer.appendChild(title);

// Create a grid container for the emails
const emailGrid = document.createElement('div');
emailGrid.style.display = 'grid';
emailGrid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(250px, 1fr))';
emailGrid.style.gap = '20px';
emailGrid.style.textAlign = 'center';

// Define the emails
const emails = [
    { label: 'Purchase', email: 'purchase@taleenmedical.com' },
    { label: 'Insurance', email: 'insurance@taleenmedical.com' },
    { label: 'Marketing', email: 'marketing@taleenmedical.com' },
    { label: 'HR', email: 'hr@taleenmedical.com' },
    { label: 'Ex.Manager', email: 'ex.manager@taleenmedical.com' },
];

// Create and append each email item as a box
emails.forEach(({ label, email }) => {
    const emailItem = document.createElement('div');

    // Style the email item with reduced glow
    emailItem.style.backgroundColor = 'rgba(18, 18, 18, 0.8)';
    emailItem.style.borderRadius = '15px';
    emailItem.style.padding = '20px';
    emailItem.style.boxShadow = '0 0 15px rgba(0, 216, 255, 0.2), 0 0 5px rgba(0, 216, 255, 0.1)'; // Reduced glow
    emailItem.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
    emailItem.style.cursor = 'pointer';
    emailItem.style.backdropFilter = 'blur(10px)';
    emailItem.style.overflow = 'hidden';
    emailItem.style.display = 'flex';
    emailItem.style.flexDirection = 'column';
    emailItem.style.alignItems = 'center';
    emailItem.style.justifyContent = 'center';

    // Hover effects with reduced glow
    emailItem.addEventListener('mouseover', () => {
        emailItem.style.transform = 'scale(1.05)';
        emailItem.style.boxShadow = '0 0 20px rgba(0, 216, 255, 0.3), 0 0 10px rgba(0, 216, 255, 0.2)';
    });
    emailItem.addEventListener('mouseout', () => {
        emailItem.style.transform = 'scale(1)';
        emailItem.style.boxShadow = '0 0 15px rgba(0, 216, 255, 0.2), 0 0 5px rgba(0, 216, 255, 0.1)';
    });

    // Add the content
    emailItem.innerHTML = `
        <p style="
            color: #aaa;
            font-size: 1.2rem;
            font-weight: 500;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        ">${label}</p>
        <a href="mailto:${email}" style="
            color: #00d8ff;
            font-size: 1.1rem;
            text-decoration: none;
            font-weight: bold;
            word-wrap: break-word;
        ">${email}</a>
    `;
    emailGrid.appendChild(emailItem);
});

// Append the email grid to the container
emailContainer.appendChild(emailGrid);

// Append the email container to the footer
footer.appendChild(emailContainer);