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

type ServiceItem = {
  title: string;
  description: string;
  icon: string;
  link: string;
}

@Component({
  selector: 'app-services',
  imports: [RouterLink],
  template: `
    <div class="about-page-service sp3">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 m-auto text-center">
            <div class="page-hadding">
              <h1 class="square">Cosulting Services We Offered</h1>
              <div class="space24"></div>
              <p>
                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 (service of services; track service) {
          <div class="col-lg-6">
            <div class="">
              <div class="service1-box">
                <div class="">
                  <div class="service1-box-icon">
                    <img [src]="service.icon" alt="" />
                  </div>
                </div>
                <div class="hadding1 text-start">
                  <h2>
                    <a [routerLink]="service.link">{{ service.title }}</a>
                  </h2>
                  <div class="space14"></div>
                  <p [innerHTML]="service.description"></p>
                  <div class="space24"></div>
                  <a class="learn-more1" [routerLink]="service.link">
                    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">
          <div class="col-lg-12 text-center">
            <a [routerLink]="[]" class="comon-button">More About Us</a>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class ServicesComponent {
  services: ServiceItem[] = [
    {
      title: 'HR Strategy and Planning',
      description: `Our expert consultants work with you to develop a comprehensive HR strategy aligned with your business goals. <br> We assess your current HR`,
      icon: 'assets/img/icons/service1-icon1.svg',
      link: '/service',
    },
    {
      title: 'HR Compliance and Policies',
      description: `We ensure your HR policies and procedures are compliant with local labor laws and regulations. Our consultants review and update your employee handbook,`,
      icon: 'assets/img/icons/service1-icon2.svg',
      link: '/service',
    },
    {
      title: 'HR Technology Solutions',
      description: `We ensure your HR policies and procedures are compliant with local labor laws and regulations. Our consultants review and update your employee handbook,`,
      icon: 'assets/img/icons/service1-icon3.svg',
      link: '/service',
    },
    {
      title: 'Organizational Change Management',
      description: `We ensure your HR policies and procedures are compliant with local labor laws and regulations. Our consultants review and update your employee handbook,`,
      icon: 'assets/img/icons/service1-icon4.svg',
      link: '/service',
    }
  ];
}
