{% extends spa_base or "base.html"%}
{% block title %}App Android - Troço Play{% endblock %}
{% block extra_head %}
<style>
    .download-page {
        max-width: 900px;
        margin: 0 auto;
        padding: 60px 24px;
    }
    .download-hero {
        text-align: center;
        margin-bottom: 48px;
    }
    .download-hero h1 {
        font-size: 2.2em;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 12px;
    }
    .download-hero h1 span {
        color: var(--primary);
    }
    .download-hero p {
        color: var(--text-muted);
        font-size: 1.05em;
        line-height: 1.7;
        max-width: 600px;
        margin: 0 auto;
    }
    .download-main-card {
        background: var(--bg-card);
        border: 2px solid var(--primary);
        border-radius: var(--radius-lg);
        padding: 48px 40px;
        text-align: center;
        margin-bottom: 32px;
    }
    .download-main-card .icon {
        font-size: 4em;
        margin-bottom: 16px;
    }
    .download-main-card h2 {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .download-main-card .version {
        color: var(--text-muted);
        font-size: 0.85em;
        margin-bottom: 24px;
    }
    .download-main-card .btn-download {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 18px 48px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 1.2em;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        transition: filter 0.2s;
    }
    .download-main-card .btn-download:hover {
        filter: brightness(1.15);
        transform: translateY(-2px);
    }
    .download-main-card .btn-download small {
        font-weight: 400;
        font-size: 0.75em;
        opacity: 0.8;
    }
    .download-main-card .compat {
        display: flex;
        justify-content: center;
        gap: 24px;
        flex-wrap: wrap;
        margin-top: 24px;
    }
    .download-main-card .compat-item {
        background: var(--bg-surface);
        border-radius: var(--radius-md);
        padding: 12px 24px;
        text-align: center;
        min-width: 120px;
    }
    .download-main-card .compat-item .emoji {
        font-size: 1.5em;
        margin-bottom: 4px;
    }
    .download-main-card .compat-item .label {
        font-size: 0.8em;
        color: var(--text-secondary);
        font-weight: 600;
    }
    .tv-web-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 32px 40px;
        margin-bottom: 32px;
        text-align: center;
    }
    .tv-web-section h3 {
        font-size: 1.1em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 12px;
    }
    .tv-web-section p {
        color: var(--text-muted);
        font-size: 0.9em;
        margin-bottom: 16px;
        line-height: 1.6;
    }
    .tv-web-section .tv-url {
        display: inline-block;
        padding: 12px 32px;
        background: var(--bg-surface);
        border: 2px solid var(--primary);
        border-radius: var(--radius-sm);
        color: var(--primary);
        font-size: 1.1em;
        font-weight: 700;
        text-decoration: none;
        font-family: monospace;
    }
    .tv-downloader-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 32px 40px;
        margin-bottom: 32px;
    }
    .tv-downloader-card h3 {
        font-size: 1.1em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
        text-align: center;
    }
    .tv-downloader-card .codes {
        display: flex;
        justify-content: center;
        gap: 24px;
        flex-wrap: wrap;
    }
    .tv-downloader-card .code-box {
        background: var(--bg-surface);
        border-radius: var(--radius-md);
        padding: 20px 32px;
        text-align: center;
        min-width: 180px;
    }
    .tv-downloader-card .code-box .label {
        font-size: 0.75em;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .tv-downloader-card .code-box .value {
        font-size: 2em;
        font-weight: 800;
        letter-spacing: 4px;
        color: var(--primary);
        font-family: monospace;
    }
    .tv-downloader-card .code-box .value.sm {
        font-size: 1.2em;
        letter-spacing: 1px;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }
    .pwa-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }
    .pwa-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 28px 24px;
        text-align: center;
    }
    .pwa-card .icon { font-size: 2.4em; margin-bottom: 10px; }
    .pwa-card h3 { font-size: 1.05em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .pwa-card p { color: var(--text-muted); font-size: 0.85em; line-height: 1.6; margin-bottom: 18px; }
    .pwa-card .btn-pwa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 20px;
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 1em;
        font-weight: 700;
        cursor: pointer;
        transition: filter 0.2s;
    }
    .pwa-card .btn-pwa:hover { filter: brightness(1.15); }
    .pwa-card .btn-pwa.alt { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); }
    .pwa-hint { font-size: 0.75em; color: var(--text-muted); margin-top: 10px; }
    .pwa-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.75);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .pwa-modal.active { display: flex; }
    .pwa-modal-box {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        max-width: 460px;
        width: 100%;
        padding: 28px 24px;
        text-align: left;
    }
    .pwa-modal-box h3 { color: var(--text-primary); font-size: 1.1em; margin-bottom: 14px; }
    .pwa-modal-box ol { margin: 0 0 18px; padding-left: 20px; }
    .pwa-modal-box li { color: var(--text-secondary); font-size: 0.92em; line-height: 1.8; }
    .pwa-modal-box li strong { color: var(--text-primary); }
    .pwa-modal-close {
        display: inline-block;
        padding: 10px 22px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-weight: 600;
        cursor: pointer;
    }
    .info-item {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 24px 20px;
        text-align: center;
    }
    .info-item .icon {
        font-size: 1.8em;
        margin-bottom: 8px;
    }
    .info-item h3 {
        font-size: 0.95em;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }
    .info-item p {
        font-size: 0.85em;
        color: var(--text-muted);
        margin: 0;
    }
    .instructions {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 32px 40px;
    }
    .instructions h3 {
        font-size: 1.1em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
    }
    .instructions ol {
        margin: 0;
        padding-left: 20px;
    }
    .instructions li {
        color: var(--text-secondary);
        font-size: 0.95em;
        line-height: 1.8;
        margin-bottom: 8px;
    }
    .instructions li strong {
        color: var(--text-primary);
    }
    @media (max-width: 768px) {
        .download-page { padding: 32px 16px; }
        .download-hero h1 { font-size: 1.6em; }
        .download-hero p { font-size: 0.95em; }
        .download-main-card { padding: 32px 16px; }
        .download-main-card .btn-download { padding: 16px 28px; font-size: 1.05em; width: 100%; justify-content: center; }
        .download-main-card .compat { gap: 8px; }
        .download-main-card .compat-item { min-width: 90px; padding: 10px 12px; }
        .tv-web-section, .tv-downloader-card, .instructions { padding: 24px 16px; }
        .tv-web-section .tv-url { font-size: 0.8em; padding: 12px 16px; word-break: break-all; }
        .tv-downloader-card .codes { gap: 12px; }
        .tv-downloader-card .code-box { min-width: 140px; padding: 16px 20px; }
        .tv-downloader-card .code-box .value { font-size: 1.5em; letter-spacing: 2px; }
        .info-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .instructions li { font-size: 0.9em; }
    }
    @media (max-width: 420px) {
        .download-main-card .compat-item { min-width: 80px; padding: 8px 8px; }
        .download-main-card .compat-item .emoji { font-size: 1.2em; }
        .tv-downloader-card .codes { flex-direction: column; align-items: center; }
        .info-grid { grid-template-columns: 1fr; }
    }
