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-white shadow-sm 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-16">
          <!-- 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-12 w-auto">
              <div class="hidden sm:block">
                <div class="logo-script text-2xl">Florale</div>
                <div class="logo-caps text-sm -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-600 border-b-2 border-primary-600"
                 [routerLinkActiveOptions]="{exact: true}"
                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
                Home
              </a>
              <a routerLink="/portfolio" 
                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
                Portfolio
              </a>
              <a routerLink="/services" 
                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
                Services
              </a>
              <a routerLink="/about" 
                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
                Über uns
              </a>
              <a routerLink="/contact" 
                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
                Kontakt
              </a>
            </div>
          </div>

          <!-- Mobile menu button -->
          <div class="md:hidden">
            <button (click)="toggleMobileMenu()" 
                    class="text-gray-700 hover:text-primary-600 focus:outline-none focus:text-primary-600">
              <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="2" d="M4 6h16M4 12h16M4 18h16" />
                <path *ngIf="isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
            <a routerLink="/" 
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-600 bg-primary-50"
               [routerLinkActiveOptions]="{exact: true}"
               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
              Home
            </a>
            <a routerLink="/portfolio" 
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-600 bg-primary-50"
               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
              Portfolio
            </a>
            <a routerLink="/services" 
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-600 bg-primary-50"
               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
              Services
            </a>
            <a routerLink="/about" 
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-600 bg-primary-50"
               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
              Über uns
            </a>
            <a routerLink="/contact" 
               (click)="closeMobileMenu()"
               routerLinkActive="text-primary-600 bg-primary-50"
               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
              Kontakt
            </a>
          </div>
        </div>
      </nav>
    </header>
  `
})
export class HeaderComponent {
  isMobileMenuOpen = false;

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

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