{{--
    „Sprechen Sie uns an."

    Die Seite, auf der das Selbstbedienen aufhört. Wer hier landet, hat sich
    schon entschieden zu fragen — also steht hier ein Formular und keine zweite
    Verkaufsseite. Vorher zeigte der Knopf auf `mailto:`, was auf den meisten
    Geräten sichtbar gar nichts tut. Siehe App\Http\Controllers\ContactController.
--}}
<x-layouts.site title="Anfrage — CluPilot Cloud" robots="noindex">

<main class="mx-auto w-full max-w-[860px] px-5 pt-14 pb-24 sm:px-8">

    <header class="rv">
        <p class="lbl">Anfrage</p>
        <h1 class="mt-3 text-[clamp(2rem,4vw,2.8rem)] font-bold leading-[1.06] tracking-[-0.035em] text-ink">
            @if ($topic === 'enterprise')
                Eine eigene Maschine.
            @else
                Sprechen Sie uns an.
            @endif
        </h1>
        <p class="mt-4 max-w-[58ch] text-md leading-relaxed text-muted">
            @if ($topic === 'enterprise')
                Sagen Sie uns, wie viel Speicher Sie brauchen und wie viele Menschen damit
                arbeiten. Wir rechnen Ihnen einen Server durch, auf dem nur Ihre Cloud läuft
                — und melden uns am selben Werktag.
            @else
                Schreiben Sie uns, was Sie vorhaben. Wir antworten am selben Werktag,
                auf Deutsch, ohne Warteschleife.
            @endif
        </p>
    </header>

    @if ($sent)
        {{-- Der Bestätigungszustand ersetzt das Formular, statt darüber zu
             stehen: ein Formular, das nach dem Absenden weiter dasteht, lädt
             zum zweiten Absenden ein. --}}
        <div class="rv mt-10 rounded-xl border border-accent-border bg-accent-subtle p-7">
            <h2 class="text-lg font-bold tracking-[-0.02em] text-ink">Ihre Anfrage ist da.</h2>
            <p class="mt-2 max-w-[58ch] text-sm leading-relaxed text-body">
                Wir haben sie bekommen und melden uns am selben Werktag. Eine Kopie geht
                nicht automatisch an Sie — falls Sie etwas nachreichen möchten, antworten
                Sie einfach auf unsere Rückmeldung.
            </p>
            <a href="{{ route('home') }}" class="mt-5 inline-flex items-center gap-2 text-sm font-medium text-accent-text underline-offset-4 hover:underline">
                Zurück zur Übersicht
            </a>
        </div>
    @else
        <form method="POST" action="{{ route('contact.send') }}" class="rv mt-10">
            @csrf
            <input type="hidden" name="topic" value="{{ $topic }}">

            {{-- Der Honigtopf. Aus dem Lesefluss genommen statt display:none —
                 ein Feld, das gar nicht existiert, füllt auch kein Roboter aus,
                 und genau das Ausfüllen ist hier das Erkennungszeichen.
                 aria-hidden und tabindex=-1, damit ein Screenreader und die
                 Tabulatortaste es überspringen. --}}
            <div class="absolute left-[-9999px] top-auto h-px w-px overflow-hidden" aria-hidden="true">
                <label for="website">Website (bitte frei lassen)</label>
                <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" value="">
            </div>

            <div class="overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
                @foreach ([
                    ['company', 'Firma', 'text', false, 'organization'],
                    ['name', 'Ihr Name', 'text', true, 'name'],
                    ['email', 'E-Mail', 'email', true, 'email'],
                    ['phone', 'Telefon (optional)', 'tel', false, 'tel'],
                ] as [$field, $label, $type, $required, $autocomplete])
                    <div class="border-b border-line px-6 py-5">
                        <label for="{{ $field }}" class="block text-sm font-medium text-ink">
                            {{ $label }}@if ($required)<span class="text-danger" aria-hidden="true"> *</span>@endif
                        </label>
                        <input type="{{ $type }}" id="{{ $field }}" name="{{ $field }}"
                               value="{{ old($field) }}" autocomplete="{{ $autocomplete }}"
                               @if ($required) required @endif
                               class="mt-2 block w-full rounded border border-line bg-surface px-3 py-2 text-sm text-ink transition focus:border-accent-border focus:outline-none">
                        @error($field)
                            <p class="mt-1.5 text-xs text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                @endforeach

                <div class="px-6 py-5">
                    <label for="message" class="block text-sm font-medium text-ink">
                        Ihre Nachricht<span class="text-danger" aria-hidden="true"> *</span>
                    </label>
                    <textarea id="message" name="message" rows="7" required
                              placeholder="{{ $topic === 'enterprise'
                                  ? 'Wie viel Speicher brauchen Sie, und wie viele Menschen arbeiten damit?'
                                  : 'Worum geht es?' }}"
                              class="mt-2 block w-full rounded border border-line bg-surface px-3 py-2 text-sm leading-relaxed text-ink transition focus:border-accent-border focus:outline-none">{{ old('message') }}</textarea>
                    @error('message')
                        <p class="mt-1.5 text-xs text-danger">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-5 flex flex-wrap items-center justify-between gap-4">
                <p class="max-w-[46ch] text-xs leading-relaxed text-muted">
                    Wir benutzen Ihre Angaben nur, um Ihre Anfrage zu beantworten.
                    Näheres in der <a href="{{ route('legal.datenschutz') }}" class="underline underline-offset-2 hover:text-body">Datenschutzerklärung</a>.
                </p>
                <button type="submit" class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] bg-ink px-[22px] text-[15px] font-semibold leading-none text-white transition hover:opacity-90">
                    Anfrage senden
                </button>
            </div>
        </form>
    @endif

</main>

</x-layouts.site>