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

<section class="hero section--first">
  <div class="container hero-grid">
    <div class="reveal in">
      <div class="eyebrow">AlexaMods Labs · Android Developer Portal</div>
      <h1>Building <span class="grad-text">Smarter</span><br>Android Experiences</h1>
      <p class="hero-sub">AlexaMods Labs develops premium Android applications focused on performance, privacy, security, reliability and exceptional user experience.</p>
      <div class="hero-actions">
        <a href="/apps/" class="btn btn-primary">Explore Apps</a>
        <a href="/support/" class="btn btn-ghost">Support Center</a>
        <a href="/contact/" class="btn btn-outline">Contact</a>
      </div>
    </div>
    <div class="reveal in">
      <div class="orbit-visual">
        <div class="orbit-ring"></div>
        <div class="orbit-ring r2"></div>
        <div class="orbit-ring r3"></div>
        <div class="orbit-core">
          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.4"/><circle cx="12" cy="12" r="4.5" stroke="white" stroke-width="1.4"/></svg>
        </div>
        <div class="orbit-dot" style="top:6%; left:50%;"></div>
        <div class="orbit-dot" style="top:50%; left:96%;"></div>
        <div class="orbit-dot" style="top:88%; left:20%;"></div>
      </div>
    </div>
  </div>
</section>

<!-- Stats -->
<section class="section--tight">
  <div class="container">
    <div class="grid grid-4 reveal" data-stagger>
      <div class="card card-flat text-center reveal"><div class="stat-num">10+</div><div class="stat-label">Published Applications</div></div>
      <div class="card card-flat text-center reveal"><div class="stat-num">24×7</div><div class="stat-label">Email Support Coverage</div></div>
      <div class="card card-flat text-center reveal"><div class="stat-num">100%</div><div class="stat-label">On-Device Processing Focus</div></div>
      <div class="card card-flat text-center reveal"><div class="stat-num">MD3</div><div class="stat-label">Material Design 3 Native</div></div>
    </div>
  </div>
</section>

<!-- Featured Apps -->
<section class="section" id="apps">
  <div class="container">
    <div class="flex between" style="align-items:flex-end; margin-bottom:56px; flex-wrap:wrap; gap:20px;">
      <div class="section-head" style="margin-bottom:0;">
        <div class="eyebrow">Featured Apps</div>
        <h2>The catalog, at a glance</h2>
        <p>Ten focused Android utilities, one consistent standard for privacy, performance, and long-term support.</p>
      </div>
      <a href="/apps/" class="btn btn-outline">View all applications</a>
    </div>
    <div class="grid grid-3" data-stagger>
      {% for app in apps[:6] %}
      <a href="/apps/{{ app.slug }}/" class="card app-card reveal">
        <div class="app-card-top">
          <div class="app-icon" style="background: linear-gradient(135deg, {{ app.gradient[0] }}, {{ app.gradient[1] }});">{{ app.icon_letters }}</div>
          <div>
            <span class="cat">{{ app.category }}</span>
            <h3>{{ app.full_name }}</h3>
          </div>
        </div>
        <p>{{ app.short_description }}</p>
        <div class="app-card-foot">
          <span class="ver">v{{ app.version }}</span>
          <span class="badge">Free</span>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Why choose us -->
<section class="section" style="background: var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">Why AlexaMods Labs</div>
      <h2>Engineering discipline, applied consistently</h2>
      <p>Every application ships against the same internal bar, regardless of how small the utility looks from the outside.</p>
    </div>
    <div class="grid grid-4" data-stagger>
      <div class="reveal">
        <div class="icon-badge"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 2L4 6v6c0 5 3.4 8.7 8 10 4.6-1.3 8-5 8-10V6l-8-4z" stroke="currentColor" stroke-width="1.5"/></svg></div>
        <h3 style="font-size:17px;">Privacy by default</h3>
        <p class="small">On-device processing wherever the task allows it, with clear disclosure whenever data leaves the device.</p>
      </div>
      <div class="reveal">
        <div class="icon-badge"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></div>
        <h3 style="font-size:17px;">Performance first</h3>
        <p class="small">Lightweight builds, efficient background behavior, and interfaces tuned to feel instant.</p>
      </div>
      <div class="reveal">
        <div class="icon-badge"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 9h18" stroke="currentColor" stroke-width="1.5"/></svg></div>
        <h3 style="font-size:17px;">Material Design 3</h3>
        <p class="small">Native theming, dynamic color, and accessible layouts built with current Android conventions.</p>
      </div>
      <div class="reveal">
        <div class="icon-badge"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 4h16v16H4z" stroke="currentColor" stroke-width="1.5"/><path d="M4 10h16M10 4v16" stroke="currentColor" stroke-width="1.5"/></svg></div>
        <h3 style="font-size:17px;">Long-term support</h3>
        <p class="small">Every app carries a published release history and an active support channel for as long as it ships.</p>
      </div>
    </div>
  </div>
