// src/app/components/header/header.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [CommonModule],
  template: `
    <header class="bg-white shadow">
      <div class="container mx-auto px-6 py-4 flex justify-between items-center">
        <!-- Logo und Label -->
        <div class="flex items-center">
          <img 
            src="assets/logo.svg" 
            alt="Bay Area Affiliates Logo" 
            class="h-8 w-auto mr-3" 
            loading="lazy"
          />
          <div class="text-2xl font-bold text-blue-900">
            Bay Area Affiliates, Inc.
          </div>
        </div>
        
        <!-- Hamburger Menü für mobile Geräte -->
        <button
          (click)="toggleMenu()"
          class="md:hidden text-blue-900 focus:outline-none"
          aria-label="Menü öffnen"
        >
          <i class="fas fa-bars"></i>
        </button>
        
        <!-- Navigation -->
        <nav [class.hidden]="!isMenuOpen" class="hidden md:block w-full md:w-auto">
          <ul class="flex flex-col md:flex-row md:space-x-6">
            <li>
              <a href="#services" class="hover:text-blue-900">Services</a>
            </li>
            <li>
              <a href="#features" class="hover:text-blue-900">Features</a>
            </li>
            <li>
              <a href="#blog" class="hover:text-blue-900">Blog</a>
            </li>
            <li>
              <a
                href="#contact"
                class="bg-blue-900 text-white px-4 py-2 rounded hover:bg-blue-800"
              >Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  `
})
export class HeaderComponent {
  isMenuOpen = false;

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