{% extends "base.html" %}
{% block content %}

<section class="pagehead" style="padding-bottom:40px;">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / <a href="/apps/">Apps</a> / {{ app.name }}</div>
    <div class="flex gap-24" style="align-items:flex-start; flex-wrap:wrap;">
      <div class="app-icon lg" style="background: linear-gradient(135deg, {{ app.gradient[0] }}, {{ app.gradient[1] }});">{{ app.icon_letters }}</div>
      <div style="flex:1; min-width:260px;">
        <span class="badge">{{ app.category }}</span>
        <h1 style="margin-top:14px;">{{ app.full_name }}</h1>
        <p style="max-width:600px;">{{ app.tagline }}</p>
        <div class="flex gap-12" style="flex-wrap:wrap; margin-top: 20px;">
          <a href="#" class="btn btn-primary" aria-disabled="true">▶ Download on Google Play</a>
          <button class="btn btn-ghost" onclick="alexaShare('{{ app.full_name }}', '{{ app.short_description }}')">Share</button>
        </div>
      </div>
      <div class="card card-flat" style="min-width:220px;">
        <div class="flex between small" style="padding:4px 0;"><span class="muted">Version</span><span class="mono">{{ app.version }}</span></div>
        <div class="flex between small" style="padding:4px 0;"><span class="muted">Updated</span><span class="mono">{{ app.version_date }}</span></div>
        <div class="flex between small" style="padding:4px 0;"><span class="muted">Requires</span><span class="mono">{{ app.requirements.android }}</span></div>
        <div class="flex between small" style="padding:4px 0;"><span class="muted">Size</span><span class="mono">{{ app.requirements.storage }}</span></div>
      </div>
    </div>
  </div>
</section>

<!-- Screenshots -->
<section class="section--tight">
  <div class="container">
    <div class="eyebrow">Screenshots</div>
    <div class="screenshot-row" data-stagger>
      {% for i in range(5) %}
      <div class="screenshot-frame reveal" style="--sc1:{{ app.gradient[0] }}; --sc2:{{ app.gradient[1] }};">
        <div class="fill"></div>
        <div class="notch"></div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Description -->
<section class="section--tight">
  <div class="container two-col">
    <div class="reveal">
      <div class="eyebrow">About this app</div>
      <h2>{{ app.tagline }}</h2>
      {% for p in app.long_description %}<p>{{ p }}</p>{% endfor %}
    </div>
    <div class="reveal">
      <div class="card card-flat">
        <h3 style="font-size:15px;" class="eyebrow" style="margin-bottom:14px;">System Requirements</h3>
        <div class="flex between small" style="padding:8px 0; border-bottom:1px solid var(--line);"><span class="muted">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">Storage needed</span><span>{{ app.requirements.storage }}</span></div>
        <div class="flex between small" style="padding:8px 0; border-bottom:1px solid var(--line);"><span class="muted">RAM</span><span>{{ app.requirements.ram }}</span></div>
        <div class="flex between small" style="padding:8px 0;"><span class="muted">Connectivity</span><span style="text-align:right; max-width:180px;">{{ app.requirements.connectivity }}</span></div>
      </div>
    </div>
  </div>
</section>

<!-- Features -->
<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">Features</div>
    <h2 style="margin-bottom:36px;">What {{ app.name }} does well</h2>
    <div class="grid grid-3" data-stagger>
      {% for f in app.features %}
      <div class="card reveal">
        <div class="icon-badge">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <h3 style="font-size:16px;">{{ f.title }}</h3>
        <p class="small">{{ f.desc }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- What's new / Release notes preview -->
<section class="section--tight">
  <div class="container two-col">
    <div class="reveal">
      <div class="eyebrow">What's New — v{{ app.version }}</div>
      <h2>Latest release</h2>
      <ul class="list-check">
        {% for w in app.whats_new %}<li>{{ w }}</li>{% endfor %}
      </ul>
      <a href="/apps/{{ app.slug }}/release-notes/" class="btn btn-outline btn-sm" style="margin-top:8px;">Full release notes</a>
    </div>
    <div class="reveal">
      <div class="eyebrow">Permissions Used</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>
  </div>
</section>

<!-- FAQ -->
<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="flex between" style="align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:24px;">
      <div>
        <div class="eyebrow">FAQ</div>
        <h2 style="margin-bottom:0;">Frequently asked questions</h2>
      </div>
      <a href="/apps/{{ app.slug }}/faq/" class="btn btn-outline btn-sm">View full FAQ</a>
    </div>
    <div>
      {% for f in app.faqs %}
      <div class="accordion-item {% if loop.first %}open{% endif %}">
        <div class="accordion-q"><span>{{ f.q }}</span><span class="plus"></span></div>
        <div class="accordion-a"><div class="accordion-a-inner">{{ f.a }}</div></div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Support -->
<section class="section--tight">
  <div class="container">
    <div class="eyebrow">Support</div>
    <h2 style="margin-bottom:36px;">Need help with {{ app.name }}?</h2>
    <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.01M10.3 3.9L2.7 17.5c-.6 1 .1 2.5 1.4 2.5h15.8c1.3 0 2-1.4 1.4-2.5L13.7 3.9c-.7-1.2-2.7-1.2-3.4 0z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        <h3 style="font-size:16px;">Report a bug</h3>
        <p class="small">Tell us what happened and we'll investigate.</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;">Request a feature</h3>
        <p class="small">Suggest an improvement or a new capability.</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 response window.</p>
        <a href="/apps/{{ app.slug }}/support/" class="btn btn-outline btn-sm btn-block" style="margin-top:auto;">Visit app support</a>
      </div>
    </div>
  </div>
</section>

<!-- Legal links row -->
<section class="section--tight">
  <div class="container">
    <div class="card card-flat flex between" style="flex-wrap:wrap; gap:16px;">
      <span class="muted small">Legal &amp; policies for {{ app.name }}</span>
      <div class="flex gap-12" style="flex-wrap:wrap;">
        <a href="/apps/{{ app.slug }}/privacy-policy/" class="tag">Privacy Policy</a>
        <a href="/apps/{{ app.slug }}/terms-and-conditions/" class="tag">Terms &amp; Conditions</a>
        <a href="/apps/{{ app.slug }}/support/" class="tag">Support</a>
        <a href="/apps/{{ app.slug }}/faq/" class="tag">FAQ</a>
        <a href="/apps/{{ app.slug }}/release-notes/" class="tag">Release Notes</a>
      </div>
    </div>
  </div>
</section>

<!-- Related apps -->
{% if related %}
<section class="section--tight" style="background: var(--bg-1); border-top:1px solid var(--line);">
  <div class="container">
    <div class="eyebrow">Related Applications</div>
    <h2 style="margin-bottom:36px;">You might also like</h2>
    <div class="grid grid-3" data-stagger>
      {% for r in related %}
      <a href="/apps/{{ r.slug }}/" class="card app-card reveal">
        <div class="app-card-top">
          <div class="app-icon" style="background: linear-gradient(135deg, {{ r.gradient[0] }}, {{ r.gradient[1] }});">{{ r.icon_letters }}</div>
          <div><span class="cat">{{ r.category }}</span><h3>{{ r.full_name }}</h3></div>
        </div>
        <p>{{ r.short_description }}</p>
      </a>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% endblock %}