class CustomProcess extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .process-step {
          position: relative;
          padding-left: 80px;
          margin-bottom: 40px;
        }
        .step-number {
          position: absolute;
          left: 0;
          top: 0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: var(--primary);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          font-size: 1.5rem;
        }
        .process-line {
          position: absolute;
          left: 25px;
          top: 50px;
          bottom: -40px;
          width: 2px;
          background: var(--primary);
          opacity: 0.2;
        }
        .process-step:last-child .process-line {
          display: none;
        }
      </style>
      <section id="process" class="py-20 bg-white">
        <div class="container mx-auto px-6">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Proven Process</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
              A structured approach to ensure your digital success
            </p>
          </div>
          
          <div class="max-w-3xl mx-auto">
            <div class="process-step">
              <div class="step-number">1</div>
              <div class="process-line"></div>
              <h3 class="text-xl font-bold mb-2">Discovery & Strategy</h3>
              <p class="text-gray-600">
                We dive deep into your business objectives, target audience, and competitive landscape to craft a tailored digital strategy.
              </p>
            </div>
            
            <div class="process-step">
              <div class="step-number">2</div>
              <div class="process-line"></div>
              <h3 class="text-xl font-bold mb-2">Design & Development</h3>
              <p class="text-gray-600">
                Our team transforms concepts into visually stunning and technically robust digital solutions.
              </p>
            </div>
            
            <div class="process-step">
              <div class="step-number">3</div>
              <div class="process-line"></div>
              <h3 class="text-xl font-bold mb-2">Testing & Optimization</h3>
              <p class="text-gray-600">
                Rigorous testing ensures flawless performance across all devices and platforms.
              </p>
            </div>
            
            <div class="process-step">
              <div class="step-number">4</div>
              <h3 class="text-xl font-bold mb-2">Launch & Growth</h3>
              <p class="text-gray-600">
                We don't just launch - we monitor, analyze, and optimize to ensure continuous growth.
              </p>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}
customElements.define('custom-process', CustomProcess);