document.addEventListener("DOMContentLoaded", () => {
    const members = document.querySelectorAll(".team-member img"); // Select all team member images
    const teamText = document.getElementById("team-text"); // Text content element
    const teamName = document.getElementById("team-name"); // Name element
    const teamTitle = document.getElementById("team-title"); // Title <span> element inside the name

    // Add click event listeners to each member
    members.forEach((member) => {
        member.addEventListener("click", function () {
            // Remove 'active' class from all members
            members.forEach((img) => img.classList.remove("active"));

            // Add 'active' class to the clicked member
            this.classList.add("active");

            // Get data attributes from the parent `.team-member` element
            const parent = this.parentElement;
            const text = parent.getAttribute("data-text");
            const name = parent.getAttribute("data-name");
            const title = parent.getAttribute("data-title");

            // Update the right section content
            teamText.textContent = text;
            teamName.firstChild.textContent = `${name} - `; // Update the name (before the span)
            teamTitle.textContent = title; // Update only the title inside the <span>
        });
    });
});