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

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

@Component({
  selector: 'app-features',
  imports: [RouterLink],
  template: `
  <div class="case4 sp2" id="case">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 m-auto text-center">
                    <div class="hadding4">
                        <h1 data-aos="fade-up" data-aos-duration="700">Featured Case Studies</h1>
                        <div class="space16"></div>
                        <p data-aos="fade-up" data-aos-duration="900">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 (item of featureData; track $index) {
            <div class="col-lg-4">
              <div class="case4-box-all" [attr.data-aos]="'fade-up'" [attr.data-aos-duration]="item.duration">
                <div class="case-box-img img100 border5">
                  <img [src]="item.image" alt="" />
                </div>
                <div class="case4-box-hadding hadding4-w">
                  <h4><a routerLink="/case-details1">{{ item.title }}</a></h4>
                  <div class="space14"></div>
                  <p>{{ item.des }}</p>
                  <div class="space24"></div>
                  <a class="read-more4-w" routerLink="/case-details1">
                    Read More <span><i class="fa-solid fa-arrow-right"></i></span>
                  </a>
                </div>
              </div>
            </div>
          }
            </div>
            <div class="space40"></div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <a routerLink="/cart" class="button4-header4">View All Project</a>
                </div>
            </div>
        </div>
    </div>
  `,
  styles: ``
})
export class FeaturesComponent {

  featureData: FeatureItem[] = [
    {
      image: 'assets/img/image/case4-img1.png',
      title: 'Financial Risk Management',
      des: 'Describe the HR challenges faced by the client and how your the solutions helped them achieve significant',
      duration: 900,
    },
    {
      image: 'assets/img/image/case4-img2.png',
      title: 'Financial Risk Management',
      des: 'Describe the HR challenges faced by the client and how your the solutions helped them achieve significant',
      duration: 700,
    },
    {
      image: 'assets/img/image/case4-img3.png',
      title: 'Financial Risk Management',
      des: 'Describe the HR challenges faced by the client and how your the solutions helped them achieve significant',
      duration: 900,
    }
  ];

}
