{% extends "base.html" %}
{% block content %}
<section class="pagehead" style="padding-bottom:40px;">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / Contact</div>
    <div class="eyebrow">Contact</div>
    <h1>Get in touch with AlexaMods Labs</h1>
    <p>For bug reports, feature requests, business inquiries, or privacy requests — this form reaches our support inbox directly.</p>
  </div>
</section>

<section class="section--tight">
  <div class="container two-col">
    <div class="reveal">
      <form id="contact-form">
        <div class="field-row">
          <div class="field"><label for="c-name">Name</label><input id="c-name" name="name" type="text" required placeholder="Your name"></div>
          <div class="field"><label for="c-email">Email</label><input id="c-email" name="email" type="email" required placeholder="you@example.com"></div>
        </div>
        <div class="field">
          <label for="c-app">App Name</label>
          <select id="c-app" name="app">
            <option value="">General / Not app-specific</option>
            {% for app in apps %}<option value="{{ app.slug }}">{{ app.full_name }}</option>{% endfor %}
          </select>
        </div>
        <div class="field">
          <label>Inquiry Type</label>
          <div class="radio-group" id="c-type-group">
            <label class="radio-chip"><input type="radio" name="type" value="bug"><span>Bug Report</span></label>
            <label class="radio-chip"><input type="radio" name="type" value="business"><span>Business Inquiry</span></label>
            <label class="radio-chip"><input type="radio" name="type" value="feature"><span>Feature Request</span></label>
            <label class="radio-chip"><input type="radio" name="type" value="privacy"><span>Privacy Request</span></label>
          </div>
        </div>
        <div class="field"><label for="c-subject">Subject</label><input id="c-subject" name="subject" type="text" required placeholder="Short summary"></div>
        <div class="field"><label for="c-message">Message</label><textarea id="c-message" name="message" required placeholder="Tell us what's going on…"></textarea></div>
        <button type="submit" class="btn btn-primary btn-block">Send Message</button>
        <p id="contact-form-note" class="small muted" style="margin-top:14px; text-align:center;"></p>
      </form>
    </div>
    <div class="reveal">
      <div class="card card-flat">
        <h3 style="font-size:16px;">Developer</h3>
        <p class="small">AlexaMods Labs</p>
        <hr class="divider" style="margin:20px 0;">
        <h3 style="font-size:16px;">Support Email</h3>
        <p class="small"><a href="mailto:support@alexamodslabs.in" style="color:var(--c-secondary);">support@alexamodslabs.in</a></p>
        <hr class="divider" style="margin:20px 0;">
        <h3 style="font-size:16px;">Business Email</h3>
        <p class="small"><a href="mailto:support@alexamodslabs.in" style="color:var(--c-secondary);">support@alexamodslabs.in</a></p>
        <hr class="divider" style="margin:20px 0;">
        <h3 style="font-size:16px;">Official Website</h3>
        <p class="small"><a href="https://alexamodslabs.in" style="color:var(--c-secondary);">alexamodslabs.in</a></p>
        <hr class="divider" style="margin:20px 0;">
        <h3 style="font-size:16px;">Support Availability</h3>
        <p class="small">24×7 Email Support</p>
      </div>
    </div>
  </div>
</section>

<script>
  (function(){
    var params = new URLSearchParams(window.location.search);
    var app = params.get('app');
    var type = params.get('type');
    if (app) { var sel = document.getElementById('c-app'); if (sel) sel.value = app; }
    if (type) {
      var input = document.querySelector('#c-type-group input[value="' + type + '"]');
      if (input) { input.checked = true; input.dispatchEvent(new Event('change')); }
    }
  })();
</script>
{% endblock %}