---
import Base from '../../layouts/Base.astro';
import '../../styles/form.css';
import { anliegen, salon, ANFRAGE_ENDPOINT, waits } from '../../data/site';
---
<Base
  title="Anfrage stellen"
  description="Anfrage an das Friseur-Team VK in Tostedt für Braut, Great Lengths, Balayage und Farbe. Mit Fotos und Wunschzeitraum, Rückruf innerhalb von zwei Werktagen."
  crumbs={[{ name: 'Anfrage', href: '/anfrage' }]}
>
  <section class="ph" aria-labelledby="ph-h">
    <div class="pad">
      <p class="ph__crumb"><a href="/">Start</a> <span>/ Anfrage</span></p>
      <h1 id="ph-h" class="ph__title is-mid"><span class="sr">Erzählen Sie uns, was Sie vorhaben.</span><span aria-hidden="true"><span class="ini">E</span>rzählen Sie uns,<br /><span class="it">was Sie vorhaben.</span></span></h1>
    </div>
  </section>

  <section class="sec-b" aria-label="Anfrageformular">
    <div class="r3 aq">
      <aside class="ab aq__side">
        <div class="gap-5 aq__sticky">
          <p class="lead">Termine vergeben wir im Gespräch, nicht online. Mit diesen Angaben wissen wir vorab, wie viel Zeit wir einplanen und wer aus dem Team am besten passt.</p>
          <ol class="aq__how" role="list">
            <li><span>1</span>Sie schicken die Anfrage, gern mit Fotos.</li>
            <li><span>2</span>Wir rufen innerhalb von zwei Werktagen zurück.</li>
            <li><span>3</span>Wir tragen den Termin ein und bestätigen ihn.</li>
          </ol>
          <div class="note note--wash">
            <p class="cap">Schnitt, Herren, Kinder</p>
            <p>Dafür brauchen Sie kein Formular. Rufen Sie an oder schreiben Sie per WhatsApp.</p>
            <div class="row"><a class="oval oval--sm" href={salon.phoneHref}>{salon.phoneDisplay}</a><a class="go" href={salon.whatsappHref} rel="noopener">WhatsApp</a></div>
          </div>
        </div>
      </aside>

      <div class="c aq__main">
        <div id="f-summary" class="f__summary" role="alert" tabindex="-1" hidden>
          <h2>Bitte prüfen Sie Ihre Angaben</h2>
          <ul></ul>
        </div>

        <form id="anfrage" class="f" action={ANFRAGE_ENDPOINT} method="post" enctype="multipart/form-data" data-endpoint={ANFRAGE_ENDPOINT}>
          <fieldset>
            <legend><span class="f__n">1</span>Worum geht es?</legend>
            <div class="choices" role="radiogroup" aria-describedby="err-anliegen">
              {anliegen.map((a) => (
                <label class="choice">
                  <input type="radio" name="anliegen" value={a.value} required data-hint={a.hint} data-label={a.label} />
                  <span class="choice__t">{a.label}</span>
                  <span class="choice__h">{a.sub}</span>
                </label>
              ))}
            </div>
            <p class="f__err" id="err-anliegen" data-for="anliegen"></p>
          </fieldset>

          <!-- Braut -->
          <fieldset class="step-later" data-locked data-only="braut">
            <legend><span class="f__n" data-num>2</span>Ihre Hochzeit</legend>
            <div class="f__row2">
              <div class="f__field"><label class="f__label" for="hochzeitsdatum">Datum der Hochzeit</label><input type="date" id="hochzeitsdatum" name="hochzeitsdatum" /></div>
              <div class="f__field"><label class="f__label" for="x_trauung">Uhrzeit der Trauung</label><input type="time" id="x_trauung" name="x_trauung" data-label="Trauung um" /></div>
            </div>
            <p class="note note--wash small" id="braut-kurz" hidden>Ihre Hochzeit ist in weniger als acht Wochen. Rufen Sie uns bitte direkt an, dann sagen wir Ihnen sofort, ob es noch passt: <a class="link" href={salon.phoneHref}>{salon.phoneDisplay}</a></p>
            <div class="f__row2">
              <div class="f__field"><label class="f__label" for="x_fertig">Alle fertig bis <span class="f__opt">(optional)</span></label><input type="time" id="x_fertig" name="x_fertig" data-label="Fertig bis" /></div>
              <div class="f__field"><label class="f__label" for="ort">Ort oder Location <span class="f__opt">(optional)</span></label><input type="text" id="ort" name="ort" autocomplete="off" placeholder="z. B. Gutshof in Handeloh" /></div>
            </div>
            <div class="f__row2">
              <div class="f__field"><label class="f__label" for="personen">Personen mit Frisur</label><input type="number" id="personen" name="personen" min="1" max="15" inputmode="numeric" placeholder="1" aria-describedby="help-personen" /><p class="f__help" id="help-personen">Braut plus Begleitung</p></div>
              <div class="f__field"><label class="f__label" for="x_makeup">Personen mit Make-up <span class="f__opt">(optional)</span></label><input type="number" id="x_makeup" name="x_makeup" min="0" max="15" inputmode="numeric" placeholder="0" data-label="Make-up für" /></div>
            </div>
            <fieldset class="f__group">
              <legend class="f__sub">Wo soll gestylt werden?</legend>
              <div class="choices choices--inline">
                <label class="choice"><input type="radio" name="x_wo" value="im Salon" data-label="Styling" /><span class="choice__t">Im Salon</span></label>
                <label class="choice"><input type="radio" name="x_wo" value="vor Ort" data-label="Styling" /><span class="choice__t">Vor Ort</span></label>
                <label class="choice"><input type="radio" name="x_wo" value="noch offen" data-label="Styling" /><span class="choice__t">Noch offen</span></label>
              </div>
            </fieldset>
          </fieldset>

          <!-- Great Lengths -->
          <fieldset class="step-later" data-locked data-only="verlaengerung">
            <legend><span class="f__n" data-num>2</span>Ihr Wunsch</legend>
            <fieldset class="f__group">
              <legend class="f__sub">Was möchten Sie?</legend>
              <div class="choices choices--inline">
                <label class="choice"><input type="radio" name="x_gl" value="mehr Länge" data-label="Great Lengths" /><span class="choice__t">Mehr Länge</span></label>
                <label class="choice"><input type="radio" name="x_gl" value="mehr Fülle" data-label="Great Lengths" /><span class="choice__t">Mehr Fülle</span></label>
                <label class="choice"><input type="radio" name="x_gl" value="beides" data-label="Great Lengths" /><span class="choice__t">Beides</span></label>
              </div>
            </fieldset>
            <div class="f__row2">
              <div class="f__field">
                <label class="f__label" for="x_ziel">Gewünschte Länge</label>
                <select id="x_ziel" name="x_ziel" data-label="Ziellänge"><option value="">Bitte wählen</option><option>bis Schulter</option><option>bis Brust</option><option>bis Mitte Rücken</option><option>noch länger</option></select>
              </div>
              <div class="f__field">
                <label class="f__label" for="x_budget">Budgetrahmen</label>
                <select id="x_budget" name="x_budget" data-label="Budget"><option value="">Bitte wählen</option><option>bis 500 €</option><option>500 bis 900 €</option><option>900 bis 1.400 €</option><option>über 1.400 €</option><option>weiß ich noch nicht</option></select>
              </div>
            </div>
            <label class="check"><input type="checkbox" name="x_frueher" value="ja" data-label="Hatte schon Extensions" /><span>Ich hatte schon einmal Extensions.</span></label>
          </fieldset>

          <!-- Haar -->
          <fieldset class="step-later" data-locked>
            <legend><span class="f__n" data-num>2</span>Ihr Haar heute</legend>
            <fieldset class="f__group">
              <legend class="f__sub">Haarlänge</legend>
              <div class="choices choices--inline">
                <label class="choice"><input type="radio" name="haarlaenge" value="kurz" /><span class="choice__t">Kurz</span><span class="choice__h">bis Kinn</span></label>
                <label class="choice"><input type="radio" name="haarlaenge" value="mittel" /><span class="choice__t">Mittel</span><span class="choice__h">bis Schulter</span></label>
                <label class="choice"><input type="radio" name="haarlaenge" value="lang" /><span class="choice__t">Lang</span><span class="choice__h">über Schulter</span></label>
              </div>
            </fieldset>
            <fieldset class="f__group">
              <legend class="f__sub">Ausgangslage</legend>
              <div class="choices choices--inline">
                <label class="choice"><input type="radio" name="ausgangslage" value="natur" /><span class="choice__t">Naturhaar</span></label>
                <label class="choice"><input type="radio" name="ausgangslage" value="gefaerbt" /><span class="choice__t">Gefärbt</span></label>
                <label class="choice"><input type="radio" name="ausgangslage" value="blondiert" /><span class="choice__t">Blondiert</span></label>
                <label class="choice"><input type="radio" name="ausgangslage" value="unbekannt" /><span class="choice__t">Weiß nicht</span></label>
              </div>
            </fieldset>
            <div class="f__field">
              <label class="f__label" for="wunsch">Ihr Wunsch <span class="f__opt">(optional)</span></label>
              <textarea id="wunsch" name="wunsch" rows="4" maxlength="1500" aria-describedby="help-wunsch"></textarea>
              <p class="f__help" id="help-wunsch">Was soll sich ändern? Was hat Ihnen beim letzten Mal nicht gefallen?</p>
            </div>
            <div class="f__field">
              <span class="f__label" id="lbl-fotos">Fotos <span class="f__opt">(optional, bis zu 3, je höchstens 6 MB)</span></span>
              <div class="drop">
                <input type="file" id="fotos" name="fotos" accept="image/jpeg,image/png,image/webp,image/heic,image/heif" multiple aria-labelledby="lbl-fotos" aria-describedby="help-fotos err-fotos" />
                <p class="f__help" id="help-fotos">Ein Foto von Ihrem Haar heute, bei Tageslicht von hinten, hilft uns sehr.</p>
              </div>
              <ul class="files" id="files" aria-live="polite"></ul>
              <p class="f__err" id="err-fotos" data-for="fotos"></p>
            </div>
          </fieldset>

          <!-- Zeit -->
          <fieldset class="step-later" data-locked>
            <legend><span class="f__n" data-num>3</span>Wann passt es Ihnen?</legend>
            <div class="f__field">
              <label class="f__label" for="zeitraum">Wunschzeitraum</label>
              <select id="zeitraum" name="zeitraum">
                <option value="">Bitte wählen</option>
                <option>So bald wie möglich</option>
                <option>In den nächsten zwei Wochen</option>
                <option>In diesem Monat</option>
                <option>In ein bis drei Monaten</option>
                <option>Später oder fester Termin</option>
              </select>
              <p class="f__help">Aktuell: {waits.items.map((w) => `${w.label} ${w.value.toLowerCase()}`).join(' · ')}</p>
            </div>
            <label class="check check--box">
              <input type="checkbox" name="warteliste" value="on" />
              <span><strong>Ich kann auch kurzfristig.</strong><br /><span class="small muted">Wenn ein Termin frei wird, rufen wir Sie an. So kommen Sie oft schneller dran.</span></span>
            </label>
            <div class="f__field">
              <label class="f__label" for="x_tage">Passende Tage <span class="f__opt">(optional)</span></label>
              <input type="text" id="x_tage" name="x_tage" placeholder="z. B. dienstags und freitags ab 14 Uhr" data-label="Passende Tage" />
            </div>
            <fieldset class="f__group">
              <legend class="f__sub">Waren Sie schon bei uns?</legend>
              <div class="choices choices--inline">
                <label class="choice"><input type="radio" name="kundenstatus" value="neu" /><span class="choice__t">Zum ersten Mal</span></label>
                <label class="choice"><input type="radio" name="kundenstatus" value="bestand" /><span class="choice__t">Ja, schon öfter</span></label>
              </div>
            </fieldset>
          </fieldset>

          <!-- Kontakt -->
          <fieldset class="step-later" data-locked>
            <legend><span class="f__n" data-num>4</span>Wie erreichen wir Sie?</legend>
            <div class="f__row2">
              <div class="f__field">
                <label class="f__label" for="name">Name <span class="f__req" aria-hidden="true">*</span></label>
                <input type="text" id="name" name="name" required autocomplete="name" maxlength="100" aria-describedby="err-name" />
                <p class="f__err" id="err-name" data-for="name"></p>
              </div>
              <div class="f__field">
                <label class="f__label" for="telefon">Telefon <span class="f__req" aria-hidden="true">*</span></label>
                <input type="tel" id="telefon" name="telefon" required autocomplete="tel" inputmode="tel" pattern="[0-9 +\(\)\/\-]{6,}" maxlength="40" aria-describedby="err-telefon" />
                <p class="f__err" id="err-telefon" data-for="telefon"></p>
              </div>
            </div>
            <div class="f__field">
              <label class="f__label" for="email">E-Mail <span class="f__opt">(optional)</span></label>
              <input type="email" id="email" name="email" autocomplete="email" maxlength="160" aria-describedby="err-email" />
              <p class="f__err" id="err-email" data-for="email"></p>
            </div>
            <fieldset class="f__group">
              <legend class="f__sub">Wann dürfen wir zurückrufen?</legend>
              <div class="choices choices--inline">
                <label class="choice"><input type="radio" name="rueckruf" value="vormittags" /><span class="choice__t">Vormittags</span></label>
                <label class="choice"><input type="radio" name="rueckruf" value="nachmittags" /><span class="choice__t">Nachmittags</span></label>
                <label class="choice"><input type="radio" name="rueckruf" value="abends" /><span class="choice__t">Abends</span></label>
                <label class="choice"><input type="radio" name="rueckruf" value="egal" checked /><span class="choice__t">Egal</span></label>
              </div>
            </fieldset>

            <div class="pricebox" aria-live="polite">
              <p class="cap">Preisrahmen</p>
              <p class="pricebox__v" id="pricebox-v" hidden></p>
              <ul class="pricebox__all" id="pricebox-all" role="list">{anliegen.map((a) => <li>{a.label}: {a.hint}</li>)}</ul>
              <p class="small">Richtwerte. Den genauen Preis nennen wir nach der Beratung. <a class="link" href="/leistungen-preise">Alle Preise</a></p>
            </div>
            <label class="check"><input type="checkbox" name="preis_ok" value="on" /><span>Ich habe den Preisrahmen gesehen und möchte beraten werden.</span></label>
            <label class="check">
              <input type="checkbox" name="datenschutz" value="on" required aria-describedby="err-datenschutz" />
              <span>Ich bin einverstanden, dass der Salon meine Angaben und Fotos speichert, um meine Anfrage zu bearbeiten. Mehr in der <a class="link" href="/datenschutz">Datenschutzerklärung</a>. <span class="f__req" aria-hidden="true">*</span></span>
            </label>
            <p class="f__err" id="err-datenschutz" data-for="datenschutz"></p>
            <div class="hp" aria-hidden="true"><label for="website">Website (bitte leer lassen)</label><input type="text" id="website" name="website" tabindex="-1" autocomplete="off" /></div>
            <div class="f__submit">
              <button type="submit" class="oval oval--fill f__btn" id="f-btn"><span class="f__spin" aria-hidden="true"></span><span class="f__btn-t">Anfrage senden</span></button>
              <p class="f__help">* Pflichtfeld. Absenden ist noch keine Buchung, wir rufen Sie zurück.</p>
              <p class="f__err" id="f-net" role="alert"></p>
            </div>
          </fieldset>
        </form>

        <div id="f-done" class="done" tabindex="-1" hidden>
          <span class="step__n" aria-hidden="true">Danke</span>
          <h2 id="f-done-h" class="h3">Danke, Ihre Anfrage ist da.</h2>
          <p id="f-done-p">Wir rufen Sie innerhalb von zwei Werktagen zurück.</p>
          <p class="cap" id="f-done-id"></p>
          <div class="row"><a class="oval" href="/">Zur Startseite</a><a class="go" href="/kundenkarte">Kundenkarte</a></div>
        </div>
      </div>
    </div>
  </section>
</Base>

<script>
  import { initAnfrage } from '../../scripts/anfrage';
  initAnfrage();
</script>