import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CountUpModule } from 'ngx-countup';

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

@Component({
  selector: 'app-hero',
  host: { 'app-hero': 'app-single-hero9' },
  imports: [RouterLink, CountUpModule],
  template: `
    <div
      class="main-hero main-hero5 _relative"
      style="background-color: #1E1E1E;"
    >
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-7 col-md-12 _relative">
            <div class="main-hadding9">
              <span>Welcome to Advisor</span>
              <div class="space16"></div>
              <h1>Expert Tax Consulting Services You Can Trust</h1>
              <div class="space24"></div>
              <p>
                Your Partner in Achieving Sustainable Growth and Success,Unlock
                Your Potential and Drive Growth. We help business to perform
              </p>
              <div class="space40"></div>
              <div class="header2-buttons">
                <a routerLink="/service" class="theme-btn12"
                  >Start Legal Consultation
                  <span><i class="fa-solid fa-arrow-right"></i></span
                ></a>
              </div>
            </div>
          </div>

          <div class="col-lg-5">
            <div class="hero9-images">
              <div class="hero9-img1">
                <img src="assets/img/shapes/hero9-shape.svg" alt="" />
              </div>
              <div class="hero9-img2">
                <img src="assets/img/image/hero9-img.png" alt="" />
              </div>

              <div class="hero6-counter-box">
                <div class="hero9-counter-flex">
                  <div class="hero9-counter text-center">
                    <h1>
                      <span
                        class="counter"
                        [countUp]="546"
                        [options]="{ suffix: '+' }"
                      ></span>
                    </h1>
                    <div class="space16"></div>
                    <p>Successful Cases</p>
                  </div>
                  <div class="hero9-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>
    </div>
    <section style="background-color: #1E1E1E; padding-bottom: 170px;">
      <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 {

  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' },
  ];
  
}
