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

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

@Component({
  selector: 'app-services',
  host: { 'app-services': 'app-single-services10' },
  imports: [RouterLink],
  template: `
    <div class="service9 sp3" id="service" style="background-color: #1E1E1E;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding9">
              <h1 data-aos="fade-up" data-aos-duration="700">
                Best Tax Consulting Services
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="900">
                Our team of experienced consultants industry knowledge, -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 (item of servicesData; track item) {
          <div class="col-lg-6">
            <div class="" data-aos="fade-up">
              <div class="service9-box">
                <div class="">
                  <div class="service9-box-icon">
                    <img [src]="item.icon" alt="" />
                  </div>
                </div>
                <div class="hadding9">
                  <h4>
                    <a [routerLink]="item.link">{{ item.title }}</a>
                  </h4>
                  <div class="space12"></div>
                  <p>{{ item.description }}</p>
                  <div class="space16"></div>
                  <a [routerLink]="item.link" class="service9-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="800">
              <a routerLink="/service" class="theme-btn12"
                >View More Services<span
                  ><i class="fa-solid fa-arrow-right"></i></span
              ></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class ServicesComponent {
  servicesData: ServiceItem[] = [
    {
      icon: 'assets/img/icons/service9-icon1.svg',
      title: 'Personal Tax Consulting',
      link: '/service-details',
      description:
        'Maximizing your returns while managing risks. We develop investment portfolios aligned with your risk tolerance and long-term objectives of experts identify strategies.',
    },
    {
      icon: 'assets/img/icons/service9-icon2.svg',
      title: 'Tax Planning & Strategy',
      link: '/service-details',
      description:
        'Maximizing your returns while managing risks. We develop investment portfolios aligned with your risk tolerance and long-term objectives of experts identify strategies.',
    },
    {
      icon: 'assets/img/icons/service9-icon3.svg',
      title: 'IRS Dispute Resolution',
      link: '/service-details',
      description:
        'Maximizing your returns while managing risks. We develop investment portfolios aligned with your risk tolerance and long-term objectives of experts identify strategies.',
    },
    {
      icon: 'assets/img/icons/service9-icon4.svg',
      title: 'Tax Compliance & Filling',
      link: '/service-details',
      description:
        'Maximizing your returns while managing risks. We develop investment portfolios aligned with your risk tolerance and long-term objectives of experts identify strategies.',
    },
  ];
}
