components/gamification.js

class CustomGamification extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 4rem;
        }
        .gamification-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;
        }
        .rewards-container {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 2rem;
          margin-top: 2rem;
        }
        .reward-card {
          border-radius: 0.5rem;
          overflow: hidden;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          transition: transform 0.2s, box-shadow 0.2s;
          position: relative;
        }
        .reward-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .reward-image {
          height: 160px;
          background-size: cover;
          background-position: center;
        }
        .reward-content {
          padding: 1.5rem;
        }
        .reward-title {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
          color: #1e40af;
        }
        .reward-description {
          color: #6b7280;
          margin-bottom: 1rem;
        }
        .reward-points {
          display: inline-block;
          padding: 0.25rem 0.5rem;
          background-color: #dbeafe;
          color: #1d4ed8;
          border-radius: 99px;
          font-weight: 600;
          font-size: 0.875rem;
          margin-bottom: 1rem;
        }
        .reward-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;
        }
        .reward-button:hover {
          background-color: #2563eb;
        }
        .reward-badge {
          position: absolute;
          top: 1rem;
          right: 1rem;
          background-color: #f59e0b;
          color: white;
          padding: 0.25rem 0.75rem;
          border-radius: 99px;
          font-weight: 600;
          font-size: 0.75rem;
          text-transform: uppercase;
        }
        .payment-system {
          margin-top: 3rem;
          background-color: #f9fafb;
          border-radius: 0.5rem;
          padding: 2rem;
          text-align: center;
        }
        .payment-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: #1e3a8a;
          margin-bottom: 1rem;
        }
        .payment-description {
          color: #6b7280;
          margin-bottom: 1.5rem;
          max-width: 600px;
          margin-left: auto;
          margin-right: auto;
        }
        .payment-button {
          padding: 0.75rem 1.5rem;
          background-color: #10b981;
          color: white;
          border-radius: 0.5rem;
          font-weight: 600;
          transition: background-color 0.2s;
          display: inline-block;
        }
        .payment-button:hover {
          background-color: #059669;
        }
      </style>
      <section id="gamification" class="gamification-section">
        <div class="section-header">
          <h2 class="section-title">Earn Rewards & Micro-Payments</h2>
          <p class="section-description">
            Complete tasks, learn skills, and navigate government systems to earn points redeemable for cash or services
          </p>
        </div>

        <div class="rewards-container">
          <div class="reward-card pulse">
            <div class="reward-image" style="background-image: url('http://static.photos/retail/640x360/5')">
              <span class="reward-badge">Featured</span>
            </div>
            <div class="reward-content">
              <h3 class="reward-title">Complete Immigration Forms</h3>
              <p class="reward-description">
                Earn $5 for completing each required government form with our guidance system.
              </p>
              <div class="reward-points">500 pts</div>
              <a href="#" class="reward-button">Learn More</a>
            </div>
          </div>

          <div class="reward-card">
            <div class="reward-image" style="background-image: url('http://static.photos/education/640x360/6')"></div>
            <div class="reward-content">
              <h3 class="reward-title">Attend English Class</h3>
              <p class="reward-description">
                Get $3 per completed English lesson and track your learning progress.
              </p>
              <div class="reward-points">300 pts</div>
              <a href="#" class="reward-button">Start Learning</a>
            </div>
          </div>

          <div class="reward-card">
            <div class="reward-image" style="background-image: url('http://static.photos/office/640x360/7')"></div>
            <div class="reward-content">
              <h3 class="reward-title">Job Application Success</h3>
              <p class="reward-description">
                Earn $10 when you successfully apply for a job using our career resources.
              </p>
              <div class="reward-points">1000 pts</div>
              <a href="#" class="reward-button">Find Jobs</a>
            </div>
          </div>
        </div>

        <div class="payment-system">
          <h3 class="payment-title">Micro-Payment Withdrawal System</h3>
          <p class="payment-description">
            Convert your earned points into real money sent directly to your bank account, mobile wallet, or prepaid card.
            Withdraw anytime with no fees when you reach the minimum threshold.
          </p>
          <a href="#" class="payment-button">Set Up Payment Method</a>
        </div>
      </section>
    `;
  }
}

customElements.define('custom-gamification', CustomGamification);