components/design-editor.js

class DesignEditor extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .editor-container {
          background: white;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.1);
          padding: 2rem;
          margin: 2rem 0;
        }
        .editor-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;
        }
        .editor-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #1a202c;
        }
        .editor-main {
          display: grid;
          grid-template-columns: 1fr 300px;
          gap: 2rem;
        }
        .editor-canvas {
          background: #f7fafc;
          border-radius: 8px;
          height: 500px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }
        .editor-tools {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
        .tool-section {
          background: #f7fafc;
          border-radius: 8px;
          padding: 1rem;
        }
        .tool-section-title {
          font-weight: 600;
          margin-bottom: 0.75rem;
        }
        .color-options {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-top: 0.5rem;
        }
        .color-option {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          cursor: pointer;
          border: 2px solid transparent;
        }
        .color-option.selected {
          border-color: #4299e1;
        }
        .preview-btn {
          background: #4299e1;
          color: white;
          border: none;
          padding: 0.75rem;
          border-radius: 6px;
          cursor: pointer;
          font-weight: 500;
          transition: background 0.2s;
          margin-top: 1rem;
        }
        .preview-btn:hover {
          background: #3182ce;
        }
      </style>
      <div class="editor-container">
        <div class="editor-header">
          <div class="editor-title">3D T-Shirt Designer</div>
        </div>
        <div class="editor-main">
          <div class="editor-canvas">
            <div id="tshirt-preview" style="width: 300px; height: 400px; background: #f7fafc; border: 2px dashed #cbd5e0;">
              <!-- 3D preview will be rendered here -->
              <p style="text-align: center; color: #718096; margin-top: 180px;">Your 3D design will appear here</p>
            </div>
          </div>
          <div class="editor-tools">
            <div class="tool-section">
              <div class="tool-section-title">T-Shirt Color</div>
              <div class="color-options">
                <div class="color-option selected" style="background: #ffffff;" data-color="#ffffff"></div>
                <div class="color-option" style="background: #000000;" data-color="#000000"></div>
                <div class="color-option" style="background: #e53e3e;" data-color="#e53e3e"></div>
                <div class="color-option" style="background: #3182ce;" data-color="#3182ce"></div>
                <div class="color-option" style="background: #38a169;" data-color="#38a169"></div>
                <div class="color-option" style="background: #805ad5;" data-color="#805ad5"></div>
              </div>
            </div>
            <div class="tool-section">
              <div class="tool-section-title">Design Upload</div>
              <input type="file" id="design-upload" accept="image/*" style="display: none;">
              <button class="preview-btn" id="upload-btn">Upload Design</button>
            </div>
            <div class="tool-section">
              <div class="tool-section-title">Text Options</div>
              <input type="text" placeholder="Enter text" style="width: 100%; padding: 0.5rem; border: 1px solid #e2e8f0; border-radius: 4px;">
              <div class="color-options" style="margin-top: 0.5rem;">
                <div class="color-option" style="background: #000000;" data-text-color="#000000"></div>
                <div class="color-option" style="background: #ffffff; border: 1px solid #cbd5e0;" data-text-color="#ffffff"></div>
                <div class="color-option" style="background: #e53e3e;" data-text-color="#e53e3e"></div>
                <div class="color-option" style="background: #3182ce;" data-text-color="#3182ce"></div>
              </div>
            </div>
            <button class="preview-btn">Save Design</button>
            <a href="/payment.html" class="preview-btn" style="background: #38a169; text-align: center; display: block; text-decoration: none;">Order Now</a>
</div>
        </div>
      </div>
    `;

    // Add event listeners for color selection
    const colorOptions = this.shadowRoot.querySelectorAll('.color-option[data-color]');
    colorOptions.forEach(option => {
      option.addEventListener('click', () => {
        colorOptions.forEach(opt => opt.classList.remove('selected'));
        option.classList.add('selected');
        // In a real app, this would update the 3D model color
      });
    });
  }
}

customElements.define('design-editor', DesignEditor);