class CustomLegal extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 4rem;
        }
        .legal-section {
          background-color: #1e3a8a;
          border-radius: 0.5rem;
          padding: 3rem 2rem;
          color: white;
        }
        .section-header {
          text-align: center;
          margin-bottom: 2rem;
          color: white;
        }
        .section-title {
          font-size: 2rem;
          font-weight: 700;
          margin-bottom: 1rem;
        }
        .section-description {
          font-size: 1.1rem;
          opacity: 0.9;
          max-width: 700px;
          margin: 0 auto;
        }
        .legal-steps {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 2rem;
          margin-top: 2rem;
        }
        .step {
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 0.5rem;
          padding: 1.5rem;
          transition: transform 0.2s, background-color 0.2s;
        }
        .step:hover {
          transform: translateY(-5px);
          background-color: rgba(255, 255, 255, 0.2);
        }
        .step-number {
          width: 40px;
          height: 40px;
          background-color: #3b82f6;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          margin-bottom: 1rem;
        }
        .step-title {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
        }
        .step-description {
          margin-bottom: 1rem;
          opacity: 0.9;
        }
        .step-button {
          display: inline-block;
          padding: 0.5rem 1rem;
          background-color: white;
          color: #1e3a8a;
          border-radius: 0.25rem;
          font-weight: 500;
          transition: opacity 0.2s;
        }
        .step-button:hover {
          opacity: 0.9;
        }
        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
          gap: 1.5rem;
          margin-top: 3rem;
        }
        .feature {
          display: flex;
          align-items: center;
          padding: 1rem;
          background-color: rgba(255, 255, 255, 0.05);
          border-radius: 0.5rem;
        }
        .feature-icon {
          margin-right: 1rem;
          color: #93c5fd;
        }
        .feature-text {
          font-weight: 500;
        }
      </style>
      <section id="legal" class="legal-section">
        <div class="section-header">
          <h2 class="section-title">Visas & Legal Residency</h2>
          <p class="section-description">
            Step-by-step guidance through the legal immigration process with personalized alerts and document tracking
          </p>
        </div>

        <div class="legal-steps">
          <div class="step">
            <div class="step-number">1</div>
            <h3 class="step-title">Determine Your Visa Type</h3>
            <p class="step-description">
              Answer a few questions to discover which visa or residency program you may qualify for.
            </p>
            <a href="#" class="step-button">Take Assessment</a>
          </div>

          <div class="step">
            <div class="step-number">2</div>
            <h3 class="step-title">Document Checklist</h3>
            <p class="step-description">
              Get a personalized list of required documents and forms for your specific situation.
            </p>
            <a href="#" class="step-button">View Checklist</a>
          </div>

          <div class="step">
            <div class="step-number">3</div>
            <h3 class="step-title">Application Process</h3>
            <p class="step-description">
              Follow our step-by-step guide to complete and submit your application correctly.
            </p>
            <a href="#" class="step-button">Begin Process</a>
          </div>
        </div>

        <div class="features-grid">
          <div class="feature">
            <div class="feature-icon">
              <i data-feather="clock"></i>
            </div>
            <span class="feature-text">Application Deadline Alerts</span>
          </div>
          <div class="feature">
            <div class="feature-icon">
              <i data-feather="file-text"></i>
            </div>
            <span class="feature-text">Document Scanning & Storage</span>
          </div>
          <div class="feature">
            <div class="feature-icon">
              <i data-feather="map-pin"></i>
            </div>
            <span class="feature-text">Local Legal Service Providers</span>
          </div>
          <div class="feature">
            <div class="feature-icon">
              <i data-feather="calendar"></i>
            </div>
            <span class="feature-text">Appointment Scheduling</span>
          </div>
        </div>
      </section>
    `;
  }
}

customElements.define('custom-legal', CustomLegal);