import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <header class="bg-cream-100 border-b border-primary-200 sticky top-0 z-50">
      <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
          <!-- Logo -->
          <div class="flex-shrink-0">
            <a routerLink="/" class="flex items-center space-x-3">
              <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-14 w-auto">
              <div class="hidden sm:block">
                <div class="logo-script text-2xl">Florale</div>
                <div class="logo-caps text-xs -mt-1">EMOTION</div>
              </div>
            </a>
          </div>

          <!-- Desktop Navigation -->
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-8">
              <a routerLink="/"
                 routerLinkActive="text-primary-900 border-b border-primary-700"
                 [routerLinkActiveOptions]="{exact: true}"
                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                Home
              </a>
              <a routerLink="/portfolio"
                 routerLinkActive="text-primary-900 border-b border-primary-700"
                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                Portfolio
              </a>
              <a routerLink="/services"
                 routerLinkActive="text-primary-900 border-b border-primary-700"
                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                Services
              </a>
              <a routerLink="/about"
                 routerLinkActive="text-primary-900 border-b border-primary-700"
                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                Über uns
              </a>
              <a routerLink="/contact"
                 class="btn-primary text-xs py-2 px-5">
                Anfrage
              </a>
            </div>
          </div>

          <!-- Mobile menu button -->
          <div class="md:hidden">
            <button (click)="toggleMobileMenu()"
                    class="text-primary-700 hover:text-primary-900 focus:outline-none">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path *ngIf="!isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
                <path *ngIf="isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>

        <!-- Mobile Navigation -->
        <div *ngIf="isMobileMenuOpen" class="md:hidden">
          <div class="px-2 pt-2 pb-4 space-y-1 border-t border-primary-200 bg-cream-100">
            <a routerLink="/"
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-900"
               [routerLinkActiveOptions]="{exact: true}"
               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
              Home
            </a>
            <a routerLink="/portfolio"
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-900"
               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
              Portfolio
            </a>
            <a routerLink="/services"
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-900"
               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
              Services
            </a>
            <a routerLink="/about"
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-900"
               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
              Über uns
            </a>
            <a routerLink="/contact"
               (click)="closeMobileMenu()"
               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
              Kontakt
            </a>
          </div>
        </div>
      </nav>
    </header>
  `
})
export class HeaderComponent {
  isMobileMenuOpen = false;

  toggleMobileMenu() {
    this.isMobileMenuOpen = !this.isMobileMenuOpen;
  }

  closeMobileMenu() {
    this.isMobileMenuOpen = false;
  }
}