</style>
{% endblock %}
{% block content %}
<div class="download-page">
    <div class="download-hero">
        <h1>App <span>Troço Play</span> Oficial</h1>
        <p>Baixe o aplicativo unificado para qualquer dispositivo Android. Funciona em smartphones, tablets, Smart TVs Android e Fire TV Stick.</p>
    </div>

    <!-- APK Unificado -->
    <div class="download-main-card">
        <div class="icon">📱📺</div>
        <h2>Troço Play — Celular + TV</h2>
        <div class="desc" style="color:var(--text-muted); font-size:0.95em; margin-bottom:20px; line-height:1.6;">
            Um unico APK que funciona em qualquer dispositivo Android — celular, tablet, Smart TV ou Fire TV Stick. O app detecta automaticamente o tipo de dispositivo e ajusta a interface.
        </div>
        <div class="version">Versao {{ version }} &middot; {{ size }} &middot; Android 5.0+{% if release_date %} &middot; {{ release_date }}{% endif %}</div>
        <a href="{{ apk_url }}" class="btn-download">
            ⬇ Baixar APK
            <small>({{ size }})</small>
        </a>            <div class="compat">
            <div class="compat-item">
                <div class="emoji">📱</div>
                <div class="label">Celular</div>
            </div>
            <div class="compat-item">
                <div class="emoji">📋</div>
                <div class="label">Tablet</div>
            </div>
            <div class="compat-item">
                <div class="emoji">📺</div>
                <div class="label">Android TV</div>
            </div>
            <div class="compat-item">
                <div class="emoji">🔥</div>
                <div class="label">Fire TV Stick</div>
            </div>
            <div class="compat-item">
                <div class="emoji">📦</div>
                <div class="label">Boxes Android</div>
            </div>
        </div>
    </div>

    <!-- App PC + App iPhone -->
    <div class="pwa-grid">
        <div class="pwa-card">
            <div class="icon">💻</div>
            <h3>App para PC (Windows / Mac / Linux)</h3>
            <p>Instale o Troço Play direto no seu computador pelo Chrome ou Edge — igual a um programa, com ícone na área de trabalho e atualizações automáticas.</p>
            <button type="button" class="btn-pwa" id="btnInstallPc" onclick="installAppPc()">🖥️ Instalar app no PC</button>
            <div class="pwa-hint" id="hintPc">O popup de instalação do navegador vai abrir na hora.</div>
        </div>
        <div class="pwa-card">
            <div class="icon">🍎</div>
            <h3>App para iPhone / iPad</h3>
            <p>No iOS o app é adicionado à Tela de Inicialização pelo Safari — funciona em tela cheia, com ícone e notificações.</p>
            <button type="button" class="btn-pwa alt" id="btnInstallIos" onclick="installAppIphone()">📲 Adicionar à Tela de Inicialização</button>
            <div class="pwa-hint" id="hintIos">Abra este site no <strong>Safari</strong> do iPhone/iPad.</div>
        </div>
    </div>

    <!-- Versao Web TV -->
    <div class="tv-web-section">
        <h3>🖥️ Versao Web para TV (sem instalar)</h3>
        <p>Acesse direto no navegador da sua Smart TV — sem precisar instalar nada. Funciona em TVs Samsung, LG, Sony, Philips e qualquer navegador.</p>
        <a href="{{ url_for('tv_login', _external=True) }}" class="tv-url">{{ url_for('tv_login', _external=True) }}</a>
    </div>

    <!-- Instalar via Downloader -->
    <div class="tv-downloader-card">
        <h3>📲 Instalar na TV via Downloader (sem computador)</h3>
        <div class="codes">
            <div class="code-box">
                <div class="label">Codigo Downloader</div>
                <div class="value">2314631</div>
            </div>
            <div class="code-box">
                <div class="label">Ou digite a URL</div>
                <div class="value sm">aftv.news/2314631</div>
            </div>
        </div>
        <p style="color:var(--text-muted); font-size:0.85em; text-align:center; margin-top:16px;">Instale o app <strong>Downloader</strong> na loja da sua TV, abra e digite o codigo.</p>
    </div>

    <div class="info-grid">            <div class="info-item">
            <div class="icon">📱</div>
            <h3>Celular + Tablet</h3>
            <p>Funciona em qualquer Android 5.0 ou superior.</p>
        </div>
        <div class="info-item">
            <div class="icon">📺</div>
            <h3>Android TV</h3>
            <p>TVs Android, Fire TV Stick, boxes. Controle remoto.</p>
        </div>
        <div class="info-item">
            <div class="icon">🌐</div>
            <h3>Web TV</h3>
            <p>Navegador da TV. Samsung, LG, Sony, qualquer marca.</p>
        </div>
        <div class="info-item">
            <div class="icon">🔒</div>
            <h3>Seguro</h3>
            <p>Conexao criptografada. Seus dados protegidos.</p>
        </div>
    </div>

    <div class="instructions">
        <h3>Como instalar</h3>
        <ol>
            <li><strong>Baixe</strong> o arquivo APK acima.</li>
            <li>No celular/TV, va em <strong>Configuracoes &gt; Seguranca</strong> e ative <strong>Fontes desconhecidas</strong>.</li>
            <li><strong>Abra</strong> o arquivo baixado e clique em <strong>Instalar</strong>.</li>
            <li>Pronto! O icone do Troço Play aparecera na tela inicial.</li>
        </ol>
        <p style="color:var(--text-muted); font-size:0.85em; margin-top:16px;">Voce tambem pode transferir o APK via USB ou usar <code style="background:var(--bg-surface); padding:2px 6px; border-radius:4px;">adb install trocoplay.apk</code>.</p>
    </div>
