class CustomAbout extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .about-section {
          max-width: 1200px;
          margin: 0 auto;
          padding: 4rem 2rem;
          display: grid;
          grid-template-columns: 1fr;
          gap: 3rem;
        }
        .about-content {
          display: grid;
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        @media (min-width: 768px) {
          .about-content {
            grid-template-columns: 1fr 1fr;
          }
        }
        .about-image {
          border-radius: 1rem;
          overflow: hidden;
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .about-image img {
          width: 100%;
          height: auto;
          display: block;
        }
        .about-text h2 {
          font-size: 2.5rem;
          font-weight: 800;
          margin-bottom: 1.5rem;
          color: #1a1a1a;
        }
        .about-text p {
          font-size: 1.125rem;
          line-height: 1.75;
          color: #4b5563;
          margin-bottom: 1.5rem;
        }
        .stats {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
          margin-top: 2rem;
        }
        .stat-item {
          background: #f9fafb;
          padding: 1.5rem;
          border-radius: 0.5rem;
          text-align: center;
        }
        .stat-number {
          font-size: 2.25rem;
          font-weight: 700;
          color: #4f46e5;
          margin-bottom: 0.5rem;
        }
        .stat-label {
          font-size: 0.875rem;
          color: #6b7280;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
      </style>
      <section class="about-section">
        <div class="about-content">
          <div class="about-text">
            <h2>We make developers' lives easier</h2>
            <p>DevDazzle was born from our frustration with ugly, hard-to-implement UI components. We believe developers deserve beautiful, production-ready components that just work.</p>
            <p>Our team of designers and developers work together to create components that are both visually stunning and technically excellent.</p>
            <div class="stats">
              <div class="stat-item">
                <div class="stat-number">500+</div>
                <div class="stat-label">Components</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">50K+</div>
                <div class="stat-label">Developers</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">100%</div>
                <div class="stat-label">Satisfaction</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">24/7</div>
                <div class="stat-label">Support</div>
              </div>
            </div>
          </div>
          <div class="about-image">
            <img src="http://static.photos/technology/1024x576/42" alt="Team working on components">
          </div>
        </div>
      </section>
    `;
  }
}
customElements.define('custom-about', CustomAbout);