{% extends "base.html" %}
{% block content %}
<section class="pagehead">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / Support Center</div>
    <div class="eyebrow">Support Center</div>
    <h1>How can we help?</h1>
    <p>Technical support, bug reports, feature requests, and troubleshooting for every AlexaMods Labs application, plus direct 24×7 email support.</p>
  </div>
</section>

<section class="section--tight">
  <div class="container">
    <div class="grid grid-3" data-stagger>
      <div class="card support-card reveal">
        <div class="icon-badge"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 9v4M12 17h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"/></svg></div>
        <h3 style="font-size:16px;">Bug Reports</h3>
        <p class="small">Describe the issue, your device, and Android version — we'll take it from there.</p>
        <a href="/contact/?type=bug" class="btn btn-outline btn-sm btn-block" style="margin-top:auto;">Report a bug</a>
      </div>
      <div class="card support-card reveal">
        <div class="icon-badge"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
        <h3 style="font-size:16px;">Feature Requests</h3>
        <p class="small">Have an idea for one of our apps? We read every submission.</p>
        <a href="/contact/?type=feature" class="btn btn-outline btn-sm btn-block" style="margin-top:auto;">Request a feature</a>
      </div>
      <div class="card support-card reveal">
        <div class="icon-badge"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 7l9 6 9-6" stroke="currentColor" stroke-width="1.5"/></svg></div>
        <h3 style="font-size:16px;">Email Support</h3>
        <p class="small">support@alexamodslabs.in, monitored 24×7 with replies in 1–2 business days.</p>
        <a href="mailto:support@alexamodslabs.in" class="btn btn-outline btn-sm btn-block" style="margin-top:auto;">Email us</a>
      </div>
    </div>
  </div>
</section>

<section class="section--tight" style="background: var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);">
  <div class="container">
    <div class="eyebrow">Per-App Support</div>
    <h2>Jump to support for a specific app</h2>
    <div class="grid grid-3" data-stagger style="margin-top:28px;">
      {% for app in apps %}
      <a href="/apps/{{ app.slug }}/support/" class="card reveal flex gap-16 center">
        <div class="app-icon sm" style="background: linear-gradient(135deg, {{ app.gradient[0] }}, {{ app.gradient[1] }});">{{ app.icon_letters }}</div>
        <span style="font-size:14.5px; color:var(--text-0); font-weight:600;">{{ app.name }}</span>
      </a>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section--tight">
  <div class="container">
    <div class="eyebrow">Known Issues</div>
    <h2>Currently tracked</h2>
    <p class="muted">There are no widespread known issues at this time. Any confirmed issue affecting multiple users will be listed here along with its status until resolved.</p>
  </div>
</section>
{% endblock %}