@php
    $contactSource = $source ?? 'kontaktseite';
    $contactTopicIcons = [
        'photovoltaik' => 'panel',
        'stromspeicher' => 'battery',
        'wallbox-e-mobilitaet' => 'car',
        'smart-home-knx' => 'network',
        'intelligente-beleuchtung' => 'light',
        'sicherheitstechnik' => 'shield',
        'elektroinstallation-service' => 'tools',
    ];
    $contactConfiguratorUrls = collect($services)->mapWithKeys(function ($service) {
        if (! \App\Support\ServiceConfigurator::available($service)) {
            return [];
        }

        return [$service->title => $service->slug === 'photovoltaik' ? route('pv-configurator.create') : route('service-configurator.create', $service)];
    })->all();
@endphp

<form class="contact-form" action="{{ route('contact.store') }}" method="post" data-contact-form data-configurator-urls='@json($contactConfiguratorUrls)' data-reveal data-reveal-delay="100">
    @csrf
    <input class="honeypot" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
    <input type="hidden" name="form_variant" value="project">
    <input type="hidden" name="source" value="{{ $contactSource }}">

    @if(session('success'))
        <div class="form-alert form-alert-success" role="status">{{ session('success') }}</div>
    @endif
    @if($errors->any() && old('form_variant', 'project') === 'project')
        <div class="form-alert form-alert-error" role="alert">
            <strong>Bitte prüfen Sie Ihre Angaben:</strong>
            <ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif

    <header class="contact-form-header">
        <div>
            <span class="contact-form-kicker">Projektanfrage</span>
            <h3>Projektanfrage senden.</h3>
            <p>Sie müssen keine technischen Begriffe kennen. Beschreiben Sie einfach, was Sie erreichen möchten.</p>
        </div>
        <div class="contact-form-progress" aria-live="polite">
            <span data-contact-status>Startklar</span>
            <i aria-hidden="true"><b data-contact-progress></b></i>
        </div>
    </header>

    <fieldset class="contact-form-block contact-topic-block">
        <legend>
            <span>01</span>
            <strong>Was möchten Sie angehen?<small>Mehrfachauswahl möglich</small></strong>
        </legend>
        <div class="topic-grid">
            @foreach($services as $service)
                <label>
                    <input type="checkbox" name="topics[]" value="{{ $service->title }}" @checked(in_array($service->title, old('topics', [])) || request('thema') === $service->slug)>
                    <span class="topic-choice">
                        <i aria-hidden="true">@include('services.partials.visual-icon', ['icon' => $contactTopicIcons[$service->slug] ?? 'check'])</i>
                        <b>{{ $service->title }}</b>
                        <em aria-hidden="true">✓</em>
                    </span>
                </label>
            @endforeach
        </div>
        <div class="contact-configurator-entry" data-contact-configurator-entry hidden>
            <div><span>Passender Fach-Planer</span><strong data-contact-configurator-title>Projekt gezielt vorbereiten</strong><small>Die ausgewählte Leistung hat einen eigenen Konfigurator mit genau den dafür relevanten Fragen.</small></div>
            <a href="#" data-contact-configurator-link>Planer öffnen <i aria-hidden="true">↗</i></a>
        </div>
    </fieldset>

    <section class="contact-form-block" aria-labelledby="contact-details-title">
        <header class="contact-block-heading">
            <span>02</span>
            <strong id="contact-details-title">Wie erreichen wir Sie?<small>Nur für die persönliche Rückmeldung</small></strong>
        </header>
        <div class="form-row">
            <label class="contact-field">
                <span>Name *</span>
                <input type="text" name="name" value="{{ old('name') }}" autocomplete="name" placeholder="Ihr Name" required @error('name') aria-invalid="true" @enderror>
            </label>
            <label class="contact-field">
                <span>E-Mail *</span>
                <input type="email" name="email" value="{{ old('email') }}" autocomplete="email" placeholder="name@beispiel.lu" required @error('email') aria-invalid="true" @enderror>
            </label>
        </div>
        <label class="contact-field contact-field-phone">
            <span>Telefon <small>optional</small></span>
            <input type="tel" name="phone" value="{{ old('phone') }}" autocomplete="tel" placeholder="+352 …">
        </label>
    </section>

    <fieldset class="contact-form-block contact-project-block">
        <legend>
            <span>03</span>
            <strong>Was soll besser werden?<small>Ein kurzer Satz reicht für den Anfang</small></strong>
        </legend>
        <div class="audience-grid" aria-label="Projektart">
            @foreach([
                ['value' => 'Privat', 'label' => 'Privat', 'hint' => 'Haus oder Wohnung', 'icon' => 'home'],
                ['value' => 'Gewerbe', 'label' => 'Gewerbe', 'hint' => 'Betrieb oder Objekt', 'icon' => 'plan'],
                ['value' => 'Eigentümergemeinschaft', 'label' => 'Gemeinschaft', 'hint' => 'Mehrere Parteien', 'icon' => 'user'],
            ] as $audience)
                <label>
                    <input type="radio" name="audience" value="{{ $audience['value'] }}" @checked(old('audience', 'Privat') === $audience['value'])>
                    <span>
                        <i aria-hidden="true">@include('services.partials.visual-icon', ['icon' => $audience['icon']])</i>
                        <b>{{ $audience['label'] }}</b>
                        <small>{{ $audience['hint'] }}</small>
                    </span>
                </label>
            @endforeach
        </div>
        <label class="contact-field contact-message-field">
            <span>Ihr Vorhaben</span>
            <textarea name="message" rows="5" placeholder="Zum Beispiel: Wir möchten Stromkosten senken, eine Wallbox ergänzen oder unser Gebäude technisch modernisieren.">{{ old('message') }}</textarea>
            <small>Gebäude, Ziel oder gewünschter Zeitraum helfen uns bei der Einordnung.</small>
        </label>
    </fieldset>

    <footer class="contact-form-footer">
        <label class="privacy-check">
            <input type="checkbox" name="consent" value="1" required @checked(old('consent'))>
            <span>Ich stimme der Verarbeitung meiner Angaben zur Kontaktaufnahme zu. <a href="{{ route('privacy') }}">Datenschutz</a></span>
        </label>
        <div class="contact-submit-row">
            <p><i></i><span>Persönlich geprüft</span>In der Regel Rückmeldung am nächsten Werktag.</p>
            <button class="contact-submit-button" type="submit">
                <span>Projektanfrage senden</span>
                <i aria-hidden="true">↗</i>
            </button>
        </div>
    </footer>
</form>
