{"ast":null,"code":"import { __decorate } from \"tslib\";\nimport { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, Validators } from '@angular/forms';\nlet ContactComponent = class ContactComponent {\n  constructor(fb, emailService) {\n    this.fb = fb;\n    this.emailService = emailService;\n    this.isSubmitting = false;\n    this.showSuccessMessage = false;\n    // Set minimum date to today\n    const today = new Date();\n    this.minDate = today.toISOString().split('T')[0];\n    this.contactForm = this.fb.group({\n      firstName: ['', Validators.required],\n      lastName: ['', Validators.required],\n      email: ['', [Validators.required, Validators.email]],\n      phone: [''],\n      eventType: ['', Validators.required],\n      eventDate: [''],\n      guestCount: [''],\n      budget: [''],\n      message: ['', Validators.required],\n      privacy: [false, Validators.requiredTrue]\n    });\n  }\n  onSubmit() {\n    if (this.contactForm.valid) {\n      this.isSubmitting = true;\n      const formData = this.contactForm.value;\n      this.emailService.sendContactForm(formData).subscribe({\n        next: response => {\n          this.isSubmitting = false;\n          this.showSuccessMessage = true;\n          this.contactForm.reset();\n          // Hide success message after 5 seconds\n          setTimeout(() => {\n            this.showSuccessMessage = false;\n          }, 5000);\n        },\n        error: error => {\n          this.isSubmitting = false;\n          console.error('Error sending contact form:', error);\n          // You could show an error message here\n        }\n      });\n    } else {\n      // Mark all fields as touched to show validation errors\n      Object.keys(this.contactForm.controls).forEach(key => {\n        this.contactForm.get(key)?.markAsTouched();\n      });\n    }\n  }\n};\nContactComponent = __decorate([Component({\n  selector: 'app-contact',\n  standalone: true,\n  imports: [CommonModule, ReactiveFormsModule],\n  template: `\n    <div class=\"min-h-screen bg-gray-50\">\n      <!-- Header -->\n      <section class=\"bg-white py-16\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n          <h1 class=\"text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-6\">\n            Kontakt\n          </h1>\n          <p class=\"text-xl text-gray-600 max-w-3xl mx-auto\">\n            Haben Sie Fragen oder möchten Sie ein unverbindliches Angebot für Ihr Event? \n            Wir freuen uns auf Ihre Nachricht und beraten Sie gerne persönlich.\n          </p>\n        </div>\n      </section>\n\n      <section class=\"py-16\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n            <!-- Contact Form -->\n            <div class=\"card\">\n              <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                Anfrage senden\n              </h2>\n              \n              <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-6\">\n                <!-- Personal Information -->\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                  <div>\n                    <label for=\"firstName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                      Vorname *\n                    </label>\n                    <input \n                      type=\"text\" \n                      id=\"firstName\" \n                      formControlName=\"firstName\"\n                      class=\"input-field\"\n                      [class.border-red-500]=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\">\n                    <div *ngIf=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\" \n                         class=\"text-red-500 text-sm mt-1\">\n                      Vorname ist erforderlich\n                    </div>\n                  </div>\n                  \n                  <div>\n                    <label for=\"lastName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                      Nachname *\n                    </label>\n                    <input \n                      type=\"text\" \n                      id=\"lastName\" \n                      formControlName=\"lastName\"\n                      class=\"input-field\"\n                      [class.border-red-500]=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\">\n                    <div *ngIf=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\" \n                         class=\"text-red-500 text-sm mt-1\">\n                      Nachname ist erforderlich\n                    </div>\n                  </div>\n                </div>\n\n                <div>\n                  <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                    E-Mail-Adresse *\n                  </label>\n                  <input \n                    type=\"email\" \n                    id=\"email\" \n                    formControlName=\"email\"\n                    class=\"input-field\"\n                    [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\n                  <div *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \n                       class=\"text-red-500 text-sm mt-1\">\n                    <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">E-Mail ist erforderlich</span>\n                    <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Bitte geben Sie eine gültige E-Mail ein</span>\n                  </div>\n                </div>\n\n                <div>\n                  <label for=\"phone\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                    Telefonnummer\n                  </label>\n                  <input \n                    type=\"tel\" \n                    id=\"phone\" \n                    formControlName=\"phone\"\n                    class=\"input-field\">\n                </div>\n\n                <!-- Event Details -->\n                <div class=\"border-t pt-6\">\n                  <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Event-Details</h3>\n                  \n                  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                    <div>\n                      <label for=\"eventType\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Art des Events *\n                      </label>\n                      <select \n                        id=\"eventType\" \n                        formControlName=\"eventType\"\n                        class=\"input-field\"\n                        [class.border-red-500]=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\">\n                        <option value=\"\">Bitte wählen</option>\n                        <option value=\"wedding\">Hochzeit</option>\n                        <option value=\"funeral\">Beerdigung</option>\n                        <option value=\"corporate\">Firmenevent</option>\n                        <option value=\"birthday\">Geburtstag</option>\n                        <option value=\"anniversary\">Jubiläum</option>\n                        <option value=\"other\">Sonstiges</option>\n                      </select>\n                      <div *ngIf=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\" \n                           class=\"text-red-500 text-sm mt-1\">\n                        Bitte wählen Sie eine Event-Art\n                      </div>\n                    </div>\n\n                    <div>\n                      <label for=\"eventDate\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Gewünschtes Datum\n                      </label>\n                      <input \n                        type=\"date\" \n                        id=\"eventDate\" \n                        formControlName=\"eventDate\"\n                        class=\"input-field\"\n                        [min]=\"minDate\">\n                    </div>\n                  </div>\n\n                  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                    <div>\n                      <label for=\"guestCount\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Anzahl Gäste (ca.)\n                      </label>\n                      <input \n                        type=\"number\" \n                        id=\"guestCount\" \n                        formControlName=\"guestCount\"\n                        class=\"input-field\"\n                        min=\"1\">\n                    </div>\n\n                    <div>\n                      <label for=\"budget\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Budget (ca.)\n                      </label>\n                      <select \n                        id=\"budget\" \n                        formControlName=\"budget\"\n                        class=\"input-field\">\n                        <option value=\"\">Bitte wählen</option>\n                        <option value=\"under-500\">Unter 500€</option>\n                        <option value=\"500-1000\">500€ - 1.000€</option>\n                        <option value=\"1000-2500\">1.000€ - 2.500€</option>\n                        <option value=\"2500-5000\">2.500€ - 5.000€</option>\n                        <option value=\"over-5000\">Über 5.000€</option>\n                      </select>\n                    </div>\n                  </div>\n                </div>\n\n                <div>\n                  <label for=\"message\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                    Ihre Nachricht *\n                  </label>\n                  <textarea \n                    id=\"message\" \n                    formControlName=\"message\"\n                    rows=\"5\"\n                    class=\"textarea-field\"\n                    [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"\n                    placeholder=\"Beschreiben Sie uns Ihre Wünsche und Vorstellungen für Ihr Event...\"></textarea>\n                  <div *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \n                       class=\"text-red-500 text-sm mt-1\">\n                    Bitte beschreiben Sie Ihre Anfrage\n                  </div>\n                </div>\n\n                <!-- Privacy Checkbox -->\n                <div class=\"flex items-start\">\n                  <input \n                    type=\"checkbox\" \n                    id=\"privacy\" \n                    formControlName=\"privacy\"\n                    class=\"mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500\">\n                  <label for=\"privacy\" class=\"ml-3 text-sm text-gray-700\">\n                    Ich stimme der Verarbeitung meiner Daten gemäß der \n                    <a href=\"#\" class=\"text-primary-600 hover:text-primary-700\">Datenschutzerklärung</a> zu. *\n                  </label>\n                </div>\n                <div *ngIf=\"contactForm.get('privacy')?.invalid && contactForm.get('privacy')?.touched\" \n                     class=\"text-red-500 text-sm\">\n                  Bitte stimmen Sie der Datenschutzerklärung zu\n                </div>\n\n                <!-- Submit Button -->\n                <div class=\"pt-4\">\n                  <button \n                    type=\"submit\" \n                    [disabled]=\"contactForm.invalid || isSubmitting\"\n                    class=\"btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed\">\n                    <span *ngIf=\"!isSubmitting\">Anfrage senden</span>\n                    <span *ngIf=\"isSubmitting\" class=\"flex items-center justify-center\">\n                      <svg class=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" fill=\"none\" viewBox=\"0 0 24 24\">\n                        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                      </svg>\n                      Wird gesendet...\n                    </span>\n                  </button>\n                </div>\n              </form>\n\n              <!-- Success Message -->\n              <div *ngIf=\"showSuccessMessage\" \n                   class=\"mt-6 p-4 bg-green-50 border border-green-200 rounded-lg\">\n                <div class=\"flex items-center\">\n                  <svg class=\"w-5 h-5 text-green-600 mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n                  </svg>\n                  <span class=\"text-green-800 font-medium\">Vielen Dank für Ihre Anfrage!</span>\n                </div>\n                <p class=\"text-green-700 mt-1\">Wir werden uns schnellstmöglich bei Ihnen melden.</p>\n              </div>\n            </div>\n\n            <!-- Contact Information -->\n            <div class=\"space-y-8\">\n              <!-- Contact Details -->\n              <div class=\"card\">\n                <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                  Kontaktinformationen\n                </h2>\n                \n                <div class=\"space-y-4\">\n                  <div class=\"flex items-start\">\n                    <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"/>\n                      <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"/>\n                    </svg>\n                    <div>\n                      <h3 class=\"font-medium text-gray-900\">E-Mail</h3>\n                      <p class=\"text-gray-600\">info&#64;florale-emotion.de</p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-start\">\n                    <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path fill-rule=\"evenodd\" d=\"M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z\" clip-rule=\"evenodd\"/>\n                    </svg>\n                    <div>\n                      <h3 class=\"font-medium text-gray-900\">Standort</h3>\n                      <p class=\"text-gray-600\">Deutschland<br>Termine nach Vereinbarung</p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-start\">\n                    <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path fill-rule=\"evenodd\" d=\"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z\" clip-rule=\"evenodd\"/>\n                    </svg>\n                    <div>\n                      <h3 class=\"font-medium text-gray-900\">Beratungszeiten</h3>\n                      <p class=\"text-gray-600\">\n                        Montag - Freitag: 9:00 - 18:00<br>\n                        Samstag: 10:00 - 16:00<br>\n                        Sonntag: Nach Vereinbarung\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Team -->\n              <div class=\"card\">\n                <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                  Unser Team\n                </h2>\n                \n                <div class=\"space-y-6\">\n                  <div class=\"flex items-center\">\n                    <div class=\"w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mr-4\">\n                      <span class=\"text-primary-600 font-semibold text-lg\">V</span>\n                    </div>\n                    <div>\n                      <h3 class=\"font-semibold text-gray-900\">Veronika</h3>\n                      <p class=\"text-gray-600\">Floristmeisterin & Geschäftsführung</p>\n                      <p class=\"text-sm text-gray-500\">veronika&#64;florale-emotion.de</p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-center\">\n                    <div class=\"w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mr-4\">\n                      <span class=\"text-secondary-600 font-semibold text-lg\">C</span>\n                    </div>\n                    <div>\n                      <h3 class=\"font-semibold text-gray-900\">Corinna</h3>\n                      <p class=\"text-gray-600\">Floristin & Eventplanung</p>\n                      <p class=\"text-sm text-gray-500\">corinna@florale-emotion.de</p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- FAQ -->\n              <div class=\"card\">\n                <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                  Häufige Fragen\n                </h2>\n                \n                <div class=\"space-y-4\">\n                  <div>\n                    <h3 class=\"font-medium text-gray-900 mb-2\">Wie weit im Voraus sollte ich buchen?</h3>\n                    <p class=\"text-gray-600 text-sm\">Für Hochzeiten empfehlen wir eine Buchung 3-6 Monate im Voraus. Bei anderen Events reichen meist 2-4 Wochen.</p>\n                  </div>\n                  \n                  <div>\n                    <h3 class=\"font-medium text-gray-900 mb-2\">Liefern Sie auch außerhalb der Region?</h3>\n                    <p class=\"text-gray-600 text-sm\">Ja, wir liefern deutschlandweit. Die Lieferkosten werden individuell berechnet.</p>\n                  </div>\n                  \n                  <div>\n                    <h3 class=\"font-medium text-gray-900 mb-2\">Bieten Sie auch Beratungstermine an?</h3>\n                    <p class=\"text-gray-600 text-sm\">Selbstverständlich! Wir kommen gerne zu Ihnen oder Sie besuchen uns in unserem Atelier.</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n  `\n})], ContactComponent);\nexport { ContactComponent };","map":{"version":3,"names":["Component","CommonModule","ReactiveFormsModule","Validators","ContactComponent","constructor","fb","emailService","isSubmitting","showSuccessMessage","today","Date","minDate","toISOString","split","contactForm","group","firstName","required","lastName","email","phone","eventType","eventDate","guestCount","budget","message","privacy","requiredTrue","onSubmit","valid","formData","value","sendContactForm","subscribe","next","response","reset","setTimeout","error","console","Object","keys","controls","forEach","key","get","markAsTouched","__decorate","selector","standalone","imports","template"],"sources":["/Users/julianvollmer/workspace/florale-emotion/src/app/pages/contact/contact.component.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { EmailService, ContactFormData } from '../../services/email.service';\n\n@Component({\n  selector: 'app-contact',\n  standalone: true,\n  imports: [CommonModule, ReactiveFormsModule],\n  template: `\n    <div class=\"min-h-screen bg-gray-50\">\n      <!-- Header -->\n      <section class=\"bg-white py-16\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n          <h1 class=\"text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-6\">\n            Kontakt\n          </h1>\n          <p class=\"text-xl text-gray-600 max-w-3xl mx-auto\">\n            Haben Sie Fragen oder möchten Sie ein unverbindliches Angebot für Ihr Event? \n            Wir freuen uns auf Ihre Nachricht und beraten Sie gerne persönlich.\n          </p>\n        </div>\n      </section>\n\n      <section class=\"py-16\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n            <!-- Contact Form -->\n            <div class=\"card\">\n              <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                Anfrage senden\n              </h2>\n              \n              <form [formGroup]=\"contactForm\" (ngSubmit)=\"onSubmit()\" class=\"space-y-6\">\n                <!-- Personal Information -->\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                  <div>\n                    <label for=\"firstName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                      Vorname *\n                    </label>\n                    <input \n                      type=\"text\" \n                      id=\"firstName\" \n                      formControlName=\"firstName\"\n                      class=\"input-field\"\n                      [class.border-red-500]=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\">\n                    <div *ngIf=\"contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched\" \n                         class=\"text-red-500 text-sm mt-1\">\n                      Vorname ist erforderlich\n                    </div>\n                  </div>\n                  \n                  <div>\n                    <label for=\"lastName\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                      Nachname *\n                    </label>\n                    <input \n                      type=\"text\" \n                      id=\"lastName\" \n                      formControlName=\"lastName\"\n                      class=\"input-field\"\n                      [class.border-red-500]=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\">\n                    <div *ngIf=\"contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched\" \n                         class=\"text-red-500 text-sm mt-1\">\n                      Nachname ist erforderlich\n                    </div>\n                  </div>\n                </div>\n\n                <div>\n                  <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                    E-Mail-Adresse *\n                  </label>\n                  <input \n                    type=\"email\" \n                    id=\"email\" \n                    formControlName=\"email\"\n                    class=\"input-field\"\n                    [class.border-red-500]=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\">\n                  <div *ngIf=\"contactForm.get('email')?.invalid && contactForm.get('email')?.touched\" \n                       class=\"text-red-500 text-sm mt-1\">\n                    <span *ngIf=\"contactForm.get('email')?.errors?.['required']\">E-Mail ist erforderlich</span>\n                    <span *ngIf=\"contactForm.get('email')?.errors?.['email']\">Bitte geben Sie eine gültige E-Mail ein</span>\n                  </div>\n                </div>\n\n                <div>\n                  <label for=\"phone\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                    Telefonnummer\n                  </label>\n                  <input \n                    type=\"tel\" \n                    id=\"phone\" \n                    formControlName=\"phone\"\n                    class=\"input-field\">\n                </div>\n\n                <!-- Event Details -->\n                <div class=\"border-t pt-6\">\n                  <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">Event-Details</h3>\n                  \n                  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                    <div>\n                      <label for=\"eventType\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Art des Events *\n                      </label>\n                      <select \n                        id=\"eventType\" \n                        formControlName=\"eventType\"\n                        class=\"input-field\"\n                        [class.border-red-500]=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\">\n                        <option value=\"\">Bitte wählen</option>\n                        <option value=\"wedding\">Hochzeit</option>\n                        <option value=\"funeral\">Beerdigung</option>\n                        <option value=\"corporate\">Firmenevent</option>\n                        <option value=\"birthday\">Geburtstag</option>\n                        <option value=\"anniversary\">Jubiläum</option>\n                        <option value=\"other\">Sonstiges</option>\n                      </select>\n                      <div *ngIf=\"contactForm.get('eventType')?.invalid && contactForm.get('eventType')?.touched\" \n                           class=\"text-red-500 text-sm mt-1\">\n                        Bitte wählen Sie eine Event-Art\n                      </div>\n                    </div>\n\n                    <div>\n                      <label for=\"eventDate\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Gewünschtes Datum\n                      </label>\n                      <input \n                        type=\"date\" \n                        id=\"eventDate\" \n                        formControlName=\"eventDate\"\n                        class=\"input-field\"\n                        [min]=\"minDate\">\n                    </div>\n                  </div>\n\n                  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                    <div>\n                      <label for=\"guestCount\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Anzahl Gäste (ca.)\n                      </label>\n                      <input \n                        type=\"number\" \n                        id=\"guestCount\" \n                        formControlName=\"guestCount\"\n                        class=\"input-field\"\n                        min=\"1\">\n                    </div>\n\n                    <div>\n                      <label for=\"budget\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                        Budget (ca.)\n                      </label>\n                      <select \n                        id=\"budget\" \n                        formControlName=\"budget\"\n                        class=\"input-field\">\n                        <option value=\"\">Bitte wählen</option>\n                        <option value=\"under-500\">Unter 500€</option>\n                        <option value=\"500-1000\">500€ - 1.000€</option>\n                        <option value=\"1000-2500\">1.000€ - 2.500€</option>\n                        <option value=\"2500-5000\">2.500€ - 5.000€</option>\n                        <option value=\"over-5000\">Über 5.000€</option>\n                      </select>\n                    </div>\n                  </div>\n                </div>\n\n                <div>\n                  <label for=\"message\" class=\"block text-sm font-medium text-gray-700 mb-2\">\n                    Ihre Nachricht *\n                  </label>\n                  <textarea \n                    id=\"message\" \n                    formControlName=\"message\"\n                    rows=\"5\"\n                    class=\"textarea-field\"\n                    [class.border-red-500]=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\"\n                    placeholder=\"Beschreiben Sie uns Ihre Wünsche und Vorstellungen für Ihr Event...\"></textarea>\n                  <div *ngIf=\"contactForm.get('message')?.invalid && contactForm.get('message')?.touched\" \n                       class=\"text-red-500 text-sm mt-1\">\n                    Bitte beschreiben Sie Ihre Anfrage\n                  </div>\n                </div>\n\n                <!-- Privacy Checkbox -->\n                <div class=\"flex items-start\">\n                  <input \n                    type=\"checkbox\" \n                    id=\"privacy\" \n                    formControlName=\"privacy\"\n                    class=\"mt-1 h-4 w-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500\">\n                  <label for=\"privacy\" class=\"ml-3 text-sm text-gray-700\">\n                    Ich stimme der Verarbeitung meiner Daten gemäß der \n                    <a href=\"#\" class=\"text-primary-600 hover:text-primary-700\">Datenschutzerklärung</a> zu. *\n                  </label>\n                </div>\n                <div *ngIf=\"contactForm.get('privacy')?.invalid && contactForm.get('privacy')?.touched\" \n                     class=\"text-red-500 text-sm\">\n                  Bitte stimmen Sie der Datenschutzerklärung zu\n                </div>\n\n                <!-- Submit Button -->\n                <div class=\"pt-4\">\n                  <button \n                    type=\"submit\" \n                    [disabled]=\"contactForm.invalid || isSubmitting\"\n                    class=\"btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed\">\n                    <span *ngIf=\"!isSubmitting\">Anfrage senden</span>\n                    <span *ngIf=\"isSubmitting\" class=\"flex items-center justify-center\">\n                      <svg class=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" fill=\"none\" viewBox=\"0 0 24 24\">\n                        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                      </svg>\n                      Wird gesendet...\n                    </span>\n                  </button>\n                </div>\n              </form>\n\n              <!-- Success Message -->\n              <div *ngIf=\"showSuccessMessage\" \n                   class=\"mt-6 p-4 bg-green-50 border border-green-200 rounded-lg\">\n                <div class=\"flex items-center\">\n                  <svg class=\"w-5 h-5 text-green-600 mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n                  </svg>\n                  <span class=\"text-green-800 font-medium\">Vielen Dank für Ihre Anfrage!</span>\n                </div>\n                <p class=\"text-green-700 mt-1\">Wir werden uns schnellstmöglich bei Ihnen melden.</p>\n              </div>\n            </div>\n\n            <!-- Contact Information -->\n            <div class=\"space-y-8\">\n              <!-- Contact Details -->\n              <div class=\"card\">\n                <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                  Kontaktinformationen\n                </h2>\n                \n                <div class=\"space-y-4\">\n                  <div class=\"flex items-start\">\n                    <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\"/>\n                      <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\"/>\n                    </svg>\n                    <div>\n                      <h3 class=\"font-medium text-gray-900\">E-Mail</h3>\n                      <p class=\"text-gray-600\">info&#64;florale-emotion.de</p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-start\">\n                    <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path fill-rule=\"evenodd\" d=\"M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z\" clip-rule=\"evenodd\"/>\n                    </svg>\n                    <div>\n                      <h3 class=\"font-medium text-gray-900\">Standort</h3>\n                      <p class=\"text-gray-600\">Deutschland<br>Termine nach Vereinbarung</p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-start\">\n                    <svg class=\"w-6 h-6 text-primary-600 mr-3 mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                      <path fill-rule=\"evenodd\" d=\"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z\" clip-rule=\"evenodd\"/>\n                    </svg>\n                    <div>\n                      <h3 class=\"font-medium text-gray-900\">Beratungszeiten</h3>\n                      <p class=\"text-gray-600\">\n                        Montag - Freitag: 9:00 - 18:00<br>\n                        Samstag: 10:00 - 16:00<br>\n                        Sonntag: Nach Vereinbarung\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Team -->\n              <div class=\"card\">\n                <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                  Unser Team\n                </h2>\n                \n                <div class=\"space-y-6\">\n                  <div class=\"flex items-center\">\n                    <div class=\"w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mr-4\">\n                      <span class=\"text-primary-600 font-semibold text-lg\">V</span>\n                    </div>\n                    <div>\n                      <h3 class=\"font-semibold text-gray-900\">Veronika</h3>\n                      <p class=\"text-gray-600\">Floristmeisterin & Geschäftsführung</p>\n                      <p class=\"text-sm text-gray-500\">veronika&#64;florale-emotion.de</p>\n                    </div>\n                  </div>\n\n                  <div class=\"flex items-center\">\n                    <div class=\"w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mr-4\">\n                      <span class=\"text-secondary-600 font-semibold text-lg\">C</span>\n                    </div>\n                    <div>\n                      <h3 class=\"font-semibold text-gray-900\">Corinna</h3>\n                      <p class=\"text-gray-600\">Floristin & Eventplanung</p>\n                      <p class=\"text-sm text-gray-500\">corinna@florale-emotion.de</p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- FAQ -->\n              <div class=\"card\">\n                <h2 class=\"text-2xl font-serif font-bold text-gray-900 mb-6\">\n                  Häufige Fragen\n                </h2>\n                \n                <div class=\"space-y-4\">\n                  <div>\n                    <h3 class=\"font-medium text-gray-900 mb-2\">Wie weit im Voraus sollte ich buchen?</h3>\n                    <p class=\"text-gray-600 text-sm\">Für Hochzeiten empfehlen wir eine Buchung 3-6 Monate im Voraus. Bei anderen Events reichen meist 2-4 Wochen.</p>\n                  </div>\n                  \n                  <div>\n                    <h3 class=\"font-medium text-gray-900 mb-2\">Liefern Sie auch außerhalb der Region?</h3>\n                    <p class=\"text-gray-600 text-sm\">Ja, wir liefern deutschlandweit. Die Lieferkosten werden individuell berechnet.</p>\n                  </div>\n                  \n                  <div>\n                    <h3 class=\"font-medium text-gray-900 mb-2\">Bieten Sie auch Beratungstermine an?</h3>\n                    <p class=\"text-gray-600 text-sm\">Selbstverständlich! Wir kommen gerne zu Ihnen oder Sie besuchen uns in unserem Atelier.</p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n  `\n})\nexport class ContactComponent {\n  contactForm: FormGroup;\n  isSubmitting = false;\n  showSuccessMessage = false;\n  minDate: string;\n\n  constructor(\n    private fb: FormBuilder,\n    private emailService: EmailService\n  ) {\n    // Set minimum date to today\n    const today = new Date();\n    this.minDate = today.toISOString().split('T')[0];\n\n    this.contactForm = this.fb.group({\n      firstName: ['', Validators.required],\n      lastName: ['', Validators.required],\n      email: ['', [Validators.required, Validators.email]],\n      phone: [''],\n      eventType: ['', Validators.required],\n      eventDate: [''],\n      guestCount: [''],\n      budget: [''],\n      message: ['', Validators.required],\n      privacy: [false, Validators.requiredTrue]\n    });\n  }\n\n  onSubmit() {\n    if (this.contactForm.valid) {\n      this.isSubmitting = true;\n      \n      const formData: ContactFormData = this.contactForm.value;\n      \n      this.emailService.sendContactForm(formData).subscribe({\n        next: (response) => {\n          this.isSubmitting = false;\n          this.showSuccessMessage = true;\n          this.contactForm.reset();\n          \n          // Hide success message after 5 seconds\n          setTimeout(() => {\n            this.showSuccessMessage = false;\n          }, 5000);\n        },\n        error: (error) => {\n          this.isSubmitting = false;\n          console.error('Error sending contact form:', error);\n          // You could show an error message here\n        }\n      });\n    } else {\n      // Mark all fields as touched to show validation errors\n      Object.keys(this.contactForm.controls).forEach(key => {\n        this.contactForm.get(key)?.markAsTouched();\n      });\n    }\n  }\n}"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}