<!-- Contact form card -->
<div class="contact-form-wrap">
  <!-- Success state (hidden until submitted) -->
  <div id="contactSuccess" class="contact-success" aria-live="polite" style="display:none;">
    <div class="success-icon" aria-hidden="true">✅</div>
    <h2 class="success-title">Message received!</h2>
    <p class="success-body">
      Thanks for reaching out. We'll get back to you at your email address within
      2 business days.
    </p>
    <p class="success-note">
      Your message has been saved locally in your browser until we add a backend.
    </p>
    <button class="btn-send-another" id="sendAnother" type="button">Send another message</button>
  </div>

  <!-- Form -->
  <form id="contactForm" class="contact-form" novalidate aria-label="Contact form">
    <h2 class="form-heading">Send a message</h2>

    <div class="form-group">
      <label for="contactName">
        Your name <span class="required" aria-hidden="true">*</span>
      </label>
      <input
        type="text"
        id="contactName"
        name="name"
        placeholder="Jane Smith"
        autocomplete="name"
        required
        aria-required="true"
        aria-describedby="nameError"
        maxlength="120"
      />
      <span class="field-error" id="nameError" role="alert" aria-live="polite"></span>
    </div>

    <div class="form-group">
      <label for="contactEmail">
        Email address <span class="required" aria-hidden="true">*</span>
      </label>
      <input
        type="email"
        id="contactEmail"
        name="email"
        placeholder="jane@example.com"
        autocomplete="email"
        required
        aria-required="true"
        aria-describedby="emailError"
        maxlength="254"
      />
      <span class="field-error" id="emailError" role="alert" aria-live="polite"></span>
    </div>

    <div class="form-group">
      <label for="contactSubject">Subject</label>
      <select id="contactSubject" name="subject" aria-label="Message subject">
        <option value="">— Select a topic (optional) —</option>
        <option value="bug">🐛 Bug report</option>
        <option value="suggestion">💡 Calculator suggestion</option>
        <option value="accuracy">🔢 Formula / accuracy question</option>
        <option value="partnership">🤝 Partnership or media</option>
        <option value="other">💬 Other</option>
      </select>
    </div>

    <div class="form-group">
      <label for="contactMessage">
        Message <span class="required" aria-hidden="true">*</span>
      </label>
      <textarea
        id="contactMessage"
        name="message"
        placeholder="Tell us what's on your mind…"
        rows="6"
        required
        aria-required="true"
        aria-describedby="messageError messageCount"
        maxlength="2000"
      ></textarea>
      <div class="textarea-footer">
        <span class="field-error" id="messageError" role="alert" aria-live="polite"></span>
        <span class="char-count" id="messageCount" aria-live="polite">0 / 2000</span>
      </div>
    </div>

    <!-- Privacy notice -->
    <p class="privacy-notice">
      <span aria-hidden="true">🔒</span>
      Your message is saved locally in your browser (localStorage) until we connect a
      backend. We never sell your data. See our
      <a href="/privacy/">Privacy Policy</a>.
    </p>

    <button type="submit" class="btn-submit" id="submitBtn">
      <span class="btn-text">Send Message</span>
      <span class="btn-icon" aria-hidden="true">→</span>
    </button>
  </form>
</div>

<!-- Side info cards -->
<aside class="contact-info" aria-label="Contact information">

  <div class="info-card">
    <div class="info-icon" aria-hidden="true">✉️</div>
    <h3>Email</h3>
    <p>
      <a href="mailto:hello@running-calculator.com">hello@running-calculator.com</a>
    </p>
    <p class="info-note">We reply within 2 business days.</p>
  </div>

  <div class="info-card">
    <div class="info-icon" aria-hidden="true">🐛</div>
    <h3>Found a bug?</h3>
    <p>
      Use the form and select "Bug report" so we can prioritise it. Include the
      calculator URL and the result you expected.
    </p>
  </div>

  <div class="info-card">
    <div class="info-icon" aria-hidden="true">💡</div>
    <h3>Suggest a calculator</h3>
    <p>
      We love building new tools. Tell us what you need and we'll add it to our
      backlog.
    </p>
  </div>

  <div class="info-card info-card--faq">
    <div class="info-icon" aria-hidden="true">❓</div>
    <h3>Quick answers</h3>
    <ul class="faq-mini">
      <li>
        <strong>Are all calculators free?</strong><br>
        Yes — always free, no login required.
      </li>
      <li>
        <strong>Do you store my inputs?</strong><br>
        No — all calculations run in your browser.
      </li>
      <li>
        <strong>How can I report wrong results?</strong><br>
        Use the bug report form above with your inputs and the expected answer.
      </li>
    </ul>
  </div>

</aside>