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-navbar4' },
  imports: [RouterLink, MobileHeaderComponent],
  template: `
    <header>
      <div
        class="header-area header-area4  header-area-all d-none d-lg-block"
        id="header2"
        [class.sticky2]="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/header4-logo.svg" alt="" />
                  </a>
                </div>

                <div class="main-menu-ex main-menu-ex4">
                  <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="home3-header-buttons">
                 
                    <a routerLink="/contact" class="button4-header"
                      >Contact Us</a
                    >
          
                </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;
  }
}
