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-services7' },
  imports: [RouterLink],
  template: `
    <div class="service7 sp3" id="service" style="background-color: #0C1217;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding7-w">
              <h1 class="font-f-7" data-aos-duration="700" data-aos="fade-up">
                Our Legal Tax law Services
              </h1>
              <div class="space16"></div>
              <p data-aos-duration="1100" data-aos="fade-up">
                Our legal team specializes in a wide range of criminal defense
                services, from DUI charges to drug-related offenses. We provide
                personalized strategies and dedicated representation
              </p>
            </div>
          </div>
        </div>

        <div class="space30"></div>
        <div class="row">
          @for (service of services; track service) {
          <div class="col-lg-4 col-md-6">
            <div
              class=""
              [attr.data-aos-duration]="service.aosDuration"
              data-aos="fade-up"
            >
              <div class="service7-box _relative">
                <div class="service-icon-align">
                  <div class="service7-icon">
                    <img [src]="service.icon" alt="" />
                  </div>
                </div>
                <div class="hadding7-w">
                  <h4>
                    <a [routerLink]="service.link" class="font-f-7">{{
                      service.title
                    }}</a>
                  </h4>
                  <div class="space16"></div>
                  <p>{{ service.description }}</p>
                  <div class="space16"></div>
                  <a [routerLink]="service.link" class="service7-learn">
                    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">
            <div class="" data-aos-duration="900" data-aos="fade-up">
              <a routerLink="/service" class="theme-btn8"
                >View More Services
                <span><i class="fa-solid fa-arrow-right"></i></span
              ></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class ServicesComponent {
  services: ServiceItem[] = [
    {
      icon: 'assets/img/icons/service7-iocn1.svg',
      title: 'Business Law',
      description:
        'Our tax planning strategies help you navigate complex tax codes, ensuring you pay no more than necessary...',
      link: '/service-details',
      aosDuration: '800',
    },
    {
      icon: 'assets/img/icons/service7-iocn2.svg',
      title: 'Family Law',
      description:
        'Our tax planning strategies help you navigate complex tax codes, ensuring you pay no more than necessary...',
      link: '/service-details',
      aosDuration: '900',
    },
    {
      icon: 'assets/img/icons/service7-iocn3.svg',
      title: 'Criminal Defense',
      description:
        'Our tax planning strategies help you navigate complex tax codes, ensuring you pay no more than necessary...',
      link: '/service-details',
      aosDuration: '700',
    },
    {
      icon: 'assets/img/icons/service7-iocn4.svg',
      title: 'Personal Injury',
      description:
        'Our tax planning strategies help you navigate complex tax codes, ensuring you pay no more than necessary...',
      link: '/service-details',
      aosDuration: '1200',
    },
    {
      icon: 'assets/img/icons/service7-iocn5.svg',
      title: 'Employment Law',
      description:
        'Our tax planning strategies help you navigate complex tax codes, ensuring you pay no more than necessary...',
      link: '/service-details',
      aosDuration: '800',
    },
    {
      icon: 'assets/img/icons/service7-iocn6.svg',
      title: 'Education Law',
      description:
        'Our tax planning strategies help you navigate complex tax codes, ensuring you pay no more than necessary...',
      link: '/service-details',
      aosDuration: '1100',
    },
  ];
}
