// ============================================
// POST-LOGIN LOADING SCREEN + CONSENT GATE
// ============================================
// O usuário acabou de logar: aqui pré-carregamos o salão (barra de
// progresso visual) e, antes de liberar o "continuar", exigimos o
// aceite da Política de Privacidade e do uso de Cookies caso ainda
// não tenham sido registrados no DB (users.privacy_accepted_at /
// users.cookies_accepted_at).
// ============================================

function PostLoginScreen({ navigate }) {
    const [progress, setProgress] = React.useState(0);
    const [user, setUser]         = React.useState(() => window.MastershotAuth?.getUser?.() || null);
    const [dailyBonus, setDailyBonus] = React.useState(null);   // { awarded } se resgatou

    React.useEffect(() => {
        let frame = 0;
        const start = performance.now();
        const duration = 2200;
        const step = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setProgress(Math.round(eased * 100));
            if (t < 1) frame = requestAnimationFrame(step);
        };
        frame = requestAnimationFrame(step);
        return () => cancelAnimationFrame(frame);
    }, []);

    // Mantém o user em sincronia caso outra parte do app atualize o auth.
    React.useEffect(() => {
        if (!window.MastershotAuth?.onChange) return;
        return window.MastershotAuth.onChange((s) => setUser(s.user || null));
    }, []);

    // Resgata bônus diário de login (+500 coins) — uma vez por dia UTC.
    // RPC valida idempotência (profiles.last_daily_bonus_at), então
    // chamar repetidamente é safe.
    React.useEffect(() => {
        if (!user) return;
        const Lobby = window.MastershotLobby;
        if (!Lobby?.claimDailyLogin) return;
        let cancelled = false;
        Lobby.claimDailyLogin()
            .then((result) => {
                if (cancelled || !result?.ok) return;
                setDailyBonus({ awarded: result.awarded });
                // Refresh do saldo no client
                return window.MastershotAuth?.loadMe?.();
            })
            .catch((err) => console.warn('[postLogin] daily bonus falhou:', err.message));
        return () => { cancelled = true; };
    }, [user?.id]);

    const ready = progress >= 100;
    const needsConsent = !!user && (!user.privacy_accepted_at || !user.cookies_accepted_at);

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <MenuImageBackdrop/>
            <Particles count={18}/>

            <div className="pl-shell" style={{
                position: "relative", zIndex: 5,
                width: "100%", height: "100%",
                display: "flex", flexDirection: "column",
                alignItems: "center", justifyContent: "center",
                padding: 32,
                textAlign: "center",
            }}>
                <div className="pl-logo-wrap" style={{ animation: "title-entry 0.9s cubic-bezier(.22,1,.36,1) both" }}>
                    <MastershotLogo size={142}/>
                </div>

                <div className="pl-progress-wrap" style={{
                    marginTop: 44,
                    width: "min(460px, 82vw)",
                    display: "grid",
                    gap: 14,
                    animation: "title-fade 0.9s ease-out 0.25s both",
                }}>
                    <div style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        fontFamily: "var(--font-display)",
                        color: "var(--gold-300)",
                        fontSize: 13,
                        letterSpacing: "0.22em",
                        textTransform: "uppercase",
                    }}>
                        <span>{window.t("Preparando salão")}</span>
                        <span>{progress}%</span>
                    </div>

                    <div style={{
                        height: 8,
                        borderRadius: 999,
                        background: "rgba(255,255,255,0.12)",
                        border: "1px solid rgba(232,185,73,0.28)",
                        overflow: "hidden",
                        boxShadow: "inset 0 1px 4px rgba(0,0,0,0.55)",
                    }}>
                        <div style={{
                            width: `${progress}%`,
                            height: "100%",
                            borderRadius: 999,
                            background: "linear-gradient(90deg, #b78326, #fce29a, #e8b949)",
                            boxShadow: "0 0 18px rgba(232,185,73,0.45)",
                            transition: "width 0.12s linear",
                        }}/>
                    </div>
                </div>

                {dailyBonus && (
                    <div className="pl-bonus-pill" style={{
                        marginTop: 28,
                        padding: "12px 22px",
                        background: "linear-gradient(135deg, rgba(232,185,73,0.18), rgba(232,185,73,0.04))",
                        border: "1px solid rgba(232,185,73,0.5)",
                        borderRadius: 999,
                        color: "var(--gold-200)",
                        fontFamily: "var(--font-display)",
                        fontSize: 14,
                        letterSpacing: "0.06em",
                        boxShadow: "0 0 22px rgba(232,185,73,0.22)",
                        animation: "title-fade 0.6s ease-out both",
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 8,
                    }}>
                        <span style={{ fontSize: 18 }}>🎁</span>
                        <span>{window.t("Bônus diário:")} <strong style={{ color: "var(--gold-100)" }}>{window.t("+{n} moedas", { n: dailyBonus.awarded.toLocaleString() })}</strong></span>
                    </div>
                )}

                <div style={{
                    marginTop: 42,
                    opacity: ready && !needsConsent ? 1 : 0,
                    transform: ready && !needsConsent ? "translateY(0)" : "translateY(10px)",
                    pointerEvents: ready && !needsConsent ? "auto" : "none",
                    transition: "opacity 0.35s ease, transform 0.35s ease",
                }}>
                    <button className="btn-cta" onClick={() => navigate("menu")} style={{ animation: "pulse-gold 2s ease-in-out infinite" }}>
                        {window.Icon && <span dangerouslySetInnerHTML={{ __html: window.Icon.play(18) }}/>}
                        <span>{window.t("Aperte para continuar")}</span>
                    </button>
                </div>
            </div>

            {ready && needsConsent && (
                <ConsentModal user={user} onAccepted={(u) => setUser(u)}/>
            )}

            <style>{`
                @keyframes title-entry {
                    0% { transform: translateY(24px) scale(0.94); opacity: 0; filter: blur(8px); }
                    100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
                }
                @keyframes title-fade {
                    0% { opacity: 0; transform: translateY(12px); }
                    100% { opacity: 1; transform: translateY(0); }
                }
                @keyframes consent-in {
                    0% { opacity: 0; transform: translateY(16px) scale(0.97); }
                    100% { opacity: 1; transform: translateY(0) scale(1); }
                }
                /* === MOBILE (≤768px): logo escala, larguras ficam fluidas === */
                @media (max-width: 768px) {
                    .pl-shell { min-height: 100svh !important; }
                    .pl-logo-wrap svg {
                        width: clamp(90px, 24vw, 120px) !important;
                        height: clamp(90px, 24vw, 120px) !important;
                    }
                    .pl-logo-wrap span:first-of-type {
                        font-size: clamp(26px, 6.6vw, 42px) !important;
                    }
                    .pl-logo-wrap span:last-of-type {
                        font-size: clamp(10px, 3vw, 20px) !important;
                        letter-spacing: 0.32em !important;
                    }
                    .pl-progress-wrap {
                        width: min(460px, calc(100vw - 48px)) !important;
                        margin-top: 36px !important;
                    }
                    .pl-bonus-pill {
                        font-size: 13px !important;
                        padding: 10px 18px !important;
                    }
                }
                /* === PHONES (≤480px): crest empilha, modais compactos === */
                @media (max-width: 480px) {
                    .pl-logo-wrap > div {
                        flex-direction: column !important;
                        gap: 10px !important;
                    }
                    .pl-logo-wrap > div > div {
                        align-items: center !important;
                    }
                    .pl-logo-wrap svg {
                        width: 84px !important;
                        height: 84px !important;
                    }
                    .pl-logo-wrap span:first-of-type {
                        font-size: clamp(24px, 8vw, 34px) !important;
                    }
                    .pl-logo-wrap span:last-of-type {
                        font-size: clamp(9px, 2.8vw, 12px) !important;
                        padding-left: 0 !important;
                    }
                    .pl-bonus-pill {
                        font-size: 12px !important;
                        padding: 9px 14px !important;
                        margin-top: 20px !important;
                    }
                    .pl-consent-card {
                        width: min(520px, calc(100vw - 24px)) !important;
                        max-height: calc(100svh - 24px) !important;
                        padding: 22px 16px 16px !important;
                    }
                    .pl-terms-card {
                        width: min(680px, calc(100vw - 24px)) !important;
                        height: min(720px, calc(100svh - 24px)) !important;
                    }
                    .pl-terms-head { padding: 18px 16px 12px !important; }
                    .pl-terms-card .terms-body {
                        padding: 16px !important;
                    }
                    .pl-terms-foot { padding: 12px 14px 14px !important; }
                }
            `}</style>
        </div>
    );
}

