class GridlandWindow extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .window {
          background: white;
          box-shadow: 
            inset -1px -1px 0 0px #0a0a0a,
            inset 1px 1px 0 0px #dfdfdf,
            inset -2px -2px 0 0px #808080,
            inset 2px 2px 0 0px #ffffff;
          position: absolute;
          z-index: 10;
          cursor: move;
          width: 300px;
        }
        .window-title {
          background: linear-gradient(to right, #000080, #1084d0);
          color: white;
          padding: 4px 8px;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .window-content {
          padding: 8px;
        }
        .close-btn {
          background: white;
          color: black;
          border: 1px solid black;
          width: 16px;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      </style>
      <div class="window">
        <div class="window-title">
          <span>${this.getAttribute('title') || 'Window'}</span>
          <button class="close-btn">×</button>
        </div>
        <div class="window-content">
          <slot></slot>
        </div>
      </div>
    `;

    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
      this.remove();
    });
  }
}

customElements.define('gridland-window', GridlandWindow);