<!-- maintenance.component.html -->

<div class="page">
    <div class="container">

        <!-- Logo -->
        <div class="logo-section">
            <img src="assets/logos/blue_logo_transparent.svg" alt="Leonards & Brandenburger IT Logo" class="logo" />
            <h2 class="brand-name">Leonards & Brandenburger IT</h2>
        </div>

        <!-- Launch Badge -->
        <div class="badge">
            🚧 Wartungsmodus aktiv
        </div>

        <!-- Main Heading -->
        <h1>Wir sind bald wieder da</h1>

        <!-- Custom Message or Default -->
        <p class="description">
            {{ message || 'Unsere Website wird gerade gewartet und verbessert. Wir arbeiten daran, dir bald ein noch besseres Erlebnis bieten zu können.' }}
        </p>

        <!-- Email Notification -->
        <div class="notify-box">
            <h2>Bleib auf dem Laufenden</h2>
            <p>Erfahre als Erster, wenn wir wieder online sind</p>

            <div class="email-form" *ngIf="!submitted">
                <input type="email" 
                       class="email-input" 
                       placeholder="deine@email.de" 
                       [(ngModel)]="email"
                       (keyup.enter)="onSubmitNewsletter()" 
                       [disabled]="isLoading" 
                       required />
                <button class="btn btn--primary" 
                        (click)="onSubmitNewsletter()" 
                        [disabled]="isLoading"
                        [class.btn--loading]="isLoading">
                    <span class="btn-content" [class.btn-content--hidden]="isLoading">
                        Benachrichtigen
                    </span>
                    <span class="spinner" *ngIf="isLoading"></span>
                </button>
            </div>

            <div class="error-message" *ngIf="errorMessage && !showPasswordForm">
                ⚠️ {{ errorMessage }}
            </div>

            <div class="success-message" *ngIf="submitted">
                ✅ Danke! Wir melden uns bei dir.
            </div>
        </div>

        <!-- Password Access Section -->
        <div class="access-section">
            <button class="access-toggle" (click)="togglePasswordForm()">
                {{ showPasswordForm ? '🔒 Zugang schließen' : '🔑 Admin-Zugang' }}
            </button>
            
            <div class="password-box" *ngIf="showPasswordForm">
                <p class="access-label">Zugang mit Passwort:</p>
                <div class="password-form">
                    <input type="password" 
                           class="email-input" 
                           placeholder="Passwort eingeben"
                           [(ngModel)]="password"
                           (keyup.enter)="onSubmitPassword()"
                           [disabled]="isCheckingPassword">
                    <button class="btn btn--primary" 
                            (click)="onSubmitPassword()"
                            [disabled]="isCheckingPassword || !password"
                            [class.btn--loading]="isCheckingPassword">
                        <span class="btn-content" [class.btn-content--hidden]="isCheckingPassword">
                            Zugang
                        </span>
                        <span class="spinner" *ngIf="isCheckingPassword"></span>
                    </button>
                </div>
                <div class="error-message" *ngIf="errorMessage && showPasswordForm">
                    ⚠️ {{ errorMessage }}
                </div>
            </div>
        </div>

        <!-- Contact Info -->
        <div class="contact">
            <p class="contact-text">
                Dringende Anfragen?
                <a [href]="getMailtoLink()" class="link">
                    {{ contactEmail }}
                </a>
            </p>
        </div>

    </div>
</div>