</div>

<div class="pwa-modal" id="pwaModal" onclick="if(event.target===this)closePwaModal()">
    <div class="pwa-modal-box">
        <h3 id="pwaModalTitle">Instalar o app</h3>
        <ol id="pwaModalSteps"></ol>
        <span class="pwa-modal-close" onclick="closePwaModal()">Fechar</span>
    </div>
</div>

<script>
function showPwaModal(title, steps) {
    document.getElementById('pwaModalTitle').textContent = title;
    document.getElementById('pwaModalSteps').innerHTML =
        steps.map(function (s) { return '<li>' + s + '</li>'; }).join('');
    document.getElementById('pwaModal').classList.add('active');
}
function closePwaModal() {
    document.getElementById('pwaModal').classList.remove('active');
}

function installAppPc() {
    var st = window.trocoPwaState ? window.trocoPwaState() : null;
    if (!st) return;
    if (st.isApp) {
        showPwaModal('Você está no app Android', ['Use o app instalado — ele já funciona como app nativo.', 'Para instalar no computador, abra este site no Chrome ou Edge do PC.']);
        return;
    }
    if (st.standalone) {
        showPwaModal('App já instalado', ['O Troço Play já está rodando como app instalado neste dispositivo.']);
        return;
    }
    if (st.iOS) {
        installAppIphone();
        return;
    }
    if (st.canPrompt) {
        // Força o popup nativo do navegador (Chrome/Edge).
        window.trocoPwaInstall().then(function (outcome) {
            var hint = document.getElementById('hintPc');
            if (hint) {
                hint.textContent = outcome === 'accepted'
                    ? 'Instalação iniciada! O ícone vai aparecer na área de trabalho.'
                    : 'Você dispensou o popup — clique no botão de novo quando quiser.';
            }
        });
        return;
    }
    // Sem beforeinstallprompt (Firefox, Safari em Mac, Chrome sem critérios):
    // mostrar o caminho manual que tambem dispara o popup.
    var steps;
    if (st.safariDesktop) {
        steps = [
            'No <strong>Safari</strong> do Mac, abra o menu <strong>Arquivo</strong>.',
            'Clique em <strong>Adicionar à Dock</strong> (ou "Adicionar à Tela de Inicialização" no iOS).',
            'Pronto — o Troço Play abre como app, em janela própria.'
        ];
    } else {
        steps = [
            'No <strong>Chrome</strong> ou <strong>Edge</strong>, procure o ícone de instalação <strong>⊕</strong> na extrema direita da barra de endereços e clique nele.',
            'Ou abra o menu <strong>⋮</strong> / <strong>…</strong> do navegador e escolha <strong>Instalar aplicativo</strong> / <strong>Apps &gt; Instalar este site como aplicativo</strong>.',
            'Confirme no popup que abrir — o app fica com ícone na área de trabalho.'
        ];
    }
    showPwaModal('Instalar no computador', steps);
}

