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

type ServiceType = {
  icon: string;
  title: string;
  description: string;
  link: string;
  duration: number;
  classList?: string;
};

@Component({
  selector: 'app-services',
  host: { 'app-services': 'app-services3' },
  imports: [RouterLink],
  template: `
    <div class="service3 sp3" id="service" style="background-color: #333982;">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding3-w">
                        <h1 data-aos="fade-up" data-aos-duration="700">Best Cosulting Services We Offered</h1>
                        <div class="space16"></div>
                        <p data-aos="fade-up" data-aos-duration="800">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="space60"></div>
            <div class="row">
             @for (item of servicesData; track $index) {
                  <div class="col-lg-4">
                    <div
                      class="service3-box-all" 
                      [class]="item.classList"
                      data-aos="fade-up"
                      [attr.data-aos-duration]="item.duration"
                    >
                      <div class="service3-box-icon">
                        <img [src]="item.icon" alt="">
                      </div>
                      <div class="hadding3-w">
                        <h4><a [routerLink]="item.link">{{ item.title }}</a></h4>
                        <div class="space14"></div>
                        <p>{{ item.description }}</p>
                        <div class="space24"></div>
                        <a class="read-more3" [routerLink]="item.link">Read More <span><i class="fa-solid fa-arrow-right"></i></span></a>
                      </div>
                    </div>
                  </div>
                }
            </div>
        </div>
      </div>
  `,
  styles: ``
})
export class ServicesComponent {

  servicesData: ServiceType[] = [
    {
      icon: 'assets/img/icons/service3-icon1.svg',
      title: 'Personal Tax Consulting',
      description: 'Our experienced consultants provide personalized tax planning and preparation services tailored to your unique financial',
      link: '/service-details',
      duration: 700,
      classList: 'border3-right after3-service'
    },
    {
      icon: 'assets/img/icons/service3-icon2.svg',
      title: 'Business Tax Consulting',
      description: 'Our experienced consultants provide personalized tax planning and preparation services tailored to your unique financial',
      link: '/service-details',
      duration: 900,
      classList: 'border3-right p3-left after3-service2'
    },
    {
      icon: 'assets/img/icons/service3-icon3.svg',
      title: 'Tax Planning and Strategy',
      description: 'Our experienced consultants provide personalized tax planning and preparation services tailored to your unique financial',
      link: '/service-details',
      duration: 700,
      classList: 'p3-left'
    },
    {
      icon: 'assets/img/icons/service3-icon4.svg',
      title: 'Tax Compliance and Filing',
      description: 'Our experienced consultants provide personalized tax planning and preparation services tailored to your unique financial',
      link: '/service-details',
      duration: 900,
      classList: 'border3-top border3-right'
    },
    {
      icon: 'assets/img/icons/service3-icon5.svg',
      title: 'IRS Dispute Resolution',
      description: 'Our experienced consultants provide personalized tax planning and preparation services tailored to your unique financial',
      link: '/service-details',
      duration: 1000,
      classList: 'border3-top border3-right p3-left'
    },
    {
      icon: 'assets/img/icons/service3-icon6.svg',
      title: 'Tax Planning and Strategy',
      description: 'Our experienced consultants provide personalized tax planning and preparation services tailored to your unique financial',
      link: '/service-details',
      duration: 700,
      classList: 'border3-top p3-left'
    }
  ];
}
