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

type HeroSlide = {
  heading: string;
  description: string;
  btnText: string;
  btnLink: string;
  bgClass: string;
};

type BrandLogo = {
  image: string;
  alt: string;
};

@Component({
  selector: 'app-hero',
  host: { 'app-hero': 'app-single-hero10' },
  imports: [RouterLink, CarouselModule],
  template: `
    <div class="hero10 _relative">
      <div class="hero10-slider-perrent">
        <owl-carousel-o [options]="customOptions">
          @for (slide of heroSlides; track slide) {
          <ng-template carouselSlide>
            <div class="main-hero hero10 main-hero5 {{ slide.bgClass }}">
              <div class="container">
                <div class="row align-items-center">
                  <div class="col-lg-8 text-center m-auto col-md-12">
                    <div class="">
                      <div class="hero10-single-slider">
                        <div class="main-hadding9 main-hadding10">
                          <h1>{{ slide.heading }}</h1>
                          <div class="space24"></div>
                          <p>
                            {{ slide.description }}
                          </p>
                          <div class="space40"></div>
                          <div class="header10-buttons text-center">
                            <a [routerLink]="slide.btnLink" class="theme-btn12">
                              {{ slide.btnText }}
                              <span
                                ><i class="fa-solid fa-arrow-right"></i
                              ></span>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </ng-template>
          }
        </owl-carousel-o>
      </div>
    </div>
    <section style="padding-bottom: 105px;" class="hero10-benar">
      <div class="container-fluid p-0">
        <div class="row">
          <div class="col-12">
            <div class="marquee-wrap marquee-wrap2">
              <div class="marquee-text">
                @for (logo of brandLogos; track logo) {
                <div class="brand-single-box">
                  <img [src]="logo.image" [alt]="logo.alt" />
                </div>
                }
              </div>
            </div>
          </div>
        </div>

        <div class="slider-after"></div>
      </div>
    </section>
  `,
  styles: ``,
})
export class HeroComponent {
  heroSlides: HeroSlide[] = [
    {
      heading: 'Cultivate your brand and expand your business',
      description:
        'Your Partner in Achieving Sustainable Growth and Success,Unlock Your Potential and Drive Growth. \nWe help business to perform',
      btnText: 'Start Legal Consultation',
      btnLink: '/service',
      bgClass: 'carousel10-bg',
    },
    {
      heading: 'Cultivate your brand and expand your business',
      description:
        'Your Partner in Achieving Sustainable Growth and Success,Unlock Your Potential and Drive Growth. \nWe help business to perform',
      btnText: 'Start Legal Consultation',
      btnLink: '/service',
      bgClass: 'carousel10-bg carousel10-bg2',
    },
    {
      heading: 'Cultivate your brand and expand your business',
      description:
        'Your Partner in Achieving Sustainable Growth and Success,Unlock Your Potential and Drive Growth. \nWe help business to perform',
      btnText: 'Start Legal Consultation',
      btnLink: '/service',
      bgClass: 'carousel10-bg carousel10-bg3',
    },
  ];

  customOptions: OwlOptions = {
    loop: true,
    margin: 10,
    nav: true,
    dots: false,
    animateOut: 'fadeOut',
    smartSpeed: 1500,
    autoplay: true,
    navText: [
      '<i class="fa-solid fa-arrow-left"></i>',
      '<i class="fa-solid fa-arrow-right"></i>',
    ],
    responsive: {
      0: {
        items: 1,
      },
      900: {
        items: 1,
      },
    },
  };

  brandLogos: BrandLogo[] = [
    { image: 'assets/img/logo/brand-logo1.svg', alt: 'brand-logo1' },
    { image: 'assets/img/logo/brand-logo2.svg', alt: 'brand-logo2' },
    { image: 'assets/img/logo/brand-logo3.svg', alt: 'brand-logo3' },
    { image: 'assets/img/logo/brand-logo4.svg', alt: 'brand-logo4' },
    { image: 'assets/img/logo/brand-logo5.svg', alt: 'brand-logo5' },
    { image: 'assets/img/logo/brand-logo6.svg', alt: 'brand-logo6' },
    { image: 'assets/img/logo/brand-logo7.svg', alt: 'brand-logo7' },
    { image: 'assets/img/logo/brand-logo8.svg', alt: 'brand-logo8' },
    { image: 'assets/img/logo/brand-logo1.svg', alt: 'brand-logo1' },
    { image: 'assets/img/logo/brand-logo2.svg', alt: 'brand-logo2' },
    { image: 'assets/img/logo/brand-logo3.svg', alt: 'brand-logo3' },
    { image: 'assets/img/logo/brand-logo4.svg', alt: 'brand-logo4' },
    { image: 'assets/img/logo/brand-logo5.svg', alt: 'brand-logo5' },
    { image: 'assets/img/logo/brand-logo6.svg', alt: 'brand-logo6' },
    { image: 'assets/img/logo/brand-logo7.svg', alt: 'brand-logo7' },
    { image: 'assets/img/logo/brand-logo8.svg', alt: 'brand-logo8' },
  ];
}
