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

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

@Component({
  selector: 'app-services',
  host: { 'app-services': 'app-single-services8' },
  imports: [RouterLink],
  template: `
    <div class="service8 sp3" id="service" style="background-color: #E9EDF4;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding8">
              <span data-aos="fade-up" data-aos-duration="700"
                >Our Service</span
              >
              <div class="space16"></div>
              <h1 data-aos="fade-up" data-aos-duration="900">
                Cosulting Services We Offered
              </h1>
            </div>
          </div>
        </div>

        <div class="space30"></div>
        <div class="row">
          @for (item of servicesData; track item) {
          <div class="col-md-6 col-lg-4">
            <div
              class=""
              [attr.data-aos]="'fade-up'"
              [attr.data-aos-duration]="item.aosDuration"
            >
              <div class="service8-box">
                <div class="service8-icon">
                  <img [src]="item.icon" alt="" />
                </div>
                <div class="space16"></div>
                <div class="hadding8">
                  <h4>
                    <a [routerLink]="item.link">{{ item.title }}</a>
                  </h4>
                  <div class="space16"></div>
                  <p>{{ item.description }}</p>
                  <div class="space16"></div>
                  <a [routerLink]="item.link" class="service8-learn">
                    learn 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">
            <div class="" data-aos="fade-up" data-aos-duration="900">
              <a routerLink="/service" class="theme-btn10"
                >View Our All Services</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class ServicesComponent {
  servicesData: ServiceItem[] = [
    {
      icon: 'assets/img/icons/service8-icon1.svg',
      title: 'Strategy Consulting',
      description:
        'Consultants analyze current operations and identify areas for improvement in efficiency, productivity, and cost reduction.',
      link: '/service-details',
      aosDuration: '700',
    },
    {
      icon: 'assets/img/icons/service8-icon2.svg',
      title: 'Strategy & Planning',
      description:
        'Consultants analyze current operations and identify areas for improvement in efficiency, productivity, and cost reduction.',
      link: '/service-details',
      aosDuration: '900',
    },
    {
      icon: 'assets/img/icons/service8-icon3.svg',
      title: 'Marketing & Sales',
      description:
        'Consultants analyze current operations and identify areas for improvement in efficiency, productivity, and cost reduction.',
      link: '/service-details',
      aosDuration: '1100',
    },
    {
      icon: 'assets/img/icons/service8-icon4.svg',
      title: 'IT Consulting',
      description:
        'Consultants analyze current operations and identify areas for improvement in efficiency, productivity, and cost reduction.',
      link: '/service-details',
      aosDuration: '700',
    },
    {
      icon: 'assets/img/icons/service8-icon5.svg',
      title: 'Change Managment',
      description:
        'Consultants analyze current operations and identify areas for improvement in efficiency, productivity, and cost reduction.',
      link: '/service-details',
      aosDuration: '1100',
    },
    {
      icon: 'assets/img/icons/service8-icon6.svg',
      title: 'Process Improvement',
      description:
        'Consultants analyze current operations and identify areas for improvement in efficiency, productivity, and cost reduction.',
      link: '/service-details',
      aosDuration: '900',
    },
  ];
}
