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

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

@Component({
  selector: 'app-services',
  host: { 'app-services': 'app-single-services6' },
  imports: [RouterLink],
  template: `
    <div class="service6 sp3" id="service" style="background-color: #10242D;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding6-w">
              <h1 data-aos="fade-up" data-aos-duration="900">
                Ways to Support your Business
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="1100">
                Our team of experienced consultants combines industry knowledge,
                cutting-edge technology, and innovative to guide you towards a
                brighter and greener future.
              </p>
            </div>
          </div>
        </div>
        <div class="space30"></div>
        <div class="row">
          @for(item of servicesData;track $index){
          <div class="col-lg-6">
            <div
              class=""
              data-aos="fade-up"
              [attr.data-aos-duration]="item.duration"
            >
              <div class="service6-box">
                <div class="service6-box-iocn">
                  <img [src]="item.image" alt="" />
                </div>
                <div class="service6-border"></div>
                <div class="hadding6-w">
                  <h4>
                    <a routerLink="/service-details">{{ item.title }}</a>
                  </h4>
                  <div class="space16"></div>
                  <p>
                    {{ item.des }}
                  </p>
                  <div class="space24"></div>
                  <a routerLink="/service-details" class="service6-leran"
                    >Read More
                    <span><i class="fa-solid fa-arrow-right"></i></span
                  ></a>
                </div>
              </div>
            </div>
          </div>
          }
        </div>
      </div>

      <div class="space40"></div>
      <div class="row">
        <div class="col-lg-12 text-center">
          <div class="" data-aos="fade-up" data-aos-duration="800">
            <a routerLink="/service" class="theme-btn7">Explore Our Services</a>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class ServicesComponent {
  servicesData: servicesType[] = [
    {
      image: 'assets/img/icons/service6-icon1.svg',
      title: 'HR Strategy and Planning',
      duration: '700',
      des: 'Our expert consultants work with you to develop a comprehensive HR strategy aligned with your business goals. We assess your current Helping businesses to define their goals',
    },
    {
      image: 'assets/img/icons/service6-icon2.svg',
      title: 'Talent Management',
      duration: '900',
      des: 'Our expert consultants work with you to develop a comprehensive HR strategy aligned with your business goals. We assess your current Helping businesses to define their goals',
    },
    {
      image: 'assets/img/icons/service6-icon3.svg',
      title: 'Compliance Audits',
      duration: '800',
      des: 'Our expert consultants work with you to develop a comprehensive HR strategy aligned with your business goals. We assess your current Helping businesses to define their goals',
    },
    {
      image: 'assets/img/icons/service6-icon4.svg',
      title: 'Employee Training',
      duration: '1100',
      des: 'Our expert consultants work with you to develop a comprehensive HR strategy aligned with your business goals. We assess your current Helping businesses to define their goals',
    },
  ];
}
