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

@Component({
  selector: 'app-about',
  standalone: true,
  imports: [CommonModule, RouterModule],
  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">
            Über uns
          </h1>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            Lernen Sie das Team hinter Florale Emotion kennen und erfahren Sie mehr 
            über unsere Leidenschaft für die Floristik und unser Engagement für 
            Ihre besonderen Momente.
          </p>
        </div>
      </section>

      <!-- Our Story -->
      <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-6">
                Unsere Geschichte
              </h2>
              <div class="space-y-4 text-gray-600">
                <p>
                  Florale Emotion entstand aus der gemeinsamen Leidenschaft von Veronika und Corinna
                  für die Kunst der Floristik. Was als kleine Idee begann, entwickelte sich zu einem
                  Unternehmen, das sich auf die emotionalen Momente des Lebens spezialisiert hat.
                </p>
                <p>
                  Wir glauben daran, dass Blumen mehr sind als nur Dekoration — sie sind Ausdruck
                  von Gefühlen, Erinnerungen und besonderen Momenten. Ob bei der Freude einer Hochzeit
                  oder dem Abschied von einem geliebten Menschen, wir gestalten jeden Anlass mit der
                  nötigen Sensibilität und dem Respekt, den er verdient.
                </p>
                <p>
                  Von unserer Werkstatt in Krebeck (Region Göttingen) aus betreuen wir Kunden in ganz
                  Südniedersachsen und darüber hinaus. Wir kommen zu Ihnen — zur Location, zum Bestatter
                  oder nach Hause. Beratung gibt es digital oder direkt vor Ort, ganz nach Ihren Wünschen.
                </p>
              </div>
            </div>
            <div class="card bg-gradient-to-br from-primary-50 to-secondary-50 h-96 flex items-center justify-center">
              <div class="text-center">
                <svg class="w-32 h-32 text-primary-400 mx-auto mb-4" 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>
                <h3 class="text-2xl font-serif text-gray-700">Mit Herz und Leidenschaft</h3>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Team Section -->
      <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">
              Unser Team
            </h2>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
              Lernen Sie die kreativen Köpfe hinter Florale Emotion kennen.
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
            <!-- Veronika -->
            <div class="card text-center">
              <div class="w-32 h-32 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <span class="text-4xl font-bold text-primary-600">V</span>
              </div>
              <h3 class="text-2xl font-serif font-bold text-gray-900 mb-2">Veronika</h3>
              <p class="text-primary-600 font-medium mb-4">Floristmeisterin & Geschäftsführung</p>
              <div class="text-gray-600 space-y-3">
                <p>
                  Mit über 15 Jahren Erfahrung in der Floristik bringt Veronika eine Fülle 
                  von Wissen und Kreativität in jedes Projekt ein. Als Floristmeisterin hat 
                  sie sich auf Hochzeitsfloristik spezialisiert und zahlreiche Paare bei 
                  ihrem schönsten Tag begleitet.
                </p>
                <p>
                  Ihre Leidenschaft gilt besonders den romantischen Details und der perfekten 
                  Harmonie zwischen Farben und Formen. Veronika ist bekannt für ihre einfühlsame 
                  Beratung und ihr Gespür für die Wünsche ihrer Kunden.
                </p>
              </div>
              <div class="mt-6 pt-6 border-t border-gray-200">
                <h4 class="font-semibold text-gray-900 mb-2">Spezialisierung:</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• Hochzeitsfloristik</li>
                  <li>• Brautsträuße</li>
                  <li>• Romantische Arrangements</li>
                  <li>• Kundenberatung</li>
                </ul>
              </div>
            </div>

            <!-- Corinna -->
            <div class="card text-center">
              <div class="w-32 h-32 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <span class="text-4xl font-bold text-secondary-600">C</span>
              </div>
              <h3 class="text-2xl font-serif font-bold text-gray-900 mb-2">Corinna</h3>
              <p class="text-secondary-600 font-medium mb-4">Floristin & Eventplanung</p>
              <div class="text-gray-600 space-y-3">
                <p>
                  Corinna ist unsere Expertin für Trauerfloristik und Corporate Events. 
                  Mit ihrer sensiblen Art und ihrem Verständnis für die emotionalen Aspekte 
                  der Floristik schafft sie würdevolle und respektvolle Arrangements.
                </p>
                <p>
                  Ihre Stärke liegt in der Organisation und Koordination größerer Events. 
                  Corinna sorgt dafür, dass jedes Detail stimmt und alle Abläufe reibungslos 
                  funktionieren - von der Planung bis zur Umsetzung.
                </p>
              </div>
              <div class="mt-6 pt-6 border-t border-gray-200">
                <h4 class="font-semibold text-gray-900 mb-2">Spezialisierung:</h4>
                <ul class="text-sm text-gray-600 space-y-1">
                  <li>• Trauerfloristik</li>
                  <li>• Corporate Events</li>
                  <li>• Eventplanung</li>
                  <li>• Projektmanagement</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Values Section -->
      <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 Werte
            </h2>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
              Diese Prinzipien leiten uns in unserer täglichen Arbeit und im Umgang mit unseren Kunden.
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div *ngFor="let value of companyValues" class="text-center">
              <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
                  <path [attr.d]="value.iconPath"/>
                </svg>
              </div>
              <h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">{{ value.title }}</h3>
              <p class="text-gray-600">{{ value.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Mission 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-6">
            Unsere Mission
          </h2>
          <p class="text-xl text-primary-100 max-w-4xl mx-auto mb-8">
            Wir schaffen mit unserer Floristik emotionale Verbindungen und unvergessliche Momente. 
            Jedes Arrangement erzählt eine Geschichte und trägt dazu bei, die wichtigsten Augenblicke 
            im Leben unserer Kunden zu verschönern und zu würdigen.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
            <div *ngFor="let stat of statistics" class="text-center">
              <div class="text-4xl font-bold text-white mb-2">{{ stat.number }}</div>
              <div class="text-primary-200">{{ stat.label }}</div>
            </div>
          </div>
        </div>
      </section>

      <!-- Contact CTA -->
      <section class="py-16 bg-gray-50">
        <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-gray-900 mb-4">
            Bereit für Ihr nächstes Projekt?
          </h2>
          <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
            Lassen Sie uns gemeinsam Ihre floralen Träume verwirklichen. 
            Kontaktieren Sie uns für eine persönliche Beratung.
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a routerLink="/contact" class="btn-primary">
              Beratungstermin vereinbaren
            </a>
            <a routerLink="/portfolio" class="btn-secondary">
              Portfolio ansehen
            </a>
          </div>
        </div>
      </section>
    </div>
  `
})
export class AboutComponent {
  companyValues = [
    {
      title: 'Qualität',
      description: 'Wir verwenden nur die frischesten Blumen und hochwertigsten Materialien für langanhaltende Schönheit.',
      iconPath: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
    },
    {
      title: 'Empathie',
      description: 'Wir verstehen die emotionale Bedeutung jedes Anlasses und gehen sensibel auf Ihre Bedürfnisse ein.',
      iconPath: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'
    },
    {
      title: 'Kreativität',
      description: 'Jedes Arrangement ist ein Unikat, das Ihre persönlichen Wünsche und den Charakter des Events widerspiegelt.',
      iconPath: 'M13 10V3L4 14h7v7l9-11h-7z'
    }
  ];

  statistics = [
    { number: '500+', label: 'Glückliche Kunden' },
    { number: '200+', label: 'Hochzeiten begleitet' },
    { number: '8+', label: 'Jahre Erfahrung' }
  ];
}