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

type ServicesType = {
  image: string;
  title: string;
  des: string;
  duration: number;
}

@Component({
  selector: 'app-services',
  host: { 'app-services': 'app-services1' },
  imports: [RouterLink],
  template: `
     <div class="service2 sp3" id="service" style="background-color: #254969;">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding2-w">
                        <span class="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"><span class="after2">Cosulting</span> Services We Offered</h1>
                        <div class="space24"></div>
                        <p data-aos="fade-up" data-aos-duration="1100">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(items of servicesData;track $index ){
                  <div class="col-lg-6">
                    <div class="" data-aos="fade-up" [attr.data-aos-duration]="items.duration">
                      <div class="service2-box">
                        <div class="serivce2-icon">
                            <img [src]="items.image" alt="">
                        </div>
                        <div class="space24"></div>
                        <div class="service2-hadding hadding2-w">
                            <h4><a routerLink="/service-details">{{items.title}}</a></h4>
                            <div class="space14"></div>
                            <p>{{items.des}}</p>
                            <div class="space24"></div>
                                <a class="read-more-btn-w" routerLink="/service-details">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" data-aos="fade-up" data-aos-duration="800">
                <div class="col-lg-12 text-center">
                    <a routerLink="/service" class="button-h-2 btnfos2">View All Service</a>
                </div>
            </div>
        </div>
      </div>
  `,
  styles: ``
})
export class ServicesComponent {

  servicesData: ServicesType[] = [
    {
      image: 'assets/img/icons/service2-icon1.svg',
      title: 'Strategy Consulting',
      des: 'Our experienced consultants help develop strategic plans to drive business growth, improve operations, and achieve long-term...',
      duration: 700
    },
    {
      image: 'assets/img/icons/service2-icon1.svg',
      title: 'Marketing Consulting',
      des: 'Our experienced consultants help develop strategic plans to drive business growth, improve operations, and achieve long-term...',
      duration: 900
    },
    {
      image: 'assets/img/icons/service2-icon1.svg',
      title: 'Financial Consulting',
      des: 'Our experienced consultants help develop strategic plans to drive business growth, improve operations, and achieve long-term...',
      duration: 800
    },
    {
      image: 'assets/img/icons/service2-icon1.svg',
      title: 'Operations Consulting',
      des: 'Our experienced consultants help develop strategic plans to drive business growth, improve operations, and achieve long-term...',
      duration: 1000
    },
  ]
  
}