</section>

<!-- Technology -->
<section class="section">
  <div class="container two-col">
    <div class="reveal">
      <div class="eyebrow">Technology Stack</div>
      <h2>Built on modern, maintainable Android foundations</h2>
      <p class="muted">Every application shares a common engineering baseline, which is what makes it possible to support ten apps today and a hundred tomorrow without the quality bar slipping.</p>
      <ul class="list-check" style="margin-top:24px;">
        <li>Kotlin across the entire codebase</li>
        <li>Jetpack libraries and Android Architecture Components</li>
        <li>MVVM with Clean Architecture boundaries</li>
        <li>Room Database for local persistence</li>
        <li>Material Design 3 with dynamic color</li>
        <li>Offline-first design wherever feasible</li>
      </ul>
    </div>
    <div class="reveal">
      <div class="grid grid-2" data-stagger>
        <div class="card reveal"><span class="mono small muted">01</span><h3 style="font-size:16px;">Kotlin &amp; Jetpack</h3><p class="small">Type-safe, coroutine-driven code across the stack.</p></div>
        <div class="card reveal"><span class="mono small muted">02</span><h3 style="font-size:16px;">Clean Architecture</h3><p class="small">Clear separation between UI, domain, and data layers.</p></div>
        <div class="card reveal"><span class="mono small muted">03</span><h3 style="font-size:16px;">Room Database</h3><p class="small">Reliable local storage with zero server dependency.</p></div>
        <div class="card reveal"><span class="mono small muted">04</span><h3 style="font-size:16px;">Security Practices</h3><p class="small">Minimal permission footprints, reviewed on every release.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- Testimonials -->
<section class="section" style="background: var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);">
  <div class="container">
    <div class="section-head text-center" style="margin:0 auto 48px;">
      <div class="eyebrow" style="justify-content:center;">Testimonials</div>
      <h2>What people say after living with our apps</h2>
    </div>
    <div class="grid grid-3" data-stagger>
      <div class="card reveal">
        <p class="testimonial-quote">"ScanLens is the first QR scanner I've used that doesn't feel like it's trying to sell me something."</p>
        <p class="testimonial-name">— Android user, ScanLens: QR Scanner</p>
      </div>
      <div class="card reveal">
        <p class="testimonial-quote">"FileNest actually helped me find what was eating my storage instead of just showing me a chart."</p>
        <p class="testimonial-name">— Android user, FileNest: Smart File Manager</p>
      </div>
      <div class="card reveal">
        <p class="testimonial-quote">"Battery Health Monitor's charge alarm alone was worth installing it."</p>
        <p class="testimonial-name">— Android user, Battery Health Monitor</p>
      </div>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="section">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">FAQ</div>
      <h2>Common questions</h2>
    </div>
    <div>
      {% for f in home_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>

<!-- CTA -->
<section class="section">
  <div class="container">
    <div class="cta-band reveal">
      <div class="eyebrow" style="justify-content:center;">Get in touch</div>
      <h2>Questions about an app, a policy, or a partnership?</h2>
      <p>Our support team replies to every message, usually within one to two business days.</p>
      <div class="cta-actions">
        <a href="/contact/" class="btn btn-primary">Contact Us</a>
        <a href="/support/" class="btn btn-ghost">Visit Support Center</a>
      </div>
    </div>
  </div>
</section>

{% endblock %}