class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 40px;
          background-color: #ffffff;
          border-bottom: 1px solid #e5e5e5;
          flex-shrink: 0;
        }
        .header-left {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        .logo-container {
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border-radius: 12px;
        }
        .main-logo {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        .logo {
          width: 50px;
          height: 50px;
          background-color: #22c55e;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 24px;
          font-weight: bold;
        }
        .title {
          line-height: 1.2;
        }
        .title h1 {
          margin: 0;
          font-size: 22px;
          font-weight: bold;
          color: #16a34a;
        }
        .title p {
          margin: 0;
          font-size: 15px;
          color: #666;
          margin-top: 2px;
        }
        .header-right {
          display: flex;
          align-items: center;
          gap: 15px;
        }
        .user-name {
          color: #374151;
          font-size: 16px;
          font-weight: 500;
        }
        .logout-btn {
          padding: 10px 18px;
          border: none;
          border-radius: 10px;
          background-color: #f3f4f6;
          cursor: pointer;
          font-size: 15px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 8px;
          transition: all 0.2s ease;
          font-family: inherit;
        }
        .logout-btn:hover {
          background-color: #e5e7eb;
        }
        .logout-form {
          margin: 0;
          padding: 0;
        }
      </style>
      <header class="header">
        <div class="header-left">
          <div class="logo-container">
            <img src="images/logo.png" alt="FoodSave Logo" class="main-logo" onerror="this.onerror=null; this.src='http://static.photos/green/60x60/1';">
          </div>
          <div class="title">
            <h1>FOODSAVE CHATBOT</h1>
            <p>Get instant answers to your questions</p>
          </div>
        </div>
        <div class="header-right">
          <span class="user-name">Guest</span>
          <form action="/logout" method="post" class="logout-form">
            <button type="submit" class="logout-btn">↪ Logout</button>
          </form>
        </div>
      </header>
    `;

    // Update user name if available from PHP session or localStorage
    const userName = localStorage.getItem('userName') || 'Guest';
    this.shadowRoot.querySelector('.user-name').textContent = userName;
  }
}
customElements.define('custom-header', CustomHeader);