{#
  Keep In Touch — newsletter / contact capture admonition.

  Rendered above the comments section on every page (included from
  partials/comments.html). Lets a visitor leave a WhatsApp number and/or
  email to get updates. Each field submits independently; once both are
  present the widget asks for their name. Submissions POST as JSON to the
  endpoint configured in zensical.toml under [project.extra.keep_in_touch].

  Config (zensical.toml):
    [project.extra.keep_in_touch]
    endpoint = "https://subscribe.krystl.org/api/subscribe"
    enabled  = true

  The endpoint is also exposed to JS as window.TOA_KEEP_IN_TOUCH_ENDPOINT
  via overrides/main.html. Styling lives in docs/stylesheets/extra.css
  (.toa-kit-*), behaviour in docs/javascripts/extra.js (Keep-In-Touch IIFE).
#}
{% if config.extra.keep_in_touch and config.extra.keep_in_touch.enabled != false %}
<section class="toa-kit gp-reveal"
         data-endpoint="{{ config.extra.keep_in_touch.endpoint | default('') }}"
         aria-labelledby="toa-kit-title">
  <div class="toa-kit__inner">
    <div class="toa-kit__glow" aria-hidden="true"></div>

    <header class="toa-kit__header">
      <span class="toa-kit__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
             stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             viewBox="0 0 24 24" class="lucide">
          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
          <path d="m22 6-10 7L2 6"></path>
        </svg>
      </span>
      <div class="toa-kit__heading">
        <h2 id="toa-kit-title" class="toa-kit__titletext">Keep In Touch</h2>
        <p class="toa-kit__sub">Leave your WhatsApp or email to get updates on the journey.</p>
      </div>
    </header>

    <form class="toa-kit__form" novalidate>
      {# WhatsApp #}
      <label class="toa-kit__field" data-kind="whatsapp">
        <span class="toa-kit__fieldicon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
               stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               viewBox="0 0 24 24" class="lucide">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
          </svg>
        </span>
        <input type="tel" class="toa-kit__input" name="whatsapp"
               inputmode="tel" autocomplete="tel"
               placeholder="WhatsApp number" aria-label="WhatsApp number">
      </label>

      {# Email #}
      <label class="toa-kit__field" data-kind="email">
        <span class="toa-kit__fieldicon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
               stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               viewBox="0 0 24 24" class="lucide">
            <rect width="20" height="16" x="2" y="4" rx="2"></rect>
            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
          </svg>
        </span>
        <input type="email" class="toa-kit__input" name="email"
               inputmode="email" autocomplete="email"
               placeholder="Email address" aria-label="Email address">
      </label>

      {# Name — revealed after both whatsapp + email are captured #}
      <label class="toa-kit__field toa-kit__field--name" data-kind="name" hidden>
        <span class="toa-kit__fieldicon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
               stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               viewBox="0 0 24 24" class="lucide">
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </span>
        <input type="text" class="toa-kit__input" name="name"
               autocomplete="name"
               placeholder="Your name (optional)" aria-label="Your name">
      </label>

      <button type="submit" class="toa-kit__send">Send</button>
    </form>

    <p class="toa-kit__notice" role="status" aria-live="polite" hidden></p>
  </div>
</section>
{% endif %}