class CustomLanguage extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 4rem;
        }
        .language-section {
          background-color: white;
          border-radius: 0.5rem;
          padding: 2rem;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .section-header {
          text-align: center;
          margin-bottom: 2rem;
        }
        .section-title {
          font-size: 2rem;
          font-weight: 700;
          color: #1e3a8a;
          margin-bottom: 1rem;
        }
        .section-description {
          font-size: 1.1rem;
          color: #4b5563;
          max-width: 700px;
          margin: 0 auto;
        }
        .language-cards {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 1.5rem;
          margin-top: 2rem;
        }
        .language-card {
          border: 1px solid #e5e7eb;
          border-radius: 0.5rem;
          padding: 1.5rem;
          transition: transform 0.2s, box-shadow 0.2s;
        }
        .language-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .card-header {
          display: flex;
          align-items: center;
          margin-bottom: 1rem;
        }
        .card-icon {
          width: 48px;
          height: 48px;
          background-color: #dbeafe;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 1rem;
          color: #1d4ed8;
        }
        .card-title {
          font-weight: 600;
          font-size: 1.1rem;
          color: #1e40af;
        }
        .card-description {
          color: #6b7280;
          margin-bottom: 1.5rem;
        }
        .card-button {
          display: inline-block;
          padding: 0.5rem 1rem;
          background-color: #3b82f6;
          color: white;
          border-radius: 0.25rem;
          font-weight: 500;
          transition: background-color 0.2s;
        }
        .card-button:hover {
          background-color: #2563eb;
        }
        .progress-container {
          margin-top: 3rem;
          background-color: #f9fafb;
          border-radius: 0.5rem;
          padding: 2rem;
        }
        .progress-title {
          font-size: 1.25rem;
          font-weight: 600;
          color: #1e3a8a;
          margin-bottom: 1.5rem;
          text-align: center;
        }
        .progress-content {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .progress-ring-wrapper {
          position: relative;
          width: 120px;
          height: 120px;
          margin-bottom: 1rem;
        }
        .progress-text {
          font-size: 1.125rem;
          font-weight: 600;
          color: #1e40af;
        }
        .progress-description {
          color: #6b7280;
          text-align: center;
          max-width: 400px;
          margin: 0 auto;
        }
        .daily-tasks {
          margin-top: 2rem;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 1rem;
        }
        .task-card {
          background-color: white;
          border: 1px solid #e5e7eb;
          border-radius: 0.5rem;
          padding: 1rem;
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: background-color 0.2s;
        }
        .task-card:hover {
          background-color: #f9fafb;
        }
        .task-icon {
          margin-right: 0.75rem;
          color: #3b82f6;
        }
        .task-name {
          font-weight: 500;
          color: #4b5563;
        }
        @media (max-width: 640px) {
          .language-cards {
            grid-template-columns: 1fr;
          }
        }
      </style>
      <section id="language" class="language-section">
        <div class="section-header">
          <h2 class="section-title">Learn English</h2>
          <p class="section-description">
            Interactive language learning tools and resources to help you improve your English
          </p>
        </div>

        <div class="language-cards">
          <div class="language-card">
            <div class="card-header">
              <div class="card-icon">
                <i data-feather="headphones"></i>
              </div>
              <h3 class="card-title">Listening Practice</h3>
            </div>
            <p class="card-description">
              Improve your listening comprehension with audio lessons and real-world conversations.
            </p>
            <a href="#" class="card-button">Start Listening</a>
          </div>

          <div class="language-card">
            <div class="card-header">
              <div class="card-icon">
                <i data-feather="message-square"></i>
              </div>
              <h3 class="card-title">Speaking Practice</h3>
            </div>
            <p class="card-description">
              Practice speaking English with our AI conversation partner and pronunciation exercises.
            </p>
            <a href="#" class="card-button">Start Speaking</a>
          </div>

          <div class="language-card">
            <div class="card-header">
              <div class="card-icon">
                <i data-feather="book-open"></i>
              </div>
              <h3 class="card-title">Reading Practice</h3>
            </div>
            <p class="card-description">
              Build vocabulary and reading skills with leveled articles and interactive exercises.
            </p>
            <a href="#" class="card-button">Start Reading</a>
          </div>
        </div>

        <div class="progress-container">
          <h3 class="progress-title">Your Learning Progress</h3>
          <div class="progress-content">
            <div class="progress-ring-wrapper">
              <svg class="progress-ring" width="120" height="120">
                <circle class="progress-ring-circle" stroke="#3b82f6" stroke-width="8" fill="transparent" r="52" cx="60" cy="60" 
                  stroke-dasharray="326.56" stroke-dashoffset="326.56" style="stroke-dashoffset: 196.56;">
                </circle>
              </svg>
              <div class="absolute inset-0 flex items-center justify-center">
                <span class="progress-percent text-xl font-bold">40%</span>
              </div>
            </div>
            <p class="progress-text">You're making great progress!</p>
            <p class="progress-description">
              Complete your daily tasks to earn points and unlock new learning materials.
            </p>

            <div class="daily-tasks">
              <div class="task-card complete-task-btn" data-task="languagePractice">
                <i data-feather="check-circle" class="task-icon"></i>
                <span class="task-name">Daily Practice</span>
              </div>
              <div class="task-card complete-task-btn" data-task="resourceViewed">
                <i data-feather="file-text" class="task-icon"></i>
                <span class="task-name">View Resources</span>
              </div>
              <div class="task-card">
                <i data-feather="award" class="task-icon"></i>
                <span class="task-name">Milestones</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}

customElements.define('custom-language', CustomLanguage);