import { Component, HostListener } from '@angular/core';
import { RouterLink } from '@angular/router';
import { MobileHeaderComponent } from "../../../components/mobile-header.component";

@Component({
  selector: 'app-navbar',
  host: { 'app-navbar': 'app-single-navbar2' },
  imports: [RouterLink, MobileHeaderComponent],
  template: `
    <header>
      <div
        class="header-area header-area-all d-none d-lg-block"
        id="header"
        [class.sticky]="isSticky"
      >
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="header-elements">
                <div class="site-logo home1-site-logo">
                  <a routerLink="/"
                    ><img src="assets/img/logo/header1-logo.svg" alt="" />
                  </a>
                </div>

                <div class="main-menu-ex main-menu-ex1">
                  <ul>
                    <li>
                      <a
                        href="#about"
                        (click)="scrollToSection($event, 'about')"
                        >About</a
                      >
                    </li>
                    <li>
                      <a
                        href="#service"
                        (click)="scrollToSection($event, 'service')"
                        >Service</a
                      >
                    </li>
                    <li>
                      <a
                        href="#case"
                        (click)="scrollToSection($event, 'case')"
                        >Case Study</a
                      >
                    </li>
                    <li>
                      <a
                        href="#testimonial"
                        (click)="scrollToSection($event, 'testimonial')"
                        >Testimonial</a
                      >
                    </li>
                    <li>
                      <a href="#blog" (click)="scrollToSection($event, 'blog')"
                        >Blog</a
                      >
                    </li>
                  </ul>
                </div>

                <div class="home2-header-buttons">
                  <div class="button1-all">
                    <a routerLink="/contact" class="btn_theme btn_theme_active wow fadeInDown" data-wow-duration="0.8s"
                      >Get Started<span></span></a
                    >
                  </div>
                </div>
                <div class="mobile-menu-bar d-lg-none">
                  <i class="fas fa-bars"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <app-mobile-header [isMenuOpen]="isMenuOpen" 
  (toggle)="toggleMenu()" 
  (close)="closeMenu()" />

  `,
  styles: ``,
})
export class NavbarComponent {
  isSticky: boolean = false;
   isMenuOpen = false;

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }

  closeMenu() {
    this.isMenuOpen = false;
  }

  scrollToSection(event: Event, id: string) {
    event.preventDefault();
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.isSticky = window.scrollY > 100;
  }
}
