import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CarouselModule } from 'ngx-owl-carousel-o';

type industryType = {
  image: string;
  title: string;
  des: string;
};

@Component({
  selector: 'app-industries',
  host: { 'app-industries': 'app-single-industries5' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="industries sp3" style="background-color: #1C1C57;">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 m-auto text-center">
            <div class="hadding5-w">
              <h1 data-aos="fade-up" data-aos-duration="700">
                Industries we have served
              </h1>
              <div class="space16"></div>
              <p data-aos="fade-up" data-aos-duration="1000">
                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="space60"></div>
        <div class="row">
          <div class="col-lg-12">
            <div
              class="industries-slider"
              data-aos="fade-up"
              data-aos-duration="900"
            >
              <owl-carousel-o [options]="carouselOptions">
                @for(item of industryData;track $index){
                <ng-template carouselSlide>
                  <div class="industries-slider-single">
                    <div class="industries-box _relative">
                      <div class="industries-img img5">
                        <img [src]="item.image" alt="" />
                      </div>
                      <div class="industries-hadding hadding5">
                        <h4>
                          <a [routerLink]="[]">{{ item.title }}</a>
                        </h4>
                        <div class="space16"></div>
                        <p>
                          {{ item.des }}
                        </p>
                        <div class="space16"></div>
                        <a routerLink="/service-details" class="learn-more5"
                          >Read More <i class="fa-solid fa-arrow-right"></i
                        ></a>
                      </div>
                    </div>
                  </div>
                </ng-template>
                }
              </owl-carousel-o>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class IndustriesComponent {
  industryData: industryType[] = [
    {
      image: 'assets/img/image/industries-img1.png',
      title: 'Finance Consulting',
      des: 'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
    },
    {
      image: 'assets/img/image/industries-img2.png',
      title: 'Finance Professional',
      des: 'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
    },
    {
      image: 'assets/img/image/industries-img3.png',
      title: 'Finance Assessment',
      des: 'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
    },
    {
      image: 'assets/img/image/industries-img1.png',
      title: 'Finance Consulting',
      des: 'Our goal is to empower you with the law knowledge, strategies, Our best finance.',
    },
  ];

  carouselOptions = {
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    slideSpeed: 600,
    navText: [
      '<i class="fa-solid fa-arrow-left"></i>',
      '<i class="fa-solid fa-arrow-right"></i>',
    ],
    responsive: {
      0: {
        items: 1,
      },
      900: {
        items: 3,
      },
    },
  };
}
