{% extends 'base.html' %}
{% load static %}

{% block title %}Política de Cookies - Allure Club{% endblock %}

{% block extra_css %}
<style>
    .terms-container {
        padding: 2rem 0;
        min-height: calc(100vh - 160px);
    }
    
    .terms-header {
        background: white;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-light);
        padding: 3rem 2rem;
        text-align: center;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }
    
    .terms-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
    }
    
    .terms-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1rem;
    }
    
    .terms-subtitle {
        color: var(--text-light);
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }
    
    .terms-content {
        background: white;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-light);
        padding: 3rem;
        margin-bottom: 2rem;
    }
    
    .terms-section {
        margin-bottom: 3rem;
    }
    
    .terms-section:last-child {
        margin-bottom: 0;
    }
    
    .section-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .section-subtitle {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 1rem;
        margin-top: 2rem;
    }
    
    .terms-text {
        color: var(--text-dark);
        line-height: 1.8;
        margin-bottom: 1.5rem;
        text-align: justify;
    }
    
    .terms-list {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0;
    }
    
    .terms-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .terms-list li:last-child {
        border-bottom: none;
    }
    
    .list-number {
        background: var(--primary-color);
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 0.1rem;
    }
    
    .list-bullet {
        color: var(--primary-color);
        font-weight: 700;
        margin-right: 0.5rem;
    }
    
    .highlight-box {
        background: var(--light-color);
        border-left: 4px solid var(--primary-color);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        margin: 1.5rem 0;
    }
    
    .highlight-title {
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .highlight-text {
        color: var(--text-light);
        line-height: 1.6;
        margin-bottom: 0;
    }
    
    .contact-info {
        background: var(--primary-gradient);
        border-radius: var(--border-radius);
        padding: 2rem;
        color: white;
        text-align: center;
        margin-top: 2rem;
    }
    
    .contact-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }
    
    .contact-text {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        opacity: 0.9;
    }
    
    .contact-phone {
        background: white;
        color: var(--primary-color);
        padding: 0.75rem 1.5rem;
        border-radius: var(--border-radius);
        text-decoration: none;
        font-weight: 600;
        display: inline-block;
        transition: all 0.3s ease;
    }
    
    .contact-phone:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-medium);
        color: var(--primary-color);
    }
    
    .table-of-contents {
        background: var(--light-color);
        border-radius: var(--border-radius);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .toc-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .toc-list li {
        margin-bottom: 0.75rem;
    }
    
    .toc-link {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .toc-link:hover {
        color: var(--dark-color);
        text-decoration: underline;
    }
    
    .last-updated {
        background: white;
        border-radius: var(--border-radius);
        padding: 1.5rem;
        text-align: center;
        box-shadow: var(--shadow-light);
        margin-bottom: 2rem;
    }
    
    .update-info {
        color: var(--text-light);
        font-size: 0.9rem;
    }
    
    .update-date {
        color: var(--primary-color);
        font-weight: 700;
    }
    
    .cookie-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
        background: white;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-light);
    }
    
    .cookie-table th,
    .cookie-table td {
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }
    
    .cookie-table th {
        background: var(--light-color);
        font-weight: 700;
        color: var(--text-dark);
    }
    
    .cookie-table td {
        color: var(--text-light);
    }
    
    .cookie-type {
        font-weight: 600;
        color: var(--primary-color);
    }
    
    .cookie-essential {
        color: #28a745;
    }
    
    .cookie-analytics {
        color: #17a2b8;
    }
    
    .cookie-marketing {
        color: #ffc107;
    }
    
    .cookie-preferences {
        color: #6f42c1;
    }
    
    .cookie-controls {
        background: var(--light-color);
        border-radius: var(--border-radius);
        padding: 2rem;
        margin: 2rem 0;
    }
    
    .cookie-controls h3 {
        color: var(--text-dark);
        margin-bottom: 1rem;
    }
    
    .cookie-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: white;
        border-radius: var(--border-radius);
        margin-bottom: 1rem;
        box-shadow: var(--shadow-light);
    }
    
    .cookie-toggle-info h4 {
        margin: 0;
        color: var(--text-dark);
        font-size: 1.1rem;
    }
    
    .cookie-toggle-info p {
        margin: 0.5rem 0 0 0;
        color: var(--text-light);
        font-size: 0.9rem;
    }
    
    .toggle-switch {
        position: relative;
        width: 60px;
        height: 30px;
        background: #ccc;
        border-radius: 15px;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    .toggle-switch.active {
        background: var(--primary-color);
    }
    
    .toggle-switch::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s;
    }
    
    .toggle-switch.active::after {
        transform: translateX(30px);
    }
    
    @media (max-width: 768px) {
        .terms-title {
            font-size: 2rem;
        }
        
        .terms-content {
            padding: 2rem;
        }
        
        .section-title {
            font-size: 1.5rem;
        }
        
        .terms-list li {
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .list-number {
            align-self: flex-start;
        }
        
        .cookie-table {
            font-size: 0.9rem;
        }
        
        .cookie-table th,
        .cookie-table td {
            padding: 0.75rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="terms-container">
    <div class="container">
        <!-- Header -->
        <div class="terms-header">
            <h1 class="terms-title">Política de Cookies</h1>
            <p class="terms-subtitle">
                Entenda como utilizamos cookies e tecnologias similares para melhorar sua experiência na plataforma Allure Club
            </p>
        </div>
        
        <!-- Last Updated -->
        <div class="last-updated">
            <p class="update-info">
                Última atualização: <span class="update-date">15 de Janeiro de 2024</span>
            </p>
        </div>
        
        <!-- Table of Contents -->
        <div class="table-of-contents">
            <h2 class="toc-title">
                <i class="fas fa-list"></i>
                Índice
            </h2>
            <ul class="toc-list">
                <li><a href="#introducao" class="toc-link"><i class="fas fa-info-circle"></i>1. O que são Cookies</a></li>
                <li><a href="#tipos-cookies" class="toc-link"><i class="fas fa-cookie-bite"></i>2. Tipos de Cookies que Utilizamos</a></li>
                <li><a href="#finalidade" class="toc-link"><i class="fas fa-bullseye"></i>3. Finalidade dos Cookies</a></li>
                <li><a href="#duracao" class="toc-link"><i class="fas fa-clock"></i>4. Duração dos Cookies</a></li>
                <li><a href="#terceiros" class="toc-link"><i class="fas fa-external-link-alt"></i>5. Cookies de Terceiros</a></li>
                <li><a href="#controle" class="toc-link"><i class="fas fa-sliders-h"></i>6. Como Controlar os Cookies</a></li>
                <li><a href="#atualizacoes" class="toc-link"><i class="fas fa-sync"></i>7. Atualizações desta Política</a></li>
                <li><a href="#contato" class="toc-link"><i class="fas fa-envelope"></i>8. Contato</a></li>
            </ul>
        </div>
        
        <!-- Terms Content -->
        <div class="terms-content">
            <!-- 1. O que são Cookies -->
            <div class="terms-section" id="introducao">
                <h2 class="section-title">
                    <i class="fas fa-info-circle"></i>
                    1. O que são Cookies
                </h2>
                <p class="terms-text">
                    Cookies são pequenos arquivos de texto que são armazenados no seu dispositivo (computador, tablet ou smartphone) 
                    quando você visita nosso site. Eles nos ajudam a fornecer uma experiência melhor e mais personalizada, 
                    além de nos permitir entender como você interage com nossa plataforma.
                </p>
                
                <div class="highlight-box">
                    <h4 class="highlight-title">
                        <i class="fas fa-lightbulb"></i>
                        Por que utilizamos cookies?
                    </h4>
                    <p class="highlight-text">
                        Utilizamos cookies para melhorar a funcionalidade do site, analisar o tráfego, personalizar conteúdo 
                        e anúncios, e fornecer recursos de redes sociais. Isso nos ajuda a oferecer uma experiência mais 
                        relevante e útil para você.
                    </p>
                </div>
            </div>
            
            <!-- 2. Tipos de Cookies que Utilizamos -->
            <div class="terms-section" id="tipos-cookies">
                <h2 class="section-title">
                    <i class="fas fa-cookie-bite"></i>
                    2. Tipos de Cookies que Utilizamos
                </h2>
                
                <h3 class="section-subtitle">2.1. Cookies Essenciais</h3>
                <p class="terms-text">
                    Estes cookies são necessários para o funcionamento básico do site e não podem ser desativados. 
                    Eles incluem cookies de sessão, autenticação e segurança.
                </p>
                
                <h3 class="section-subtitle">2.2. Cookies de Desempenho e Análise</h3>
                <p class="terms-text">
                    Estes cookies nos ajudam a entender como os visitantes interagem com nosso site, fornecendo 
                    informações sobre as páginas visitadas, tempo de permanência e possíveis erros encontrados.
                </p>
                
                <h3 class="section-subtitle">2.3. Cookies de Funcionalidade</h3>
                <p class="terms-text">
                    Estes cookies permitem que o site lembre das escolhas que você faz (como seu nome de usuário, 
                    idioma ou região) e forneça recursos aprimorados e mais personalizados.
                </p>
                
                <h3 class="section-subtitle">2.4. Cookies de Marketing</h3>
                <p class="terms-text">
                    Estes cookies são usados para rastrear visitantes em sites. A intenção é exibir anúncios que 
                    sejam relevantes e envolventes para o usuário individual.
                </p>
                
                <table class="cookie-table">
                    <thead>
                        <tr>
                            <th>Tipo de Cookie</th>
                            <th>Finalidade</th>
                            <th>Duração</th>
                            <th>Obrigatório</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="cookie-type cookie-essential">Essenciais</span></td>
                            <td>Funcionamento básico do site, autenticação, segurança</td>
                            <td>Sessão</td>
                            <td>Sim</td>
                        </tr>
                        <tr>
                            <td><span class="cookie-type cookie-analytics">Análise</span></td>
                            <td>Coleta de dados sobre uso do site para melhorias</td>
                            <td>2 anos</td>
                            <td>Não</td>
                        </tr>
                        <tr>
                            <td><span class="cookie-type cookie-preferences">Funcionalidade</span></td>
                            <td>Lembrar preferências e configurações do usuário</td>
                            <td>1 ano</td>
                            <td>Não</td>
                        </tr>
                        <tr>
                            <td><span class="cookie-type cookie-marketing">Marketing</span></td>
                            <td>Personalização de anúncios e conteúdo</td>
                            <td>1 ano</td>
                            <td>Não</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 3. Finalidade dos Cookies -->
            <div class="terms-section" id="finalidade">
                <h2 class="section-title">
                    <i class="fas fa-bullseye"></i>
                    3. Finalidade dos Cookies
                </h2>
                
                <p class="terms-text">
                    Utilizamos cookies para diversas finalidades, sempre com o objetivo de melhorar sua experiência 
                    em nossa plataforma:
                </p>
                
                <ul class="terms-list">
                    <li>
                        <div class="list-number">1</div>
                        <div><strong>Autenticação e Segurança:</strong> Manter você logado e proteger sua conta contra acesso não autorizado</div>
                    </li>
                    <li>
                        <div class="list-number">2</div>
                        <div><strong>Personalização:</strong> Lembrar suas preferências e configurações para uma experiência personalizada</div>
                    </li>
                    <li>
                        <div class="list-number">3</div>
                        <div><strong>Análise e Melhorias:</strong> Entender como você usa nosso site para melhorar nossos serviços</div>
                    </li>
                    <li>
                        <div class="list-number">4</div>
                        <div><strong>Funcionalidades:</strong> Habilitar recursos como carrinho de compras, favoritos e histórico</div>
                    </li>
                    <li>
                        <div class="list-number">5</div>
                        <div><strong>Marketing:</strong> Mostrar anúncios relevantes e medir a eficácia de nossas campanhas</div>
                    </li>
                </ul>
            </div>
            
            <!-- 4. Duração dos Cookies -->
            <div class="terms-section" id="duracao">
                <h2 class="section-title">
                    <i class="fas fa-clock"></i>
                    4. Duração dos Cookies
                </h2>
                
                <h3 class="section-subtitle">4.1. Cookies de Sessão</h3>
                <p class="terms-text">
                    São temporários e são excluídos quando você fecha seu navegador. São usados para manter 
                    informações durante sua visita ao site.
                </p>
                
                <h3 class="section-subtitle">4.2. Cookies Persistentes</h3>
                <p class="terms-text">
                    Permanecem no seu dispositivo por um período determinado ou até que você os exclua. 
                    São usados para lembrar suas preferências entre visitas.
                </p>
                
                <div class="highlight-box">
                    <h4 class="highlight-title">
                        <i class="fas fa-calendar"></i>
                        Períodos de Armazenamento
                    </h4>
                    <p class="highlight-text">
                        • Cookies de autenticação: 30 dias<br>
                        • Cookies de preferências: 1 ano<br>
                        • Cookies de análise: 2 anos<br>
                        • Cookies de marketing: 1 ano
                    </p>
                </div>
            </div>
            
            <!-- 5. Cookies de Terceiros -->
            <div class="terms-section" id="terceiros">
                <h2 class="section-title">
                    <i class="fas fa-external-link-alt"></i>
                    5. Cookies de Terceiros
                </h2>
                
                <p class="terms-text">
                    Nossa plataforma pode conter cookies de terceiros para fornecer funcionalidades adicionais:
                </p>
                
                <ul class="terms-list">
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Google Analytics:</strong> Para análise de tráfego e comportamento dos usuários</div>
                    </li>
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Redes Sociais:</strong> Para integração com Facebook, Instagram, Twitter e outras plataformas</div>
                    </li>
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Pagamentos:</strong> Para processamento seguro de transações financeiras</div>
                    </li>
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Publicidade:</strong> Para exibição de anúncios relevantes e medição de campanhas</div>
                    </li>
                </ul>
                
                <p class="terms-text">
                    Estes serviços terceiros têm suas próprias políticas de cookies, que recomendamos que você leia.
                </p>
            </div>
            
            <!-- 6. Como Controlar os Cookies -->
            <div class="terms-section" id="controle">
                <h2 class="section-title">
                    <i class="fas fa-sliders-h"></i>
                    6. Como Controlar os Cookies
                </h2>
                
                <p class="terms-text">
                    Você tem controle sobre os cookies e pode gerenciá-los de várias formas:
                </p>
                
                <div class="cookie-controls">
                    <h3>Configurações de Cookies</h3>
                    <p>Use os controles abaixo para gerenciar suas preferências de cookies:</p>
                    
                    <div class="cookie-toggle">
                        <div class="cookie-toggle-info">
                            <h4>Cookies Essenciais</h4>
                            <p>Necessários para o funcionamento básico do site</p>
                        </div>
                        <div class="toggle-switch active" data-cookie="essential">
                        </div>
                    </div>
                    
                    <div class="cookie-toggle">
                        <div class="cookie-toggle-info">
                            <h4>Cookies de Análise</h4>
                            <p>Nos ajudam a entender como você usa nosso site</p>
                        </div>
                        <div class="toggle-switch" data-cookie="analytics">
                        </div>
                    </div>
                    
                    <div class="cookie-toggle">
                        <div class="cookie-toggle-info">
                            <h4>Cookies de Funcionalidade</h4>
                            <p>Lembram suas preferências e configurações</p>
                        </div>
                        <div class="toggle-switch" data-cookie="functionality">
                        </div>
                    </div>
                    
                    <div class="cookie-toggle">
                        <div class="cookie-toggle-info">
                            <h4>Cookies de Marketing</h4>
                            <p>Usados para personalizar anúncios e conteúdo</p>
                        </div>
                        <div class="toggle-switch" data-cookie="marketing">
                        </div>
                    </div>
                </div>
                
                <h3 class="section-subtitle">6.1. Configurações do Navegador</h3>
                <p class="terms-text">
                    Você também pode controlar cookies através das configurações do seu navegador:
                </p>
                
                <ul class="terms-list">
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Chrome:</strong> Configurações > Privacidade e segurança > Cookies e outros dados do site</div>
                    </li>
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Firefox:</strong> Opções > Privacidade e Segurança > Cookies e Dados do Site</div>
                    </li>
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Safari:</strong> Preferências > Privacidade > Gerenciar dados do site</div>
                    </li>
                    <li>
                        <div class="list-bullet">•</div>
                        <div><strong>Edge:</strong> Configurações > Cookies e permissões do site</div>
                    </li>
                </ul>
                
                <div class="highlight-box">
                    <h4 class="highlight-title">
                        <i class="fas fa-exclamation-triangle"></i>
                        Importante
                    </h4>
                    <p class="highlight-text">
                        Desabilitar cookies essenciais pode afetar o funcionamento do site. Algumas funcionalidades 
                        podem não estar disponíveis se você bloquear certos tipos de cookies.
                    </p>
                </div>
            </div>
            
            <!-- 7. Atualizações desta Política -->
            <div class="terms-section" id="atualizacoes">
                <h2 class="section-title">
                    <i class="fas fa-sync"></i>
                    7. Atualizações desta Política
                </h2>
                <p class="terms-text">
                    Podemos atualizar esta Política de Cookies periodicamente para refletir mudanças em nossas 
                    práticas ou por outros motivos operacionais, legais ou regulamentares.
                </p>
                <p class="terms-text">
                    Quando fizermos alterações significativas, notificaremos você através de um aviso em nosso 
                    site ou por outros meios apropriados. Recomendamos que você revise esta política regularmente 
                    para se manter informado sobre como utilizamos cookies.
                </p>
            </div>
            
            <!-- 8. Contato -->
            <div class="terms-section" id="contato">
                <h2 class="section-title">
                    <i class="fas fa-envelope"></i>
                    8. Contato
                </h2>
                <p class="terms-text">
                    Se você tiver dúvidas sobre nossa Política de Cookies ou sobre como utilizamos cookies 
                    em nossa plataforma, entre em contato conosco.
                </p>
                
                <div class="contact-info">
                    <h3 class="contact-title">Precisa de Ajuda?</h3>
                    <p class="contact-text">
                        Nossa equipe está disponível para esclarecer suas dúvidas sobre cookies e privacidade.
                    </p>
                    <a href="tel:+5511962996817" class="contact-phone">
                        <i class="fas fa-phone me-2"></i>
                        +55 11 96299 6817
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Smooth scrolling for table of contents links
    document.querySelectorAll('.toc-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                const headerHeight = 80; // Height of fixed header
                const targetPosition = targetElement.offsetTop - headerHeight;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Highlight current section in table of contents
    const sections = document.querySelectorAll('.terms-section');
    const tocLinks = document.querySelectorAll('.toc-link');
    
    window.addEventListener('scroll', () => {
        let current = '';
        const headerHeight = 100;
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop - headerHeight;
            const sectionHeight = section.clientHeight;
            
            if (window.pageYOffset >= sectionTop && 
                window.pageYOffset < sectionTop + sectionHeight) {
                current = section.getAttribute('id');
            }
        });
        
        tocLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === `#${current}`) {
                link.classList.add('active');
            }
        });
    });
    
    // Cookie toggle functionality
    document.querySelectorAll('.toggle-switch').forEach(toggle => {
        toggle.addEventListener('click', function() {
            const cookieType = this.getAttribute('data-cookie');
            
            // Don't allow disabling essential cookies
            if (cookieType === 'essential') {
                return;
            }
            
            this.classList.toggle('active');
            
            // Here you would implement the actual cookie management logic
            // For now, we'll just show a message
            const isActive = this.classList.contains('active');
            const action = isActive ? 'habilitados' : 'desabilitados';
            
            // You could show a notification here
            console.log(`Cookies ${cookieType} ${action}`);
        });
    });
    
    // Add active class styling
    const style = document.createElement('style');
    style.textContent = `
        .toc-link.active {
            color: var(--dark-color) !important;
            font-weight: 700 !important;
            background: rgba(74, 144, 226, 0.1);
            padding: 0.5rem;
            border-radius: var(--border-radius);
        }
    `;
    document.head.appendChild(style);
</script>
{% endblock %}