class ProfileHeader_deprecated {
  constructor(containerId, { imageUrl, name, position, theme = 'light' }) {
    this.classPrefix = 'ph-'; // Unique prefix for CSS
    this.theme = theme;
    this.injectCSS();

    // Find the container div by ID
    const parent = document.getElementById(containerId);
    if (!parent) {
      throw new Error(`Container div with id "${containerId}" not found.`);
    }

    this.element = this.createHeader(imageUrl, name, position);
    parent.appendChild(this.element);
    this.setTheme(this.theme); // Set initial theme
  }

  injectCSS() {
    if (document.getElementById('ph-profile-header-style')) return; // Prevent duplicate injection
    const style = document.createElement('style');
    style.id = 'ph-profile-header-style';
    style.textContent = `
      .ph-center-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
      }
      .ph-profile-header {
        display: flex;
        align-items: center;
        background: #f7f7f9;
        padding: 10px 30px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        max-width: 400px;
        margin-bottom: 0;
        box-sizing: border-box;
        color: #222;
        transition: background 0.3s, color 0.3s;
      }
      .ph-profile-header.ph-dark {
        background: #23272f;
        color: #f7f7f9;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      }
      .ph-profile-picture {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 24px;
        border: 3px solid #e0e0e0;
      }
      .ph-profile-info {
        display: flex;
        flex-direction: column;
      }
      .ph-profile-name {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
      }
      .ph-profile-position {
        margin: 4px 0 0 0;
        font-size: 1.1rem;
      }
      @media (max-width: 500px) {
        .ph-center-container {
          width: 100%;
        }
        .ph-profile-header {
          flex-direction: column;
          align-items: center;
          width: 100%;
          max-width: none;
          padding: 15px;
          margin-left: 20px;
          margin-right: 20px;
          box-sizing: border-box;
        }
        .ph-profile-picture {
          margin: 0 0 12px 0;
        }
      }
    `;
    document.head.appendChild(style);
  }

  createHeader(imageUrl, name, position) {
    const container = document.createElement('div');
    container.className = this.classPrefix + 'center-container';

    const header = document.createElement('div');
    header.className = this.classPrefix + 'profile-header';

    const img = document.createElement('img');
    img.className = this.classPrefix + 'profile-picture';
    img.src = imageUrl;
    img.alt = 'Profile Picture';

    const info = document.createElement('div');
    info.className = this.classPrefix + 'profile-info';

    const nameElem = document.createElement('h2');
    nameElem.className = this.classPrefix + 'profile-name';
    nameElem.textContent = name;

    const positionElem = document.createElement('p');
    positionElem.className = this.classPrefix + 'profile-position';
    positionElem.textContent = position;

    info.appendChild(nameElem);
    info.appendChild(positionElem);
    header.appendChild(img);
    header.appendChild(info);
    container.appendChild(header);

    return container;
  }

  setTheme(theme) {
    this.theme = theme;
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (theme === 'dark') {
      header.classList.add('ph-dark');
    } else {
      header.classList.remove('ph-dark');
    }
  }
}
class ProfileHeader_d2 {
  constructor(containerId, { imageUrl, name, position, agentId, theme = 'light' }) {
    this.classPrefix = 'ph-';
    this.theme = theme;
    this.injectCSS();

    const parent = document.getElementById(containerId);
    if (!parent) {
      throw new Error(`Container div with id "${containerId}" not found.`);
    }

    this.element = this.createHeader(imageUrl, name, position, agentId);
    parent.appendChild(this.element);
    this.setTheme(this.theme);
  }

