{{- $c := site.Data.content -}}
<section class="book" id="book" aria-labelledby="book-h">
    <div class="wrap">
      <div class="book-panel">
        <div class="book-info">
          <span class="eyebrow rv">{{ $c.book.span_1 }}</span>
          <h2 id="book-h" class="rv" style="--d:.1s">{{ $c.book.h2_2 }}</h2>
          <p class="rv" style="--d:.2s">{{ $c.book.p_3 }}</p>
          <div class="sos rv" style="--d:.25s">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l10 18H2z" /><path d="M12 10v4M12 17.5v.5" /></svg>
            <p>{{ $c.book.p_4_html | safeHTML }}</p>
          </div>
          <div class="info-cols rv" style="--d:.3s">
            <div>
              <h3>{{ $c.book.h3_5 }}</h3>
              <p><a href="tel:+15550142771">{{ $c.book.a_6 }}</a><br><a href="mailto:hello@burrowvet.example">{{ $c.book.a_7 }}</a></p>
            </div>
            <div>
              <h3>{{ $c.book.h3_8 }}</h3>
              <p>{{ $c.book.p_9_html | safeHTML }}</p>
            </div>
            <div>
              <h3>{{ $c.book.h3_10 }}</h3>
              <p>{{ $c.book.p_11_html | safeHTML }}</p>
            </div>
          </div>
          <svg class="friends rv fade" style="--d:.4s" viewBox="0 0 320 210" aria-hidden="true">
            <path d="M20 200V136a60 60 0 0 1 120 0v64z" fill="#FF6B2C" />
            <path d="M28 104 32 56 56 78z M132 104 128 56 104 78z" fill="#FF6B2C" stroke="#FF6B2C" stroke-width="8" stroke-linejoin="round" />
            <path d="M52 200v-34a28 28 0 0 1 56 0v34z" fill="#2A1740" />
            <g class="eyes" fill="#FFF5EB"><circle cx="71" cy="174" r="4.2" /><circle cx="89" cy="174" r="4.2" /></g>
            <ellipse cx="150" cy="122" rx="14" ry="32" transform="rotate(16 150 122)" fill="#6A3DF0" />
            <ellipse cx="290" cy="122" rx="14" ry="32" transform="rotate(-16 290 122)" fill="#6A3DF0" />
            <path d="M150 200v-70a70 70 0 0 1 140 0v70z" fill="#B9A4FF" />
            <path d="M190 200v-30a30 30 0 0 1 60 0v30z" fill="#2A1740" />
            <g class="eyes late" fill="#FFF5EB"><circle cx="210" cy="178" r="4.6" /><circle cx="230" cy="178" r="4.6" /></g>
            <path d="M4 201h312" stroke="#2A1740" stroke-width="3.5" stroke-linecap="round" />
          </svg>
        </div>

        
        <form class="form rv" style="--d:.15s" id="f-book" action="https://formgong.com/submit" method="POST" data-fg>
          <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
          <input type="hidden" name="subject" value="New visit request from the website">
          <div class="hp" aria-hidden="true"><label>{{ $c.book.text_12 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
          <h3>{{ $c.book.h3_13 }}</h3>
          <div class="field"><label for="b-name">{{ $c.book.label_14 }}</label><input id="b-name" name="name" autocomplete="name" required maxlength="100"></div>
          <div class="field"><label for="b-email">{{ $c.book.label_15 }}</label><input id="b-email" name="email" type="email" autocomplete="email" required maxlength="160"></div>
          <div class="field"><label for="b-phone">{{ $c.book.label_16_html | safeHTML }}</label><input id="b-phone" name="phone" type="tel" autocomplete="tel" maxlength="40"></div>
          <div class="field"><label for="b-pet">{{ $c.book.label_17 }}</label><input id="b-pet" name="pet_name" autocomplete="off" required maxlength="60"></div>
          <fieldset>
            <legend>{{ $c.book.legend_18 }}</legend>
            <div class="chips species">
              <label><input type="radio" name="species" value="Dog" required><span>{{ $c.book.span_19 }}</span></label>
              <label><input type="radio" name="species" value="Cat"><span>{{ $c.book.span_20 }}</span></label>
              <label><input type="radio" name="species" value="Other"><span>{{ $c.book.span_21 }}</span></label>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ $c.book.legend_22 }}</legend>
            <div class="chips">
              <label><input type="radio" name="visit_type" value="Wellness exam" checked><span>{{ $c.book.span_23 }}</span></label>
              <label><input type="radio" name="visit_type" value="Vaccinations"><span>{{ $c.book.span_24 }}</span></label>
              <label><input type="radio" name="visit_type" value="Dental care"><span>{{ $c.book.span_25 }}</span></label>
              <label><input type="radio" name="visit_type" value="Surgery consult"><span>{{ $c.book.span_26 }}</span></label>
              <label><input type="radio" name="visit_type" value="Puppy or kitten package"><span>{{ $c.book.span_27 }}</span></label>
              <label><input type="radio" name="visit_type" value="House call"><span>{{ $c.book.span_28 }}</span></label>
              <label><input type="radio" name="visit_type" value="Something else"><span>{{ $c.book.span_29 }}</span></label>
            </div>
          </fieldset>
          <div class="field"><label for="b-day">{{ $c.book.label_30_html | safeHTML }}</label>
            <select id="b-day" name="preferred_day">
              <option>{{ $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><option>{{ $c.book.option_37 }}</option><option>{{ $c.book.option_38 }}</option>
            </select>
          </div>
          <div class="field"><label for="b-time">{{ $c.book.label_39_html | safeHTML }}</label>
            <select id="b-time" name="preferred_time">
              <option>{{ $c.book.option_40 }}</option><option>{{ $c.book.option_41 }}</option><option>{{ $c.book.option_42 }}</option><option>{{ $c.book.option_43 }}</option>
            </select>
          </div>
          <div class="field full"><label for="b-note">{{ $c.book.label_44_html | safeHTML }}</label><textarea id="b-note" name="message" maxlength="600" aria-describedby="b-note-hint" placeholder="For example: she's nervous around other dogs, or we'd like a late slot."></textarea></div>
          <p class="note-hint" id="b-note-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 7.5v.5" /></svg>{{ $c.book.text_45 }}</p>
          <button class="btn btn-fill send" type="submit"><span data-send-label>{{ $c.book.span_46 }}</span></button>
          <p class="status" data-status role="status" aria-live="polite"></p>
          <p class="credit">{{ $c.book.p_47_html | safeHTML }}</p>
          <div class="thanks" tabindex="-1">
            <div class="tick" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#2A1740" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7" /></svg></div>
            <strong>{{ $c.book.strong_48_html | safeHTML }}</strong>
            <p>{{ $c.book.p_49_html | safeHTML }}</p>
            <button class="btn" type="button" data-again>{{ $c.book.button_50 }}</button>
          </div>
        </form>
      </div>
    </div>
  </section>