{% extends "base.html" %}
{% block content %}
<section class="pagehead">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / <a href="/apps/">Apps</a> / <a href="/apps/{{ app.slug }}/">{{ app.name }}</a> / Support</div>
    <div class="eyebrow">Support</div>
    <h1>{{ app.full_name }} Support</h1>
    <p>Troubleshooting, known issues, and direct contact for {{ app.name }}.</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">Found something broken? Send steps to reproduce and your device model.</p>
        <a href="/contact/?app={{ app.slug }}&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">Tell us what would make {{ app.name }} more useful for you.</p>
        <a href="/contact/?app={{ app.slug }}&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 — 24×7 email coverage, typically 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 two-col">
    <div class="reveal">
      <div class="eyebrow">Troubleshooting</div>
      <h2>Before you contact us, try this</h2>
      <ul class="list-check">
        <li>Make sure {{ app.name }} is updated to version {{ app.version }} or later on Google Play</li>
        <li>Restart the app, and if needed, restart your device</li>
        <li>Confirm the permissions listed below are granted in Android Settings</li>
        <li>Check available storage space if the issue involves saving or exporting</li>
      </ul>
    </div>
    <div class="reveal">
      <div class="eyebrow">Compatibility</div>
      <div class="card card-flat">
        <div class="flex between small" style="padding:8px 0; border-bottom:1px solid var(--line);"><span class="muted">Minimum Android version</span><span>{{ app.requirements.android }}</span></div>
        <div class="flex between small" style="padding:8px 0; border-bottom:1px solid var(--line);"><span class="muted">Recommended RAM</span><span>{{ app.requirements.ram }}</span></div>
        <div class="flex between small" style="padding:8px 0;"><span class="muted">Storage required</span><span>{{ app.requirements.storage }}</span></div>
      </div>
    </div>
  </div>
</section>

<section class="section--tight">
  <div class="container">
    <div class="eyebrow">Permissions Explanation</div>
    <div class="table-wrap">
      <table class="data-table">
        <thead><tr><th>Permission</th><th>Why it's needed</th></tr></thead>
        <tbody>
        {% for p in app.permissions %}<tr><td>{{ p.name }}</td><td>{{ p.reason }}</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>

    <div class="flex gap-12" style="flex-wrap:wrap; margin-top:32px;">
      <a href="/apps/{{ app.slug }}/" class="tag">← Back to {{ app.name }}</a>
      <a href="/apps/{{ app.slug }}/faq/" class="tag">FAQ</a>
      <a href="/apps/{{ app.slug }}/release-notes/" class="tag">Release Notes</a>
      <a href="/support/" class="tag">Support Center</a>
    </div>
  </div>
</section>
{% endblock %}