import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SEOService } from '../../services/seo.service';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-primary-50 to-accent-50 py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <div class="mb-8 fade-in">
            <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-32 md:h-40 mx-auto mb-6">
            <div class="logo-script text-5xl md:text-7xl mb-2">Florale</div>
            <div class="logo-caps text-xl md:text-2xl mb-3">EMOTION</div>
            <div class="logo-subtitle text-sm md:text-base mb-1">BLUMENWERKSTATT</div>
            <div class="font-serif text-sm md:text-base text-primary-600 italic">Event- und Trauerfloristik</div>
          </div>
          <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto slide-up">
            Einzigartige Blumenarrangements für Ihre besonderen Momente - 
            Hochzeiten, Beerdigungen und unvergessliche Events
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center slide-up">
            <a routerLink="/portfolio" class="btn-primary">
              Portfolio ansehen
            </a>
            <a routerLink="/contact" class="btn-secondary">
              Beratung anfragen
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Overview -->
    <section class="py-16 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-4">
            Unsere Services
          </h2>
          <p class="text-lg text-gray-600 max-w-2xl mx-auto">
            Von romantischen Hochzeiten bis zu würdevollen Abschieden - 
            wir gestalten jeden Anlass mit der passenden floralen Note.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- Hochzeiten -->
          <div class="card text-center group hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors duration-300">
              <svg class="w-8 h-8 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
              </svg>
            </div>
            <h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Hochzeiten</h3>
            <p class="text-gray-600 mb-4">
              Romantische Brautsträuße, elegante Tischdekorationen und traumhafte Kirchenschmuck 
              für Ihren schönsten Tag.
            </p>
            <a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
              Mehr erfahren →
            </a>
          </div>

          <!-- Beerdigungen -->
          <div class="card text-center group hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gray-200 transition-colors duration-300">
              <svg class="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Trauerfloristik</h3>
            <p class="text-gray-600 mb-4">
              Würdevolle Kränze, Gestecke und Sargschmuck für einen respektvollen Abschied 
              von Ihren Liebsten.
            </p>
            <a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
              Mehr erfahren →
            </a>
          </div>

          <!-- Events -->
          <div class="card text-center group hover:shadow-xl transition-shadow duration-300">
            <div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-secondary-200 transition-colors duration-300">
              <svg class="w-8 h-8 text-secondary-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 2L3 7v11a2 2 0 002 2h10a2 2 0 002-2V7l-7-5zM10 18a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
              </svg>
            </div>
            <h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Events & Feiern</h3>
            <p class="text-gray-600 mb-4">
              Festliche Dekorationen für Geburtstage, Jubiläen, Firmenfeiern 
              und alle besonderen Anlässe.
            </p>
            <a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
              Mehr erfahren →
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Portfolio Preview -->
    <section class="py-16 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-4">
            Unsere Arbeiten
          </h2>
          <p class="text-lg text-gray-600 max-w-2xl mx-auto">
            Lassen Sie sich von unseren bisherigen Projekten inspirieren und 
            entdecken Sie die Vielfalt unserer floralen Kunstwerke.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div *ngFor="let item of portfolioPreview" class="group cursor-pointer">
            <div class="relative overflow-hidden rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
              <div class="aspect-w-4 aspect-h-3 bg-gray-200">
                <div class="w-full h-64 bg-gradient-to-br from-primary-200 to-secondary-200 flex items-center justify-center">
                  <span class="text-gray-600 font-medium">{{ item.title }}</span>
                </div>
              </div>
              <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                <span class="text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  Ansehen
                </span>
              </div>
            </div>
            <h3 class="mt-3 text-lg font-medium text-gray-900">{{ item.title }}</h3>
            <p class="text-gray-600">{{ item.category }}</p>
          </div>
        </div>

        <div class="text-center">
          <a routerLink="/portfolio" class="btn-primary">
            Komplettes Portfolio ansehen
          </a>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-primary-600">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-serif font-bold text-white mb-4">
          Bereit für Ihr nächstes Event?
        </h2>
        <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
          Kontaktieren Sie uns für eine persönliche Beratung und lassen Sie uns 
          gemeinsam Ihre floralen Träume verwirklichen.
        </p>
        <a routerLink="/contact" class="bg-white text-primary-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-lg transition-colors duration-200 inline-block">
          Jetzt Kontakt aufnehmen
        </a>
      </div>
    </section>
  `
})
export class HomeComponent implements OnInit {
  portfolioPreview = [
    { title: 'Romantische Hochzeit', category: 'Hochzeit' },
    { title: 'Würdevoller Abschied', category: 'Trauerfeier' },
    { title: 'Firmenfeier Dekoration', category: 'Corporate Event' }
  ];

  constructor(private seoService: SEOService) {}

  ngOnInit() {
    const seoData = this.seoService.getPageSEO('home');
    this.seoService.updateSEO(seoData);
  }
}