class RegisterForm extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .register-form {
          max-width: 500px;
          margin: 0 auto;
          padding: 2rem;
          background: var(--card-bg);
          border-radius: 16px;
          box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        
        .form-group {
          margin-bottom: 1.5rem;
        }
        
        label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: 600;
        }
        
        input {
          width: 100%;
          padding: 12px;
          border: 1px solid #ddd;
          border-radius: 8px;
          font-family: inherit;
        }
        
        .btn {
          width: 100%;
          padding: 12px;
          border-radius: 8px;
          border: none;
          font-weight: bold;
          cursor: pointer;
          background: var(--primary);
          color: white;
          transition: background 0.3s;
        }
        
        .btn:hover {
          background: var(--primary-light);
        }
        
        .login-link {
          text-align: center;
          margin-top: 1rem;
        }
        
        .login-link a {
          color: var(--primary);
          text-decoration: none;
        }
      </style>
      <div class="register-form">
        <h2>הרשמה</h2>
        <form id="registerForm">
          <div class="form-group">
            <label for="name">שם מלא</label>
            <input type="text" id="name" required>
          </div>
          <div class="form-group">
            <label for="email">אימייל</label>
            <input type="email" id="email" required>
          </div>
          <div class="form-group">
            <label for="password">סיסמה</label>
            <input type="password" id="password" required>
          </div>
          <div class="form-group">
            <label for="confirm-password">אימות סיסמה</label>
            <input type="password" id="confirm-password" required>
          </div>
          <button type="submit" class="btn">הרשם</button>
        </form>
        <div class="login-link">
          כבר יש לך חשבון? <a href="/login.html">התחבר כאן</a>
        </div>
      </div>
    `;

    this.shadowRoot.getElementById('registerForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const email = this.shadowRoot.getElementById('email').value;
      const password = this.shadowRoot.getElementById('password').value;
      
      // Send welcome email
      await fetch('https://api.emailjs.com/api/v1.0/email/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          service_id: 'YOUR_SERVICE_ID',
          template_id: 'YOUR_TEMPLATE_ID',
          user_id: 'YOUR_USER_ID',
          template_params: {
            to_email: email,
            subject: 'ברוך הבא ל-StudyMate!',
            message: 'תודה שנרשמת ל-StudyMate! אנו שמחים להצטרפותך למערכת.'
          }
        })
      });
      
      // Register user (simplified)
      alert('ההרשמה בוצעה בהצלחה! נא לבדוק את האימייל שלך להודעת ברוך הבא.');
    });
  }
}

customElements.define('register-form', RegisterForm);