{{#section "styles"}}
<link rel="stylesheet" href="/static/css/contact.css" />
{{/section}}
{{#section "scripts"}}
<script src="https://hcaptcha.com/1/api.js" async defer></script>
<script src="/static/js/forensicTracker.js"></script>
{{/section}}
<section>
  <h1>{{title}}</h1>
  <form action="/contact" method="POST" id="contactForm">
    <input type="hidden" name="_csrf" value="{{csrfToken}}">
    {{!-- Honeypot fiel for bot detection --}}
    <input type="text" name="website" class="honeypot" tabindex="-1" autocomplete="off">
    <div class="form-group">
      <label class="required" for="name">Name</label>
      <input id="name" name="name" placeholder="Your name" required autocomplete="name" />
    </div>
    <div class="form-group">
      <label class="required" for="email">Email</label>
      <input id="email" name="email" type="email" placeholder="me@example.com" required
        pattern="[a-zA-Z0-9-_\.]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*" autocomplete="email" />
    </div>
    <div class="form-group">
      <label class="required" for="subject">Subject</label>
      <input id="subject" name="subject" placeholder="e.g. Collaboration Request, Bug Report, Feedback" required />
    </div>
    <div class="form-group message-group">
      <label class="required" for="message">Message</label>
      <textarea id="message" name="message" rows="5" placeholder="Your message here..." maxlength="2000"
        required></textarea>
      <div class="char-counter">
        <span id="char-count">0</span>/2000 characters
      </div>
    </div>
    <div class="h-captcha" data-sitekey="{{hCaptchaKey}}"></div>
    <button type="submit">Send</button>
  </form>

  <p class="required-note" id="submitBtn"><small><sup>*</sup> Required field</small></p>

  <div class="security-notice">
    <details>
      <summary>Security & Privacy Information</summary>
      <div class="security-content">
        <p><strong>Security Notice:</strong> This contact form is protected by security measures including:</p>
        <ul>
          <li>CAPTCHA verification to prevent automated submissions</li>
          <li>Rate limiting to prevent spam</li>
          <li>Basic technical data collection (IP address, browser type, submission timing)</li>
          <li>Content analysis for security purposes</li>
        </ul>
        <p>We collect minimal necessary data to ensure form security and prevent abuse. Your personal information is
          only used to respond to your message.</p>
        <p>If you experience any issues with this form, please try refreshing the page.</p>
      </div>
    </details>
  </div>
</section>