{{- $c := site.Data.content -}}
<section class="sec contact" id="contact" aria-labelledby="contact-h">
    <div class="screen on-photo">
      <div class="backdrop stage" aria-hidden="true"><img src="{{ ($c.contact.img_1_image | relURL) }}" alt decoding="async"></div>
      <div class="gridlay" aria-hidden="true"></div>
      <div class="head" data-k="c-head" data-snap>
        <p class="sub" data-reveal>{{ $c.contact.p_2 }}</p>
        <h2 id="contact-h" data-reveal style="--d:.08s"><span>{{ $c.contact.span_3 }}</span> <span>{{ $c.contact.span_4 }}</span></h2>
      </div>
      <div class="c-info">
        <ul class="b panel box" data-k="box1" data-snap>
          <li><a href="mailto:studio@example.com">{{ $c.contact.a_5 }}</a></li>
          <li><a href="tel:+351912345678">{{ $c.contact.a_6 }}</a></li>
          <li><a href="https://wa.me/" rel="noopener">{{ $c.contact.a_7 }}</a></li>
        </ul>
        <div class="b panel box" data-k="box2" data-snap>
          <p>{{ $c.contact.p_8 }}</p>
          <p>{{ $c.contact.p_9 }}</p>
          <p class="mono">{{ $c.contact.p_10 }}</p>
        </div>
      </div>

      
      <form id="fg-form" class="c-form" data-k="form" action="https://formgong.com/submit" method="POST" enctype="multipart/form-data" data-sitekey>
        <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
        <input type="hidden" name="_lang" value="en">
        <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"><label>{{ $c.contact.text_11 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
        <div class="b panel f"><label for="f-name">{{ $c.contact.label_12 }}</label><input id="f-name" name="name" type="text" required maxlength="80" autocomplete="name" placeholder="Your name"></div>
        <div class="b panel f"><label for="f-email">{{ $c.contact.label_13 }}</label><input id="f-email" name="email" type="email" required maxlength="120" autocomplete="email" placeholder="you@example.com"></div>
        <div class="b panel f" data-phone-field><label for="f-phone">{{ $c.contact.label_14 }}</label><input id="f-phone" name="phone" type="tel" maxlength="40" autocomplete="tel" placeholder="+351 …"></div>
        <div class="b panel f sel"><label for="f-budget">{{ $c.contact.label_15 }}</label><select id="f-budget" name="budget" required><option value>{{ $c.contact.option_16 }}</option><option>{{ $c.contact.option_17 }}</option><option>{{ $c.contact.option_18 }}</option><option>{{ $c.contact.option_19 }}</option><option>{{ $c.contact.option_20 }}</option></select></div>
        <div class="b panel f msg"><label for="f-message">{{ $c.contact.label_21 }}</label><textarea id="f-message" name="message" required maxlength="3000" placeholder="Where is the plot, and what are you planning?"></textarea></div>
        
        <div class="b panel" data-turnstile hidden></div>
        <button class="b btn send" type="submit"><span data-send-label>{{ $c.contact.span_22 }}</span><span class="arrow" aria-hidden="true">→</span></button>
        <p class="status" data-status role="status"></p>
        <div class="b panel sent" tabindex="-1">
          <p class="label">{{ $c.contact.p_23_html | safeHTML }}</p>
          <p>{{ $c.contact.p_24_html | safeHTML }}</p>
          <button type="button" class="b btn panel again" data-again>{{ $c.contact.button_25 }}</button>
        </div>
      </form>

      <div class="foot">
        <p class="b panel" data-k="f-copy"><span>{{ $c.contact.span_26_html | safeHTML }}</span></p>
        <a class="b panel" href="#" data-k="f-priv">{{ $c.contact.a_27 }}</a>
        <a class="b panel" href="#" data-k="f-terms">{{ $c.contact.a_28 }}</a>
        <a class="b panel" href="https://formgong.com" rel="noopener" data-k="f-credit">{{ $c.contact.a_29 }}</a>
      </div>
    </div>
  </section>