<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($title ?? ('Módulo: ' . ($module['title'] ?? 'Detalhes'))) ?></title>
    <link rel="stylesheet" href="/css/gestoreasy-colors.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--ge-text-primary); }
        header { background: var(--ge-white); box-shadow: var(--ge-shadow); position: sticky; top: 0; width: 100%; z-index: 999; }
        .header-container { max-width: 1000px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ge-black); }
        .logo img { height: 32px; width: auto; display: block; }
        nav a { color: var(--ge-text-primary); text-decoration: none; font-weight: 500; }
        nav a:hover { color: var(--ge-orange); }
        .hero { background: var(--ge-gradient-primary); color: var(--ge-white); padding: 4rem 2rem; text-align: center; }
        .hero .icon { font-size: 3rem; }
        .hero h1 { font-size: 2.6rem; margin: 0.75rem 0; }
        .hero p { opacity: 0.95; max-width: 800px; margin: 0.5rem auto 0; }
        .section { padding: 3rem 2rem; max-width: 1000px; margin: 0 auto; }
        .section h2 { font-size: 1.8rem; color: var(--ge-black); margin-bottom: 1rem; }
        .card { background: var(--ge-white); border-radius: var(--ge-border-radius-lg); box-shadow: var(--ge-shadow); padding: 1.5rem; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
        .list { list-style: none; margin-left: 0; }
        .list li { padding: 0.5rem 0; border-bottom: 1px solid var(--ge-gray); }
        .list li:before { content: '✓'; color: var(--ge-olive); font-weight: bold; margin-right: 0.5rem; }
        .cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
        .btn { padding: 0.7rem 1rem; border-radius: var(--ge-border-radius); border: 2px solid transparent; cursor: pointer; text-decoration: none; }
        .btn-primary { background: var(--ge-orange); color: white; }
        .btn-outline { border-color: var(--ge-orange); color: var(--ge-orange); }
        footer { background: var(--ge-black); color: var(--ge-white); padding: 2rem; text-align: center; }
        @media (max-width: 768px) { .hero h1 { font-size: 2.1rem; } }
    </style>
    <?php $module = $module ?? ['title' => 'Módulo', 'icon' => '🧩', 'slug' => 'modulo']; ?>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="logo"><img src="/assets/logo-dark.png" alt="Gestor Easy"> <span>GESTOR EASY</span></div>
            <nav>
                <a href="/landing">Voltar à Landing</a>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="icon"><?= htmlspecialchars($module['icon']) ?></div>
        <h1><?= htmlspecialchars($module['title']) ?></h1>
        <p>Capacidades profissionais, integração nativa e conformidade com as maiores exigências fiscais e comerciais.</p>
        <div class="cta">
            <a class="btn btn-primary" href="/login">Entrar</a>
            <a class="btn btn-outline" href="#contato">Fale Conosco</a>
        </div>
    </section>

    <section class="section">
        <div class="grid">
            <div class="card">
                <h2>Visão Geral</h2>
                <p>O módulo <strong><?= htmlspecialchars($module['title']) ?></strong> foi projetado para entregar alto desempenho, confiabilidade e uma experiência moderna. Ele se integra ao restante do ERP de forma nativa, respeitando dependências e garantindo consistência dos dados.</p>
            </div>
            <div class="card">
                <h2>Destaques</h2>
                <ul class="list">
                    <li>Interface limpa e responsiva, otimizada para produtividade.</li>
                    <li>Relatórios e métricas acionáveis em tempo real.</li>
                    <li>Integração com usuários, permissões e auditoria por tenant.</li>
                    <li>Logs e rastreabilidade completos das operações.</li>
                </ul>
            </div>
        </div>
    </section>

    <section class="section">
        <div class="grid">
            <div class="card">
                <h2>Compliance & Segurança</h2>
                <ul class="list">
                    <li>Conformidade com SPED, NFe/NFCe e normas vigentes.</li>
                    <li>Políticas de acesso e rate limiting configuráveis.</li>
                    <li>Criptografia em trânsito, proteção contra ataques comuns.</li>
                    <li>Logs de auditoria e trilhas de auditoria por operação.</li>
                </ul>
            </div>
            <div class="card">
                <h2>Integrações</h2>
                <ul class="list">
                    <li>Conexões com marketplaces e bancos (Open Banking).</li>
                    <li>Integração com módulos do ERP: Financeiro, Estoque, CRM.</li>
                    <li>APIs REST seguras e padronizadas por tenant.</li>
                    <li>Importação e exportação estruturadas.</li>
                </ul>
            </div>
        </div>
    </section>

    <section class="section" id="contato">
        <div class="card">
            <h2>Vamos Conversar</h2>
            <p>Precisa de uma demonstração detalhada do módulo <strong><?= htmlspecialchars($module['title']) ?></strong>? Entre em contato para uma apresentação completa e profissional.</p>
            <div class="cta">
                <a class="btn btn-primary" href="mailto:comercial@gestoreasy.com">Solicitar Apresentação</a>
                <a class="btn btn-outline" href="/landing#trial">Teste Grátis</a>
            </div>
        </div>
    </section>

    <footer>
        <p>© 2025 GESTOR EASY — Módulo <?= htmlspecialchars($module['title']) ?></p>
    </footer>
</body>
</html>