<section class="booking-page">
    <div class="container">

        <!-- SUCCESS SCREEN -->
        <div *ngIf="bookingSuccessful" class="success-screen">
            <div class="success-content">
                <div class="success-icon">
                    <span class="material-symbols-outlined">check_circle</span>
                </div>
                <h2>Termin erfolgreich gebucht! 🎉</h2>
                <p class="success-subtitle">Vielen Dank für deine Buchung!</p>

                <div class="success-details">
                    <div class="detail-card">
                        <span class="material-symbols-outlined">event</span>
                        <div>
                            <strong>Dein Termin:</strong>
                            <p>{{ bookedSlotDate }}</p>
                        </div>
                    </div>
                    <div class="detail-card">
                        <span class="material-symbols-outlined">schedule</span>
                        <div>
                            <strong>Uhrzeit:</strong>
                            <p>{{ bookedSlotTime }}</p>
                        </div>
                    </div>
                </div>

                <div class="success-info">
                    <h3>Was passiert als Nächstes?</h3>
                    <ul>
                        <li>
                            <span class="material-symbols-outlined">email</span>
                            <span>Du bekommst gleich eine Bestätigungs-E-Mail mit dem Video-Call Link</span>
                        </li>
                        <li>
                            <span class="material-symbols-outlined">videocam</span>
                            <span>Der Termin findet online per Video-Call statt</span>
                        </li>
                        <li>
                            <span class="material-symbols-outlined">notifications</span>
                            <span>24h vorher erhältst du eine Erinnerung</span>
                        </li>
                    </ul>
                </div>

                <div class="success-actions">
                    <button class="btn btn--primary" (click)="bookAnotherSlot()">
                        <span class="material-symbols-outlined">add_circle</span>
                        Weiteren Termin buchen
                    </button>
                    <button class="btn btn--secondary" (click)="backToHome()">
                        <span class="material-symbols-outlined">home</span>
                        Zur Startseite
                    </button>
                </div>

                <p class="success-note">
                    <span class="material-symbols-outlined">help</span>
                    Falls du keine E-Mail erhalten solltest, check bitte deinen Spam-Ordner oder kontaktiere uns direkt.
                </p>
            </div>
        </div>


        <div *ngIf="!bookingSuccessful">
            <!-- HERO -->
            <header class="booking-hero">
                <div class="hero-icon">
                    <span class="material-symbols-outlined ms-fill">event</span>
                </div>
                <h1>Lass uns reden</h1>
                <div class="hero-facts">
                    <div class="fact-item">
                        <span class="material-symbols-outlined ms-fill">schedule</span>
                        <span>30 Minuten</span>
                    </div>
                    <div class="fact-item">
                        <span class="material-symbols-outlined ms-fill">videocam</span>
                        <span>Online per Video</span>
                    </div>
                    <div class="fact-item">
                        <span class="material-symbols-outlined ms-fill">check_circle</span>
                        <span>Kostenlos</span>
                    </div>
                </div>
            </header>

            <!-- LOADING STATE -->
            <div *ngIf="isLoading" class="loading-state">
                <div class="spinner"></div>
                <p>Lade verfügbare Termine...</p>
            </div>

            <!-- ERROR STATE -->
            <div *ngIf="errorMessage && !isLoading" class="error-banner">
                <span class="material-symbols-outlined">error</span>
                <p>{{ errorMessage }}</p>
            </div>

            <!-- SUCCESS STATE -->
            <div *ngIf="successMessage" class="success-banner">
                <span class="material-symbols-outlined">check_circle</span>
                <p>{{ successMessage }}</p>
            </div>

            <!-- NO SLOTS AVAILABLE -->
            <div *ngIf="!isLoading && weeks.length === 0" class="empty-state">
                <span class="material-symbols-outlined">event_busy</span>
                <h2>Aktuell keine Termine verfügbar</h2>
                <p>Bitte schau später noch einmal vorbei oder kontaktiere uns direkt.</p>
                <button class="btn btn--primary" (click)="loadAvailableSlots()">
                    <span class="material-symbols-outlined">refresh</span>
                    Neu laden
                </button>
            </div>

            <!-- BOOKING GRID -->
            <div *ngIf="!isLoading && weeks.length > 0" class="booking-grid">

                <!-- KALENDER -->
                <div class="calendar-section">
                    <div class="section-header">
                        <h2>Wähle einen Tag</h2>
                        <div class="month-nav">
                            <button class="btn-nav" (click)="previousWeek()" [disabled]="currentWeekIndex === 0">
                                <span class="material-symbols-outlined">chevron_left</span>
                            </button>
                            <span class="month-label">{{ weekNavigationLabel }}</span>
                            <button class="btn-nav" (click)="nextWeek()"
                                [disabled]="currentWeekIndex >= weeks.length - 1">
                                <span class="material-symbols-outlined">chevron_right</span>
                            </button>
                        </div>
                    </div>

                    <div class="days-grid">
                        <button *ngFor="let day of currentWeek" class="day-card"
                            [class.selected]="selectedDate === day.date" [class.disabled]="!day.available"
                            [disabled]="!day.available" (click)="selectDate(day.date)">
                            <span class="day-name">{{ day.dayName }}</span>
                            <span class="day-number">{{ day.dayNumber }}</span>
                            <span class="day-status" *ngIf="day.available">
                                {{ getSlotsCountForDay(day) }} Slots
                            </span>
                            <span class="day-status day-status--full" *ngIf="!day.available">
                                Voll
                            </span>
                        </button>
                    </div>

                    <!-- ZEITSLOTS -->
                    <div class="slots-section" *ngIf="selectedDate">
                        <h3>Wähle eine Uhrzeit</h3>
                        <div class="slots-grid">
                            <button *ngFor="let slot of availableSlots" class="slot-card"
                                [class.selected]="selectedSlot?.id === slot.id" (click)="selectSlot(slot)">
                                <span class="material-symbols-outlined">schedule</span>
                                <span>{{ formatTime(slot.timeFrom) }} - {{ formatTime(slot.timeTo) }}</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- BOOKING FORM -->
                <div class="form-section">
                    <div class="form-card">
                        <div class="form-header">
                            <span class="material-symbols-outlined">person</span>
                            <h3>Deine Infos</h3>
                        </div>

                        <form class="booking-form" (ngSubmit)="submitBooking()">

                            <div class="form-group">
                                <label for="name">Name *</label>
                                <input type="text" id="name" [(ngModel)]="bookingData.name" name="name"
                                    placeholder="Max Mustermann" required [disabled]="isSubmitting">
                            </div>

                            <div class="form-group">
                                <label for="email">E-Mail *</label>
                                <input type="email" id="email" [(ngModel)]="bookingData.email" name="email"
                                    placeholder="max@beispiel.de" required [disabled]="isSubmitting">
                            </div>

                            <div class="form-group">
                                <label for="phone">Telefon (optional)</label>
                                <input type="tel" id="phone" [(ngModel)]="bookingData.phone" name="phone"
                                    placeholder="+49 123 456789" [disabled]="isSubmitting">
                            </div>

                            <div class="form-group">
                                <label for="message">Worum geht's?</label>
                                <textarea id="message" [(ngModel)]="bookingData.message" name="message" rows="4"
                                    placeholder="Erzähl mir kurz was du vorhast..."
                                    [disabled]="isSubmitting"></textarea>
                            </div>

                            <!-- ZUSAMMENFASSUNG -->
                            <div class="booking-summary" *ngIf="selectedDate && selectedSlot">
                                <div class="summary-header">
                                    <span class="material-symbols-outlined">event_available</span>
                                    <strong>Dein Termin</strong>
                                </div>
                                <div class="summary-content">
                                    <p>📅 {{ getFormattedDate() }}</p>
                                    <p>🕐 {{ getFormattedTime() }} Uhr</p>
                                    <p>⏱️ 30 Minuten</p>
                                    <p>💻 Online per Video-Call</p>
                                </div>
                            </div>

                            <button type="submit" class="btn btn--primary btn--large"
                                [disabled]="!isFormValid() || isSubmitting">
                                <span class="material-symbols-outlined ms-size-20"
                                    *ngIf="!isSubmitting">check_circle</span>
                                <span class="spinner-small" *ngIf="isSubmitting"></span>
                                {{ isSubmitting ? 'Wird gebucht...' : 'Termin buchen' }}
                            </button>

                            <p class="form-note">
                                <span class="material-symbols-outlined">info</span>
                                Du bekommst direkt eine Bestätigung per E-Mail mit dem Video-Call Link.
                            </p>
                        </form>
                    </div>

                    <!-- WARUM GESPRÄCH -->
                    <div class="info-card">
                        <h4>Was wir besprechen</h4>
                        <ul class="info-list">
                            <li>
                                <span class="material-symbols-outlined">chat</span>
                                <span>Was du brauchst & deine Ziele</span>
                            </li>
                            <li>
                                <span class="material-symbols-outlined">calculate</span>
                                <span>Ehrliche Kosten-Einschätzung</span>
                            </li>
                            <li>
                                <span class="material-symbols-outlined">calendar_month</span>
                                <span>Wie lange es dauert</span>
                            </li>
                            <li>
                                <span class="material-symbols-outlined">route</span>
                                <span>Wie wir zusammen arbeiten</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>