{{- $c := site.Data.content -}}
<section class="book sheet" id="book" aria-labelledby="book-h">
    <div class="book-grid">
      <div class="book-intro">
        <p class="label">{{ $c.book.p_1 }}</p>
        <h2 class="h2 rv" id="book-h">{{ $c.book.text_2 }} <span class="hl">{{ $c.book.text_3 }}<svg class="squiggle" viewBox="0 0 300 20" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M3 12C28 3 46 18 74 10s48-8 74 1 50 9 76-1 50-8 73 2" /></svg></span>.</h2>
        <p>{{ $c.book.p_4 }}</p>
        <ul class="reach">
          <li>{{ $c.book.li_5_html | safeHTML }}</li>
          <li>{{ $c.book.li_6_html | safeHTML }}</li>
        </ul>
        <svg class="book-art" viewBox="0 0 260 200" aria-hidden="true"><use href="#i-sun" x="120" y="0" width="120" height="120" fill="#FFA51F" /><use href="#i-fern" x="20" y="10" width="100" height="182" color="#0F6E62" /><use href="#i-leaf" x="150" y="96" width="60" height="90" fill="#D2295F" /></svg>
      </div>
      <div class="envelope">
        <span class="stamp" aria-hidden="true"><svg viewBox="0 0 74 90"><rect width="74" height="90" fill="#FFFBF4" /><use href="#i-sun" x="30" y="6" width="38" height="38" fill="#FFA51F" /><use href="#i-fern" x="6" y="18" width="44" height="72" color="#0F6E62" /></svg></span>
        
        <form class="form" id="f-book" 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 intro call request from the Fernlow website">
          <div class="hp" aria-hidden="true"><label>{{ $c.book.text_7 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
          <fieldset>
            <legend>{{ $c.book.legend_8 }}</legend>
            <div class="topics-grid">
              <label class="topic"><input type="radio" name="service" value="Individual therapy"><span>{{ $c.book.span_9 }}</span></label>
              <label class="topic"><input type="radio" name="service" value="Couples therapy"><span>{{ $c.book.span_10 }}</span></label>
              <label class="topic"><input type="radio" name="service" value="Anxiety and stress"><span>{{ $c.book.span_11 }}</span></label>
              <label class="topic"><input type="radio" name="service" value="Online sessions"><span>{{ $c.book.span_12 }}</span></label>
              <label class="topic"><input type="radio" name="service" value="Free intro call"><span>{{ $c.book.span_13 }}</span></label>
              <label class="topic"><input type="radio" name="service" value="Not sure yet" checked><span>{{ $c.book.span_14 }}</span></label>
            </div>
          </fieldset>
          <div class="fields">
            <div class="f"><label for="b-name">{{ $c.book.label_15 }}</label><input id="b-name" name="name" autocomplete="name" required maxlength="100"></div>
            <div class="f"><label for="b-email">{{ $c.book.label_16 }}</label><input id="b-email" name="email" type="email" autocomplete="email" required maxlength="160"></div>
            <div class="f"><label for="b-phone">{{ $c.book.label_17_html | safeHTML }}</label><input id="b-phone" name="phone" type="tel" autocomplete="tel" maxlength="40"></div>
            <div class="f"><label for="b-time">{{ $c.book.label_18_html | safeHTML }}</label>
              <select id="b-time" name="time">
                <option value>{{ $c.book.option_19 }}</option>
                <option>{{ $c.book.option_20 }}</option>
                <option>{{ $c.book.option_21 }}</option>
                <option>{{ $c.book.option_22 }}</option>
                <option>{{ $c.book.option_23 }}</option>
              </select>
            </div>
          </div>
          <fieldset class="chips">
            <legend>{{ $c.book.legend_24 }}</legend>
            <div class="chips-row">
              <label class="chip"><input type="radio" name="format" value="In the room"><span>{{ $c.book.span_25 }}</span></label>
              <label class="chip"><input type="radio" name="format" value="Online"><span>{{ $c.book.span_26 }}</span></label>
              <label class="chip"><input type="radio" name="format" value="Either is fine" checked><span>{{ $c.book.span_27 }}</span></label>
            </div>
          </fieldset>
          <div class="fields">
            <div class="f full"><label for="b-msg">{{ $c.book.label_28_html | safeHTML }}</label><textarea id="b-msg" name="message" rows="3" maxlength="1000" aria-describedby="b-msg-hint"></textarea><p class="hint" id="b-msg-hint">{{ $c.book.p_29 }}</p></div>
          </div>
          <p class="form-note">{{ $c.book.p_30 }}</p>
          <div class="send">
            <button class="btn berry" type="submit"><span data-send-label>{{ $c.book.span_31 }}</span> <svg class="arr" width="20" height="20" aria-hidden="true"><use href="#i-arrow" /></svg></button>
            <p class="status" data-status role="status" aria-live="polite"></p>
          </div>
          <p class="credit">{{ $c.book.p_32_html | safeHTML }}</p>
          <div class="thanks" tabindex="-1">
            <svg viewBox="0 0 120 120" aria-hidden="true"><use href="#i-sun" width="120" height="120" fill="#FFA51F" /><use href="#i-heart" x="38" y="40" width="44" height="40" fill="#D2295F" /></svg>
            <strong>{{ $c.book.strong_33_html | safeHTML }}</strong>
            <p>{{ $c.book.p_34 }}</p>
            <button type="button" data-again>{{ $c.book.button_35 }}</button>
          </div>
        </form>
      </div>
    </div>
  </section>