@extends('layouts.app')

@section('title', 'Kontakt | KOTSCH.TECH – Projekt oder Anfrage senden')
@section('meta_description', 'Kontakt zu Arthur Kotsch: Projektanfrage, persönliche IT-Hilfe oder Frage zu einem Tool. Schreib direkt über das Formular – Erstkontakt unverbindlich.')

@section('content')
    @php
        $preselected = request()->query('subject', 'Allgemein');
        $topics = [
            'Webdesign' => 'Webdesign & Web-Apps',
            'Windows' => 'Windows Software Tools',
            'Android' => 'Android App Entwicklung',
            'Shop' => 'Shop / Bestellung',
            'IT-Hilfe' => 'Persönliche IT-Hilfe',
            'Allgemein' => 'Allgemeine Anfrage',
        ];
        $topicAliases = [
            'Webdesign' => ['webdesign', 'css', 'studio', 'template'],
            'Windows' => ['windows', 'lizenz', 'desktop', 'software'],
            'Android' => ['android', 'app'],
            'Shop' => ['shop', 'testshop', 'warenkorb', 'checkout'],
            'IT-Hilfe' => ['it hilfe', 'support', 'computer', 'wlan', 'handy'],
            'Allgemein' => ['allgemein'],
        ];
        $selectedKey = 'Allgemein';
        $normalizedSubject = strtolower(str_replace(['_', '-'], ' ', $preselected));

        foreach($topicAliases as $key => $aliases) {
            foreach($aliases as $alias) {
                if(str_contains($normalizedSubject, $alias)) {
                    $selectedKey = $key;
                    break 2;
                }
            }
        }
    @endphp

    <header class="hub-hero">
        <div class="container reveal active">
            <span class="hub-kicker"><i class="fas fa-paper-plane"></i> Kontakt</span>
            <h1>Lass uns dein Anliegen <span>klar besprechen.</span></h1>
            <p class="lead">
                Schreib mir kurz, worum es geht. Für sensible Daten, Zugangsdaten oder vertrauliche Dokumente nutzen wir bei Bedarf einen passenderen Weg als das Formular.
            </p>
        </div>
    </header>

    <section class="contact-section">
        <div class="container">
            <div class="contact-grid-system reveal">
                <div class="glass-card form-container">
                    <h2 class="section-title">Anfrage senden</h2>

                    <form action="{{ route('kontakt.send') }}" method="POST" class="premium-form">
                        @csrf
                        <input type="text" name="website" tabindex="-1" autocomplete="off" class="contact-hp-field" aria-hidden="true">
                        <input type="hidden" name="form_token" id="contact-form-token" value="">
                        <script>
                            (function () {
                                var f = document.getElementById('contact-form-token');
                                if (f) { f.value = @json($formToken ?? ''); }
                            })();
                        </script>

                        <div class="input-row">
                            <div class="input-stack">
                                <label for="contact-name">Dein Name</label>
                                <input id="contact-name" type="text" name="name" value="{{ old('name') }}" placeholder="Max Mustermann" required>
                                @error('name')<small class="form-error">{{ $message }}</small>@enderror
                            </div>
                            <div class="input-stack">
                                <label for="contact-email">E-Mail Adresse</label>
                                <input id="contact-email" type="email" name="email" value="{{ old('email') }}" placeholder="max@beispiel.de" required>
                                @error('email')<small class="form-error">{{ $message }}</small>@enderror
                            </div>
                        </div>

                        <div class="input-stack">
                            <label for="contact-subject">Themenbereich</label>
                            <div class="select-wrap">
                                <select id="contact-subject" name="subject" required>
                                    @foreach($topics as $key => $label)
                                        <option value="{{ $label }}" {{ old('subject', $topics[$selectedKey]) === $label ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            @error('subject')<small class="form-error">{{ $message }}</small>@enderror
                        </div>

                        <div class="input-stack">
                            <label for="contact-message">Deine Nachricht</label>
                            <textarea id="contact-message" name="message" rows="6" placeholder="Beschreibe kurz dein Anliegen..." required>{{ old('message') }}</textarea>
                            @error('message')<small class="form-error">{{ $message }}</small>@enderror
                        </div>

                        <div class="input-stack">
                            <label for="contact-captcha">Sicherheitsfrage: {{ $captchaQuestion ?? 'Wie viel ist zwei plus drei?' }}</label>
                            <input id="contact-captcha" type="text" name="captcha" inputmode="numeric" autocomplete="off" placeholder="Antwort als Zahl" required>
                            @error('captcha')<small class="form-error">{{ $message }}</small>@enderror
                        </div>

                        <button type="submit" class="submit-btn-black">
                            Nachricht absenden <i class="fas fa-paper-plane"></i>
                        </button>

                        <div class="privacy-short-note">
                            <i class="fas fa-shield-halved"></i>
                            <span>
                                Deine Anfrage wird verschlüsselt übertragen und zur Bearbeitung deiner Nachricht verarbeitet.
                                Bitte sende keine sensiblen Daten über das Formular.
                                Weitere Informationen findest du in der <a href="/datenschutz">Datenschutzerklärung</a>.
                            </span>
                        </div>
                    </form>
                </div>

                <aside class="service-panel">
                    <div class="panel-card">
                        <h3>Direkt-Kontakt</h3>
                        <a href="mailto:arthurkotsch@kotsch.tech" class="panel-item">
                            <div class="panel-icon"><i class="fas fa-envelope-open-text"></i></div>
                            <div class="panel-text">
                                <small>E-Mail</small>
                                <strong>arthurkotsch@kotsch.tech</strong>
                            </div>
                        </a>
                    </div>

                    <div class="panel-card secondary">
                        <h3>Datenschutz-Hinweis</h3>
                        <div class="mini-feature">
                            <i class="fas fa-lock"></i>
                            <div>
                                <strong>Keine sensiblen Inhalte</strong>
                                <p>Bitte keine Passwörter, Ausweisdaten, Gesundheitsdaten oder vertrauliche Kundendaten über das Formular senden.</p>
                            </div>
                        </div>
                        <div class="mini-feature">
                            <i class="fas fa-reply"></i>
                            <div>
                                <strong>Zweckgebunden</strong>
                                <p>Ich nutze deine Angaben nur zur Bearbeitung deiner Anfrage und lösche sie, sobald sie nicht mehr benötigt werden, sofern keine Pflichten dagegen sprechen.</p>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </section>

    <style>
        .contact-section { padding: 64px 8% 120px; background: #f8fafc; }
        .contact-grid-system { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr); gap: 34px; align-items: start; }
        .glass-card, .panel-card { background: #ffffff; padding: 42px; border-radius: 28px; border: 1px solid #e2e8f0; box-shadow: var(--shadow-soft); }
        .section-title, .panel-card h3 { font-size: 1.55rem; font-weight: 900; margin: 0 0 28px; color: #0f172a; }
        .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .input-stack { margin-bottom: 22px; }
        .input-stack label { display: block; font-size: 0.75rem; font-weight: 900; color: #0f172a; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 9px; }
        input, select, textarea { width: 100%; padding: 16px 18px; border-radius: 15px; border: 2px solid #edf2f7; background: #f8fafc; font-size: 1rem; color: #0f172a; font-weight: 600; transition: 0.3s; outline: none; }
        input:focus, select:focus, textarea:focus { border-color: #2563eb; background: white; box-shadow: 0 0 0 5px rgba(37,99,235,0.06); }
        .contact-hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; padding: 0; border: 0; }
        .form-error { display: block; color: #dc2626; font-weight: 800; margin-top: 7px; }
        .select-wrap { position: relative; }
        .select-wrap select { appearance: none; cursor: pointer; }
        .select-wrap i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; }
        .submit-btn-black { width: 100%; min-height: 58px; background: #0f172a; color: #ffffff; border: 0; border-radius: 16px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
        .submit-btn-black:hover { background: #2563eb; }
        .privacy-short-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 16px; border-radius: 16px; border: 1px solid #dbeafe; background: #eff6ff; color: #334155; font-size: 0.9rem; line-height: 1.65; font-weight: 600; }
        .privacy-short-note i { color: #2563eb; margin-top: 4px; }
        .privacy-short-note a { color: #1d4ed8; font-weight: 900; }
        .service-panel { display: grid; gap: 22px; }
        .panel-card.secondary { background: #ffffff; }
        .panel-item { display: flex; align-items: center; gap: 16px; text-decoration: none; padding: 14px; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; }
        .panel-icon { width: 46px; height: 46px; background: #eff6ff; color: #2563eb; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
        .panel-text small { display: block; font-size: 0.72rem; color: #64748b; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
        .panel-text strong { color: #0f172a; font-size: 0.98rem; word-break: break-word; }
        .mini-feature { display: flex; gap: 14px; margin-top: 20px; }
        .mini-feature i { color: #2563eb; margin-top: 5px; }
        .mini-feature strong { display: block; color: #0f172a; font-weight: 900; }
        .mini-feature p { margin: 4px 0 0; color: #64748b; font-size: 0.9rem; line-height: 1.55; }
        @media (max-width: 960px) { .contact-grid-system, .input-row { grid-template-columns: 1fr; } .contact-section { padding: 56px var(--mobile-pad) 96px; } .glass-card, .panel-card { padding: 26px; border-radius: 22px; } }
    </style>
@endsection