class CustomBenefits extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 4rem;
        }
        .section-header {
          text-align: center;
          margin-bottom: 3rem;
        }
        .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;
        }
        .benefits-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 2rem;
        }
        .benefit-card {
          background: white;
          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;
        }
        .benefit-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .benefit-image {
          height: 160px;
          background-size: cover;
          background-position: center;
        }
        .benefit-content {
          padding: 1.5rem;
        }
        .benefit-title {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
          color: #1e40af;
        }
        .benefit-description {
          color: #4b5563;
          margin-bottom: 1rem;
        }
        .benefit-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .benefit-button {
          padding: 0.5rem 1rem;
          background-color: #3b82f6;
          color: white;
          border-radius: 0.25rem;
          font-weight: 500;
          transition: background-color 0.2s;
        }
        .benefit-button:hover {
          background-color: #2563eb;
        }
        .benefit-language {
          font-size: 0.875rem;
          color: #6b7280;
        }
        .country-selector {
          display: flex;
          justify-content: center;
          margin-bottom: 2rem;
          flex-wrap: wrap;
          gap: 0.5rem;
        }
        .country-button {
          padding: 0.5rem 1rem;
          border-radius: 99px;
          background-color: #e5e7eb;
          color: #4b5563;
          font-weight: 500;
          transition: all 0.2s;
        }
        .country-button:hover, .country-button.active {
          background-color: #3b82f6;
          color: white;
        }
      </style>
      <section id="benefits">
        <div class="section-header">
          <h2 class="section-title">Benefits & Grants Available</h2>
          <p class="section-description">
            Discover government programs, financial assistance, and resources tailored for immigrants from your country of origin
          </p>
        </div>

        <div class="country-selector">
          <button class="country-button active" data-country="all">All Countries</button>
          <button class="country-button" data-country="mx">Mexico</button>
          <button class="country-button" data-country="in">India</button>
          <button class="country-button" data-country="cn">China</button>
          <button class="country-button" data-country="ph">Philippines</button>
          <button class="country-button" data-country="vn">Vietnam</button>
        </div>

        <div class="benefits-grid">
          <!-- Example benefit cards (in a real app, these would be dynamically generated) -->
          <div class="benefit-card" data-countries="mx in cn ph vn">
            <div class="benefit-image" style="background-image: url('http://static.photos/finance/640x360/1')"></div>
            <div class="benefit-content">
              <h3 class="benefit-title">Financial Assistance for New Residents</h3>
              <p class="benefit-description">Temporary financial aid for low-income immigrant families during their first year.</p>
              <div class="benefit-actions">
                <a href="#" class="benefit-button" target="_blank">Apply Now</a>
                <span class="benefit-language"><i data-feather="globe" class="inline mr-1"></i> Español, English</span>
              </div>
            </div>
          </div>

          <div class="benefit-card" data-countries="mx in ph">
            <div class="benefit-image" style="background-image: url('http://static.photos/education/640x360/2')"></div>
            <div class="benefit-content">
              <h3 class="benefit-title">Education Grant Program</h3>
              <p class="benefit-description">Scholarships for immigrants pursuing higher education or vocational training.</p>
              <div class="benefit-actions">
                <a href="#" class="benefit-button" target="_blank">Learn More</a>
                <span class="benefit-language"><i data-feather="globe" class="inline mr-1"></i> English, Español</span>
              </div>
            </div>
          </div>

          <div class="benefit-card" data-countries="all">
            <div class="benefit-image" style="background-image: url('http://static.photos/medical/640x360/3')"></div>
            <div class="benefit-content">
              <h3 class="benefit-title">Healthcare Access Program</h3>
              <p class="benefit-description">Low-cost healthcare services for uninsured immigrant families.</p>
              <div class="benefit-actions">
                <a href="#" class="benefit-button" target="_blank">Find Providers</a>
                <span class="benefit-language"><i data-feather="globe" class="inline mr-1"></i> Multiple Languages</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}

customElements.define('custom-benefits', CustomBenefits);