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

@Component({
  selector: 'app-portfolio',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="min-h-screen bg-gray-50">
      <!-- Header -->
      <section class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 class="text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-6">
            Unser Portfolio
          </h1>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            Entdecken Sie unsere vielfältigen Blumenarrangements für Hochzeiten, 
            Beerdigungen und besondere Events. Jedes Arrangement wird mit Liebe 
            zum Detail und Leidenschaft für die Floristik gestaltet.
          </p>
        </div>
      </section>

      <!-- Filter Buttons -->
      <section class="py-8 bg-white border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex flex-wrap justify-center gap-4">
            <button 
              *ngFor="let category of categories" 
              (click)="setActiveCategory(category.id)"
              [class]="getButtonClass(category.id)"
              class="px-6 py-2 rounded-full font-medium transition-all duration-200">
              {{ category.name }}
            </button>
          </div>
        </div>
      </section>

      <!-- Portfolio Grid -->
      <section class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div 
              *ngFor="let item of filteredPortfolio" 
              class="group cursor-pointer"
              (click)="openModal(item)">
              <div class="relative overflow-hidden rounded-lg shadow-md group-hover:shadow-xl transition-all duration-300 transform group-hover:-translate-y-1">
                <div class="aspect-w-4 aspect-h-3">
                  <div class="w-full h-64 bg-gradient-to-br flex items-center justify-center text-white font-medium text-lg"
                       [ngClass]="item.gradientClass">
                    {{ item.title }}
                  </div>
                </div>
                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-300 flex items-center justify-center">
                  <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-center">
                    <svg class="w-12 h-12 text-white mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                    <span class="text-white font-medium">Vergrößern</span>
                  </div>
                </div>
              </div>
              <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors duration-200">
                  {{ item.title }}
                </h3>
                <p class="text-gray-600">{{ item.category }}</p>
                <p class="text-sm text-gray-500 mt-1">{{ item.description }}</p>
              </div>
            </div>
          </div>

          <!-- Empty State -->
          <div *ngIf="filteredPortfolio.length === 0" class="text-center py-16">
            <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Keine Projekte gefunden</h3>
            <p class="text-gray-600">Für diese Kategorie sind noch keine Projekte verfügbar.</p>
          </div>
        </div>
      </section>

      <!-- Modal -->
      <div *ngIf="selectedItem" 
           class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
           (click)="closeModal()">
        <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto" (click)="$event.stopPropagation()">
          <div class="relative">
            <button 
              (click)="closeModal()"
              class="absolute top-4 right-4 z-10 bg-white rounded-full p-2 shadow-lg hover:bg-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
            
            <div class="h-96 bg-gradient-to-br flex items-center justify-center text-white font-medium text-2xl"
                 [ngClass]="selectedItem.gradientClass">
              {{ selectedItem.title }}
            </div>
            
            <div class="p-6">
              <h2 class="text-2xl font-serif font-bold text-gray-900 mb-2">{{ selectedItem.title }}</h2>
              <p class="text-primary-600 font-medium mb-4">{{ selectedItem.category }}</p>
              <p class="text-gray-700 mb-6">{{ selectedItem.fullDescription }}</p>
              
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span class="font-medium text-gray-900">Event-Typ:</span>
                  <span class="text-gray-600 ml-2">{{ selectedItem.eventType }}</span>
                </div>
                <div>
                  <span class="font-medium text-gray-900">Saison:</span>
                  <span class="text-gray-600 ml-2">{{ selectedItem.season }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class PortfolioComponent {
  activeCategory = 'all';
  selectedItem: any = null;

  categories = [
    { id: 'all', name: 'Alle' },
    { id: 'wedding', name: 'Hochzeiten' },
    { id: 'funeral', name: 'Beerdigungen' },
    { id: 'corporate', name: 'Corporate Events' },
    { id: 'private', name: 'Private Feiern' }
  ];

  portfolioItems = [
    {
      id: 1,
      title: 'Romantische Garten-Hochzeit',
      category: 'Hochzeit',
      categoryId: 'wedding',
      description: 'Pastellfarbene Rosen und Pfingstrosen',
      fullDescription: 'Eine traumhafte Hochzeit im Garten mit einer zarten Farbpalette aus Rosa, Weiß und Grün. Brautstrauß aus Gartenrosen, Pfingstrosen und Eukalyptus, ergänzt durch romantische Tischdekorationen mit Kerzen und Vintage-Vasen.',
      eventType: 'Garten-Hochzeit',
      season: 'Frühling',
      gradientClass: 'from-pink-400 to-rose-500'
    },
    {
      id: 2,
      title: 'Elegante Kirchenhochzeit',
      category: 'Hochzeit',
      categoryId: 'wedding',
      description: 'Klassische weiße Lilien und Rosen',
      fullDescription: 'Eine elegante Kirchenhochzeit mit klassischen weißen Blumen. Opulenter Brautstrauß aus weißen Rosen, Lilien und Schleierkraut, kombiniert mit stilvollen Altargestecken und Kirchenbankschmuck.',
      eventType: 'Kirchenhochzeit',
      season: 'Sommer',
      gradientClass: 'from-white to-gray-200'
    },
    {
      id: 3,
      title: 'Würdevoller Abschied',
      category: 'Trauerfeier',
      categoryId: 'funeral',
      description: 'Trauerkranz mit weißen Chrysanthemen',
      fullDescription: 'Ein würdevoller Trauerkranz aus weißen Chrysanthemen, Lilien und Tannengrün. Ergänzt durch passende Gestecke und Sargschmuck für eine respektvolle Abschiedszeremonie.',
      eventType: 'Trauerfeier',
      season: 'Herbst',
      gradientClass: 'from-gray-400 to-gray-600'
    },
    {
      id: 4,
      title: 'Firmen-Jubiläum',
      category: 'Corporate Event',
      categoryId: 'corporate',
      description: 'Moderne Arrangements in Firmenfarben',
      fullDescription: 'Stilvolle Blumenarrangements für ein Firmenjubiläum in den Unternehmensfarben Blau und Weiß. Moderne Gestecke mit Hortensien, weißen Rosen und blauen Akzenten für Empfang und Festsaal.',
      eventType: 'Firmenjubiläum',
      season: 'Winter',
      gradientClass: 'from-blue-500 to-indigo-600'
    },
    {
      id: 5,
      title: 'Goldene Hochzeit',
      category: 'Private Feier',
      categoryId: 'private',
      description: 'Goldene Akzente mit gelben Rosen',
      fullDescription: 'Eine festliche Dekoration zur Goldenen Hochzeit mit gelben Rosen, goldenen Akzenten und eleganten Tischgestecken. Warme Farbtöne schaffen eine gemütliche und festliche Atmosphäre.',
      eventType: 'Goldene Hochzeit',
      season: 'Herbst',
      gradientClass: 'from-yellow-400 to-amber-500'
    },
    {
      id: 6,
      title: 'Taufe im Frühling',
      category: 'Private Feier',
      categoryId: 'private',
      description: 'Zarte Frühlingsblumen in Pastelltönen',
      fullDescription: 'Eine liebevolle Taufdekoration mit zarten Frühlingsblumen in Pastelltönen. Kleine Gestecke mit Tulpen, Narzissen und Primeln schaffen eine fröhliche und festliche Stimmung.',
      eventType: 'Taufe',
      season: 'Frühling',
      gradientClass: 'from-green-300 to-emerald-400'
    }
  ];

  get filteredPortfolio() {
    if (this.activeCategory === 'all') {
      return this.portfolioItems;
    }
    return this.portfolioItems.filter(item => item.categoryId === this.activeCategory);
  }

  setActiveCategory(categoryId: string) {
    this.activeCategory = categoryId;
  }

  getButtonClass(categoryId: string): string {
    const baseClass = 'px-6 py-2 rounded-full font-medium transition-all duration-200';
    if (this.activeCategory === categoryId) {
      return `${baseClass} bg-primary-600 text-white shadow-md`;
    }
    return `${baseClass} bg-gray-200 text-gray-700 hover:bg-primary-100 hover:text-primary-700`;
  }

  openModal(item: any) {
    this.selectedItem = item;
    document.body.style.overflow = 'hidden';
  }

  closeModal() {
    this.selectedItem = null;
    document.body.style.overflow = 'auto';
  }
}