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

@Component({
  selector: 'app-hero',
  host: { 'app-hero': 'app-single-hero6' },
  imports: [CarouselModule,CountUpModule,RouterLink],
  template: `
    <div
      class="main-hero main-hero5 _relative"
      style="background-color: #ECF5F6;"
    >
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-12 _relative">
            <div class="main-hadding6">
              <h1>HR Consulting Best Excellence for Your Organization</h1>
              <div class="space24"></div>
              <p>
                Guiding Financial Success with Expertise and Precision. Drive
                Growth, <br />
                Improve Efficiency and Make Informed DecisionsWe help business
                to perform <br />
                with our customized solution helping them take business.
              </p>
              <div class="space40"></div>
              <div class="header2-buttons">
                <div class="button2-all">
                  <a routerLink="/contact" class="theme-btn7"
                    >Schedule A Consultation</a
                  >
                </div>
                <div class="button2-all2"></div>
              </div>

              <div class="space40"></div>
              <div class="brand2-slider-all">
                <h4>Our Trusted Partner:</h4>
                <div class="space24"></div>
                <div class="brand2-slider brand2-slider6">
                  <owl-carousel-o [options]="carouselOptions">
                    @for(item of brandsData;track $index){
                    <ng-template carouselSlide>
                      <div class="brand2-logo px-2">
                        <img [src]="item" alt="" />
                      </div>
                    </ng-template>
                    }
                  </owl-carousel-o>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="hero6-images">
              <div class="hero6-main-img">
                <img src="assets/img/image/hero6-main-img.png" alt="" />
              </div>
              <div class="hero6-main-shape aniamtion-key-1">
                <img src="assets/img/shapes/hero6-shape1.svg" alt="" />
              </div>
              <div class="hero6-counter-box">
                <div class="hero6-counter-flex">
                  <div class="hero6-counter text-center">
                    <h1><span class="counter" [countUp]="546" [options]="{ suffix : '+'}"></span></h1>
                    <div class="space16"></div>
                    <p>Successful Cases</p>
                  </div>
                  <div class="hero6-counter text-center">
                    <h1><span class="counter" [countUp]="550" [options]="{ suffix : '+'}"></span></h1>
                    <div class="space16"></div>
                    <p>Total Divorce Cases</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img
        class="brand6-logo aniamtion-key-2"
        src="assets/img/logo/hero6-brand.svg"
        alt=""
      />
      <img
        class="brand6-sahpe aniamtion-key-2"
        src="assets/img/shapes/hero6-shape.svg"
        alt=""
      />
    </div>
  `,
  styles: ``,
})
export class HeroComponent {

  brandsData: string[] = [
    'assets/img/logo/header6-slider-logo1.svg',
    'assets/img/logo/header6-slider-logo2.svg',
    'assets/img/logo/header6-slider-logo3.svg',
    'assets/img/logo/header6-slider-logo4.svg',
  ];

  carouselOptions:OwlOptions = {
    loop: true,
    margin: 10,
    nav: false,
    autoplay: true,
    autoplayTimeout: 3000,
    smartSpeed: 1000,
    items: 4
  };
}