  injectCSS() {
    if (document.getElementById('ph-profile-header-style')) return;
    const style = document.createElement('style');
    style.id = 'ph-profile-header-style';
    style.textContent = `
      .ph-center-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
      }
      .ph-profile-header {
        display: flex;
        align-items: center;
        background: #f7f7f9;
        padding: 10px 30px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        max-width: 400px;
        margin-bottom: 0;
        box-sizing: border-box;
        color: #222;
        transition: background 0.3s, color 0.3s;
      }
      .ph-profile-header.ph-dark {
        background: #273A40;
        color: #CBDEDE;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      }
      .ph-profile-picture {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 24px;
        border: 3px solid #e0e0e0;
      }
      .ph-profile-info {
        display: flex;
        flex-direction: column;
      }
      .ph-profile-name {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
      }
      .ph-profile-position {
        margin: 4px 0 0 0;
        font-size: 1.0rem;
      }
      .ph-agent-id {
        margin: 2px 0 0 0;
        font-size: 0.6rem;
        color: #888;
        letter-spacing: 1px;
      }
      .ph-profile-header.ph-dark .ph-agent-id {
        color: #bbb;
      }
      @media (max-width: 500px) {
        .ph-center-container {
          width: 100%;
        }
        .ph-profile-header {
          flex-direction: column;
          align-items: center;
          width: 100%;
          max-width: none;
          padding: 15px;
          margin-left: 20px;
          margin-right: 20px;
          box-sizing: border-box;
        }
        .ph-profile-picture {
          margin: 0 0 12px 0;
        }
      }
    `;
    document.head.appendChild(style);
  }

  createHeader(imageUrl, name, position, agentId) {
    const container = document.createElement('div');
    container.className = this.classPrefix + 'center-container';

    const header = document.createElement('div');
    header.className = this.classPrefix + 'profile-header';

    const img = document.createElement('img');
    img.className = this.classPrefix + 'profile-picture';
    img.src = imageUrl;
    img.alt = 'Profile Picture';

    const info = document.createElement('div');
    info.className = this.classPrefix + 'profile-info';

    const nameElem = document.createElement('h2');
    nameElem.className = this.classPrefix + 'profile-name';
    nameElem.textContent = name;

    const positionElem = document.createElement('p');
    positionElem.className = this.classPrefix + 'profile-position';
    positionElem.textContent = position;

    const agentIdElem = document.createElement('span');
    agentIdElem.className = this.classPrefix + 'agent-id';
    agentIdElem.textContent = agentId;

    info.appendChild(nameElem);
    info.appendChild(positionElem);
    info.appendChild(agentIdElem);
    header.appendChild(img);
    header.appendChild(info);
    container.appendChild(header);

    return container;
  }

  setTheme(theme) {
    this.theme = theme;
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (theme === 'dark') {
      header.classList.add('ph-dark');
    } else {
      header.classList.remove('ph-dark');
    }
  }

  // --------- NEW METHOD ----------
setBackgroundColor(color) {
  const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
  if (color) {
    header.style.background = color; // Accepts gradients and solid colors
  } else {
    header.style.background = ""; // Reset to default
  }
}
}


class ProfileHeader_denwe {
  constructor(
    containerId,
    { imageUrl, name, position, agentId, theme = 'light', onClickFunctionName = null }
  ) {
    this.classPrefix = 'ph-';
    this.theme = theme;
    this.onClickFunctionName = onClickFunctionName;
    this.injectCSS();

    const parent = document.getElementById(containerId);
    if (!parent) {
      throw new Error(`Container div with id "${containerId}" not found.`);
    }

    this.element = this.createHeader(imageUrl, name, position, agentId);
    parent.appendChild(this.element);
    this.setTheme(this.theme);

    // Attach click/touch event if function name is provided
    if (typeof onClickFunctionName === 'string' && window[onClickFunctionName] instanceof Function) {
      const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
      // Click event
      header.addEventListener('click', (e) => {
        window[onClickFunctionName](e);
        this.buttonClickEffect(header);
      });
      // Touch event for mobile
      header.addEventListener('touchstart', (e) => {
        this.buttonClickEffect(header);
      });
    }
  }

  injectCSS() {
    if (document.getElementById('ph-profile-header-style')) return;
    const style = document.createElement('style');
    style.id = 'ph-profile-header-style';
    style.textContent = `
      .ph-center-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
      }
      .ph-profile-header {
        display: flex;
        align-items: center;
        background: #f7f7f9;
        padding: 10px 30px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        max-width: 400px;
        margin-bottom: 0;
        box-sizing: border-box;
        color: #222;
        transition: background 0.3s, color 0.3s, box-shadow 0.1s;
        cursor: pointer;
        user-select: none;
      }
      .ph-profile-header.ph-dark {
        background: #273A40;
        color: #CBDEDE;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      }
      .ph-profile-header.ph-click-effect {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        filter: brightness(0.95);
      }
      .ph-profile-picture {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 24px;
        border: 3px solid #e0e0e0;
      }
      .ph-profile-info {
        display: flex;
        flex-direction: column;
      }
      .ph-profile-name {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
      }
      .ph-profile-position {
        margin: 4px 0 0 0;
        font-size: 1.0rem;
      }
      .ph-agent-id {
        margin: 2px 0 0 0;
        font-size: 0.6rem;
        color: #888;
        letter-spacing: 1px;
      }
      .ph-profile-header.ph-dark .ph-agent-id {
        color: #bbb;
      }
      @media (max-width: 500px) {
        .ph-center-container {
          width: 100%;
        }
        .ph-profile-header {
          flex-direction: column;
          align-items: center;
          width: 100%;
          max-width: none;
          padding: 15px;
          margin-left: 20px;
          margin-right: 20px;
          box-sizing: border-box;
        }
        .ph-profile-picture {
          margin: 0 0 12px 0;
        }
      }
    `;
    document.head.appendChild(style);
  }

