{% extends "pos/base.html" %}
{% block title %}Android Staging Dashboard{% endblock %}

{% block content %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

  :root {
    --mac-bg: #f2f0ed;
    --mac-surface: rgba(255, 255, 255, 0.72);
    --mac-surface-hover: rgba(255, 255, 255, 0.88);
    --mac-border: rgba(0, 0, 0, 0.06);
    --mac-border-hover: rgba(0, 0, 0, 0.1);
    --mac-text: #1d1d1f;
    --mac-text-secondary: #6e6e73;
    --mac-text-tertiary: #98989d;
    --mac-blue: #007aff;
    --mac-blue-hover: #0066d6;
    --mac-green: #30d158;
    --mac-green-soft: #e8f9ed;
    --mac-orange: #ff9f0a;
    --mac-orange-soft: #fff4e0;
    --mac-purple: #af52de;
    --mac-purple-soft: #f4e8fa;
    --mac-cyan: #64d2ff;
    --mac-cyan-soft: #e5f7ff;
    --mac-shadow: 0 0.5px 1px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    --mac-shadow-hover: 0 0.5px 1px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.1);
    --mac-radius: 16px;
    --mac-radius-sm: 12px;
    --mac-radius-xs: 8px;
    --mac-blur: 20px;
    --mac-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mac-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .mac-dashboard {
    font-family: var(--mac-font);
    background: var(--mac-bg);
    min-height: 100vh;
    color: var(--mac-text);
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Subtle grain texture overlay */
  .mac-dashboard::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
  }

  .mac-dashboard .dashboard-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
  }

  /* ─── Top bar ─── */
  .mac-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.25rem;
    animation: macFadeDown 0.6s ease both;
  }
  .mac-topbar-left h1 {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--mac-text);
  }
  .mac-topbar-left p {
    font-size: 0.82rem;
    color: var(--mac-text-tertiary);
    margin: 0.15rem 0 0;
    font-weight: 400;
  }
  .mac-topbar-actions {
    display: flex;
    gap: 0.5rem;
  }
  .mac-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--mac-font);
    border-radius: 980px;
    border: none;
    cursor: pointer;
    transition: all var(--mac-transition);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .mac-btn-ghost {
    background: var(--mac-surface);
    color: var(--mac-text-secondary);
    border: 1px solid var(--mac-border);
    backdrop-filter: blur(var(--mac-blur));
  }
  .mac-btn-ghost:hover {
    background: var(--mac-surface-hover);
    border-color: var(--mac-border-hover);
    color: var(--mac-text);
    transform: translateY(-1px);
  }
  .mac-btn-primary {
    background: var(--mac-blue);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,122,255,0.25);
  }
  .mac-btn-primary:hover {
    background: var(--mac-blue-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,122,255,0.3);
  }

  /* ─── Stat cards row ─── */
  .mac-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
  }
  @media (max-width: 992px) { .mac-stats-row { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 576px) { .mac-stats-row { grid-template-columns: 1fr; } }

  .mac-stat-card {
    background: var(--mac-surface);
    backdrop-filter: blur(var(--mac-blur));
    border: 1px solid var(--mac-border);
    border-radius: var(--mac-radius);
    padding: 1.25rem 1.35rem;
    transition: all var(--mac-transition);
    animation: macFadeUp 0.5s ease both;
  }
  .mac-stat-card:nth-child(1) { animation-delay: 0.05s; }
  .mac-stat-card:nth-child(2) { animation-delay: 0.1s; }
  .mac-stat-card:nth-child(3) { animation-delay: 0.15s; }
  .mac-stat-card:nth-child(4) { animation-delay: 0.2s; }
  .mac-stat-card:hover {
    border-color: var(--mac-border-hover);
    box-shadow: var(--mac-shadow);
    transform: translateY(-2px);
  }
  .mac-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
  }
  .mac-stat-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--mac-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .mac-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
  }
  .mac-stat-icon.blue  { background: #e8f1ff; color: var(--mac-blue); }
  .mac-stat-icon.green { background: var(--mac-green-soft); color: #1fa643; }
  .mac-stat-icon.orange{ background: var(--mac-orange-soft); color: #d17d00; }
  .mac-stat-icon.cyan  { background: var(--mac-cyan-soft); color: #0091b3; }
  .mac-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .mac-stat-hint {
    font-size: 0.72rem;
    color: var(--mac-text-tertiary);
    margin-top: 0.55rem;
    font-weight: 400;
  }

  /* ─── Download CTA (centre) ─── */
  .mac-download-section {
    text-align: center;
    margin-bottom: 2.25rem;
    animation: macFadeUp 0.6s ease 0.22s both;
  }
  .mac-download-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--mac-surface);
    backdrop-filter: blur(var(--mac-blur));
    border: 1px solid var(--mac-border);
    border-radius: 20px;
    padding: 2rem 3.5rem;
    transition: all var(--mac-transition);
  }
  .mac-download-card:hover {
    box-shadow: var(--mac-shadow-hover);
    border-color: var(--mac-border-hover);
    transform: translateY(-3px);
  }
  .mac-download-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mac-text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
  }
  .mac-download-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mac-text);
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
  }
  .mac-playstore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1.6rem;
    background: var(--mac-text);
    color: #fff;
    font-family: var(--mac-font);
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    border-radius: 980px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--mac-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    letter-spacing: -0.01em;
  }
  .mac-playstore-btn:hover {
    background: #333;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  }
  .mac-playstore-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* ─── Module cards ─── */
  .mac-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  @media (max-width: 992px) { .mac-modules-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 576px) { .mac-modules-grid { grid-template-columns: 1fr; } }

  .mac-module-card {
    background: var(--mac-surface);
    backdrop-filter: blur(var(--mac-blur));
    border: 1px solid var(--mac-border);
    border-radius: var(--mac-radius);
    padding: 1.5rem;
    transition: all var(--mac-transition);
    animation: macFadeUp 0.55s ease both;
    display: flex;
    flex-direction: column;
  }
  .mac-module-card:nth-child(1) { animation-delay: 0.25s; }
  .mac-module-card:nth-child(2) { animation-delay: 0.3s; }
  .mac-module-card:nth-child(3) { animation-delay: 0.35s; }
  .mac-module-card:hover {
    border-color: var(--mac-border-hover);
    box-shadow: var(--mac-shadow-hover);
    transform: translateY(-3px);
  }
  .mac-module-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .mac-module-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }
  .mac-module-icon.blue   { background: #e8f1ff; color: var(--mac-blue); }
  .mac-module-icon.green  { background: var(--mac-green-soft); color: #1fa643; }
  .mac-module-icon.purple { background: var(--mac-purple-soft); color: var(--mac-purple); }
  .mac-module-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 980px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .mac-module-badge.blue   { background: #e8f1ff; color: var(--mac-blue); }
  .mac-module-badge.green  { background: var(--mac-green-soft); color: #1fa643; }
  .mac-module-badge.purple { background: var(--mac-purple-soft); color: var(--mac-purple); }
  .mac-module-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
  }
  .mac-module-desc {
    font-size: 0.78rem;
    color: var(--mac-text-tertiary);
    margin-bottom: 1rem;
    line-height: 1.5;
  }
  .mac-module-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
  }
  .mac-module-features li {
    font-size: 0.76rem;
    color: var(--mac-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .mac-module-features li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mac-text-tertiary);
    flex-shrink: 0;
    opacity: 0.5;
  }
  .mac-module-actions {
    display: flex;
    gap: 0.5rem;
  }
  .mac-btn-module {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--mac-font);
    border-radius: 980px;
    border: none;
    cursor: pointer;
    transition: all var(--mac-transition);
    text-decoration: none;
    letter-spacing: -0.01em;
  }
  .mac-btn-module.fill-blue {
    background: var(--mac-blue);
    color: #fff;
  }
  .mac-btn-module.fill-blue:hover {
    background: var(--mac-blue-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,122,255,0.25);
  }
  .mac-btn-module.fill-green {
    background: #1fa643;
    color: #fff;
  }
  .mac-btn-module.fill-green:hover {
    background: #189438;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(48,209,88,0.3);
  }
  .mac-btn-module.outline {
    background: transparent;
    color: var(--mac-text-secondary);
    border: 1px solid var(--mac-border);
  }
  .mac-btn-module.outline:hover {
    background: var(--mac-surface-hover);
    border-color: var(--mac-border-hover);
    color: var(--mac-text);
  }
  .mac-btn-module.disabled-look {
    background: transparent;
    color: var(--mac-text-tertiary);
    border: 1px solid var(--mac-border);
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* ─── Animations ─── */
  @keyframes macFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes macFadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
</style>

<div class="mac-dashboard">
  <div class="dashboard-inner">

    <!-- ─── Download Android App (Centred) ─── -->
    <div class="mac-download-section">
      <div class="mac-download-card">
        <div class="mac-download-subtitle">Mobile Experience</div>
        <div class="mac-download-title">Download Android App</div>
        <a class="mac-playstore-btn"
           href="https://play.google.com/store/apps/details?id=com.world.freevideodownloader"
           target="_blank"
           rel="noopener noreferrer">
          <!-- Google Play icon -->
          <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.609 1.814a1.07 1.07 0 0 0-.39.904v18.564c0 .384.156.72.39.904l.048.04L14.054 12l-.001-.124L3.657 1.773l-.048.04Z"/>
            <path d="m17.525 15.473-3.471-3.473 3.471-3.473.078.045 4.113 2.338c1.175.667 1.175 1.76 0 2.428l-4.113 2.338-.078.045v-.248Z"/>
            <path d="m17.603 15.52-3.549-3.52L3.609 22.28c.388.41 1.03.46 1.748.05l12.246-6.81Z"/>
            <path d="M17.603 8.48 5.357 1.67C4.638 1.26 3.997 1.31 3.609 1.72L14.054 12l3.549-3.52Z"/>
          </svg>
          Download Android App
        </a>
      </div>
    </div>

    <!-- ─── Module Cards ─── -->
    <div class="mac-modules-grid">

      <!-- Sales -->
      <div class="mac-module-card">
        <div class="mac-module-header">
          <div>
            <div class="mac-module-icon blue">
              <i class="fa-solid fa-cart-shopping"></i>
            </div>
            <div class="mac-module-title">Android Sales</div>
          </div>
          <span class="mac-module-badge blue">Staging</span>
        </div>
        <div class="mac-module-desc">Staging sales list, detail view &amp; approve workflow</div>
        <ul class="mac-module-features">
          <li>Filterable list</li>
          <li>Detail preview</li>
          <li>Approve workflow</li>
        </ul>
        <div class="mac-module-actions">
          <a class="mac-btn-module fill-blue" href="{% url 'pos_api:android_sales_list' %}">
            <i class="fa-solid fa-arrow-right"></i> Open Sales
          </a>
          <a class="mac-btn-module outline" href="{% url 'pos_api:android_sales_list' %}">
            <i class="fa-solid fa-list"></i> View List
          </a>
        </div>
      </div>

      <!-- Recovery -->
      <div class="mac-module-card">
        <div class="mac-module-header">
          <div>
            <div class="mac-module-icon green">
              <i class="fa-solid fa-hand-holding-dollar"></i>
            </div>
            <div class="mac-module-title">Customer Recovery</div>
          </div>
          <span class="mac-module-badge green">Bulk</span>
        </div>
        <div class="mac-module-desc">Bulk approve recoveries with checkbox &amp; select all</div>
        <ul class="mac-module-features">
          <li>Select all / multi-select</li>
          <li>Approve in one click</li>
          <li>Safe staging flow</li>
        </ul>
        <div class="mac-module-actions">
          <a class="mac-btn-module fill-green" href="{% url 'pos_api:android_recovery_list' %}">
            <i class="fa-solid fa-arrow-right"></i> Open Recovery
          </a>
          <a class="mac-btn-module outline" href="{% url 'pos_api:android_recovery_list' %}">
            <i class="fa-solid fa-filter"></i> Review
          </a>
        </div>
      </div>

      <!-- Coming Soon -->
      <div class="mac-module-card">
        <div class="mac-module-header">
          <div>
            <div class="mac-module-icon purple">
              <i class="fa-solid fa-screwdriver-wrench"></i>
            </div>
            <div class="mac-module-title">More Modules</div>
          </div>
          <span class="mac-module-badge purple">Soon</span>
        </div>
        <div class="mac-module-desc">Additional staging modules coming soon — Products, Banks, Vendors and more</div>
        <ul class="mac-module-features">
          <li>Products staging</li>
          <li>Banks staging</li>
          <li>Vendors staging</li>
        </ul>
        <div class="mac-module-actions">
          <button class="mac-btn-module disabled-look" type="button" disabled>
            <i class="fa-solid fa-lock"></i> Coming Soon
          </button>
        </div>
      </div>

    </div>

  </div>
</div>
{% endblock %}