// ============================================
// MODAL DE ACEITE — bloqueia o avanço até o usuário marcar
// Política de Privacidade e Cookies e clicar em confirmar.
// ============================================
function ConsentModal({ user, onAccepted }) {
    const needsPrivacy = !user?.privacy_accepted_at;
    const needsCookies = !user?.cookies_accepted_at;

    const [privacy, setPrivacy] = React.useState(!needsPrivacy);
    const [cookies, setCookies] = React.useState(!needsCookies);
    const [submitting, setSubmitting] = React.useState(false);
    const [error, setError] = React.useState(null);
    const [openTerms, setOpenTerms] = React.useState(null); // 'privacy' | 'cookies' | null

    const canSubmit = (privacy || !needsPrivacy) && (cookies || !needsCookies) && !submitting;

    const submit = async () => {
        if (!canSubmit) return;
        setSubmitting(true);
        setError(null);
        try {
            const updated = await window.MastershotAuth.acceptTerms({
                privacy: needsPrivacy && privacy,
                cookies: needsCookies && cookies,
            });
            onAccepted && onAccepted(updated);
        } catch (err) {
            setError(err.message || window.t("Não foi possível registrar o aceite. Tente novamente."));
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <>
            <div style={{
                position: "fixed", inset: 0, zIndex: 50,
                background: "rgba(0,0,0,0.72)", backdropFilter: "blur(10px)",
                display: "flex", alignItems: "center", justifyContent: "center",
                padding: 20,
            }}>
                <div className="pl-consent-card" style={{
                    width: "min(520px, 92vw)",
                    maxHeight: "calc(100svh - 40px)",
                    overflowY: "auto",
                    background: "linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)",
                    border: "1px solid var(--gold-800)",
                    borderRadius: "var(--r-lg)",
                    boxShadow: "var(--sh-xl)",
                    padding: "28px 28px 22px",
                    animation: "consent-in 0.45s cubic-bezier(.22,1,.36,1) both",
                }}>
                    <div style={{ textAlign: "center", marginBottom: 18 }}>
                        <div style={{
                            fontSize: 11, color: "var(--gold-500)",
                            letterSpacing: "0.28em", textTransform: "uppercase",
                            fontWeight: 600,
                        }}>{window.t("Antes de entrar")}</div>
                        <div style={{
                            fontFamily: "var(--font-display)",
                            fontSize: 22, color: "var(--gold-300)",
                            letterSpacing: "0.06em", marginTop: 6,
                        }}>{window.t("Confirme seus consentimentos")}</div>
                    </div>

                    <p style={{
                        fontSize: 13, lineHeight: 1.55,
                        color: "var(--ink-200)", marginBottom: 18, textAlign: "center",
                    }}>
                        {window.t("Para usar o Mastershot precisamos do seu aceite. Você só precisa confirmar uma vez — guardamos a data e hora da sua aprovação na sua conta.")}
                    </p>

                    <div style={{ display: "grid", gap: 12 }}>
                        <ConsentRow
                            checked={privacy}
                            disabled={!needsPrivacy}
                            onChange={setPrivacy}
                            title={window.t("Política de Privacidade")}
                            body={<>{window.t("Li e concordo com a")} <a href="#privacy" onClick={(e) => { e.preventDefault(); setOpenTerms('privacy'); }} style={consentLink}>{window.t("Política de Privacidade")}</a> {window.t("e com o tratamento dos meus dados pessoais para uso do jogo.")}</>}
                            alreadyAccepted={!needsPrivacy}
                            acceptedAt={user?.privacy_accepted_at}
                        />
                        <ConsentRow
                            checked={cookies}
                            disabled={!needsCookies}
                            onChange={setCookies}
                            title={window.t("Cookies e armazenamento local")}
                            body={<>{window.t("Aceito o uso de cookies e armazenamento local essenciais para login, preferências e funcionamento das partidas. Detalhes na")} <a href="#cookies" onClick={(e) => { e.preventDefault(); setOpenTerms('cookies'); }} style={consentLink}>{window.t("Política de Cookies")}</a>.</>}
                            alreadyAccepted={!needsCookies}
                            acceptedAt={user?.cookies_accepted_at}
                        />
                    </div>

                    {error && (
                        <div style={{
                            marginTop: 16, padding: "10px 12px",
                            background: "rgba(255, 82, 82, 0.10)",
                            border: "1px solid rgba(255, 82, 82, 0.4)",
                            borderRadius: "var(--r-sm)",
                            color: "#ff8d8d", fontSize: 12,
                        }}>{error}</div>
                    )}

                    <button
                        className="btn-cta"
                        onClick={submit}
                        disabled={!canSubmit}
                        style={{
                            width: "100%", marginTop: 20,
                            opacity: canSubmit ? 1 : 0.45,
                            cursor: canSubmit ? "pointer" : "not-allowed",
                        }}>
                        {submitting ? window.t("Registrando…") : window.t("Aceitar e continuar")}
                    </button>

                    <div style={{
                        marginTop: 12, fontSize: 11, textAlign: "center",
                        color: "var(--ink-400)", letterSpacing: "0.04em",
                    }}>
                        {window.t("Se não concordar,")} <button onClick={signOut} style={consentLink}>{window.t("sair da conta")}</button>.
                    </div>
                </div>
            </div>

            {openTerms === 'privacy' && (
                <TermsModal
                    eyebrow={window.t("Política")}
                    title={window.t("Política de Privacidade")}
                    body={<PrivacyPolicyBody/>}
                    onOK={() => { setPrivacy(true); setOpenTerms(null); }}
                    onCancel={() => setOpenTerms(null)}
                />
            )}
            {openTerms === 'cookies' && (
                <TermsModal
                    eyebrow={window.t("Política")}
                    title={window.t("Política de Cookies")}
                    body={<CookiePolicyBody/>}
                    onOK={() => { setCookies(true); setOpenTerms(null); }}
                    onCancel={() => setOpenTerms(null)}
                />
            )}
        </>
    );
}

function ConsentRow({ checked, disabled, onChange, title, body, alreadyAccepted, acceptedAt }) {
    return (
        <label style={{
            display: "flex", alignItems: "flex-start", gap: 12,
            padding: "12px 14px",
            background: "rgba(255,255,255,0.03)",
            border: "1px solid var(--gold-900, rgba(232,185,73,0.25))",
            borderRadius: "var(--r-md)",
            cursor: disabled ? "default" : "pointer",
        }}>
            <input
                type="checkbox"
                checked={checked}
                disabled={disabled}
                onChange={(e) => onChange(e.target.checked)}
                style={{
                    width: 18, height: 18, marginTop: 2,
                    accentColor: "var(--gold-500)",
                    cursor: disabled ? "default" : "pointer",
                    flexShrink: 0,
                }}/>
            <div style={{ flex: 1 }}>
                <div style={{
                    fontFamily: "var(--font-display)",
                    fontSize: 14, color: "var(--gold-300)",
                    letterSpacing: "0.04em", fontWeight: 600,
                }}>{title}</div>
                <div style={{
                    fontSize: 12, color: "var(--ink-200)",
                    lineHeight: 1.5, marginTop: 4,
                }}>{body}</div>
                {alreadyAccepted && acceptedAt && (
                    <div style={{
                        fontSize: 10, color: "var(--ink-400)",
                        marginTop: 6, letterSpacing: "0.06em",
                    }}>{window.t("Aceito em {date}", { date: formatAcceptedAt(acceptedAt) })}</div>
                )}
            </div>
        </label>
    );
}

// ============================================
// TERMS MODAL — exibe o texto completo de uma política com scroll
// e botões OK / Cancelar. OK marca o checkbox no ConsentModal pai.
// ============================================
function TermsModal({ eyebrow, title, body, onOK, onCancel }) {
    // Fecha com Esc (acessibilidade básica)
    React.useEffect(() => {
        const h = (e) => { if (e.key === 'Escape') onCancel(); };
        window.addEventListener('keydown', h);
        return () => window.removeEventListener('keydown', h);
    }, [onCancel]);

    return (
        <div
            onClick={onCancel}
            style={{
                position: "fixed", inset: 0, zIndex: 60,
                background: "rgba(0,0,0,0.78)", backdropFilter: "blur(12px)",
                display: "flex", alignItems: "center", justifyContent: "center",
                padding: 20,
            }}>
            <div
                className="pl-terms-card"
                onClick={(e) => e.stopPropagation()}
                style={{
                    width: "min(680px, 94vw)",
                    height: "min(720px, calc(100svh - 40px))",
                    display: "flex", flexDirection: "column",
                    background: "linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)",
                    border: "1px solid var(--gold-800)",
                    borderRadius: "var(--r-lg)",
                    boxShadow: "var(--sh-xl)",
                    animation: "consent-in 0.45s cubic-bezier(.22,1,.36,1) both",
                    overflow: "hidden",
                }}>
                <div className="pl-terms-head" style={{
                    padding: "22px 28px 16px",
                    borderBottom: "1px solid rgba(232,185,73,0.18)",
                    textAlign: "center",
                }}>
                    <div style={{
                        fontSize: 11, color: "var(--gold-500)",
                        letterSpacing: "0.28em", textTransform: "uppercase",
                        fontWeight: 600,
                    }}>{eyebrow}</div>
                    <div style={{
                        fontFamily: "var(--font-display)",
                        fontSize: 22, color: "var(--gold-300)",
                        letterSpacing: "0.06em", marginTop: 6,
                    }}>{title}</div>
                </div>

                <div className="terms-body" style={{
                    flex: 1, overflowY: "auto",
                    padding: "20px 28px",
                    color: "var(--ink-200)",
                    fontSize: 13, lineHeight: 1.65,
                }}>
                    {body}
                </div>

                <div className="pl-terms-foot" style={{
                    padding: "14px 22px 18px",
                    borderTop: "1px solid rgba(232,185,73,0.18)",
                    display: "flex", gap: 10, justifyContent: "flex-end",
                    flexWrap: "wrap",
                }}>
                    <button
                        onClick={onCancel}
                        style={{
                            padding: "10px 22px",
                            background: "transparent",
                            color: "var(--ink-200)",
                            border: "1px solid var(--ink-600, rgba(255,255,255,0.18))",
                            borderRadius: "var(--r-sm)",
                            fontSize: 12, fontWeight: 600,
                            letterSpacing: "0.18em", textTransform: "uppercase",
                            cursor: "pointer",
                        }}>
                        {window.t("Cancelar")}
                    </button>
                    <button
                        className="btn-cta"
                        onClick={onOK}
                        style={{ padding: "10px 28px", minWidth: 140 }}>
                        OK
                    </button>
                </div>
            </div>

            <style>{`
                .terms-body h3 {
                    font-family: var(--font-display);
                    color: var(--gold-300);
                    font-size: 14px;
                    letter-spacing: 0.08em;
                    text-transform: uppercase;
                    font-weight: 600;
                    margin: 20px 0 8px;
                }
                .terms-body h3:first-child { margin-top: 0; }
                .terms-body p { margin: 0 0 10px; }
                .terms-body ul {
                    margin: 6px 0 12px;
                    padding-left: 20px;
                }
                .terms-body ul li { margin-bottom: 4px; }
                .terms-body strong { color: var(--gold-200, #fce29a); }
                .terms-body em { color: var(--ink-300); font-style: normal; font-size: 11px; letter-spacing: 0.06em; }
                .terms-body a { color: var(--gold-400); }
            `}</style>
        </div>
    );
}

// ============================================
// CONTEÚDO DAS POLÍTICAS — texto compatível com a LGPD
// (Lei nº 13.709/2018). Última atualização em 2026-05-15.
// ============================================
function PrivacyPolicyBody() {
    return (<>
        <p>
            Esta Política de Privacidade descreve como o <strong>Mastershot</strong>
            {' '}(doravante "Plataforma", "nós") coleta, utiliza, armazena e protege os
            dados pessoais dos seus usuários, em conformidade com a <strong>Lei nº 13.709/2018
            — Lei Geral de Proteção de Dados Pessoais (LGPD)</strong> e demais normas aplicáveis.
        </p>

        <h3>{window.t("1. Controlador dos dados")}</h3>
        <p>
            O Mastershot é o controlador dos dados pessoais tratados nesta Plataforma,
            sendo responsável pelas decisões sobre o tratamento. Para questões
            relacionadas à proteção de dados, contate <strong>privacidade@mastershot.app</strong>.
        </p>

        <h3>{window.t("2. Dados pessoais que coletamos")}</h3>
        <p>{window.t("Coletamos apenas o necessário para a prestação do serviço:")}</p>
        <ul>
            <li><strong>Cadastro:</strong> nick, e-mail, senha (armazenada exclusivamente sob hash criptográfico bcrypt — nunca em texto puro) e país.</li>
            <li><strong>Uso do jogo:</strong> estatísticas de partidas (vitórias, derrotas, ELO, ranking), itens adquiridos, transações de moeda virtual e progresso de patente.</li>
            <li><strong>Dados técnicos:</strong> endereço IP, agente do navegador (user-agent), data/hora de acesso e tokens de sessão (opacos, revogáveis a qualquer momento).</li>
            <li><strong>Consentimentos:</strong> registramos a data e hora dos aceites desta Política e da Política de Cookies, conforme exigido pelo art. 8º, §6º da LGPD.</li>
        </ul>

        <h3>{window.t("3. Finalidades do tratamento")}</h3>
        <ul>
            <li>{window.t("Autenticação, manutenção e segurança da sua conta.")}</li>
            <li>{window.t("Funcionamento das partidas online, ranking e progresso do jogador.")}</li>
            <li>{window.t("Prevenção a fraudes, abusos e detecção de comportamentos que violem os Termos de Uso.")}</li>
            <li>{window.t("Cumprimento de obrigações legais e regulatórias quando aplicável.")}</li>
            <li>{window.t("Comunicação operacional sobre sua conta (alterações de senha, suspensão, atualizações de política).")}</li>
        </ul>

        <h3>{window.t("4. Bases legais (Art. 7º da LGPD)")}</h3>
        <ul>
            <li><strong>Execução de contrato</strong> (inciso V) — para criar, manter e operar sua conta.</li>
            <li><strong>Consentimento</strong> (inciso I) — para aceite das políticas e tratamentos opcionais.</li>
            <li><strong>Legítimo interesse</strong> (inciso IX) — para segurança da plataforma, prevenção a fraudes e melhoria do serviço, sempre respeitando seus direitos e expectativas.</li>
            <li><strong>Cumprimento de obrigação legal</strong> (inciso II) — quando exigido por lei ou autoridade competente.</li>
        </ul>

        <h3>{window.t("5. Compartilhamento de dados")}</h3>
        <p>
            {window.t("Não vendemos, alugamos nem cedemos seus dados pessoais para fins de marketing. Atuamos com as seguintes operadoras estritamente para viabilizar o serviço:")}
        </p>
        <ul>
            <li><strong>Supabase Inc.</strong> — hospedagem do banco de dados e infraestrutura de autenticação. O contrato firmado prevê obrigações compatíveis com a LGPD.</li>
            <li><strong>Provedores de hospedagem (Vercel)</strong> — entrega da aplicação web.</li>
        </ul>
        <p>
            {window.t("Eventual transferência internacional de dados ocorre nos termos do art. 33 da LGPD, com garantias equivalentes às previstas pela lei brasileira.")}
        </p>

        <h3>{window.t("6. Retenção e eliminação")}</h3>
        <p>
            {window.t("Seus dados pessoais são mantidos enquanto sua conta estiver ativa. Após o encerramento, podemos reter parte das informações pelo prazo necessário para cumprir obrigações legais, exercer regularmente direitos em processos ou prevenir fraudes, conforme art. 16 da LGPD. Registros financeiros (carteira virtual, transações) podem ser retidos pelo prazo prescricional aplicável.")}
        </p>

        <h3>{window.t("7. Seus direitos como titular (Art. 18 da LGPD)")}</h3>
        <p>{window.t("A qualquer momento você pode solicitar:")}</p>
        <ul>
            <li>{window.t("Confirmação da existência de tratamento;")}</li>
            <li>{window.t("Acesso aos seus dados;")}</li>
            <li>{window.t("Correção de dados incompletos, inexatos ou desatualizados;")}</li>
            <li>{window.t("Anonimização, bloqueio ou eliminação de dados desnecessários ou excessivos;")}</li>
            <li>{window.t("Portabilidade dos dados para outro fornecedor de serviço, observados os segredos comercial e industrial;")}</li>
            <li>{window.t("Eliminação dos dados tratados com base em consentimento, ressalvadas as hipóteses do art. 16;")}</li>
            <li>{window.t("Informação sobre entidades públicas e privadas com as quais houve compartilhamento;")}</li>
            <li>{window.t("Informação sobre a possibilidade de não fornecer consentimento e suas consequências;")}</li>
            <li>{window.t("Revogação do consentimento, a qualquer tempo, mediante manifestação expressa.")}</li>
        </ul>
        <p>
            Para exercer qualquer destes direitos, envie e-mail para
            {' '}<strong>privacidade@mastershot.app</strong>. Responderemos no prazo razoável previsto em lei.
        </p>

        <h3>{window.t("8. Cookies e armazenamento local")}</h3>
        <p>
            {window.t("Utilizamos cookies estritamente necessários e armazenamento local (localStorage) para manter sua sessão e suas preferências do jogo. Detalhes na")} <strong>{window.t("Política de Cookies")}</strong>.
        </p>

        <h3>{window.t("9. Segurança da informação")}</h3>
        <p>
            {window.t("Adotamos medidas técnicas e administrativas adequadas para proteger seus dados contra acessos não autorizados, perda, alteração ou destruição, incluindo: criptografia em trânsito (HTTPS/TLS), hashing de senhas com bcrypt, tokens de sessão revogáveis, segregação de funções e auditoria de tentativas de acesso. Em caso de incidente de segurança que possa acarretar risco ou dano relevante, comunicaremos a Autoridade Nacional de Proteção de Dados (ANPD) e os titulares afetados conforme o art. 48 da LGPD.")}
        </p>

        <h3>{window.t("10. Crianças e adolescentes")}</h3>
        <p>
            {window.t("O Mastershot é destinado a maiores de 13 anos. Adolescentes só podem utilizar a Plataforma com consentimento específico e em destaque dado por ao menos um dos pais ou responsável legal, nos termos do art. 14 da LGPD. Não direcionamos publicidade a crianças. Caso identifiquemos cadastro indevido, a conta poderá ser suspensa e os dados eliminados.")}
        </p>

        <h3>{window.t("11. Alterações nesta Política")}</h3>
        <p>
            {window.t("Esta Política pode ser atualizada para refletir mudanças legais, técnicas ou de negócio. Alterações materiais serão comunicadas dentro do próprio aplicativo e poderão exigir novo aceite expresso para continuar utilizando o serviço.")}
        </p>

        <h3>{window.t("12. Encarregado pelo tratamento de dados (DPO)")}</h3>
        <p>
            Encarregado: <strong>privacidade@mastershot.app</strong>. Você também pode
            apresentar reclamação à <strong>Autoridade Nacional de Proteção de Dados (ANPD)</strong>
            {' '}por meio dos canais oficiais.
        </p>

        <p><em>{window.t("Última atualização: 15 de maio de 2026.")}</em></p>
    </>);
}

function CookiePolicyBody() {
    return (<>
        <p>
            Esta Política descreve o uso de cookies e tecnologias similares pelo
            <strong> Mastershot</strong>. Ela complementa a Política de Privacidade e
            está alinhada à <strong>Lei nº 13.709/2018 (LGPD)</strong>.
        </p>

        <h3>{window.t("1. O que são cookies e tecnologias similares")}</h3>
        <p>
            Cookies são pequenos arquivos que o navegador grava no seu dispositivo
            para permitir que aplicações lembrem informações entre visitas. O
            "<strong>localStorage</strong>" e o "<strong>sessionStorage</strong>" são
            áreas locais do navegador com função parecida. No Mastershot, esses
            recursos são usados exclusivamente para o funcionamento do jogo — nunca
            para rastrear sua navegação fora da nossa Plataforma.
        </p>

        <h3>{window.t("2. Categorias utilizadas")}</h3>

        <p><strong>{window.t("2.1 Estritamente necessários")}</strong> {window.t("(não podem ser desativados sem prejudicar o funcionamento):")}</p>
        <ul>
            <li><strong>{window.t("Token de sessão")}</strong>: {window.t("identifica sua conta para manter o login.")}</li>
            <li><strong>{window.t("Identificadores de partida/sala")}</strong>: {window.t("vinculam sua presença em jogos online ativos.")}</li>
            <li><strong>{window.t("Proteção anti-CSRF")}</strong>: {window.t("protege ações sensíveis (login, compras virtuais) contra requisições maliciosas.")}</li>
            <li><strong>{window.t("Registro de consentimento")}</strong>: {window.t("armazena a versão das políticas aceitas para fins de auditoria.")}</li>
        </ul>

        <p><strong>{window.t("2.2 Preferências do jogo")}</strong> {window.t("(melhoram sua experiência):")}</p>
        <ul>
            <li>{window.t("Tema visual, qualidade gráfica, volume, mira/aim assist e controles personalizados.")}</li>
            <li>{window.t("Última tela visitada (para retorno suave após reload).")}</li>
            <li>{window.t("Patente/cenário preferido exibido no menu principal.")}</li>
        </ul>

        <p><strong>{window.t("2.3 Análise interna")}</strong> {window.t("(apenas com seu consentimento, quando aplicável):")}</p>
        <ul>
            <li>{window.t("Métricas agregadas e anonimizadas de uso (telas mais visitadas, duração média de sessão) para diagnóstico de problemas e melhoria do produto.")}</li>
        </ul>

        <p><strong>{window.t("2.4 Cookies de terceiros")}</strong></p>
        <p>
            {window.t("Não utilizamos cookies de rastreamento publicitário, redes sociais nem ad networks. Não compartilhamos identificadores com terceiros para fins de marketing.")}
        </p>

        <h3>{window.t("3. Prazo de vida")}</h3>
        <ul>
            <li><strong>{window.t("Sessão")}</strong>: {window.t("expira ao fazer logout ou após 30 dias de inatividade, o que ocorrer primeiro.")}</li>
            <li><strong>{window.t("Preferências")}</strong>: {window.t("persistentes até você apagar manualmente o armazenamento do navegador.")}</li>
            <li><strong>{window.t("Análise (quando ativada)")}</strong>: {window.t("retidos por até 12 meses.")}</li>
            <li><strong>{window.t("Registro de consentimento")}</strong>: {window.t("mantido enquanto a conta existir, conforme exigência legal.")}</li>
        </ul>

        <h3>{window.t("4. Como gerenciar")}</h3>
        <p>
            {window.t("Você pode bloquear ou apagar cookies a qualquer momento nas configurações do navegador. Note que")} <strong>{window.t("desativar os cookies essenciais impedirá o uso do Mastershot")}</strong>, {window.t("pois não conseguiremos manter sua sessão autenticada nem o estado das partidas online.")}
        </p>

        <h3>{window.t("5. Consequências da recusa")}</h3>
        <ul>
            <li><strong>{window.t("Cookies essenciais")}</strong>: {window.t("sem eles, login, compras virtuais e partidas online ficam indisponíveis.")}</li>
            <li><strong>{window.t("Cookies de preferência")}</strong>: {window.t("o jogo funciona, mas você perderá ajustes personalizados a cada visita.")}</li>
            <li><strong>{window.t("Cookies de análise")}</strong>: {window.t("nenhum impacto — o jogo segue operando normalmente.")}</li>
        </ul>

        <h3>{window.t("6. Base legal")}</h3>
        <p>
            {window.t("O uso de cookies estritamente necessários é justificado pelo legítimo interesse e pela execução de contrato (art. 7º, V e IX, da LGPD). Cookies de análise e funcionalidades adicionais dependem do seu consentimento expresso (art. 7º, I).")}
        </p>

        <h3>{window.t("7. Atualizações")}</h3>
        <p>
            {window.t("Mudanças relevantes nesta Política serão comunicadas no próprio app e podem exigir novo aceite. Recomendamos revisão periódica deste documento.")}
        </p>

        <h3>{window.t("8. Contato")}</h3>
        <p>
            Dúvidas sobre cookies ou sobre o tratamento dos seus dados:
            {' '}<strong>privacidade@mastershot.app</strong>.
        </p>

        <p><em>{window.t("Última atualização: 15 de maio de 2026.")}</em></p>
    </>);
}

const consentLink = {
    color: "var(--gold-400)",
    background: "none", border: "none", padding: 0,
    textDecoration: "underline", cursor: "pointer",
    font: "inherit",
};

function formatAcceptedAt(iso) {
    try {
        const d = new Date(iso);
        return d.toLocaleDateString("pt-BR") + " " + d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
    } catch { return ""; }
}

function signOut() {
    try { window.MastershotAuth?.logout?.(); } catch {}
    try { localStorage.setItem("mastershot.screen", "login"); } catch {}
    window.location.reload();
}

window.PostLoginScreen = PostLoginScreen;