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="bg-cream-100 py-24 border-b border-primary-200">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center fade-in">
          <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-48 md:h-60 mx-auto mb-8">
          <div class="divider-botanical mb-8"><span>✦</span></div>
          <p class="font-caps text-lg md:text-xl text-secondary-700 mb-10 max-w-2xl mx-auto leading-relaxed" style="font-family:'Cormorant Garamond',serif; letter-spacing:0.05em;">
            Einzigartige Blumenarrangements für Ihre besonderen Momente —
            Hochzeiten, Trauerfeiern und unvergessliche Events in der Region Göttingen.
          </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-20 bg-cream-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-14 section-title-ornament">
          <h2 class="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
            Unsere Services
          </h2>
          <p class="font-caps text-base text-secondary-600 max-w-xl mx-auto" style="font-family:'Cormorant Garamond',serif;">
            Von romantischen Hochzeiten bis zu würdevollen Abschieden
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- Hochzeiten -->
          <div class="card card-hover text-center group">
            <div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
            <h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Hochzeiten</h3>
            <p class="text-secondary-700 mb-6 leading-relaxed text-sm">
              Romantische Brautsträuße, elegante Tischdekorationen und traumhafter
              Kirchenschmuck für Ihren schönsten Tag.
            </p>
            <a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
              Mehr erfahren →
            </a>
            <div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
          </div>

          <!-- Trauerfloristik -->
          <div class="card card-hover text-center group">
            <div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
            <h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Trauerfloristik</h3>
            <p class="text-secondary-700 mb-6 leading-relaxed text-sm">
              Würdevolle Kränze, Gestecke und Sargschmuck für einen respektvollen
              Abschied von Ihren Liebsten.
            </p>
            <a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
              Mehr erfahren →
            </a>
            <div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
          </div>

          <!-- Events -->
          <div class="card card-hover text-center group">
            <div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
            <h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Events & Feiern</h3>
            <p class="text-secondary-700 mb-6 leading-relaxed text-sm">
              Festliche Dekorationen für Geburtstage, Jubiläen, Firmenfeiern
              und alle besonderen Anlässe.
            </p>
            <a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
              Mehr erfahren →
            </a>
            <div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Portfolio Preview -->
    <section class="py-20 bg-cream-100">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-14 section-title-ornament">
          <h2 class="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
            Unsere Arbeiten
          </h2>
          <p class="font-caps text-base text-secondary-600 max-w-xl mx-auto" style="font-family:'Cormorant Garamond',serif;">
            Lassen Sie sich von unseren bisherigen Projekten inspirieren
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
          <div *ngFor="let item of portfolioPreview" class="group cursor-pointer">
            <div class="relative overflow-hidden border border-primary-200">
              <div class="w-full h-64 bg-gradient-to-br from-cream-300 to-primary-100 flex items-center justify-center">
                <span class="font-serif text-secondary-600 text-sm italic">{{ item.title }}</span>
              </div>
              <div class="absolute inset-0 bg-primary-900 bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-400 flex items-center justify-center">
                <span class="logo-caps text-xs text-cream-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300 tracking-widest">
                  Ansehen
                </span>
              </div>
            </div>
            <div class="pt-3 pb-1 border-b border-primary-200">
              <h3 class="font-serif text-base text-primary-900">{{ item.title }}</h3>
              <p class="logo-caps text-xs text-secondary-600 mt-1">{{ item.category }}</p>
            </div>
          </div>
        </div>

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

    <!-- CTA Section -->
    <section class="py-20 bg-primary-900">
      <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="w-12 h-px bg-primary-600 mx-auto mb-8"></div>
        <h2 class="text-3xl md:text-4xl font-serif font-light text-cream-100 mb-4">
          Bereit für Ihr nächstes Event?
        </h2>
        <p class="text-base text-primary-300 mb-10 max-w-xl mx-auto leading-relaxed" style="font-family:'Cormorant Garamond',serif; font-size:1.1rem;">
          Kontaktieren Sie uns für eine persönliche Beratung — wir kommen zu Ihnen.
        </p>
        <a routerLink="/contact" class="btn-ghost">Jetzt Kontakt aufnehmen</a>
        <div class="w-12 h-px bg-primary-600 mx-auto mt-8"></div>
      </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);
  }
}