---
import { authService } from '@/lib/authService';
import Button from '@components/base/Button.astro';

// Инициализация клиента PocketBase
const pb = authService.createClientFromRequest(Astro.request);

// Получение данных из PocketBase
const appProcessData = await pb.collection('application_process').getFirstListItem('');
---

<!-- Application Process Component -->
<section class="py-20 bg-gradient-to-r from-slate-800 to-slate-900 text-white">
    <div class="max-w-4xl mx-auto px-6 text-center">
        <div>
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-amber-500 text-slate-900 mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
            </div>

            <h2 class="text-3xl md:text-4xl font-bold mb-6">
                {appProcessData.title}
            </h2>

            <div class="w-24 h-1 bg-amber-500 mx-auto mb-8"></div>

            <p class="mt-6 text-lg text-slate-300 max-w-2xl mx-auto mb-10">
                {appProcessData.subtitle}
            </p>

            <a
                href={`mailto:${appProcessData.email}?subject=Bewerbung als Chauffeur&body=Sehr geehrtes Team,%0D%0A%0D%0Ahiermit möchte ich mich als Chauffeur bei Ihnen bewerben.%0D%0A%0D%0AMit freundlichen Grüßen`}
                class="inline-flex items-center gap-3 bg-amber-500 text-slate-900 font-bold py-4 px-10 rounded-lg text-xl transition-all duration-300 shadow-lg hover:shadow-amber-500/40 hover:bg-amber-400 hover:scale-105 active:scale-95"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                {appProcessData.email}
            </a>

            <div class="mt-12 text-slate-400">
                <p>
                    {appProcessData.confirmation_text}
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Application Modal -->
<div id="applicationModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 hidden">
    <div class="relative w-full max-w-2xl bg-white rounded-xl shadow-2xl m-4 max-h-[90vh] flex flex-col">
        <header class="flex items-center justify-between p-5 border-b sticky top-0 bg-white rounded-t-xl z-10">
            <h2 class="text-xl font-bold text-gray-800">Bewerbung als Chauffeur</h2>
            <button 
                onclick="closeApplicationModal()" 
                class="p-2 hover:bg-gray-100 rounded-full transition-colors"
                aria-label="Schließen"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </header>

        <main class="p-6 overflow-y-auto">
            <!-- Simple Application Form -->
            <form class="space-y-6 text-gray-900" onsubmit="handleApplicationSubmit(event)">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Ihr Name</label>
                        <input type="text" placeholder="Max Mustermann" class="w-full border border-gray-300 rounded-md p-2.5 focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input type="email" placeholder="you@example.com" class="w-full border border-gray-300 rounded-md p-2.5 focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required />
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Telefon</label>
                    <input type="tel" placeholder="+49 123 4567890" class="w-full border border-gray-300 rounded-md p-2.5 focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required />
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Anschreiben (optional)</label>
                    <textarea rows="4" placeholder="Erzählen Sie uns etwas über sich..." class="w-full border border-gray-300 rounded-md p-2.5 focus:ring-2 focus:ring-amber-500 focus:border-amber-500"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Lebenslauf (PDF, DOC, DOCX, bis zu 5MB)</label>
                    <input type="file" accept=".pdf,.doc,.docx" class="w-full border border-gray-300 rounded-md p-2.5 focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required />
                </div>

                <footer class="flex justify-end items-center gap-4 pt-4">
                    <button type="button" onclick="closeApplicationModal()" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition-colors">
                        Abbrechen
                    </button>
                    <Button type="submit" variant="primary">
                        Bewerbung senden
                    </Button>
                </footer>
            </form>
        </main>
    </div>
</div>

<script>
    function openApplicationModal() {
        document.getElementById('applicationModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeApplicationModal() {
        document.getElementById('applicationModal').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    function handleApplicationSubmit(event) {
        event.preventDefault();
        // Здесь можно добавить логику отправки формы
        alert('Bewerbung erfolgreich gesendet!');
        closeApplicationModal();
    }

    // Закрытие модального окна по клику вне его
    document.addEventListener('click', function(event) {
        const modal = document.getElementById('applicationModal');
        if (event.target === modal) {
            closeApplicationModal();
        }
    });

    // Закрытие модального окна по ESC
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeApplicationModal();
        }
    });
</script>