class DataUpload extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 1.5rem;
        }
        .upload-card {
          background: white;
          border-radius: 1rem;
          border: 1px solid #e5e7eb;
          box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
          padding: 1.5rem;
        }
        .upload-title {
          font-weight: 600;
          margin-bottom: 0.75rem;
          font-size: 1.125rem;
        }
        .upload-description {
          color: #6b7280;
          font-size: 0.875rem;
          margin-top: 0.25rem;
        }
        .file-input {
          margin-top: 0.5rem;
          width: 100%;
          border: 1px solid #e5e7eb;
          border-radius: 0.5rem;
          padding: 0.5rem 0.75rem;
        }
        .upload-button {
          margin-top: 1rem;
          background: #6366f1;
          color: white;
          border: none;
          border-radius: 0.75rem;
          padding: 0.5rem 1rem;
          cursor: pointer;
          transition: background 0.2s;
        }
        .upload-button:hover {
          background: #4f46e5;
        }
      </style>
      <div class="upload-card">
        <h2 class="upload-title">Upload Your Data</h2>
        <div>
          <label>Uber Trips (CSV)</label>
          <input type="file" accept=".csv" class="file-input">
          <p class="upload-description">Trip history with coordinates and timestamps</p>
        </div>
        <button class="upload-button">Process Data</button>
      </div>
    `;
  }
}

customElements.define('data-upload', DataUpload);