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

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

@Component({
  selector: 'app-case-studies',
  imports: [RouterLink],
  template: `
     <div class="case-studies sp3" id="case">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 m-auto text-center">
              <div class="hadding1">
                <h1 data-aos="fade-up" data-aos-duration="700">Featured Case Studies</h1>
                <div class="space24"></div>
                <p  data-aos="fade-up" data-aos-duration="800">Consulting service is a key part of the future of energy. It can help you save money on your electricity bill, and it can also help to reduce your carbon footprint.</p>
              </div>
            </div>
          </div>
          <div class="space30"></div>
          <div class="row">
            @for(items of casestudiesData;track $index ){
             <div class="col-lg-6">
              <div class="case-box-all" data-aos="fade-up" [attr.data-aos-duration]="items.duration">
                <div class="case-box-img img100 border5">
                  <img [src]="items.image" alt="">
                </div>
                <div class="case-box-after">
                  <div class="case-box-hover">
                    <div class="case-hover-hadding">
                      <h4><a routerLink="/case-details1">{{ items.title }}</a></h4>
                      <div class="space14"></div>
                      <div class="hover-block">
                        <p> {{items.des}} </p>
                          <div class="space24"></div>
                          <div class="case-hover-icon2">
                            <a routerLink="/case-details1"><i class="fa-solid fa-arrow-right"></i></a>
                          </div>
                      </div>
                    </div>
                    <div class="case-hover-icon">
                      <a routerLink="/case-details1"><i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            }
          
          </div>
        </div>
      </div>
  `,
  styles: ``
})

export class CaseStudiesComponent {

  casestudiesData : casestudiesType[] = [
    {
      duration: 700,
      image: 'assets/img/image/case1-img1.png',
      title: 'Financial Investment',
      des: 'Describe the HR challenges faced by the client and how your the solutions helped them achieve significant',
    },
    {
      duration: 900,
      image: 'assets/img/image/case1-img2.png',
      title: 'HR Consulting',
      des: 'Describe the HR challenges faced by the client and how your the solutions helped them achieve significant',
    },
  ]
  
}
