{{- $c := site.Data.content -}}
<section class="book" id="book" aria-labelledby="book-h">
    <div class="wrap book-grid">
      <div class="book-side" data-reveal>
        <p class="eyebrow">{{ $c.book.p_1 }}</p>
        <h2 id="book-h">{{ $c.book.h2_2 }}</h2>
        <p>{{ $c.book.p_3 }}</p>
        <div class="contact-list">
          <a href="tel:+441632960214"><i><svg aria-hidden="true"><use href="#i-phone" /></svg></i><span>{{ $c.book.span_4_html | safeHTML }}</span></a>
          <a href="mailto:hello@brightmoss.example"><i><svg aria-hidden="true"><use href="#i-mail" /></svg></i><span>{{ $c.book.span_5_html | safeHTML }}</span></a>
          <div><i><svg aria-hidden="true"><use href="#i-clock" /></svg></i><span>{{ $c.book.span_6_html | safeHTML }}</span></div>
        </div>
      </div>
      <div class="card" data-reveal style="--d:.12s">
        <h3>{{ $c.book.h3_7 }}</h3>
        <p class="sub">{{ $c.book.p_8 }}</p>
        
        <form class="form" id="f-contact" action="https://formgong.com/submit" method="POST">
          <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
          <input type="hidden" name="subject" value="New appointment request from the website">
          <div class="hp" aria-hidden="true"><label>{{ $c.book.text_9 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
          <div class="field full"><label for="c-name">{{ $c.book.label_10 }}</label><input id="c-name" name="name" autocomplete="name" required maxlength="100"></div>
          <div class="field"><label for="c-email">{{ $c.book.label_11 }}</label><input id="c-email" name="email" type="email" autocomplete="email" required maxlength="160"></div>
          <div class="field"><label for="c-phone">{{ $c.book.label_12_html | safeHTML }}</label><input id="c-phone" name="phone" type="tel" autocomplete="tel" maxlength="40"></div>
          <fieldset>
            <legend>{{ $c.book.legend_13 }}</legend>
            <div class="chips">
              <label><input type="radio" name="service" value="Check-up" checked><span>{{ $c.book.span_14 }}</span></label>
              <label><input type="radio" name="service" value="Children's check-up"><span>{{ $c.book.span_15 }}</span></label>
              <label><input type="radio" name="service" value="Hygiene visit"><span>{{ $c.book.span_16 }}</span></label>
              <label><input type="radio" name="service" value="Emergency"><span>{{ $c.book.span_17 }}</span></label>
              <label><input type="radio" name="service" value="Clear aligners"><span>{{ $c.book.span_18 }}</span></label>
              <label><input type="radio" name="service" value="Whitening"><span>{{ $c.book.span_19 }}</span></label>
              <label><input type="radio" name="service" value="Family Plan"><span>{{ $c.book.span_20 }}</span></label>
              <label><input type="radio" name="service" value="Something else"><span>{{ $c.book.span_21 }}</span></label>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ $c.book.legend_22 }}</legend>
            <div class="chips">
              <label><input type="radio" name="patient" value="Me" checked><span>{{ $c.book.span_23 }}</span></label>
              <label><input type="radio" name="patient" value="My child"><span>{{ $c.book.span_24 }}</span></label>
              <label><input type="radio" name="patient" value="The whole family"><span>{{ $c.book.span_25 }}</span></label>
            </div>
          </fieldset>
          <div class="field"><label for="c-practice">{{ $c.book.label_26 }}</label>
            <select id="c-practice" name="practice">
              <option>{{ $c.book.option_27 }}</option>
              <option>{{ $c.book.option_28 }}</option>
              <option>{{ $c.book.option_29 }}</option>
            </select>
          </div>
          <div class="field"><label for="c-time">{{ $c.book.label_30_html | safeHTML }}</label>
            <select id="c-time" name="preferred_time">
              <option value>{{ $c.book.option_31 }}</option>
              <option>{{ $c.book.option_32 }}</option>
              <option>{{ $c.book.option_33 }}</option>
              <option>{{ $c.book.option_34 }}</option>
              <option>{{ $c.book.option_35 }}</option>
              <option>{{ $c.book.option_36 }}</option>
            </select>
          </div>
          <div class="field full"><label for="c-msg">{{ $c.book.label_37_html | safeHTML }}</label>
            <textarea id="c-msg" name="message" maxlength="1000" aria-describedby="c-msg-hint" placeholder="For example: we'd like back-to-back slots for two kids."></textarea>
            <p class="hint" id="c-msg-hint"><svg aria-hidden="true"><use href="#i-info" /></svg>{{ $c.book.text_38 }}</p>
          </div>
          <p class="status" data-status role="status" aria-live="polite"></p>
          <div class="send">
            <button class="pill ink" type="submit"><span data-send-label>{{ $c.book.span_39 }}</span><span class="arr"><svg aria-hidden="true"><use href="#i-arrow" /></svg></span></button>
            <p class="credit">{{ $c.book.p_40_html | safeHTML }}</p>
          </div>
          <div class="thanks" tabindex="-1">
            <div class="sunmark" aria-hidden="true"><svg viewBox="0 0 40 44"><use href="#mark" /></svg></div>
            <strong>{{ $c.book.strong_41_html | safeHTML }}</strong>
            <p>{{ $c.book.p_42 }}</p>
            <button type="button" data-again>{{ $c.book.button_43 }}</button>
          </div>
        </form>
      </div>
    </div>
  </section>