  createHeader(imageUrl, name, position, agentId) {
    const container = document.createElement('div');
    container.className = this.classPrefix + 'center-container';

    const header = document.createElement('div');
    header.className = this.classPrefix + 'profile-header';

    const img = document.createElement('img');
    img.className = this.classPrefix + 'profile-picture';
    img.src = imageUrl;
    img.alt = 'Profile Picture';

    const info = document.createElement('div');
    info.className = this.classPrefix + 'profile-info';

    const nameElem = document.createElement('h2');
    nameElem.className = this.classPrefix + 'profile-name';
    nameElem.textContent = name;

    const positionElem = document.createElement('p');
    positionElem.className = this.classPrefix + 'profile-position';
    positionElem.textContent = position;

    const agentIdElem = document.createElement('span');
    agentIdElem.className = this.classPrefix + 'agent-id';
    agentIdElem.textContent = agentId;

    info.appendChild(nameElem);
    info.appendChild(positionElem);
    info.appendChild(agentIdElem);
    header.appendChild(img);
    header.appendChild(info);
    container.appendChild(header);

    return container;
  }

  setTheme(theme) {
    this.theme = theme;
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (theme === 'dark') {
      header.classList.add('ph-dark');
    } else {
      header.classList.remove('ph-dark');
    }
  }

  setBackgroundColor(color) {
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (color) {
      header.style.background = color;
    } else {
      header.style.background = "";
    }
  }

  // --- Button click effect ---
  buttonClickEffect(header) {
    header.classList.add('ph-click-effect');
    setTimeout(() => {
      header.classList.remove('ph-click-effect');
    }, 120); // quick feedback
  }
}

class ProfileHeader {
  constructor(
    containerId,
    { imageUrl, name, position, agentId, theme = 'light', onClickFunctionName = null }
  ) {
    this.classPrefix = 'ph-';
    this.theme = theme;
    this.onClickFunctionName = onClickFunctionName;
    this.injectCSS();

    const parent = document.getElementById(containerId);
    if (!parent) {
      throw new Error(`Container div with id "${containerId}" not found.`);
    }

    this.element = this.createHeader(imageUrl, name, position, agentId);
    parent.appendChild(this.element);

    this.setTheme(this.theme);

    // Attach click/touch event if function name is provided
    if (typeof onClickFunctionName === 'string' && window[onClickFunctionName] instanceof Function) {
      const header = this.element.querySelector(`.${this.classPrefix}profile-header`);

      // Click event
      header.addEventListener('click', (e) => {
        window[onClickFunctionName](e);
        this.buttonClickEffect(header);
      });

      // Touch event for mobile
      header.addEventListener('touchstart', (e) => {
        this.buttonClickEffect(header);
      });
    }
  }

