console.log('🚀 app.jsx carregado - iniciando...');

const { useState, useEffect, useRef } = React;

        function App() {
            return (
                <>
                    <Header />
                    <BeforeAfter />
                    <OpeningImpact />
                    <Hero />
                    <HowItWorks />
                    <FeaturesDetailed />
                    <ThreeAIs />
                    <ForWho />
                    <VideoDemo />
                    <Pricing />
                    <BlogSection />
                    <FAQ />
                    <FinalCTA />
                    <Footer />
                </>
            );
        }

        function Header() {
            const [scrolled, setScrolled] = useState(false);

            useEffect(() => {
                const handleScroll = () => {
                    setScrolled(window.scrollY > 50);
                };
                window.addEventListener('scroll', handleScroll);
                return () => window.removeEventListener('scroll', handleScroll);
            }, []);

            return (
                <header className={scrolled ? 'scrolled' : ''}>
                    <div className="container">
                        <nav>
                            <a href="/" className="logo">
                                <img src="/wp-content/themes/siscount-wp/assets/siscount-logo.png" alt="SisCount" style={{ height: '48px', marginTop: '4px' }} />
                            </a>
                            <ul className="nav-links">
                                <li><a href="#como-funciona">Produto</a></li>
                                <li><a href="sobre.html">Sobre Nós</a></li>
                                <li><a href="#para-quem">Soluções</a></li>
                                <li><a href="#pricing-contadores">Para Contadores</a></li>
                                <li><a href="#pricing">Empresa</a></li>
                                <li><a href="https://siscount.com.br/blog">Blog</a></li>
                                <li><a href="contato.html">Contato</a></li>
                            </ul>
                            <div className="nav-cta">
                                <a href="https://app.siscount.com.br" className="btn btn-primary">
                                    Teste grátis
                                </a>
                            </div>
                        </nav>
                    </div>
                </header>
            );
        }

        function OpeningImpact() {
            return (
                <section className="hero" style={{ minHeight: '100vh', paddingTop: '72px' }}>
                    <div className="container">
                        <div className="hero-content">
                            <div className="eyebrow">A realidade de 90% dos contadores e CFOs</div>
                            
                            <h1 style={{ marginBottom: 'var(--spacing-xl)' }}>
                                3 dias para fechar o mês.
                                <br />
                                <span className="highlight">12 segundos com IA.</span>
                            </h1>

                            <div style={{ 
                                display: 'grid', 
                                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', 
                                gap: 'var(--spacing-lg)',
                                marginBottom: 'var(--spacing-3xl)'
                            }}>
                                <div className="glass-card" style={{ borderColor: 'rgba(255, 77, 77, 0.3)' }}>
                                    <div style={{ fontSize: '2.5rem', marginBottom: 'var(--spacing-md)' }}>😫</div>
                                    <h3 style={{ fontSize: '1.25rem', marginBottom: 'var(--spacing-sm)', color: '#FF5757' }}>Sem a SisCount</h3>
                                    <ul style={{ listStyle: 'none', padding: 0, fontSize: '0.9375rem', lineHeight: 1.8 }}>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: '#FF5757' }}>×</span> 72 horas para fechar demonstrações
                                        </li>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: '#FF5757' }}>×</span> Erros de digitação no Excel
                                        </li>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: '#FF5757' }}>×</span> Notas explicativas copiar/colar
                                        </li>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: '#FF5757' }}>×</span> Cliente: "Não entendi nada"
                                        </li>
                                        <li style={{ color: 'var(--text-secondary)' }}>
                                            <span style={{ color: '#FF5757' }}>×</span> Virar noites no fechamento
                                        </li>
                                    </ul>
                                </div>

                                <div className="glass-card" style={{ 
                                    borderColor: 'rgba(197, 255, 0, 0.4)',
                                    background: 'linear-gradient(135deg, rgba(197, 255, 0, 0.05) 0%, rgba(197, 255, 0, 0.01) 100%)',
                                    boxShadow: 'var(--glow-subtle)'
                                }}>
                                    <div style={{ fontSize: '2.5rem', marginBottom: 'var(--spacing-md)' }}>🚀</div>
                                    <h3 style={{ fontSize: '1.25rem', marginBottom: 'var(--spacing-sm)', color: 'var(--neon-green)' }}>Com a SisCount</h3>
                                    <ul style={{ listStyle: 'none', padding: 0, fontSize: '0.9375rem', lineHeight: 1.8 }}>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: 'var(--neon-green)' }}>✓</span> 12 segundos automáticos
                                        </li>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: 'var(--neon-green)' }}>✓</span> Validação tripla automática
                                        </li>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: 'var(--neon-green)' }}>✓</span> 34 notas geradas por IA
                                        </li>
                                        <li style={{ marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>
                                            <span style={{ color: 'var(--neon-green)' }}>✓</span> IA conversa em português claro
                                        </li>
                                        <li style={{ color: 'var(--text-secondary)' }}>
                                            <span style={{ color: 'var(--neon-green)' }}>✓</span> Fim de semana livre
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div style={{ 
                                background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%)',
                                border: '2px solid rgba(139, 92, 246, 0.3)',
                                borderRadius: '20px',
                                padding: 'var(--spacing-xl)',
                                marginBottom: 'var(--spacing-2xl)',
                                position: 'relative',
                                overflow: 'hidden'
                            }}>
                                <div style={{ 
                                    position: 'absolute',
                                    top: '1rem',
                                    right: '1rem',
                                    background: 'rgba(139, 92, 246, 0.2)',
                                    padding: '0.5rem 1rem',
                                    borderRadius: '999px',
                                    fontSize: '0.75rem',
                                    fontWeight: 700,
                                    color: '#C4B5FD',
                                    textTransform: 'uppercase',
                                    letterSpacing: '0.05em'
                                }}>
                                    ✨ Destaque
                                </div>

                                <div style={{ fontSize: '2.5rem', marginBottom: 'var(--spacing-sm)' }}>🔍</div>
                                
                                <h3 style={{ 
                                    fontSize: '1.75rem', 
                                    fontWeight: 800, 
                                    color: '#FFFFFF',
                                    marginBottom: 'var(--spacing-md)',
                                    lineHeight: 1.2
                                }}>
                                    Auditoria de Balancete com IA Especialista
                                </h3>

                                <p style={{ 
                                    fontSize: '1.125rem', 
                                    color: 'rgba(255, 255, 255, 0.9)',
                                    marginBottom: 'var(--spacing-lg)',
                                    lineHeight: 1.7
                                }}>
                                    Antes de processar, a <strong style={{ color: '#C4B5FD' }}>SIS.Control</strong> executa <strong>validação tripla automática</strong>: estrutura do balancete, consistência DRE↔BP↔DFC, e safeguards anti-alucinação nas notas explicativas.
                                </p>

                                <div style={{ 
                                    display: 'grid',
                                    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                                    gap: 'var(--spacing-md)',
                                    marginBottom: 'var(--spacing-md)'
                                }}>
                                    <div style={{ 
                                        background: 'rgba(139, 92, 246, 0.15)',
                                        padding: 'var(--spacing-md)',
                                        borderRadius: '12px',
                                        borderLeft: '3px solid #8B5CF6'
                                    }}>
                                        <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>✓</div>
                                        <div style={{ fontSize: '0.875rem', color: '#C4B5FD', fontWeight: 600, marginBottom: '0.25rem' }}>
                                            Validação Estrutural
                                        </div>
                                        <div style={{ fontSize: '0.8125rem', color: 'rgba(255, 255, 255, 0.7)' }}>
                                            Verifica contas, saldos e formato
                                        </div>
                                    </div>

                                    <div style={{ 
                                        background: 'rgba(139, 92, 246, 0.15)',
                                        padding: 'var(--spacing-md)',
                                        borderRadius: '12px',
                                        borderLeft: '3px solid #8B5CF6'
                                    }}>
                                        <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>✓</div>
                                        <div style={{ fontSize: '0.875rem', color: '#C4B5FD', fontWeight: 600, marginBottom: '0.25rem' }}>
                                            Cruzamento DRE↔BP↔DFC
                                        </div>
                                        <div style={{ fontSize: '0.8125rem', color: 'rgba(255, 255, 255, 0.7)' }}>
                                            Identifica inconsistências
                                        </div>
                                    </div>

                                    <div style={{ 
                                        background: 'rgba(139, 92, 246, 0.15)',
                                        padding: 'var(--spacing-md)',
                                        borderRadius: '12px',
                                        borderLeft: '3px solid #8B5CF6'
                                    }}>
                                        <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>✓</div>
                                        <div style={{ fontSize: '0.875rem', color: '#C4B5FD', fontWeight: 600, marginBottom: '0.25rem' }}>
                                            Anti-Alucinação
                                        </div>
                                        <div style={{ fontSize: '0.8125rem', color: 'rgba(255, 255, 255, 0.7)' }}>
                                            Safeguards nas notas explicativas
                                        </div>
                                    </div>
                                </div>

                                <div style={{ 
                                    background: 'rgba(0, 0, 0, 0.3)',
                                    padding: 'var(--spacing-md)',
                                    borderRadius: '12px',
                                    borderLeft: '4px solid #10B981'
                                }}>
                                    <p style={{ 
                                        fontSize: '0.9375rem', 
                                        color: 'rgba(255, 255, 255, 0.95)',
                                        margin: 0,
                                        lineHeight: 1.6
                                    }}>
                                        <strong style={{ color: '#10B981' }}>Resultado:</strong> Se o balancete tiver algum problema, você descobre <em>antes</em> de processar — com sugestões de correção automáticas.
                                    </p>
                                </div>
                            </div>

                            <div style={{ 
                                textAlign: 'center',
                                padding: 'var(--spacing-xl)',
                                background: 'rgba(197, 255, 0, 0.05)',
                                border: '1px solid rgba(197, 255, 0, 0.2)',
                                borderRadius: '16px',
                                marginBottom: 'var(--spacing-xl)'
                            }}>
                                <p style={{ fontSize: '1.5rem', fontWeight: 700, color: 'var(--text-primary)', marginBottom: 'var(--spacing-sm)' }}>
                                    Quanto vale recuperar <span style={{ color: 'var(--neon-green)' }}>3 dias por mês</span>?
                                </p>
                                <p style={{ fontSize: '1.125rem', color: 'var(--text-secondary)' }}>
                                    Enquanto você processa planilhas, a IA está fechando demonstrações, gerando notas, calculando indicadores e sugerindo otimizações tributárias.
                                </p>
                            </div>

                            <div style={{ textAlign: 'center' }}>
                                <a href="#demo" className="btn btn-primary" style={{ fontSize: '1.125rem', padding: '1rem 2.5rem' }}>
                                    Ver a SisCount em ação →
                                </a>
                                <p style={{ marginTop: 'var(--spacing-sm)', color: 'var(--text-tertiary)', fontSize: '0.875rem' }}>
                                    Demonstração de 5 minutos · Sem instalar nada
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            );
        }

        function Hero() {
            return (
                <section className="hero">
                    <div className="container">
                        <div className="hero-content">
                            <div className="eyebrow">Lançamento · Módulo Realizado × Orçado</div>
                            
                            <h1>
                                Pare de ver números.
                                <br />
                                <span className="highlight">Comece a ver resultados.</span>
                            </h1>

                            <p className="subhead">
                                Você sobe o balancete. Recebe Balanço, DRE, DFC, indicadores e análise com IA  em 12 segundos. Auditável, explicável, decidível.
                            </p>

                            <div className="hero-ctas">
                                <a href="#demo" className="btn btn-primary">
                                    Agendar demonstração →
                                </a>
                                <a href="#como-funciona" className="btn btn-secondary">
                                    Ver como funciona
                                </a>
                            </div>

                            <div className="stats">
                                <div className="stat-card">
                                    <div className="stat-number">100%</div>
                                    <div className="stat-label">Análise macroeconômica IA por setor</div>
                                </div>
                                <div className="stat-card">
                                    <div className="stat-number">36</div>
                                    <div className="stat-label">fontes oficiais (BCB, IBGE, Tesouro...)</div>
                                </div>
                                <div className="stat-card">
                                    <div className="stat-number">12s</div>
                                    <div className="stat-label">tempo médio de processamento</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            );
        }

        // Removed TrustBar - will add features section instead

        function BeforeAfter() {
            return (
                <section>
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center', maxWidth: '900px', margin: '0 auto var(--spacing-3xl)' }}>
                            <h2 className="section-title">
                                Você já imaginou fazer perguntas diretamente <span className="highlight">aos seus relatórios contábeis</span>   e receber respostas instantâneas, claras e completas, como se estivesse conversando com um colega especialista em finanças?
                            </h2>
                            <p className="section-subtitle" style={{ marginTop: 'var(--spacing-lg)' }}>
                                <strong style={{ color: 'var(--text-primary)' }}>Isso já é possível.</strong>
                            </p>
                            <p className="section-subtitle">
                                Na Siscount BI, <strong style={{ color: 'var(--neon-green)' }}>a IA conversacional</strong>  está transformando a forma como profissionais de finanças e empresas interagem com dados contábeis   <strong>eliminando barreiras técnicas</strong>, <strong>trazendo agilidade</strong>, <strong>clareza</strong> e <strong>inteligência</strong> para a tomada de decisão.
                            </p>
                        </div>

                        <div style={{ maxWidth: '900px', margin: '0 auto' }}>
                            
                            <div style={{ marginBottom: 'var(--spacing-3xl)' }}>
                                <div className="eyebrow" style={{ color: '#FF5757', marginBottom: 'var(--spacing-lg)' }}>● O Problema</div>
                                
                                <h3 style={{ fontSize: 'clamp(1.75rem, 4vw, 2.5rem)', fontWeight: 800, lineHeight: 1.2, marginBottom: 'var(--spacing-lg)', color: '#FFFFFF' }}>
                                    Tradicionalmente, analisar relatórios exige tempo, filtros complexos e conhecimento técnico...
                                </h3>

                                <div className="glass-card" style={{ borderLeft: '4px solid #FF5757', marginBottom: 'var(--spacing-lg)' }}>
                                    <p style={{ color: 'var(--text-secondary)', fontSize: '1.125rem', lineHeight: 1.8, marginBottom: 'var(--spacing-md)' }}>
                                        Você precisa do faturamento líquido dos últimos 3 meses? <strong style={{ color: '#FF5757' }}>Tem que abrir a DRE, filtrar período, exportar para Excel, somar manualmente.</strong>
                                    </p>
                                    <p style={{ color: 'var(--text-secondary)', fontSize: '1.125rem', lineHeight: 1.8, marginBottom: 'var(--spacing-md)' }}>
                                        Quer saber qual cliente mais cresceu em 2025? <strong style={{ color: '#FF5757' }}>Precisa cruzar múltiplos relatórios, fazer pivot tables, conferir os números.</strong>
                                    </p>
                                    <p style={{ color: 'var(--text-secondary)', fontSize: '1.125rem', lineHeight: 1.8 }}>
                                        E quando o empresário pergunta "Onde estou gastando mais?"? <strong style={{ color: '#FF5757' }}>Você vira a noite montando apresentações em PowerPoint.</strong>
                                    </p>
                                </div>

                                <p style={{ color: 'var(--text-secondary)', fontSize: '1.125rem' }}>
                                    <strong style={{ color: 'var(--text-primary)' }}>O resultado?</strong> Horas desperdiçadas em tarefas operacionais. Decisões atrasadas. Frustrações de ambos os lados.
                                </p>
                            </div>

                            <div>
                                <div className="eyebrow" style={{ marginBottom: 'var(--spacing-lg)' }}>● A Revolução</div>
                                
                                <h3 style={{ fontSize: 'clamp(1.75rem, 4vw, 2.5rem)', fontWeight: 800, lineHeight: 1.2, marginBottom: 'var(--spacing-lg)', color: '#FFFFFF' }}>
                                    E se você pudesse <span className="highlight">simplesmente perguntar</span>?
                                </h3>

                                <div className="glass-card" style={{ background: 'linear-gradient(135deg, rgba(197, 255, 0, 0.08) 0%, rgba(197, 255, 0, 0.02) 100%)', border: '1px solid rgba(197, 255, 0, 0.2)', padding: 'var(--spacing-xl)' }}>
                                    <div style={{ marginBottom: 'var(--spacing-xl)' }}>
                                        <div style={{ display: 'inline-block', background: 'rgba(197, 255, 0, 0.15)', padding: '0.5rem 1rem', borderRadius: '8px', marginBottom: 'var(--spacing-sm)' }}>
                                            <span style={{ color: 'var(--neon-green)', fontFamily: 'var(--font-mono)', fontSize: '0.875rem' }}>💬 Você pergunta:</span>
                                        </div>
                                        <p style={{ color: 'var(--text-primary)', fontSize: '1.25rem', fontStyle: 'italic', lineHeight: 1.6 }}>
                                            "Qual foi o faturamento líquido dos últimos 3 meses?"
                                        </p>
                                    </div>

                                    <div style={{ marginBottom: 'var(--spacing-xl)' }}>
                                        <div style={{ display: 'inline-block', background: 'rgba(197, 255, 0, 0.15)', padding: '0.5rem 1rem', borderRadius: '8px', marginBottom: 'var(--spacing-sm)' }}>
                                            <span style={{ color: 'var(--neon-green)', fontFamily: 'var(--font-mono)', fontSize: '0.875rem' }}>🤖 IA responde em 2 segundos:</span>
                                        </div>
                                        <p style={{ color: 'var(--text-secondary)', fontSize: '1.125rem', lineHeight: 1.8 }}>
                                            "O faturamento líquido acumulado de Jan-Mar/2025 foi <strong style={{ color: 'var(--neon-green)' }}>R$ 2.847.320,00</strong>, com crescimento de <strong style={{ color: 'var(--neon-green)' }}>18,3%</strong> vs mesmo período 2024. Destaque para Fevereiro (+32% MoM)."
                                        </p>
                                    </div>

                                    <div style={{ borderTop: '1px solid rgba(197, 255, 0, 0.2)', paddingTop: 'var(--spacing-md)' }}>
                                        <p style={{ color: 'var(--text-secondary)', fontSize: '1rem', lineHeight: 1.7 }}>
                                            ✓ Sem abrir relatórios<br/>
                                            ✓ Sem filtrar manualmente<br/>
                                            ✓ Sem Excel<br/>
                                            ✓ Sem esperar contador disponível
                                        </p>
                                    </div>
                                </div>

                                <p style={{ color: 'var(--text-secondary)', fontSize: '1.25rem', lineHeight: 1.8, textAlign: 'center', padding: 'var(--spacing-lg)', background: 'rgba(255, 255, 255, 0.02)', borderRadius: '12px', marginTop: 'var(--spacing-lg)' }}>
                                    <strong style={{ color: 'var(--neon-green)' }}>Essa é a IA conversacional da Siscount BI.</strong><br/>
                                    <span style={{ color: 'var(--text-secondary)' }}>Você conversa com seus números — literalmente.</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            );
        }

        function HowItWorks() {
            const steps = [
                {
                    number: '01',
                    title: 'Importe de qualquer ERP',
                    description: 'Compatível com TODOS os sistemas contábeis. TXT, XLSX ou XML. Totvs, SAP, Domínio, Sankhya, Questor, Alterdata, SCI Visual, Agribusiness e qualquer outro.'
                },
                {
                    number: '02',
                    title: '4 IAs processam em paralelo',
                    description: 'SIS.Control valida estrutura. SIS.Analyt interpreta indicadores. SIS.Strateg otimiza tributação. IA Orçamentária projeta cenários.'
                },
                {
                    number: '03',
                    title: 'Demonstrações + Análises + Planejamento',
                    description: 'BP, DRE, DFC, DMPL + 34 Notas Explicativas + 54 Indicadores + Simulação Tributária + Orçamento vs Realizado + Benchmark B3.'
                }
            ];

            const useCases = [
                {
                    emoji: '📊',
                    persona: 'CFO de PME',
                    question: '"Qual foi meu EBITDA no último trimestre?"',
                    answer: 'R$ 487.200 (margem 18,3%). Crescimento de 12% vs trimestre anterior. Principais drivers: redução de 8% em despesas operacionais + receita estável.',
                    time: '2s'
                },
                {
                    emoji: '⚠️',
                    persona: 'Auditor Interno',
                    question: '"Tem alguma inconsistência nas demonstrações?"',
                    answer: 'Detectado: Saldo de Caixa no BP não bate com DFC (diferença R$ 8.400). Possível lançamento duplicado em 15/02. Requer investigação.',
                    time: '4s'
                },
                {
                    emoji: '💰',
                    persona: 'Controller',
                    question: '"Onde estou gastando mais este mês?"',
                    answer: 'Top 3: Folha de pagamento (R$ 218.400, 41%), Fornecedores (R$ 96.700, 18%), Marketing (R$ 52.100, 10%). Alerta: Marketing +34% vs mês anterior.',
                    time: '2s'
                }
            ];

            return (
                <>
                <section id="como-funciona" style={{ background: 'var(--surface-1)' }}>
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center' }}>
                            <div className="eyebrow">● Como Funciona</div>
                            <h2 className="section-title">
                                Do balancete à decisão em <span className="highlight">3 passos</span>.
                            </h2>
                        </div>

                        <div style={{ display: 'grid', gap: 'var(--spacing-xl)', maxWidth: '900px', margin: '0 auto' }}>
                            {steps.map((step, i) => (
                                <div key={i} className="glass-card">
                                    <div style={{ 
                                        fontFamily: 'var(--font-mono)', 
                                        fontSize: '3rem', 
                                        fontWeight: 700,
                                        color: 'var(--neon-green)',
                                        marginBottom: 'var(--spacing-sm)'
                                    }}>
                                        {step.number}
                                    </div>
                                    <h3 style={{ fontSize: '1.5rem', marginBottom: 'var(--spacing-xs)', color: '#FFFFFF' }}>{step.title}</h3>
                                    <p style={{ color: 'var(--text-secondary)' }}>{step.description}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                <section style={{ background: 'var(--surface-1)', paddingTop: 0 }}>
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center', marginBottom: 'var(--spacing-2xl)' }}>
                            <div className="eyebrow">● Na Prática</div>
                            <h2 className="section-title">
                                Perguntas <span className="highlight">reais</span> que a IA responde
                            </h2>
                            <p className="section-subtitle" style={{ margin: '0 auto' }}>
                                Veja como contadores e CFOs usam a Siscount BI no dia a dia
                            </p>
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--spacing-lg)' }}>
                            {useCases.map((item, i) => (
                                <div key={i} className="glass-card">
                                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
                                        <div style={{ fontSize: '2.5rem' }}>{item.emoji}</div>
                                        <div>
                                            <div style={{ fontSize: '0.875rem', color: 'var(--text-tertiary)', marginBottom: '0.25rem' }}>{item.persona}</div>
                                            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: 'var(--neon-green)' }}>⏱️ Resposta em {item.time}</div>
                                        </div>
                                    </div>
                                    <div style={{ background: 'rgba(197, 255, 0, 0.05)', borderLeft: '3px solid var(--neon-green)', padding: 'var(--spacing-sm)', borderRadius: '8px', marginBottom: 'var(--spacing-sm)' }}>
                                        <p style={{ color: 'var(--text-primary)', fontStyle: 'italic' }}>{item.question}</p>
                                    </div>
                                    <p style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.7 }}>
                                        {item.answer}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
                </>
            );
        }

        function FeaturesDetailed() {
            const features = [
                {
                    icon: '📊',
                    title: 'Demonstrações Contábeis CPC/IFRS',
                    description: 'Balanço Patrimonial, DRE, DFC e DMPL 100% automáticos. Estrutura hierárquica drill-down, comparativos YoY, análise vertical e horizontal.',
                    items: [
                        'Conformidade CPC 00, IAS 1, IFRS 16, 18',
                        'Validação tripla DRE ↔ BP ↔ DFC',
                        'Consolidação multi-empresa 1 clique',
                        'Export PDF + XLSX profissional'
                    ]
                },
                {
                    icon: '📝',
                    title: '34+ Notas Explicativas com IA',
                    description: 'IA proprietária SisCount gera notas completas com safeguards anti-alucinação. Reescrita por tom (técnico/simples/formal).',
                    items: [
                        'Vinculação automática conta ↔ nota',
                        'IA proibida de inventar números',
                        'Conformidade CPC 26, IAS 1 §112-129',
                        'Export DOCX, PDF e XLSX'
                    ]
                },
                {
                    icon: '📈',
                    title: '54 Indicadores Financeiros',
                    description: 'Liquidez, Rentabilidade, Endividamento, Estrutura, Operacional e mais. KPI cards com status verde/vermelho automático + análise de tendência.',
                    items: [
                        'ROE, ROA, ROI, ROIC, EBITDA, Margem Líquida',
                        'PMR, PMP, PME, Ciclo Operacional',
                        'Score Kanitz (insolvência)',
                        'SIS.Analyt interpreta + comenta resultados'
                    ]
                },
                {
                    icon: '⚖️',
                    title: 'Planejamento Tributário com IA',
                    description: 'Simula 3 regimes (Simples Nacional, Lucro Presumido, Lucro Real). Ranking automático com recomendação do regime ótimo.',
                    items: [
                        'IRPJ, CSLL, PIS, COFINS, ICMS, ISS, INSS',
                        'SIS.Strateg identifica oportunidades',
                        'Cenários "e se" dinâmicos',
                        'Avisos de risco automáticos'
                    ]
                },
                {
                    icon: '🎯',
                    title: 'Orçamento vs Realizado (R×O) com IA',
                    description: 'IA gera orçamento analisando 2 anos de histórico + premissas BCB Focus (IPCA, Selic, PIB). Rolling forecast que protege margem EBITDA.',
                    items: [
                        'DRE, BP e DFC projetados',
                        'Análise de desvios CRÍTICO/ALTO/MÉDIO',
                        'Cenários editáveis mês a mês',
                        'Insights proativos da IA'
                    ]
                },
                {
                    icon: '🔍',
                    title: 'Auditoria de Balancete Automatizada',
                    description: 'SIS.Control valida TODOS os ERPs, detecta inconsistências e garante conformidade. Validação cruzada automática entre demonstrações.',
                    items: [
                        'Validação tripla DRE ↔ BP ↔ DFC',
                        'Detecção de lançamentos duplicados',
                        'Alertas de inconsistências em tempo real',
                        'Trilha auditável completa'
                    ]
                }
            ];

            return (
                <section style={{ background: 'var(--black)' }}>
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center' }}>
                            <div className="eyebrow">● Plataforma Completa</div>
                            <h2 className="section-title">
                                Tudo que você precisa em <span className="highlight">uma plataforma</span>
                            </h2>
                            <p className="section-subtitle" style={{ margin: '0 auto' }}>
                                Da importação do balancete até decisões estratégicas. Conformidade CPC/IFRS, análise profunda e planejamento inteligente.
                            </p>
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--spacing-lg)' }}>
                            {features.map((feature, i) => (
                                <div key={i} className="glass-card">
                                    <div style={{ fontSize: '2.5rem', marginBottom: 'var(--spacing-md)' }}>{feature.icon}</div>
                                    <h3 style={{ fontSize: '1.5rem', marginBottom: 'var(--spacing-sm)', color: '#FFFFFF' }}>{feature.title}</h3>
                                    <p style={{ color: 'var(--text-secondary)', marginBottom: 'var(--spacing-md)', lineHeight: 1.6 }}>
                                        {feature.description}
                                    </p>
                                    <ul style={{ listStyle: 'none', padding: 0 }}>
                                        {feature.items.map((item, j) => (
                                            <li key={j} style={{ 
                                                padding: 'var(--spacing-xs) 0',
                                                color: 'var(--text-secondary)',
                                                fontSize: '0.9375rem',
                                                display: 'flex',
                                                alignItems: 'flex-start',
                                                gap: '0.5rem'
                                            }}>
                                                <span style={{ color: 'var(--neon-green)', flexShrink: 0 }}>✓</span>
                                                <span>{item}</span>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
            );
        }

        function ThreeAIs() {
            return (
                <section>
                    <div className="container">
                        <div className="section-header">
                            <div className="eyebrow">● Tecnologia</div>
                            <h2 className="section-title">
                                4 Inteligências Artificiais <span className="highlight">especializadas</span>
                            </h2>
                            <p className="section-subtitle">
                                Cada IA é treinada para uma função específica, trabalhando em conjunto para entregar análises precisas e confiáveis.
                            </p>
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--spacing-lg)', marginBottom: 'var(--spacing-xl)' }}>
                            {[
                                { name: 'SIS.Control', number: '01', desc: 'Valida balancetes de TODOS os ERPs do mercado. Validação tripla DRE↔BP↔DFC. Safeguards anti-alucinação nas notas explicativas.', tech: 'Pattern Recognition + Rule Engine' },
                                { name: 'SIS.Analyt', number: '02', desc: 'Interpreta 54 indicadores financeiros e gera comentários estruturados (saúde, tendência, alertas). Histórico auditável.', tech: 'IA Proprietária + Prompt Engineering' },
                                { name: 'SIS.Strateg', number: '03', desc: 'Ranking de regime tributário com score de confiança. Identifica oportunidades de otimização fiscal. Insights do ForecastRollingEngine.', tech: 'Tax Optimization Engine + ML' },
                                { name: 'IA Orçamentária', number: '04', desc: 'Analisa 2 anos de histórico + premissas BCB Focus. 3 engines: BudgetResolver, VarianceEngine, ForecastRollingEngine.', tech: 'LLM de última geração + Time Series Analysis' }
                            ].map((ia, i) => (
                                <div key={i} className="glass-card">
                                    <div style={{ 
                                        fontFamily: 'var(--font-mono)', 
                                        fontSize: '2.5rem', 
                                        fontWeight: 700,
                                        color: 'var(--neon-green)',
                                        marginBottom: 'var(--spacing-sm)'
                                    }}>
                                        {ia.number}
                                    </div>
                                    <h3 style={{ fontSize: '1.5rem', marginBottom: 'var(--spacing-sm)', color: '#FFFFFF' }}>{ia.name}</h3>
                                    <p style={{ color: 'var(--text-secondary)', marginBottom: 'var(--spacing-md)', lineHeight: 1.6 }}>
                                        {ia.desc}
                                    </p>
                                    <div style={{ fontSize: '0.875rem', color: 'var(--text-tertiary)' }}>
                                        Tecnologia: {ia.tech}
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div style={{ 
                            textAlign: 'center',
                            paddingTop: 'var(--spacing-xl)',
                            borderTop: '1px solid var(--border-subtle)'
                        }}>
                            <h3 style={{ fontSize: '1.5rem', marginBottom: 'var(--spacing-lg)', color: '#FFFFFF' }}>Integrações e Fontes de Dados</h3>
                            <div style={{ 
                                display: 'flex', 
                                flexWrap: 'wrap', 
                                gap: 'var(--spacing-md)',
                                justifyContent: 'center',
                                maxWidth: '900px',
                                margin: '0 auto'
                            }}>
                                {[
                                    'Compatível com TODOS os ERPs',
                                    'BCB Focus (IPCA, Selic, PIB)',
                                    'BRapi (1.600+ empresas B3)',
                                    'Pool SisCount (benchmark)',
                                    'IA Proprietária SisCount',
                                    'LLMs de última geração',
                                    'API REST em tempo real'
                                ].map((int, i) => (
                                    <div key={i} style={{
                                        background: 'rgba(197, 255, 0, 0.1)',
                                        border: '1px solid rgba(197, 255, 0, 0.2)',
                                        padding: '0.75rem 1.5rem',
                                        borderRadius: '9999px',
                                        fontSize: '0.9375rem',
                                        color: 'var(--neon-green)',
                                        fontWeight: 600
                                    }}>
                                        {int}
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </section>
            );
        }

        function ForWho() {
            return (
                <section id="para-quem" style={{ background: 'var(--surface-1)' }}>
                    <div className="container">
                        <div className="section-header">
                            <div className="eyebrow">● Para quem é</div>
                            <h2 className="section-title">
                                A rotina que você <span className="strike">não aguenta mais</span>.
                            </h2>
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--spacing-lg)' }}>
                            {[
                                { icon: '🏢', title: 'Empresas PME', subtitle: 'CFO, Controller, Empresário', features: ['Dashboards em tempo real', 'Relatórios que você entende', 'Decisões baseadas em dados', 'SisCount Agro'] },
                                { icon: '📊', title: 'Contadores', subtitle: 'Escritórios contábeis', features: ['Vire contador estratégico', 'Consultoria premium', '34 notas automatizadas', 'Feche o ano sem virar noite'] },
                                { icon: '🏛️', title: 'Grande Porte', subtitle: 'Corporações e holdings', features: ['Consolidação multi-CNPJ', 'Benchmark B3 + Média Siscount', 'Simulação tributária com IA', 'Trilha auditável'] }
                            ].map((persona, i) => (
                                <div key={i} className="glass-card">
                                    <div style={{ fontSize: '3rem', marginBottom: 'var(--spacing-md)' }}>{persona.icon}</div>
                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '0.25rem', color: '#FFFFFF' }}>{persona.title}</h3>
                                    <p style={{ color: 'var(--text-secondary)', marginBottom: 'var(--spacing-md)' }}>{persona.subtitle}</p>
                                    <ul style={{ listStyle: 'none', padding: 0 }}>
                                        {persona.features.map((feature, j) => (
                                            <li key={j} style={{ 
                                                padding: 'var(--spacing-xs) 0',
                                                borderBottom: '1px solid var(--border-subtle)',
                                                fontSize: '0.9375rem',
                                                color: 'var(--text-secondary)',
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: '0.5rem'
                                            }}>
                                                <span style={{ color: 'var(--neon-green)' }}>✓</span>
                                                {feature}
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
            );
        }

        function VideoDemo() {
            return (
                <section id="demo">
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center' }}>
                            <div className="eyebrow">● Veja em ação</div>
                            <h2 className="section-title">
                                A SisCount em <span className="highlight">60 segundos</span>.
                            </h2>
                        </div>

                        <div style={{ 
                            maxWidth: '900px', 
                            margin: '0 auto',
                            aspectRatio: '16/9',
                            background: 'var(--surface-2)',
                            borderRadius: '16px',
                            border: '1px solid var(--border-subtle)',
                            overflow: 'hidden'
                        }}>
                            {/* TODO: Substituir pelo ID real do vídeo */}
                            <iframe 
                                width="100%" 
                                height="100%" 
                                src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
                                frameBorder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowFullScreen
                            ></iframe>
                        </div>
                    </div>
                </section>
            );
        }

        function Pricing() {
            const [activeTab, setActiveTab] = useState('empresas');

            useEffect(() => {
                // Check if URL hash wants to open contabilidade tab
                if (window.location.hash === '#pricing-contadores') {
                    setActiveTab('contabilidade');
                }
                
                const handleHashChange = () => {
                    if (window.location.hash === '#pricing-contadores') {
                        setActiveTab('contabilidade');
                    }
                };
                
                window.addEventListener('hashchange', handleHashChange);
                return () => window.removeEventListener('hashchange', handleHashChange);
            }, []);

            const plans = {
                empresas: [
                    {
                        name: 'Starter',
                        subtitle: 'Para PMEs em crescimento',
                        badge: null,
                        features: [
                            'Para PMEs em crescimento',
                            'Balanço, DRE, DFC, DMPL',
                            'Notas explicativas',
                            'Indicadores essenciais'
                        ]
                    },
                    {
                        name: 'Business',
                        subtitle: 'Para empresas estabelecidas',
                        badge: 'Mais Popular',
                        features: [
                            'Para empresas estabelecidas',
                            'Tudo do Starter +',
                            'Indicadores avançados',
                            'Benchmark setorial',
                            'Forecast rolling com IA'
                        ]
                    },
                    {
                        name: 'Enterprise',
                        subtitle: 'Para corporações e holdings',
                        badge: null,
                        features: [
                            'Para corporações e holdings',
                            'Tudo do Business +',
                            'Consolidação multi-CNPJ',
                            'Integração API em tempo real',
                            'Planejamento Orçamentário e Tributário IA',
                            'Customer Success dedicado',
                            'SLA garantido'
                        ]
                    }
                ],
                contabilidade: [
                    {
                        name: 'Enterprise',
                        subtitle: 'Pacote completo para escritórios contábeis',
                        badge: 'Plano Único',
                        features: [
                            'Multiempresa ilimitado',
                            'Balanço, DRE, DFC, DMPL completos',
                            '34+ Notas explicativas automáticas',
                            '54 Indicadores financeiros',
                            'Consolidação multi-CNPJ',
                            'Integração API em tempo real',
                            'Benchmark B3 + Pool Siscount',
                            'Planejamento Orçamentário IA',
                            'Planejamento Tributário IA',
                            'Forecast rolling com IA',
                            'Customer Success dedicado',
                            'SLA garantido',
                            'Treinamento incluído'
                        ]
                    }
                ]
            };

            const currentPlans = plans[activeTab];

            return (
                <section id="pricing" style={{ background: 'var(--surface-1)' }}>
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center' }} id="pricing-contadores">
                            <div className="eyebrow">● Investimento</div>
                            <h2 className="section-title">
                                Um preço justo para o <span className="highlight">seu</span> porte.
                            </h2>
                            <p className="section-subtitle" style={{ margin: '0 auto' }}>
                                Não cobramos por usuário, nem por funcionalidade. Cobramos uma fração do valor que geramos para você.
                            </p>
                        </div>

                        <div style={{ 
                            display: 'flex', 
                            justifyContent: 'center',
                            gap: 0,
                            marginBottom: 'var(--spacing-xl)',
                            background: 'rgba(255,255,255,0.03)',
                            borderRadius: '9999px',
                            padding: '4px',
                            maxWidth: '400px',
                            margin: '0 auto var(--spacing-xl)'
                        }}>
                            {['empresas', 'contabilidade'].map(tab => (
                                <button
                                    key={tab}
                                    onClick={() => setActiveTab(tab)}
                                    style={{
                                        flex: 1,
                                        padding: '0.75rem 2rem',
                                        borderRadius: '9999px',
                                        border: 'none',
                                        background: activeTab === tab ? 'var(--neon-green)' : 'transparent',
                                        color: activeTab === tab ? 'var(--black)' : 'var(--text-secondary)',
                                        fontWeight: 700,
                                        fontSize: '0.9375rem',
                                        textTransform: 'uppercase',
                                        letterSpacing: '0.05em',
                                        cursor: 'pointer',
                                        transition: 'all 0.2s'
                                    }}
                                >
                                    {tab}
                                </button>
                            ))}
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--spacing-lg)' }}>
                            {currentPlans.map((plan, i) => (
                                <div key={i} className="glass-card" style={{ 
                                    position: 'relative',
                                    borderColor: plan.badge ? 'var(--neon-green)' : 'var(--border-subtle)',
                                    boxShadow: plan.badge ? 'var(--glow-subtle)' : 'none',
                                    maxWidth: currentPlans.length === 1 ? '500px' : '100%',
                                    margin: currentPlans.length === 1 ? '0 auto' : '0'
                                }}>
                                    {plan.badge && (
                                        <div style={{
                                            position: 'absolute',
                                            top: '-12px',
                                            right: '20px',
                                            background: 'var(--neon-green)',
                                            color: 'var(--black)',
                                            padding: '0.25rem 1rem',
                                            borderRadius: '9999px',
                                            fontSize: '0.75rem',
                                            fontWeight: 700,
                                            textTransform: 'uppercase',
                                            letterSpacing: '0.05em'
                                        }}>
                                            {plan.badge}
                                        </div>
                                    )}
                                    <h3 style={{ fontSize: '1.75rem', marginBottom: '0.25rem', color: '#FFFFFF' }}>{plan.name}</h3>
                                    <p style={{ color: 'var(--text-secondary)', marginBottom: 'var(--spacing-lg)' }}>{plan.subtitle}</p>
                                    <ul style={{ listStyle: 'none', padding: 0, marginBottom: 'var(--spacing-lg)' }}>
                                        {plan.features.map((feature, j) => (
                                            <li key={j} style={{ 
                                                padding: 'var(--spacing-xs) 0',
                                                borderBottom: '1px solid var(--border-subtle)',
                                                fontSize: '0.9375rem',
                                                color: 'var(--text-secondary)',
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: '0.5rem'
                                            }}>
                                                <span style={{ color: 'var(--neon-green)' }}>✓</span>
                                                {feature}
                                            </li>
                                        ))}
                                    </ul>
                                    <a href="#demo" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
                                        Falar com vendas →
                                    </a>
                                    <a href="https://app.siscount.com.br" style={{
                                        display: 'block',
                                        textAlign: 'center',
                                        marginTop: 'var(--spacing-sm)',
                                        color: 'var(--text-tertiary)',
                                        fontSize: '0.875rem',
                                        textDecoration: 'underline'
                                    }}>
                                        Faça um teste grátis
                                    </a>
                                </div>
                            ))}
                        </div>

                        <div style={{ 
                            maxWidth: '800px', 
                            margin: 'var(--spacing-3xl) auto 0',
                            padding: 'var(--spacing-lg)',
                            background: 'rgba(197,255,0,0.04)',
                            border: '1px solid rgba(197,255,0,0.2)',
                            borderRadius: '16px'
                        }}>
                            <h4 style={{ fontSize: '1.25rem', marginBottom: 'var(--spacing-sm)' }}>💡 Por que não publicamos preços?</h4>
                            <p style={{ color: 'var(--text-secondary)', marginBottom: 'var(--spacing-sm)' }}>
                                Cada empresa tem uma realidade. Cobrar tabela fixa é injusto: castiga quem está começando e subsidia quem deveria pagar mais. Por isso, nosso modelo é por faixa de faturamento — você paga o que faz sentido para o seu momento.
                            </p>
                            <p style={{ color: 'var(--text-tertiary)', fontSize: '0.9375rem', fontStyle: 'italic' }}>
                                Em média, nossos clientes investem entre <strong style={{ color: 'var(--neon-green)' }}>0,05% e 0,15% do faturamento mensal</strong> — e recuperam o investimento em economia tributária e decisões otimizadas no primeiro trimestre.
                            </p>
                        </div>
                    </div>
                </section>
            );
        }

        function BlogSection() {
            const posts = [
                {
                    category: 'IA Financeira',
                    title: 'Como a IA está revolucionando a contabilidade gerencial',
                    excerpt: 'Descubra como inteligência artificial está transformando demonstrações financeiras em insights estratégicos, reduzindo tempo de fechamento de 3 dias para 12 segundos.',
                    date: '15 Abr, 2025'
                },
                {
                    category: 'Planejamento Tributário',
                    title: 'Simples, Presumido ou Real? IA calcula o melhor regime em segundos',
                    excerpt: 'Entenda como a simulação tributária com IA pode economizar milhares de reais por ano identificando automaticamente o regime mais vantajoso para sua empresa.',
                    date: '10 Abr, 2025'
                },
                {
                    category: 'Indicadores',
                    title: '54 indicadores financeiros que todo CFO deve acompanhar',
                    excerpt: 'Guia completo dos indicadores essenciais: liquidez, rentabilidade, endividamento e eficiência operacional. Com cálculo automatizado e interpretação via IA.',
                    date: '5 Abr, 2025'
                },
                {
                    category: 'Demonstrações',
                    title: 'DRE, BP e DFC: entenda as demonstrações contábeis essenciais',
                    excerpt: 'Aprenda a ler e interpretar as três principais demonstrações financeiras e como a validação cruzada automática garante consistência entre elas.',
                    date: '1 Abr, 2025'
                },
                {
                    category: 'IA Conversacional',
                    title: 'Pergunte à IA: como a análise conversacional muda o jogo',
                    excerpt: 'Descubra como conversar diretamente com seus dados financeiros elimina horas de análise manual e traz respostas instantâneas em linguagem natural.',
                    date: '28 Mar, 2025'
                },
                {
                    category: 'Compliance',
                    title: 'Auditoria de balancetes com IA: validação tripla automática',
                    excerpt: 'Saiba como a inteligência artificial detecta inconsistências, valida estruturas e garante conformidade antes mesmo de processar as demonstrações.',
                    date: '22 Mar, 2025'
                }
            ];

            return (
                <section id="blog" style={{ background: 'var(--surface-1)' }}>
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center' }}>
                            <div className="eyebrow">● Blog</div>
                            <h2 className="section-title">
                                Insights financeiros com <span className="highlight">IA</span>
                            </h2>
                            <p className="section-subtitle" style={{ margin: '0 auto' }}>
                                Análises, tendências e estratégias para transformar dados em decisões.
                            </p>
                        </div>

                        <div style={{ 
                            display: 'grid', 
                            gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))', 
                            gap: '2rem' 
                        }}>
                            {posts.map((post, i) => (
                                <article key={i} className="glass-card" style={{ 
                                    transition: 'all 0.3s',
                                    cursor: 'pointer'
                                }} onMouseOver={(e) => {
                                    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
                                    e.currentTarget.style.transform = 'translateY(-4px)';
                                }} onMouseOut={(e) => {
                                    e.currentTarget.style.borderColor = 'var(--border-subtle)';
                                    e.currentTarget.style.transform = 'translateY(0)';
                                }}>
                                    <div style={{ 
                                        aspectRatio: '16/9',
                                        background: 'linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%)',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        marginBottom: 'var(--spacing-lg)',
                                        borderRadius: '12px'
                                    }}>
                                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" strokeWidth="1.5">
                                            <path d="M4 7h16M4 12h16M4 17h16" strokeLinecap="round"/>
                                        </svg>
                                    </div>
                                    
                                    <div style={{ 
                                        fontSize: '0.75rem',
                                        padding: '0.25rem 0.75rem',
                                        borderRadius: '9999px',
                                        background: 'rgba(197, 255, 0, 0.1)',
                                        color: 'var(--neon-green)',
                                        fontWeight: 600,
                                        textTransform: 'uppercase',
                                        letterSpacing: '0.05em',
                                        display: 'inline-block',
                                        marginBottom: 'var(--spacing-sm)'
                                    }}>
                                        {post.category}
                                    </div>
                                    
                                    <h3 style={{ 
                                        fontSize: '1.5rem', 
                                        fontWeight: 700, 
                                        marginBottom: '0.75rem', 
                                        lineHeight: 1.3,
                                        color: '#FFFFFF'
                                    }}>
                                        {post.title}
                                    </h3>
                                    
                                    <p style={{ 
                                        color: 'var(--text-secondary)', 
                                        fontSize: '0.9375rem', 
                                        lineHeight: 1.6, 
                                        marginBottom: 'var(--spacing-lg)' 
                                    }}>
                                        {post.excerpt}
                                    </p>
                                    
                                    <div style={{ 
                                        display: 'flex', 
                                        alignItems: 'center', 
                                        justifyContent: 'space-between',
                                        paddingTop: 'var(--spacing-sm)',
                                        borderTop: '1px solid var(--border-subtle)'
                                    }}>
                                        <time style={{ fontSize: '0.875rem', color: 'var(--text-tertiary)' }}>
                                            {post.date}
                                        </time>
                                        <a href="#" style={{ 
                                            fontSize: '0.875rem', 
                                            fontWeight: 600, 
                                            color: 'var(--neon-green)', 
                                            textDecoration: 'none' 
                                        }}>
                                            Ler mais →
                                        </a>
                                    </div>
                                </article>
                            ))}
                        </div>

                        <div style={{ textAlign: 'center', marginTop: 'var(--spacing-2xl)' }}>
                            <a href="blog.html" className="btn btn-secondary" style={{ fontSize: '1rem', padding: '1rem 2rem' }}>
                                Ver todos os artigos →
                            </a>
                        </div>
                    </div>
                </section>
            );
        }

        function FAQ() {
            const [openIndex, setOpenIndex] = useState(null);

            const faqs = [
                {
                    q: 'Quanto custa a SisCount?',
                    a: 'O investimento varia conforme o plano escolhido e o tamanho da sua operação. Entre em contato para uma proposta personalizada — não cobramos por usuário nem por funcionalidade.'
                },
                {
                    q: 'Quanto tempo leva para implantar?',
                    a: 'A implementação leva de 1 a 3 dias, dependendo da complexidade da integração com seu ERP.'
                },
                {
                    q: 'Funciona com qual ERP/sistema contábil?',
                    a: 'Aceitamos balancetes em TXT, XLSX e XML de qualquer sistema. Também temos integração API com os principais ERPs do mercado.'
                },
                {
                    q: 'Meus dados estão seguros? E a LGPD?',
                    a: 'Sim. Todos os dados são criptografados end-to-end, armazenados em servidores na AWS Brasil, e seguimos rigorosamente a LGPD.'
                },
                {
                    q: 'Preciso ser contador para usar?',
                    a: 'Não! A IA interpreta os números e conversa com você em linguagem simples. CFOs, controllers e empresários usam sem conhecimento técnico contábil.'
                },
                {
                    q: 'A IA pode errar nos relatórios?',
                    a: 'A SIS.Control valida 100% dos números antes de gerar os relatórios. Todos os cálculos são auditáveis.'
                },
                {
                    q: 'Posso testar antes de contratar?',
                    a: 'Sim! Oferecemos teste grátis de 15 dias sem necessidade de cartão de crédito.'
                },
                {
                    q: 'Como funciona o suporte?',
                    a: 'Suporte humano em português, por chat, email e telefone. Resolvemos problemas de verdade, não só tiramos dúvidas.'
                }
            ];

            return (
                <section>
                    <div className="container">
                        <div className="section-header" style={{ textAlign: 'center' }}>
                            <div className="eyebrow">● Perguntas frequentes</div>
                            <h2 className="section-title">Tudo que você precisa saber.</h2>
                        </div>

                        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
                            {faqs.map((faq, i) => (
                                <div key={i} style={{ 
                                    borderBottom: '1px solid var(--border-subtle)',
                                    padding: 'var(--spacing-md) 0'
                                }}>
                                    <button
                                        onClick={() => setOpenIndex(openIndex === i ? null : i)}
                                        style={{
                                            width: '100%',
                                            display: 'flex',
                                            justifyContent: 'space-between',
                                            alignItems: 'center',
                                            background: 'none',
                                            border: 'none',
                                            color: 'var(--text-primary)',
                                            fontSize: '1.125rem',
                                            fontWeight: 600,
                                            textAlign: 'left',
                                            cursor: 'pointer',
                                            padding: 0
                                        }}
                                    >
                                        {faq.q}
                                        <span style={{ 
                                            fontSize: '1.5rem',
                                            transform: openIndex === i ? 'rotate(45deg)' : 'rotate(0)',
                                            transition: 'transform 0.2s'
                                        }}>+</span>
                                    </button>
                                    {openIndex === i && (
                                        <p style={{ 
                                            marginTop: 'var(--spacing-sm)',
                                            color: 'var(--text-secondary)',
                                            lineHeight: 1.6
                                        }}>
                                            {faq.a}
                                        </p>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
            );
        }

        function FinalCTA() {
            return (
                <section style={{ background: 'var(--surface-1)', padding: 'var(--spacing-3xl) 0', textAlign: 'center' }}>
                    <div className="container">
                        <h2 className="section-title" style={{ marginBottom: 'var(--spacing-md)' }}>
                            Seu balancete merece mais que uma planilha.
                        </h2>
                        <p className="section-subtitle" style={{ margin: '0 auto var(--spacing-xl)' }}>
                            Veja a SisCount funcionando com seus dados, em uma demonstração de 30 minutos. Sem compromisso.
                        </p>
                        <a href="#demo" className="btn btn-primary" style={{ fontSize: '1.125rem', padding: '1rem 2.5rem' }}>
                            Agendar demonstração →
                        </a>
                        <p style={{ 
                            marginTop: 'var(--spacing-md)', 
                            color: 'var(--text-tertiary)', 
                            fontSize: '0.875rem' 
                        }}>
                            Setup gratuito · Cancele quando quiser · Suporte humano em português
                        </p>
                    </div>
                </section>
            );
        }

        function Footer() {
            return (
                <footer id="empresa" style={{ background: 'var(--black)', padding: 'var(--spacing-3xl) 0 var(--spacing-lg)' }}>
                    <div className="container">
                        <div style={{ 
                            display: 'grid', 
                            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                            gap: 'var(--spacing-xl)',
                            marginBottom: 'var(--spacing-xl)'
                        }}>
                            <div>
                                <div style={{ marginBottom: 'var(--spacing-sm)' }}>
                                    <img src="/wp-content/themes/siscount-wp/assets/siscount-logo.png" alt="SisCount" style={{ height: '56px' }} />
                                </div>
                                <p style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', marginBottom: '0.5rem' }}>
                                    Dados que geram decisões.
                                </p>
                                <p style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem' }}>
                                    CNPJ: 42.721.413/0001-05<br />
                                    Goiânia – GO
                                </p>
                            </div>

                            <div>
                                <h4 style={{ marginBottom: 'var(--spacing-sm)', fontSize: '0.875rem', color: 'var(--neon-green)' }}>Produto</h4>
                                <ul style={{ listStyle: 'none', padding: 0 }}>
                                    {['Demonstrativos', '3 IAs Especialistas', 'Planejamento', 'SisCount Agro'].map(link => (
                                        <li key={link} style={{ marginBottom: '0.5rem' }}>
                                            <a href="#" style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', textDecoration: 'none' }}>
                                                {link}
                                            </a>
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            <div>
                                <h4 style={{ marginBottom: 'var(--spacing-sm)', fontSize: '0.875rem', color: 'var(--neon-green)' }}>Empresa</h4>
                                <ul style={{ listStyle: 'none', padding: 0 }}>
                                    {['Sobre Nós', 'Contato', 'Blog', 'Carreiras'].map(link => (
                                        <li key={link} style={{ marginBottom: '0.5rem' }}>
                                            <a href={link === 'Blog' ? '/blog' : '#'} style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', textDecoration: 'none' }}>
                                                {link}
                                            </a>
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            <div>
                                <h4 style={{ marginBottom: 'var(--spacing-sm)', fontSize: '0.875rem', color: 'var(--neon-green)' }}>Contato</h4>
                                <ul style={{ listStyle: 'none', padding: 0 }}>
                                    <li style={{ marginBottom: '0.5rem' }}>
                                        <a href="tel:+556281616526" style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', textDecoration: 'none' }}>
                                            (62) 98161-6526
                                        </a>
                                    </li>
                                    <li style={{ marginBottom: '0.5rem' }}>
                                        <a href="mailto:contato@siscount.com.br" style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', textDecoration: 'none' }}>
                                            contato@siscount.com.br
                                        </a>
                                    </li>
                                    <li style={{ marginBottom: '0.5rem' }}>
                                        <a href="https://www.instagram.com/siscountsistemas" style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', textDecoration: 'none' }}>
                                            Instagram
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div style={{ 
                            paddingTop: 'var(--spacing-lg)',
                            borderTop: '1px solid var(--border-subtle)',
                            textAlign: 'center',
                            color: 'var(--text-tertiary)',
                            fontSize: '0.8125rem'
                        }}>
                            <p>© 2026 SisCount Sistemas Gerenciais Ltda. Todos os direitos reservados.</p>
                            <div style={{ marginTop: '0.5rem' }}>
                                <a href="#" style={{ color: 'var(--text-tertiary)', textDecoration: 'none', marginRight: '1rem' }}>Política de Privacidade</a>
                                <a href="#" style={{ color: 'var(--text-tertiary)', textDecoration: 'none', marginRight: '1rem' }}>Termos de Uso</a>
                                <a href="#" style={{ color: 'var(--text-tertiary)', textDecoration: 'none' }}>LGPD</a>
                            </div>
                        </div>
                    </div>
                </footer>
            );
        }

        ReactDOM.render(<App />, document.getElementById('root'));