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

{% block title %}Termos de Uso e Política de Privacidade - Allure{% 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-email {
        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-email: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;
    }
    
    @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;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="terms-container">
    <div class="container">
        <!-- Header -->
        <div class="terms-header">
            <h1 class="terms-title">Termos de Uso e Política de Privacidade</h1>
            <p class="terms-subtitle">
                Conheça nossos termos de uso, política de privacidade e como protegemos seus dados na plataforma Allure
            </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="#aceitacao" class="toc-link"><i class="fas fa-check"></i>1. Aceitação dos Termos</a></li>
                <li><a href="#descricao" class="toc-link"><i class="fas fa-info-circle"></i>2. Descrição do Serviço</a></li>
                <li><a href="#cadastro" class="toc-link"><i class="fas fa-user-plus"></i>3. Cadastro e Conta</a></li>
                <li><a href="#uso" class="toc-link"><i class="fas fa-handshake"></i>4. Uso Aceitável</a></li>
                <li><a href="#conteudo" class="toc-link"><i class="fas fa-image"></i>5. Conteúdo do Usuário</a></li>
                <li><a href="#privacidade" class="toc-link"><i class="fas fa-shield-alt"></i>6. Política de Privacidade</a></li>
                <li><a href="#seguranca" class="toc-link"><i class="fas fa-lock"></i>7. Segurança</a></li>
                <li><a href="#responsabilidades" class="toc-link"><i class="fas fa-balance-scale"></i>8. Responsabilidades</a></li>
                <li><a href="#modificacoes" class="toc-link"><i class="fas fa-edit"></i>9. Modificações</a></li>
                <li><a href="#contato" class="toc-link"><i class="fas fa-envelope"></i>10. Contato</a></li>
            </ul>
        </div>
        
        <!-- Terms Content -->
        <div class="terms-content">
            <!-- 1. Aceitação dos Termos -->
            <div class="terms-section" id="aceitacao">
                <h2 class="section-title">
                    <i class="fas fa-check"></i>
                    1. Aceitação dos Termos
                </h2>
                <p class="terms-text">
                    Ao acessar e utilizar a plataforma Allure, você concorda em cumprir e estar vinculado a estes Termos de Uso. 
                    Se você não concordar com qualquer parte destes termos, não deve utilizar nossos serviços.
                </p>
                <p class="terms-text">
                    Estes termos constituem um acordo legal entre você e a Allure. Recomendamos que você leia atentamente 
                    todos os termos antes de utilizar a plataforma.
                </p>
            </div>
            
            <!-- 2. Descrição do Serviço -->
            <div class="terms-section" id="descricao">
                <h2 class="section-title">
                    <i class="fas fa-info-circle"></i>
                    2. Descrição do Serviço
                </h2>
                <p class="terms-text">
                    A Allure é uma plataforma digital que conecta modelos profissionais com fotógrafos, agências, 
                    empresas e outros profissionais do setor de moda e entretenimento.
                </p>
                <h3 class="section-subtitle">Nossos serviços incluem:</h3>
                <ul class="terms-list">
                    <li>
                        <div class="list-number">1</div>
                        <div>Plataforma de cadastro e perfil profissional para modelos</div>
                    </li>
                    <li>
                        <div class="list-number">2</div>
                        <div>Sistema de busca e filtros para encontrar modelos específicos</div>
                    </li>
                    <li>
                        <div class="list-number">3</div>
                        <div>Ferramentas de comunicação entre usuários</div>
                    </li>
                    <li>
                        <div class="list-number">4</div>
                        <div>Gerenciamento de portfólio e galeria de fotos</div>
                    </li>
                    <li>
                        <div class="list-number">5</div>
                        <div>Suporte técnico e orientação profissional</div>
                    </li>
                </ul>
            </div>
            
            <!-- 3. Cadastro e Conta -->
            <div class="terms-section" id="cadastro">
                <h2 class="section-title">
                    <i class="fas fa-user-plus"></i>
                    3. Cadastro e Conta
                </h2>
                <p class="terms-text">
                    Para utilizar nossos serviços, você deve criar uma conta fornecendo informações precisas e atualizadas. 
                    Você é responsável por manter a confidencialidade de suas credenciais de acesso.
                </p>
                
                <div class="highlight-box">
                    <h4 class="highlight-title">
                        <i class="fas fa-exclamation-triangle"></i>
                        Responsabilidades da Conta
                    </h4>
                    <p class="highlight-text">
                        Você é responsável por todas as atividades que ocorrem em sua conta. 
                        Notifique-nos imediatamente sobre qualquer uso não autorizado.
                    </p>
                </div>
                
                <h3 class="section-subtitle">Requisitos para cadastro:</h3>
                <ul class="terms-list">
                    <li><span class="list-bullet">•</span> Ter pelo menos 18 anos de idade</li>
                    <li><span class="list-bullet">•</span> Fornecer informações verdadeiras e precisas</li>
                    <li><span class="list-bullet">•</span> Aceitar estes termos de uso</li>
                    <li><span class="list-bullet">•</span> Cumprir com as políticas da plataforma</li>
                </ul>
            </div>
            
            <!-- 4. Uso Aceitável -->
            <div class="terms-section" id="uso">
                <h2 class="section-title">
                    <i class="fas fa-handshake"></i>
                    4. Uso Aceitável
                </h2>
                <p class="terms-text">
                    Você concorda em utilizar a plataforma apenas para propósitos legais e de acordo com estes termos. 
                    É proibido o uso da plataforma para qualquer atividade ilegal ou inadequada.
                </p>
                
                <h3 class="section-subtitle">Condutas Proibidas:</h3>
                <ul class="terms-list">
                    <li><span class="list-bullet">•</span> Publicar conteúdo ofensivo, discriminatório ou inadequado</li>
                    <li><span class="list-bullet">•</span> Utilizar a plataforma para fins comerciais não autorizados</li>
                    <li><span class="list-bullet">•</span> Tentar acessar contas de outros usuários</li>
                    <li><span class="list-bullet">•</span> Transmitir vírus ou código malicioso</li>
                    <li><span class="list-bullet">•</span> Interferir no funcionamento da plataforma</li>
                    <li><span class="list-bullet">•</span> Coletar dados de outros usuários sem autorização</li>
                </ul>
            </div>
            
            <!-- 5. Conteúdo do Usuário -->
            <div class="terms-section" id="conteudo">
                <h2 class="section-title">
                    <i class="fas fa-image"></i>
                    5. Conteúdo do Usuário
                </h2>
                <p class="terms-text">
                    Você mantém a propriedade do conteúdo que envia para a plataforma, mas nos concede uma licença 
                    não exclusiva para utilizá-lo em nossos serviços.
                </p>
                
                <div class="highlight-box">
                    <h4 class="highlight-title">
                        <i class="fas fa-camera"></i>
                        Diretrizes para Fotos
                    </h4>
                    <p class="highlight-text">
                        Todas as fotos devem ser apropriadas, profissionais e respeitar os direitos de terceiros. 
                        Reservamo-nos o direito de remover conteúdo inadequado.
                    </p>
                </div>
                
                <h3 class="section-subtitle">Você garante que:</h3>
                <ul class="terms-list">
                    <li><span class="list-bullet">•</span> Possui direitos sobre o conteúdo enviado</li>
                    <li><span class="list-bullet">•</span> O conteúdo não viola direitos de terceiros</li>
                    <li><span class="list-bullet">•</span> O conteúdo é apropriado e profissional</li>
                    <li><span class="list-bullet">•</span> O conteúdo não é ilegal ou ofensivo</li>
                </ul>
            </div>
            
            <!-- 6. Política de Privacidade -->
            <div class="terms-section" id="privacidade">
                <h2 class="section-title">
                    <i class="fas fa-shield-alt"></i>
                    6. Política de Privacidade
                </h2>
                <p class="terms-text">
                    Sua privacidade é importante para nós. Esta seção descreve como coletamos, utilizamos e protegemos 
                    suas informações pessoais.
                </p>
                
                <h3 class="section-subtitle">Informações que coletamos:</h3>
                <ul class="terms-list">
                    <li><span class="list-bullet">•</span> Informações de cadastro (nome, e-mail, telefone)</li>
                    <li><span class="list-bullet">•</span> Dados do perfil (fotos, características físicas)</li>
                    <li><span class="list-bullet">•</span> Informações de uso da plataforma</li>
                    <li><span class="list-bullet">•</span> Dados de comunicação entre usuários</li>
                </ul>
                
                <h3 class="section-subtitle">Como utilizamos suas informações:</h3>
                <ul class="terms-list">
                    <li><span class="list-bullet">•</span> Para fornecer e melhorar nossos serviços</li>
                    <li><span class="list-bullet">•</span> Para facilitar conexões entre usuários</li>
                    <li><span class="list-bullet">•</span> Para enviar comunicações importantes</li>
                    <li><span class="list-bullet">•</span> Para garantir a segurança da plataforma</li>
                </ul>
            </div>
            
            <!-- 7. Segurança -->
            <div class="terms-section" id="seguranca">
                <h2 class="section-title">
                    <i class="fas fa-lock"></i>
                    7. Segurança
                </h2>
                <p class="terms-text">
                    Implementamos medidas de segurança técnicas e organizacionais para proteger suas informações 
                    contra acesso não autorizado, alteração, divulgação ou destruição.
                </p>
                
                <div class="highlight-box">
                    <h4 class="highlight-title">
                        <i class="fas fa-shield-check"></i>
                        Nossas Medidas de Segurança
                    </h4>
                    <p class="highlight-text">
                        Utilizamos criptografia SSL, firewalls, monitoramento contínuo e backups regulares 
                        para proteger seus dados.
                    </p>
                </div>
            </div>
            
            <!-- 8. Responsabilidades -->
            <div class="terms-section" id="responsabilidades">
                <h2 class="section-title">
                    <i class="fas fa-balance-scale"></i>
                    8. Responsabilidades
                </h2>
                <p class="terms-text">
                    A Allure atua como intermediária entre usuários e não se responsabiliza por acordos 
                    ou transações realizadas entre os usuários da plataforma.
                </p>
                
                <h3 class="section-subtitle">Limitação de Responsabilidade:</h3>
                <ul class="terms-list">
                    <li><span class="list-bullet">•</span> Não garantimos a disponibilidade contínua da plataforma</li>
                    <li><span class="list-bullet">•</span> Não nos responsabilizamos por danos indiretos</li>
                    <li><span class="list-bullet">•</span> Nossa responsabilidade é limitada ao valor pago pelos serviços</li>
                    <li><span class="list-bullet">•</span> Não garantimos a precisão das informações dos usuários</li>
                </ul>
            </div>
            
            <!-- 9. Modificações -->
            <div class="terms-section" id="modificacoes">
                <h2 class="section-title">
                    <i class="fas fa-edit"></i>
                    9. Modificações
                </h2>
                <p class="terms-text">
                    Reservamo-nos o direito de modificar estes termos a qualquer momento. 
                    As modificações entrarão em vigor imediatamente após sua publicação na plataforma.
                </p>
                <p class="terms-text">
                    Continuar utilizando nossos serviços após as modificações constitui aceitação 
                    dos novos termos.
                </p>
            </div>
            
            <!-- 10. Contato -->
            <div class="terms-section" id="contato">
                <h2 class="section-title">
                    <i class="fas fa-envelope"></i>
                    10. Contato
                </h2>
                <p class="terms-text">
                    Se você tiver dúvidas sobre estes termos ou nossa política de privacidade, 
                    entre em contato conosco através dos canais disponibilizados.
                </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 os termos de uso 
                        e política de privacidade.
                    </p>
                    <a href="mailto:suporte@allure.com.br" class="contact-email">
                        <i class="fas fa-envelope me-2"></i>
                        suporte@allure.com.br
                    </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');
            }
        });
    });
    
    // 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 %}