@extends('layouts.app')

@section('title', $page->title ?? 'Fluxo de Caixa Pro - Gestão Financeira Inteligente')
@section('meta_description', $page->meta_description ?? 'Domine as finanças da sua empresa com o Fluxo de Caixa Pro. Controle total, DRE automático, IA financeira e acesso de qualquer lugar.')
@section('meta_keywords', $page->meta_keywords ?? 'fluxo de caixa, gestão financeira, dre gerencial, conciliação bancária, ia financeira, syspanel')

@section('content')
    <style>
        .hero-fluxo {
            background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
            padding: 100px 0;
        }
        .feature-box {
            background: #fff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            height: 100%;
            border: 1px solid rgba(0,0,0,0.02);
        }
        .feature-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        }
        .icon-circle {
            width: 70px;
            height: 70px;
            background: rgba(25, 135, 84, 0.1);
            color: #198754;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 20px;
        }
        .stat-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .step-number {
            width: 40px;
            height: 40px;
            background: #198754;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .gradient-text-finance {
            background: linear-gradient(135deg, #134e5e 0%, #198754 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }
    </style>

    <!-- Hero Section -->
    <section class="hero-fluxo text-white position-relative overflow-hidden">
        <div class="container position-relative z-2">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <span class="badge bg-white text-success px-3 py-2 rounded-pill fw-bold mb-3 shadow-sm">
                        <i class="bi bi-shield-check me-2"></i>PRECISÃO FINANCEIRA ABSOLUTA
                    </span>
                    <h1 class="display-3 fw-bold mb-4">Fluxo de Caixa Pro: O Coração Financeiro do Seu Negócio</h1>
                    <p class="lead mb-5 opacity-90">
                        Muito mais que uma planilha. Uma plataforma inteligente que antecipa cenários, automatiza processos e garante que você nunca mais seja pego de surpresa pelo saldo da conta.
                    </p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="https://fluxodecaixapro.syspanel.com.br" target="_blank" class="btn btn-light btn-lg rounded-pill px-5 py-3 fw-bold text-success shadow-lg">
                            <i class="bi bi-rocket me-2"></i>Acessar Agora
                        </a>
                        <a href="{{ route('contato') }}" class="btn btn-outline-light btn-lg rounded-pill px-5 py-3 fw-bold">
                            <i class="bi bi-calendar-check me-2"></i>Agendar Demonstração
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 mt-5 mt-lg-0">
                    <div class="stat-card floating-animation">
                        <div class="d-flex align-items-center mb-4">
                            <div class="icon-circle bg-white text-success mb-0 me-3 shadow-sm">
                                <i class="bi bi-robot"></i>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold">IA Financeira Ativa</h5>
                                <small class="opacity-75">Analisando tendências em tempo real</small>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <small>Saúde do Caixa</small>
                                <small class="fw-bold">98%</small>
                            </div>
                            <div class="progress bg-white bg-opacity-20" style="height: 6px;">
                                <div class="progress-bar bg-white" style="width: 98%"></div>
                            </div>
                        </div>
                        <p class="small mb-0 opacity-80 italic">"A projeção para os próximos 30 dias indica crescimento de 15% na liquidez corrente."</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- O que é -->
    <section class="py-5 bg-white">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <img src="https://img.freepik.com/free-vector/financial-dashboard-concept-illustration_114360-4491.jpg" alt="Fluxo de Caixa" class="img-fluid rounded-4 shadow-lg">
                </div>
                <div class="col-lg-6 ps-lg-5">
                    <h2 class="display-5 fw-bold mb-4">O que é o Fluxo de Caixa e para que serve?</h2>
                    <p class="text-muted fs-5 mb-4">
                        O Fluxo de Caixa é o registro de todas as entradas e saídas de dinheiro da sua empresa. Ele serve como o termômetro da saúde financeira do seu negócio.
                    </p>
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-3">
                                <i class="bi bi-check-circle text-success me-3 mt-1 fs-4"></i>
                                <div>
                                    <h5 class="fw-bold">Entradas</h5>
                                    <p class="small text-muted mb-0">Vendas, recebimentos e aportes.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-start mb-3">
                                <i class="bi bi-check-circle text-danger me-3 mt-1 fs-4"></i>
                                <div>
                                    <h5 class="fw-bold">Saídas</h5>
                                    <p class="small text-muted mb-0">Pagamentos, custos e despesas.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted mt-4">
                        Sem esse controle, você navega no escuro. O <strong>Fluxo de Caixa Pro</strong> traz a luz necessária para você enxergar onde cada centavo está sendo aplicado.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Importância -->
    <section class="py-5 bg-light">
        <div class="container py-5">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold">Por que o controle rigoroso é vital?</h2>
                <p class="text-muted fs-5">A diferença entre o sucesso e o fechamento de uma empresa está na gestão do caixa.</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="feature-box">
                        <div class="icon-circle"><i class="bi bi-eye"></i></div>
                        <h4 class="fw-bold">Previsibilidade</h4>
                        <p class="text-muted">Saiba exatamente quanto terá em caixa daqui a 15, 30 ou 90 dias com base em dados reais e IA.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feature-box">
                        <div class="icon-circle text-primary" style="background: rgba(13,110,253,0.1)"><i class="bi bi-cash"></i></div>
                        <h4 class="fw-bold">Tomada de Decisão</h4>
                        <p class="text-muted">Posso investir agora? Tenho fôlego para uma nova contratação? Decida baseado em números, não em intuição.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feature-box">
                        <div class="icon-circle text-warning" style="background: rgba(255,193,7,0.1)"><i class="bi bi-shield-check"></i></div>
                        <h4 class="fw-bold">Segurança Financeira</h4>
                        <p class="text-muted">Evite o pagamento de juros bancários e multas por atraso através de um cronograma de pagamentos eficiente.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Diferenciais Pro -->
    <section class="py-5 bg-dark text-white">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <h2 class="display-5 fw-bold mb-4">Acesso Global & Inteligência Artificial</h2>
                    <p class="lead opacity-75 mb-4">O Fluxo de Caixa Pro foi construído com as tecnologias mais modernas do mercado.</p>
                    <div class="row">
                        <div class="col-md-6">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-center"><i class="bi bi-cloud text-success me-3"></i> 100% em Nuvem: Acesse de onde estiver, pelo celular ou computador.</li>
                                <li class="mb-3 d-flex align-items-center"><i class="bi bi-cpu text-success me-3"></i> IA Preditiva: Antecipação de inadimplência e sugestões de economia.</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex align-items-center"><i class="bi bi-arrow-repeat text-success me-3"></i> Conciliação Bancária</li>
                                <li class="mb-3 d-flex align-items-center"><i class="bi bi-persons text-success me-3"></i> Sistema Multiusuário: Segurança e controle total de acessos para sua equipe.</li>
                            </ul>
                        </div>
                    </div>
                    <div class="text-center mt-5">
                        <a href="https://fluxodecaixapro.syspanel.com.br" target="_blank" class="btn btn-success btn-lg rounded-pill px-5 fw-bold">Experimentar Agora</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Final -->
    <section class="py-5 bg-white">
        <div class="container py-5 text-center">
            <h2 class="display-4 fw-bold mb-4">Assuma o controle total hoje mesmo!</h2>
            <p class="lead text-muted mb-5">Junte-se aos empresários que profissionalizaram sua gestão financeira com o Fluxo de Caixa Pro.</p>
            <div class="d-flex gap-3 justify-content-center">
                <a href="https://fluxodecaixapro.syspanel.com.br" target="_blank" class="btn btn-success btn-lg rounded-pill px-5 py-3 fw-bold shadow-lg">
                    <i class="bi bi-rocket me-2"></i>Começar Agora
                </a>
            </div>
            <div class="mt-4">
                <p class="text-muted"><i class="bi bi-link-45deg me-2"></i>Acesse: <a href="https://fluxodecaixapro.syspanel.com.br" target="_blank" class="text-success text-decoration-none fw-bold">fluxodecaixapro.syspanel.com.br</a></p>
            </div>
        </div>
    </section>
@endsection