{% extends "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;
    }
    .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-main-card { padding: 32px 20px; }
        .download-main-card .compat { gap: 12px; }
        .instructions { padding: 24px 20px; }
    }
</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>

    <!-- 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">4016820</div>
            </div>
            <div class="code-box">
                <div class="label">Ou digite a URL</div>
                <div class="value sm">aftv.news/4016820</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>
{% endblock %}