@extends('layouts.admin')

@section('title', 'Conheça o ERP Syspanel')

@section('content')
<div class="container-fluid">
    <!-- Header de Propaganda -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-gradient-primary text-white shadow">
                <div class="card-body p-5">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h1 class="display-4 fw-bold">Potencialize sua Empresa com o ERP Syspanel</h1>
                            <p class="lead mb-4">A solução completa e inteligente para a gestão total do seu negócio. Do financeiro à Inteligência Artificial, tudo em um só lugar.</p>
                            <a href="https://syspanel.com.br" target="_blank" class="btn btn-light btn-lg px-5 py-3 rounded-pill fw-bold text-primary shadow-sm">
                                <i class="bi bi-rocket me-2"></i>Assine Agora o ERP Syspanel
                            </a>
                        </div>
                        <div class="col-lg-4 d-none d-lg-block text-center">
                            <i class="bi bi-graph-up opacity-25"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Título da Seção de Módulos -->
    <div class="text-center mb-5">
        <h2 class="h3 text-gray-800 font-weight-bold">Módulos Especializados para seu Crescimento</h2>
        <div class="dropdown-divider w-25 mx-auto border-primary"></div>
    </div>

    <!-- Grid de Módulos -->
    <div class="row g-4">
        <!-- Módulo 1 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Módulo ERP</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Financeiro</div>
                            <p class="text-muted small mt-2">Gestão de contas a pagar, receber e movimentações bancárias em tempo real.</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-cash-stack text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo 2 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Módulo ERP</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">CRM</div>
                            <p class="text-muted small mt-2">Relacionamento completo: Leads, Oportunidades, Atividades e Pipelines de venda.</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-persons text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo 3 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Módulo ERP</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Gestão de Projetos</div>
                            <p class="text-muted small mt-2">Organize tarefas e prazos com metodologia Kanban e controle de produtividade.</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-list-task text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo 4 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Módulo ERP</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Estoque e Matérias-Primas</div>
                            <p class="text-muted small mt-2">Controle total de insumos, matérias-primas e armazéns com inteligência.</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-boxes text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo IA -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2 bg-light">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Módulo IA</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Agente de IA ERP</div>
                            <p class="text-muted small mt-2">Analise seus dados em tempo real com um agente inteligente exclusivo.</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-robot text-danger opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo 6 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-secondary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">Módulo ERP</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Produção (PCP)</div>
                            <p class="text-muted small mt-2">Planejamento e controle rigoroso da produção e engenharia de produto (BOM).</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-gears text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo 7 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-dark shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">Módulo ERP</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Veículos e Frotas</div>
                            <p class="text-muted small mt-2">Gestão de motoristas, ordens de serviço e manutenção de frotas da empresa.</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-truck text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Módulo 8 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Módulo ERP</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Gestão da Qualidade</div>
                            <p class="text-muted small mt-2">Controle total de Manuais, Procedimentos e Formulários (SGQ).</p>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-check-circle text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mais Módulos Listados -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Outros Módulos Inclusos</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><i class="bi bi-check-lg text-success me-2"></i>RH (Recursos Humanos)</li>
                        <li class="list-group-item"><i class="bi bi-check-lg text-success me-2"></i>Vendas ao Cliente</li>
                        <li class="list-group-item"><i class="bi bi-check-lg text-success me-2"></i>Gestão de Fornecedores</li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><i class="bi bi-check-lg text-success me-2"></i>Transportadoras e Fretes</li>
                        <li class="list-group-item"><i class="bi bi-check-lg text-success me-2"></i>Service Tags</li>
                        <li class="list-group-item"><i class="bi bi-check-lg text-success me-2"></i>Gerência Comercial</li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><i class="bi bi-star text-warning me-2"></i>Plano de Negócios IA</li>
                        <li class="list-group-item"><i class="bi bi-star text-warning me-2"></i>Assistente Local</li>
                        <li class="list-group-item"><i class="bi bi-check-lg text-success me-2"></i>Gestão de Organogramas</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Final -->
    <div class="text-center py-5">
        <h3 class="font-weight-bold text-gray-800">Pronto para transformar sua gestão?</h3>
        <p class="lead text-muted mb-4">Junte-se a centenas de empresas que já utilizam o ecossistema Syspanel.</p>
        <a href="https://syspanel.com.br" target="_blank" class="btn btn-primary btn-lg px-5 shadow-lg fw-bold">
            Quero conhecer o ERP Syspanel agora!
        </a>
        <div class="mt-3">
            <small class="text-muted">Acesse <a href="https://syspanel.com.br" target="_blank">syspanel.com.br</a> para mais informações.</small>
        </div>
    </div>
</div>
@endsection

@push('css')
<style>
    .bg-gradient-primary {
        background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    }
    .hover-scale {
        transition: transform 0.2s;
    }
    .hover-scale:hover {
        transform: scale(1.02);
    }
</style>
@endpush