  injectCSS() {
    if (document.getElementById('ph-profile-header-style')) return;

    const style = document.createElement('style');
    style.id = 'ph-profile-header-style';
    style.textContent = `
      .ph-center-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      .ph-profile-header {
        display: flex;
        align-items: center;
        background: #f7f7f9;
        padding: 10px 30px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        max-width: 400px;
        margin-bottom: 0;
        box-sizing: border-box;
        color: #222;
        transition: background 0.3s, color 0.3s, box-shadow 0.1s;
        cursor: pointer;
        user-select: none;
      }

      .ph-profile-header.ph-dark {
        background: #273A40;
        color: #CBDEDE;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      }

      .ph-profile-header.ph-click-effect {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        filter: brightness(0.95);
      }

      .ph-profile-picture {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 24px;
        border: 3px solid #e0e0e0;
      }

      .ph-profile-info {
        display: flex;
        flex-direction: column;
      }

      .ph-profile-name {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
      }

      .ph-profile-position {
        margin: 4px 0 0 0;
        font-size: 1.0rem;
      }

      .ph-agent-id {
        margin: 2px 0 0 0;
        font-size: 0.6rem;
        color: #888;
        letter-spacing: 1px;
      }

      .ph-profile-header.ph-dark .ph-agent-id {
        color: #bbb;
      }

      /* Mini style */
      .ph-profile-header.ph-mini {
        padding: 6px 15px;
        max-width: 300px;
      }

      .ph-profile-header.ph-mini .ph-profile-picture {
        width: 48px;
        height: 48px;
        margin-right: 16px;
        border-width: 2px;
      }

      .ph-profile-header.ph-mini .ph-profile-name {
        font-size: 1.1rem;
        margin: 0;
      }

      .ph-profile-header.ph-mini .ph-profile-position {
        font-size: 0.8rem;
        margin: 2px 0 0 0;
      }

      .ph-profile-header.ph-mini .ph-agent-id {
        font-size: 0.5rem;
        margin: 1px 0 0 0;
      }

      /* Responsive styles */
 /* Default mobile (max-width: 500px) - stacked layout */
@media (max-width: 500px) {
  .ph-profile-header {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 15px;
    margin-left: 20px;
    margin-right: 20px;
    box-sizing: border-box;
  }
  .ph-profile-picture {
    margin: 0 0 12px 0;
  }
}

/* Mobile mini style: keep layout side by side */
@media (max-width: 500px) {
  .ph-profile-header.ph-mini {
    flex-direction: row;
    align-items: center;
    padding: 8px 15px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .ph-profile-header.ph-mini .ph-profile-picture {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    border-width: 2px;
  }
  .ph-profile-header.ph-mini .ph-profile-info {
    flex: 1;
  }
  .ph-profile-header.ph-mini .ph-profile-name {
    font-size: 1.1rem;
  }
  .ph-profile-header.ph-mini .ph-profile-position {
    font-size: 0.8rem;
  }
  .ph-profile-header.ph-mini .ph-agent-id {
    font-size: 0.5rem;
  }
}

    `;
    document.head.appendChild(style);
  }

  createHeader(imageUrl, name, position, agentId) {
    const container = document.createElement('div');
    container.className = this.classPrefix + 'center-container';

    const header = document.createElement('div');
    header.className = this.classPrefix + 'profile-header';

    const img = document.createElement('img');
    img.className = this.classPrefix + 'profile-picture';
    img.src = imageUrl;
    img.alt = 'Profile Picture';

    const info = document.createElement('div');
    info.className = this.classPrefix + 'profile-info';

    const nameElem = document.createElement('h2');
    nameElem.className = this.classPrefix + 'profile-name';
    nameElem.textContent = name;

    const positionElem = document.createElement('p');
    positionElem.className = this.classPrefix + 'profile-position';
    positionElem.textContent = position;

    const agentIdElem = document.createElement('span');
    agentIdElem.className = this.classPrefix + 'agent-id';
    agentIdElem.textContent = agentId;

    info.appendChild(nameElem);
    info.appendChild(positionElem);
    info.appendChild(agentIdElem);

    header.appendChild(img);
    header.appendChild(info);

    container.appendChild(header);

    return container;
  }

  setTheme(theme) {
    this.theme = theme;
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (theme === 'dark') {
      header.classList.add('ph-dark');
    } else {
      header.classList.remove('ph-dark');
    }
  }

  setBackgroundColor(color) {
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (color) {
      header.style.background = color;
    } else {
      header.style.background = "";
    }
  }

  setStyle(style) {
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (style === 'mini') {
      header.classList.add('ph-mini');
    } else {
      header.classList.remove('ph-mini');
    }
  }

  setWidth(width) {
    const header = this.element.querySelector(`.${this.classPrefix}profile-header`);
    if (typeof width === 'string' && width.trim() !== '') {
      header.style.width = width;
    } else {
      header.style.width = '';
    }
  }

  // --- Button click effect ---
  buttonClickEffect(header) {
    header.classList.add('ph-click-effect');
    setTimeout(() => {
      header.classList.remove('ph-click-effect');
    }, 120);
  }
}



