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

@Component({
  selector: 'app-hero',
  host: { 'app-hero': 'app-hero1' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="main-hero main-hero2" style="background-color: #EDF2F6;">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-7 col-md-12">
            <div class="main-hadding2">
              <span class="span" data-aos="fade-right" data-aos-duration="700"
                >Welcome to Business Advisor</span
              >
              <div class="space16"></div>
              <h1 data-aos="fade-right" data-aos-duration="700">
                Transform Your <span class="after2">Business</span> with Expert
                Consulting Services
              </h1>
              <div class="space24"></div>
              <p data-aos="fade-right" data-aos-duration="900">
                Unlock Your Potential and Drive Growth. We help business to
                perform with our <br />
                customized solutions helping them take business decisions.
              </p>
              <div class="space40"></div>
              <div
                class="header2-buttons"
                data-aos="fade-right"
                data-aos-duration="700"
              >
                <div class="button2-all">
                  <a routerLink="/contact" class="button-h-2 btnfos2"
                    >Schedule A Consultation</a
                  >
                </div>
                <div class="button2-all2">
                  <a routerLink="/contact" class="button-h2-2 btnfos3"
                    >Contact Us</a
                  >
                </div>
              </div>
              <div class="space40"></div>
              <div
                class="brand2-slider-all"
                data-aos="fade-right"
                data-aos-duration="800"
              >
                <h4>Our Trusted Partner:</h4>
                <div class="space24"></div>
                <owl-carousel-o [options]="customOptions" class="brand2-slider">
                  @for(items of brandsdata; track $index){
                  <ng-template carouselSlide>
                    <div class="brand2-logo">
                      <img [src]="items" alt="" />
                    </div>
                  </ng-template>
                  }
                </owl-carousel-o>
              </div>
            </div>
          </div>

          <div class="col-lg-5 col-md-12 text-center">
            <div class="hero2-image-all1">
              <div class="">
                <div
                  class="hero2-img1 img100 border-70"
                  data-aos="zoom-out"
                  data-aos-duration="700"
                >
                  <img src="assets/img/image/header2-img1.png" alt="" />
                </div>
              </div>
              <div class="">
                <div
                  class="hero2-img2 img100 border-70"
                  data-aos="zoom-out"
                  data-aos-duration="800"
                >
                  <img src="assets/img/image/header2-img2.png" alt="" />
                </div>
              </div>
            </div>
            <div class="space20"></div>
            <div
              class="hero2-img3 img100 border-80"
              data-aos="zoom-out"
              data-aos-duration="900"
            >
              <img src="assets/img/image/header2-img3.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class HeroComponent {
  
  brandsdata: string[] = [
    'assets/img/logo/brand2-logo1.svg',
    'assets/img/logo/brand2-logo2.svg',
    'assets/img/logo/brand2-logo3.svg',
    'assets/img/logo/brand2-logo4.svg',
  ];

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    items : 4,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    nav: false,
    
  };
}
