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

type aboutType = {
  image: string;
  duration: string;
  title: string;
  des: string;
};

@Component({
  selector: 'app-about',
  host: { 'app-about': 'app-single-about6' },
  imports: [RouterLink],
  template: `
    <div class="about6 sp3" id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-7 m-auto text-center">
            <div class="hadding6">
              <h1 data-aos="fade-up" data-aos-duration="700">
                Why Choose Our HR Managment
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="700">
                We understand that every client has unique needs and goals. We
                take the time to listen, best HR managements consulting analyze
                your financial situation, & tailor Services.
              </p>
            </div>
          </div>
        </div>
        <div class="space30"></div>
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="space30"></div>
            <div
              class="about6-images"
              data-aos="zoom-out"
              data-aos-duration="700"
            >
              <div class="about6-img1 aniamtion-key-1">
                <img src="assets/img/shapes/hero6-shape1.svg" alt="" />
              </div>
              <div class="about6-img2 img5">
                <img src="assets/img/image/about6-img.png" alt="" />
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="space30"></div>
            <div class="hadding6">
              @for(item of aboutData;track $index){
              <div
                class=""
                data-aos="fade-left"
                [attr.data-aos-duration]="item.duration"
              >
                <div class="about6-box">
                  <div class="">
                    <div class="about6-icon">
                      <img [src]="item.image" alt="" />
                    </div>
                  </div>
                  <div class="hadding6">
                    <h4>
                      <a [routerLink]="[]">{{ item.title }}</a>
                    </h4>
                    <div class="space10"></div>
                    <p>
                      {{ item.des }}
                    </p>
                  </div>
                </div>
              </div>
              }
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class AboutComponent {
  aboutData: aboutType[] = [
    {
      image: 'assets/img/icons/about6-icon1.svg',
      duration: '700',
      title: 'Streamlined Hr Operations',
      des: 'Our team of seasoned professionals has in-depth service knowledge of tax law, regular, & industry management.',
    },
    {
      image: 'assets/img/icons/about6-icon2.svg',
      duration: '900',
      title: 'Training & Development',
      des: 'Our team of seasoned professionals has in-depth service knowledge of tax law, regular, & industry management.',
    },
    {
      image: 'assets/img/icons/about6-icon3.svg',
      duration: '1100',
      title: 'Benefits & Compensation',
      des: 'Our team of seasoned professionals has in-depth service knowledge of tax law, regular, & industry management.',
    },
  ];
}