function installAppIphone() {
    var st = window.trocoPwaState ? window.trocoPwaState() : null;
    if (st && st.canPrompt) {
        window.trocoPwaInstall().then(function (outcome) {
            if (outcome !== 'accepted') {
                showPwaModal('Adicionar no iPhone', [
                    'Abre o site no <strong>Safari</strong> (não no Chrome do iPhone).',
                    'Toque no botão <strong>Compartilhar</strong> (□ com seta para cima).',
                    'Role e toque em <strong>"Adicionar à Tela de Inicialização"</strong>.',
                    'Toque em <strong>Adicionar</strong> — o app aparece na sua tela inicial.'
                ]);
            }
        });
        return;
    }
    showPwaModal('Adicionar à Tela de Inicialização (iPhone/iPad)', [
        'Abra este site no <strong>Safari</strong> do iPhone/iPad (no Chrome o popup não existe).',
        'Se aparecer o banner <strong>"Adicionar ao Home Screen"</strong>, toque em <strong>Adicionar</strong>.',
        'Senão: toque no botão <strong>Compartilhar</strong> (quadrado com seta para cima, ao lado da barra de endereços).',
        'Role para baixo e toque em <strong>"Adicionar à Tela de Inicialização"</strong>.',
        'Confirme em <strong>Adicionar</strong> — o ícone do Troço Play surge na tela inicial.',
        'Abra pelo ícone e permita as <strong>notificações</strong> quando o app perguntar.'
    ]);
}

// Deixa os botões no estado assim que o navegador expõe o prompt.
window.addEventListener('troco-installable', function () {
    var btn = document.getElementById('btnInstallPc');
    var hint = document.getElementById('hintPc');
    if (btn) btn.textContent = '🖥️ Instalar app no PC (popup imediato)';
    if (hint) hint.textContent = 'O popup de instalação do Chrome/Edge está pronto — só clicar.';
});
</script>
{% endblock %}