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

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

@Component({
  selector: 'app-services',
  host: { 'app-services': 'app-services2' },
  imports: [RouterLink],
  template: `
    <div class="service1 sp3" id="service">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 m-auto text-center">
              <div class="hadding1">
                <h1 class="square"  data-aos="fade-up" data-aos-duration="700" >Cosulting Services We Offered</h1>
                <div class="space24"></div>
                <p data-aos="fade-up" data-aos-duration="900">Our team of experienced consultants combines industry knowledge, cutting-edge technology, and innovative strategies to guide you towards a brighter and greener future.
                </p>
              </div>
            </div>
          </div>
          <div class="space30"></div>
          <div class="row">
            @for(items of servicesData;track $index){
            <div class="col-lg-6">
              <div class="" data-aos="fade-up" [attr.data-aos-duration]="items.duration">
                <div class="service1-box">
                  <div class="">
                    <div class="service1-box-icon">
                      <img [src]="items.image" alt="">
                    </div>
                  </div>
                  <div class="hadding1 text-start">
                    <h2><a routerLink="/service-details">{{items.title}}</a></h2>
                    <div class="space14"></div>
                    <p>{{items.des}}</p>
                    <div class="space24"></div>
                      <a class="learn-more1" routerLink="/service-details">Read More<span><i class="fa-solid fa-arrow-right"></i></span></a>
                  </div>
                </div>
              </div>
            </div>
            }
          </div>
          <div class="space40"></div>
          <div class="row" data-aos="fade-up" data-aos-duration="700">
            <div class="col-lg-12 text-center">
              <a routerLink="/service-details" class="btn_theme btn_theme btn_theme_active wow fadeInDown1" data-wow-duration="0.8s">View All Services<span></span></a>
            </div>
          </div>
        </div>
      </div>
  `,
  styles: ``
})

export class ServicesComponent {

  servicesData: servicesType[] = [
    {
      image: 'assets/img/icons/service1-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 HR',
    },
    {
      image: 'assets/img/icons/service1-icon2.svg',
      title: 'HR Compliance and Policies',
      duration: 800,
      des: 'We ensure your HR policies and procedures are compliant with local labor laws and regulations. Our consultants review and update your employee handbook',
    },
    {
      image: 'assets/img/icons/service1-icon3.svg',
      title: 'HR Technology Solutions',
      duration: 900,
      des: 'We ensure your HR policies and procedures are compliant with local labor laws and regulations. Our consultants review and update your employee handbook',
    },
    {
      image: 'assets/img/icons/service1-icon4.svg',
      title: 'Organizational Change Management',
      duration: 700,
      des: 'We ensure your HR policies and procedures are compliant with local labor laws and regulations. Our consultants review and update your employee handbook',
    }
  ]

}
