<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Guia completo de modding para The Sims 3 - Tutoriais, referências e guias avançados baseados em engenharia reversa das DLLs">
    <meta name="theme-color" content="#06b6d4">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Sims 3 Modding - Guia Completo">
    <meta property="og:description" content="Aprenda a criar mods profissionais para The Sims 3 com tutoriais baseados nas DLLs decompiladas">
    <meta property="og:type" content="website">
    
    <title>Sims 3 Modding - Guia Completo de Criação de Mods</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    
    <!-- Styles -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="site-wrapper">
        <!-- Sidebar Navigation -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-brand">🎮 Sims 3 Modding</div>
            </div>
            
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-section-title">Início</div>
                    <a href="index.html" class="nav-link active">
                        <span class="nav-icon">🏠</span>
                        <span>Página Principal</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">Tutoriais Básicos</div>
                    <a href="tutoriais/estrutura-basica.html" class="nav-link">
                        <span class="nav-icon">📁</span>
                        <span>Estrutura de um Mod</span>
                    </a>
                    <a href="tutoriais/interacoes.html" class="nav-link">
                        <span class="nav-icon">💬</span>
                        <span>Interações Personalizadas</span>
                    </a>
                    <a href="tutoriais/buffs.html" class="nav-link">
                        <span class="nav-icon">😊</span>
                        <span>Criando Buffs</span>
                    </a>
                    <a href="tutoriais/tuning-xml.html" class="nav-link">
                        <span class="nav-icon">📄</span>
                        <span>Tuning XML</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">Guias Avançados</div>
                    <a href="guias/sistema-eventos.html" class="nav-link">
                        <span class="nav-icon">📡</span>
                        <span>Sistema de Eventos</span>
                    </a>
                    <a href="guias/relacionamentos.html" class="nav-link">
                        <span class="nav-icon">❤️</span>
                        <span>Relacionamentos</span>
                    </a>
                    <a href="guias/jazz-scripts.html" class="nav-link">
                        <span class="nav-icon">🎭</span>
                        <span>Jazz Scripts</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">Referência</div>
                    <a href="referencia/enciclopedia.html" class="nav-link">
                        <span class="nav-icon">📚</span>
                        <span>Enciclopédia DLLs</span>
                    </a>
                    <a href="referencia/classes.html" class="nav-link">
                        <span class="nav-icon">📖</span>
                        <span>Classes Principais</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">Referência</div>
                    <a href="referencia/enciclopedia.html" class="nav-link">
                        <span class="nav-icon">📚</span>
                        <span>Enciclopédia DLLs</span>
                    </a>
                    <a href="referencia/classes-principais.html" class="nav-link">
                        <span class="nav-icon">📖</span>
                        <span>Classes Principais</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">Recursos</div>
                    <a href="recursos/ferramentas.html" class="nav-link">
                        <span class="nav-icon">🛠️</span>
                        <span>Ferramentas</span>
                    </a>
                    <a href="recursos/exemplos-mods.html" class="nav-link">
                        <span class="nav-icon">💡</span>
                        <span>Exemplos de Mods</span>
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">Sobre</div>
                    <a href="sobre.html" class="nav-link">
                        <span class="nav-icon">ℹ️</span>
                        <span>Sobre o Projeto</span>
                    </a>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Header -->
            <header class="site-header">
                <div class="header-content">
                    <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Menu">
                        ☰
                    </button>
                    
                    <nav class="breadcrumb">
                        <span>Início</span>
                    </nav>
                    
                    <div class="header-actions">
                        <a href="https://github.com" class="btn btn-outline" target="_blank">
                            <span>📦</span> GitHub
                        </a>
                    </div>
                </div>
            </header>

            <!-- Hero Section -->
            <section class="hero">
                <div class="container">
                    <div class="hero-badge">
                        <span>🔬</span>
                        <span>Baseado em Engenharia Reversa das DLLs Oficiais</span>
                    </div>
                    
                    <h1>Guia Completo de Modding para The Sims 3</h1>
                    
                    <p class="hero-description">
                        Aprenda a criar mods profissionais usando script puro. 
                        Tutoriais baseados em 62.662 linhas de código decompilado e análise profunda das DLLs do jogo.
                    </p>
                    
                    <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                        <a href="tutoriais/estrutura-basica.html" class="btn btn-primary">
                            <span>🚀</span> Começar Agora
                        </a>
                        <a href="referencia/enciclopedia.html" class="btn btn-outline">
                            <span>📚</span> Ver Enciclopédia
                        </a>
                    </div>
                </div>
            </section>

            <!-- Stats Section -->
            <section class="container" style="padding: 3rem 2rem;">
                <div class="cards-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                    <div class="card" style="text-align: center;">
                        <div style="font-size: 2.5rem; font-weight: 700; color: var(--accent-primary);">9.541</div>
                        <div style="color: var(--text-secondary);">Campos Tunable</div>
                    </div>
                    <div class="card" style="text-align: center;">
                        <div style="font-size: 2.5rem; font-weight: 700; color: var(--accent-secondary);">120+</div>
                        <div style="color: var(--text-secondary);">Tipos de Eventos</div>
                    </div>
                    <div class="card" style="text-align: center;">
                        <div style="font-size: 2.5rem; font-weight: 700; color: var(--accent-pink);">62.662</div>
                        <div style="color: var(--text-secondary);">Linhas em Sim.cs</div>
                    </div>
                    <div class="card" style="text-align: center;">
                        <div style="font-size: 2.5rem; font-weight: 700; color: var(--accent-green);">100%</div>
                        <div style="color: var(--text-secondary);">Código Analisado</div>
                    </div>
                </div>
            </section>

            <!-- Tutoriais Section -->
            <section class="container" style="padding: 2rem;">
                <div class="content-section">
                    <div class="section-header">
                        <span class="section-icon">📖</span>
                        <h2 class="section-title">Tutoriais de Modding</h2>
                    </div>
                    
                    <div class="cards-grid">
                        <a href="tutoriais/estrutura-basica.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">📁</div>
                                <h3 class="card-title">Estrutura Básica de um Mod</h3>
                            </div>
                            <p class="card-description">
                                Configure seu ambiente, crie o projeto e entenda a estrutura fundamental de um mod de script puro.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-beginner">Iniciante</span>
                                <span>⏱️ 30 min</span>
                            </div>
                        </a>
                        
                        <a href="tutoriais/interacoes.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">💬</div>
                                <h3 class="card-title">Interações Personalizadas</h3>
                            </div>
                            <p class="card-description">
                                Aprenda a criar interações entre Sims, incluindo menus, testes de validade e execução.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-intermediate">Intermediário</span>
                                <span>⏱️ 60 min</span>
                            </div>
                        </a>
                        
                        <a href="tutoriais/buffs.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">😊</div>
                                <h3 class="card-title">Criando Buffs e Efeitos</h3>
                            </div>
                            <p class="card-description">
                                Crie buffs personalizados que afetam o humor e comportamento dos Sims.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-beginner">Iniciante</span>
                                <span>⏱️ 40 min</span>
                            </div>
                        </a>
                        
                        <a href="tutoriais/tuning-xml.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">📄</div>
                                <h3 class="card-title">Tuning XML e ITUN</h3>
                            </div>
                            <p class="card-description">
                                Entenda como usar arquivos XML para configurar e ativar seus mods no jogo.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-intermediate">Intermediário</span>
                                <span>⏱️ 45 min</span>
                            </div>
                        </a>
                        
                        <a href="guias/jazz-scripts.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">🎭</div>
                                <h3 class="card-title">Jazz Scripts e Animações</h3>
                            </div>
                            <p class="card-description">
                                Domine a criação de Jazz Scripts para controlar animações complexas.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-advanced">Avançado</span>
                                <span>⏱️ 90 min</span>
                            </div>
                        </a>
                        
                        <a href="tutoriais/social-interactions.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">❤️</div>
                                <h3 class="card-title">Interações Sociais</h3>
                            </div>
                            <p class="card-description">
                                Crie interações românticas, amigáveis e malignas com sistema completo.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-intermediate">Intermediário</span>
                                <span>⏱️ 75 min</span>
                            </div>
                        </a>
                    </div>
                </div>
            </section>

            <!-- Guias Avançados Section -->
            <section class="container" style="padding: 2rem;">
                <div class="content-section">
                    <div class="section-header">
                        <span class="section-icon">🔬</span>
                        <h2 class="section-title">Guias Avançados (DLLs Decompiladas)</h2>
                    </div>
                    
                    <div class="cards-grid">
                        <a href="referencia/enciclopedia.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">📚</div>
                                <h3 class="card-title">Enciclopédia de Classes</h3>
                            </div>
                            <p class="card-description">
                                Informações exclusivas extraídas das DLLs: World, Sim, Interações, Socialização, Buffs e Eventos.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-advanced">Avançado</span>
                                <span>🔬 Engenharia Reversa</span>
                            </div>
                        </a>
                        
                        <a href="guias/sistema-eventos.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">📡</div>
                                <h3 class="card-title">Sistema de Eventos</h3>
                            </div>
                            <p class="card-description">
                                Guia completo do EventTracker com 120+ tipos de eventos, listeners customizados e exemplos práticos.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-advanced">Avançado</span>
                                <span>⏱️ 60 min</span>
                            </div>
                        </a>
                        
                        <a href="guias/relacionamentos.html" class="card">
                            <div class="card-header">
                                <div class="card-icon">💕</div>
                                <h3 class="card-title">Sistema de Relacionamentos</h3>
                            </div>
                            <p class="card-description">
                                Sistema completo: LTR, STC, atração, fórmulas de cálculo e exemplos práticos.
                            </p>
                            <div class="card-meta">
                                <span class="card-tag tag-advanced">Avançado</span>
                                <span>⏱️ 90 min</span>
                            </div>
                        </a>
                    </div>
                </div>
            </section>

            <!-- Exemplos de Mods Section -->
            <section class="container" style="padding: 2rem;">
                <div class="content-section">
                    <div class="section-header">
                        <span class="section-icon">💡</span>
                        <h2 class="section-title">Exemplos de Mods Extraordinários</h2>
                    </div>
                    
                    <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
                        Com o conhecimento das DLLs decompiladas, você pode criar mods transformadores:
                    </p>
                    
                    <div class="cards-grid">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon">💘</div>
                                <h3 class="card-title">Soulmate Detector</h3>
                            </div>
                            <p class="card-description">
                                Sistema que analisa compatibilidade completa entre Sims e determina almas gêmeas.
                            </p>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon">🎭</div>
                                <h3 class="card-title">Drama Queen</h3>
                            </div>
                            <p class="card-description">
                                Sistema de fofocas dinâmico que se espalha realisticamente pela cidade.
                            </p>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon">🧠</div>
                                <h3 class="card-title">Memória Eidética</h3>
                            </div>
                            <p class="card-description">
                                Sims lembram permanentemente de todas as interações significativas.
                            </p>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <div class="card-icon">🌐</div>
                                <h3 class="card-title">Simblr - Rede Social</h3>
                            </div>
                            <p class="card-description">
                                Rede social tipo Facebook/Twitter para Sims com posts, likes e viralização.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Footer -->
            <footer class="site-footer">
                <div class="footer-content">
                    <div style="font-size: 2rem; margin-bottom: 1rem;">🎮</div>
                    <p><strong>Sims 3 Modding Guide</strong></p>
                    <p style="font-size: 0.875rem; margin-top: 1rem;">
                        Guia educacional baseado em engenharia reversa das DLLs oficiais do The Sims 3.<br>
                        The Sims 3 é uma marca registrada da Electronic Arts.
                    </p>
                    
                    <div class="footer-links">
                        <a href="index.html">Início</a>
                        <a href="tutoriais/estrutura-basica.html">Tutoriais</a>
                        <a href="referencia/enciclopedia.html">Referência</a>
                        <a href="https://github.com" target="_blank">GitHub</a>
                    </div>
                    
                    <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 2rem;">
                        © 2026 Sims 3 Modding Guide • Criado para Cloudflare Pages
                    </p>
                </div>
            </footer>
        </main>
    </div>

    <!-- Scripts -->
    <script src="js/main.js"></script>
</body>
</html>
