@extends('layouts.app')

@section('title', $page->title ?? 'ERP Syspanel - Gestão Inteligente')
@section('meta_description', $page->meta_description ?? 'Descubra como o ERP Syspanel pode transformar a gestão da sua empresa com módulos personalizados e inteligência artificial.')
@section('meta_keywords', $page->meta_keywords ?? 'ERP, Sistema de Gestão, Gestão Empresarial, Automação, Syspanel, Financeiro, CRM')
@section('og_title', $page->og_title ?? 'ERP Syspanel - Gestão Inteligente')
@section('og_description', $page->og_description ?? 'A solução completa para a gestão total do seu negócio.')
@section('og_image', $page->og_image ?? '')
@section('canonical', $page->canonical_url ?? '')

@section('content')
    <style>
        .hero-gradient-erp {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        }
        .erp-feature-icon {
            width: 60px;
            height: 60px;
            background: rgba(13, 110, 253, 0.1);
            color: #0d6efd;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }
        .erp-card {
            border: none;
            border-radius: 20px;
            transition: all 0.3s ease;
            background: #fff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        .erp-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }
        .benefit-card {
            border-radius: 25px;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .benefit-header {
            padding: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }
        .module-badge {
            background: #e9ecef;
            color: #495057;
            padding: 0.4rem 1rem;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-block;
            margin: 0.25rem;
        }
        .custom-modules-section {
            background: #f8f9fa;
            border-radius: 30px;
            padding: 4rem 2rem;
            border: 2px dashed #dee2e6;
        }
    </style>

    <!-- Hero Section -->
    <section class="hero-gradient-erp py-5 min-vh-50 d-flex align-items-center text-white">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-bold mb-3">SISTEMA DE GESTÃO COMPLETO</span>
                    <h1 class="display-3 fw-bold mb-4">ERP Syspanel: Inteligência em Cada Processo</h1>
                    <p class="lead opacity-90 mb-5">
                        A solução definitiva para integrar todos os setores da sua empresa. Do financeiro à produção, com módulos personalizados que crescem com o seu negócio.
                    </p>
                    <div class="d-flex gap-3">
                        <a href="#vantagens" class="btn btn-warning btn-lg px-4 rounded-pill fw-bold text-dark">Conhecer Vantagens</a>
                        <a href="{{ route('contato') }}" class="btn btn-outline-light btn-lg px-4 rounded-pill fw-bold">Solicitar Proposta</a>
                    </div>
                </div>
                <div class="col-lg-5 text-center d-none d-lg-block">
                    <i class="bi bi-pie-chart opacity-20 floating-animation"></i>
                </div>
            </div>
        </div>
    </section>

    <!-- O que é ERP -->
    <section class="py-5">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h2 class="display-5 fw-bold mb-4">O que é um ERP?</h2>
                    <p class="text-muted fs-5 mb-4">
                        ERP (Enterprise Resource Planning) é um sistema que centraliza todas as informações e processos de uma empresa em uma única plataforma. Imagine ter financeiro, vendas, estoque, RH e produção conversando entre si em tempo real.
                    </p>
                    <p class="text-muted fs-5">
                        O <strong>ERP Syspanel</strong> vai além: ele utiliza Inteligência Artificial para analisar seus dados e sugerir melhorias, tornando sua gestão não apenas organizada, mas estratégica.
                    </p>
                </div>
                <div class="col-lg-6">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="erp-card p-4 text-center">
                                <div class="erp-feature-icon mx-auto"><i class="bi bi-link-45deg"></i></div>
                                <h5 class="fw-bold">Integração</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="erp-card p-4 text-center">
                                <div class="erp-feature-icon mx-auto text-success"><i class="bi bi-lightning"></i></div>
                                <h5 class="fw-bold">Agilidade</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="erp-card p-4 text-center">
                                <div class="erp-feature-icon mx-auto text-info"><i class="bi bi-shield-check"></i></div>
                                <h5 class="fw-bold">Segurança</h5>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="erp-card p-4 text-center">
                                <div class="erp-feature-icon mx-auto text-warning"><i class="bi bi-lightbulb"></i></div>
                                <h5 class="fw-bold">Inteligência</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vantagens -->
    <section id="vantagens" class="py-5 bg-light">
        <div class="container py-5">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold">Vantagens do Ecossistema</h2>
                <p class="text-muted">Como o ERP Syspanel beneficia todos os envolvidos no seu negócio</p>
            </div>

            <div class="row g-4">
                <!-- Empresário -->
                <div class="col-md-6 col-lg-4">
                    <div class="benefit-card bg-white h-100 shadow-sm">
                        <div class="benefit-header bg-primary text-white">Para o Empresário</div>
                        <div class="p-4">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-primary mt-1 me-2"></i><span>Visão 360º do negócio em tempo real.</span></li>
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-primary mt-1 me-2"></i><span>Redução drástica de erros e retrabalho.</span></li>
                                <li class="mb-0 d-flex align-items-start"><i class="bi bi-check-lg text-primary mt-1 me-2"></i><span>Decisões seguras baseadas em indicadores (KPIs).</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Funcionários -->
                <div class="col-md-6 col-lg-4">
                    <div class="benefit-card bg-white h-100 shadow-sm">
                        <div class="benefit-header bg-success text-white">Para os Funcionários</div>
                        <div class="p-4">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-success mt-1 me-2"></i><span>Automação de tarefas repetitivas.</span></li>
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-success mt-1 me-2"></i><span>Facilidade no acesso a informações necessárias.</span></li>
                                <li class="mb-0 d-flex align-items-start"><i class="bi bi-check-lg text-success mt-1 me-2"></i><span>Ambiente de trabalho mais organizado e produtivo.</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Empresa -->
                <div class="col-md-6 col-lg-4">
                    <div class="benefit-card bg-white h-100 shadow-sm">
                        <div class="benefit-header bg-dark text-white">Para a Empresa</div>
                        <div class="p-4">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-dark mt-1 me-2"></i><span>Processos padronizados e auditáveis.</span></li>
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-dark mt-1 me-2"></i><span>Melhoria contínua da saúde financeira.</span></li>
                                <li class="mb-0 d-flex align-items-start"><i class="bi bi-check-lg text-dark mt-1 me-2"></i><span>Crescimento sustentável e escalável.</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Clientes -->
                <div class="col-md-6 col-lg-4">
                    <div class="benefit-card bg-white h-100 shadow-sm">
                        <div class="benefit-header bg-info text-white">Para os Clientes</div>
                        <div class="p-4">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-info mt-1 me-2"></i><span>Atendimento mais rápido e preciso.</span></li>
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-info mt-1 me-2"></i><span>Transparência em pedidos e entregas.</span></li>
                                <li class="mb-0 d-flex align-items-start"><i class="bi bi-check-lg text-info mt-1 me-2"></i><span>Melhor experiência de compra/serviço.</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Fornecedores -->
                <div class="col-md-6 col-lg-4">
                    <div class="benefit-card bg-white h-100 shadow-sm">
                        <div class="benefit-header bg-warning text-dark">Para os Fornecedores</div>
                        <div class="p-4">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-warning mt-1 me-2"></i><span>Previsibilidade de demanda e pedidos.</span></li>
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-warning mt-1 me-2"></i><span>Gestão eficiente de recebimentos.</span></li>
                                <li class="mb-0 d-flex align-items-start"><i class="bi bi-check-lg text-warning mt-1 me-2"></i><span>Parceria baseada em dados reais.</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Nuvem vs Local -->
                <div class="col-md-6 col-lg-4">
                    <div class="benefit-card bg-white h-100 shadow-sm">
                        <div class="benefit-header bg-primary text-white"><i class="bi bi-cloud me-2"></i>ERP em Nuvem</div>
                        <div class="p-4">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-primary mt-1 me-2"></i><span><strong>Sem Custos de Hardware:</strong> Não necessita de servidores próprios ou TI local.</span></li>
                                <li class="mb-3 d-flex align-items-start"><i class="bi bi-check-lg text-primary mt-1 me-2"></i><span><strong>Acesso Global:</strong> Trabalhe de qualquer lugar, a qualquer hora, com segurança total.</span></li>
                                <li class="mb-0 d-flex align-items-start"><i class="bi bi-check-lg text-primary mt-1 me-2"></i><span><strong>Atualizações Automáticas:</strong> Seu sistema sempre na última versão, sem paradas.</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Módulos e Personalização -->
    <section class="py-5">
        <div class="container py-5">
            <div class="row mb-5">
                <div class="col-12">
                    <h2 class="display-5 fw-bold mb-3">Módulos que Evoluem com Você</h2>
                    <p class="text-muted fs-5">Nosso sistema é modular. Você começa com o que precisa e expande conforme sua necessidade.</p>
                </div>
            </div>

            <div class="row mb-5">
                <div class="col-12">
                    <div class="d-flex flex-wrap">
                        <span class="module-badge"><i class="bi bi-cash-stack me-2"></i>Financeiro</span>
                        <span class="module-badge"><i class="bi bi-arrow-left-right me-2"></i>Fluxo de Caixa</span>
                        <span class="module-badge"><i class="bi bi-persons me-2"></i>CRM</span>
                        <span class="module-badge"><i class="bi bi-cart me-2"></i>Vendas</span>
                        <span class="module-badge"><i class="bi bi-bag me-2"></i>Compras</span>
                        <span class="module-badge"><i class="bi bi-list-task me-2"></i>Gestão de Projetos</span>
                        <span class="module-badge"><i class="bi bi-graph-up me-2"></i>Plano de Negócios</span>
                        <span class="module-badge"><i class="bi bi-boxes me-2"></i>Estoque</span>
                        <span class="module-badge"><i class="bi bi-building me-2"></i>Produção</span>
                        <span class="module-badge"><i class="bi bi-gears me-2"></i>Produção (PCP)</span>
                        <span class="module-badge"><i class="bi bi-truck me-2"></i>Frotas</span>
                        <span class="module-badge"><i class="bi bi-car-front me-2"></i>Controle de Veículos</span>
                        <span class="module-badge"><i class="bi bi-person-badge me-2"></i>RH</span>
                        <span class="module-badge"><i class="bi bi-robot me-2 text-danger"></i>IA ERP</span>
                        <span class="module-badge"><i class="bi bi-check2-all me-2"></i>Qualidade</span>
                        <span class="module-badge"><i class="bi bi-plus-lg-circle me-2"></i>Outros</span>
                    </div>
                </div>
            </div>

            <div class="custom-modules-section text-center shadow-sm mb-5">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="erp-feature-icon mx-auto bg-primary text-white mb-4">
                            <i class="bi bi-puzzle"></i>
                        </div>
                        <h3 class="fw-bold mb-3">Necessidade Única? Módulo Novo!</h3>
                        <p class="text-muted fs-5 mb-0">
                            Sua empresa tem um processo exclusivo? Nós desenvolvemos e <strong>acrescentamos novos módulos conforme a necessidade específica da sua empresa</strong>. O ERP se molda ao seu negócio, não o contrário.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Fluxo de Caixa Pro Highlight -->
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="row g-0">
                    <div class="col-lg-4 bg-success d-flex align-items-center justify-content-center p-5 text-white">
                        <div class="text-center">
                            <i class="bi bi-cash-coin mb-3"></i>
                            <h3 class="fw-bold">Fluxo de Caixa Pro</h3>
                        </div>
                    </div>
                    <div class="col-lg-8 p-5">
                        <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill fw-bold mb-3">SOLUÇÃO ESPECIALIZADA</span>
                        <h3 class="fw-bold mb-3">Domine suas Finanças com Precisão Cirúrgica</h3>
                        <p class="text-muted fs-5 mb-4">
                            Para empresas que buscam um controle financeiro ainda mais profundo, oferecemos o <strong>Fluxo de Caixa Pro</strong>. Uma ferramenta dedicada para DRE gerencial, conciliação bancária automática e projeções de caixa avançadas.
                        </p>
                        <a href="https://fluxodecaixapro.syspanel.com.br" target="_blank" class="btn btn-success btn-lg rounded-pill fw-bold px-5">
                            <i class="bi bi-box-arrow-up-right me-2"></i>Conhecer Fluxo de Caixa Pro
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-5">
        <div class="container">
            <div class="hero-gradient-erp p-5 rounded-5 text-center text-white shadow-lg">
                <h2 class="display-5 fw-bold mb-4">Pronto para transformar sua gestão?</h2>
                <p class="lead mb-4">O ERP Syspanel é a ferramenta que faltava para sua empresa atingir o próximo nível.</p>
                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    <a href="{{ route('contato') }}" class="btn btn-warning btn-lg px-5 rounded-pill fw-bold shadow text-dark">
                        <i class="bi bi-rocket me-2"></i>Falar com Especialista
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection