import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

type missionType = {
  duration: number;
  image: string;
  title: string;
  des: string;
}

@Component({
  selector: 'app-mission',
  imports: [RouterLink,CommonModule],
  template: `
       <div class="mission1 sp3" id="mission" style="background-color: #00092C;">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="hadding3-w mission-hadding">
                        <h1 data-aos="fade-right" data-aos-duration="700">Why Our mission is to provide exceptional tax services</h1>
                        <div class="space24"></div>
                        <p data-aos="fade-right" data-aos-duration="700">Flexible energy service is a key part of the future of energy. It can help you save money on your electricity bill, and it can also help to reduce your carbon footprint.We have a track.</p>
                        <div class="space40"></div>
                            <a data-aos-duration="700" data-aos="fade-right" class="buttonBox2 fifth" routerLink="/about">About Us</a>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="mission-boxs-all">
                      @for(item of missionData;track $index) {
                         <div class="mission-box" data-aos="fade-left" [attr.data-aos-duration]="item.duration">
                            <div class="">
                                <div class="mission-box-icon">
                                    <img [src]="item.image" alt="">
                                </div>
                            </div>
                            
                            <div class="mission-hadding hadding3-w" >
                                <h4><a routerLink="/about">{{item.title}}</a></h4>
                                <div class="space12"></div>
                                <p>{{ item.des }}</p>
                            </div>
                        </div>
                        @if ($index < missionData.length - 1) {
                        <div class="mission-border"></div>
                        }
                      }
                    </div>
                </div>
            </div>
        </div>
      </div>
  `,
  styles: ``
})
export class MissionComponent {

  missionData: missionType[] = [
    {
      duration: 700,
      image: 'assets/img/icons/mission-icon1.svg',
      title: 'Expertise',
      des: 'Our team of seasoned professionals has in-depth knowledge of tax laws, regulations, and industry best practices. We stay up-to-date with the latest changes in tax.'
    },
    {
      duration: 900,
      image: 'assets/img/icons/mission-icon2.svg',
      title: 'Client-Centric Approach',
      des: 'Our team of seasoned professionals has in-depth knowledge of tax laws, regulations, and industry best practices. We stay up-to-date with the latest changes in tax.'
    },
    {
      duration: 700,
      image: 'assets/img/icons/mission-icon3.svg',
      title: 'Commitment to Excellence',
      des: 'Our team of seasoned professionals has in-depth knowledge of tax laws, regulations, and industry best practices. We stay up-to-date with the latest changes in tax.'
    },
  ]

}
