import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CountUpModule } from 'ngx-countup';
import { NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';


@Component({
  selector: 'app-about',
  host: { 'app-about': 'app-about4' },
  imports: [RouterLink, CountUpModule, CommonModule, NgbProgressbarModule],
  template: `
        <div class="about4 sp2" id="about">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="about4-img-all" data-aos="zoom-out" data-aos-duration="700">
                        <div class="about4-img-1 img100">
                            <img src="assets/img/image/about4-img1.png" alt="">
                        </div>

                        <div class="about4-img-2">
                            <div class="about4-counter">
                              <div class="about4-counter-text">
                                <h1 [countUp]="16"></h1>
                                <p>Years of <br>
                                  Experience</p>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="hadding4 about4-hadding">
                        <h1 data-aos="fade-left" data-aos-duration="700">We are Best Financial
                            Company for Your Business</h1>
                        <div class="space16"></div>
                        <p data-aos="fade-left" data-aos-duration="900">At Advisor Consulting, we are a trusted finance consulting firm dedicated to helping businesses achieve financial excellence and sustainable growth.Whether your dream is to retire well or build a profitable busines JS Morlu offers a diverse range of exclusive accounting, tax, on audit and business advisory</p>

                        <div class="space30"></div>
                    
                          <div class="porgress-line-all" data-aos="fade-left" data-aos-duration="900">
                              <div class="progress-line" *ngFor="let item of progressItems">
                                <h6>{{ item.label }}</h6>
                                <div class="progressbar-wrapper" data-init="true">
                                  <div class="percentCount">{{ item.current }}%</div>
                                  <div
                                    class="progressbar"
                                    [ngStyle]="{
                                      width: '100%',
                                      backgroundColor: '#E7E8E9',
                                      borderRadius: '8px'
                                    }"
                                  >
                                    <div
                                      class="proggress"
                                      [ngStyle]="{
                                        backgroundColor: '#624CAB',
                                        height: '10px',
                                        borderRadius: '8px',
                                        width: item.current + '%'
                                      }"
                                    ></div>
                                  </div>
                                </div>
                              </div>
                            </div>

                          <div class="space40"></div>
                          <a routerLink="/about" class="button4-header4">About Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  `,
  styles: ``
})

export class AboutComponent {

  progressItems = [
    { label: 'Consulting', target: 90, current: 0 },
    { label: 'Marketing', target: 80, current: 0 },
    { label: 'Marketing', target: 92, current: 0 }
  ];

  ngOnInit(): void {
    this.animateProgress();
  }

  animateProgress(): void {
    const speed = 30;
    this.progressItems.forEach((item, idx) => {
      let i = 0;
      const interval = setInterval(() => {
        if (i <= item.target) {
          this.progressItems[idx].current = i;
          i++;
        } else {
          clearInterval(interval);
        }
      }, speed);
    });
  }

}


