@extends('layouts.app')

@section('title', $page->title)
@section('meta_description', $page->meta_description)
@section('meta_keywords', $page->meta_keywords)
@section('og_title', $page->og_title)
@section('og_description', $page->og_description)
@section('og_image', $page->og_image)
@section('canonical', $page->canonical_url)

@section('content')
    <style>
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .hero-gradient-alt {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .hero-gradient-tech {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .service-card {
            transition: all 0.3s ease;
            border-radius: 1.5rem;
        }
        .service-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        .feature-icon {
            width: 80px;
            height: 80px;
            transition: transform 0.3s ease;
        }
        .service-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg);
        }
        .pulse-ring {
            animation: pulse-ring 2s infinite;
        }
        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
            }
            70% {
                box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
            }
        }
        .floating-animation {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .rounded-3xl {
            border-radius: 2rem !important;
        }
        .backdrop-blur-sm {
            backdrop-filter: blur(4px);
        }
    </style>

    <section class="hero-gradient min-vh-100 d-flex align-items-center position-relative overflow-hidden">
        <div class="container py-5 position-relative z-2">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <div class="text-white animate-up">
                        <span class="badge bg-white bg-opacity-20 text-white px-4 py-2 rounded-pill fw-bold text-uppercase mb-4 tracking-wider">
                            <i class="bi bi-rocket me-2"></i>Inovação e Tecnologia
                        </span>
                        <h1 class="display-3 fw-bold mb-4 leading-tight">
                            Soluções Digitais de <span class="text-warning">Alta Performance</span>
                        </h1>
                        <p class="lead mb-4 opacity-90 fs-4">
                            Desenvolvemos sistemas inteligentes, frameworks robustos e infraestrutura de ponta para impulsionar a transformação digital da sua empresa.
                        </p>
                        <div class="d-flex gap-3 flex-wrap">
                            <a href="#erp" class="btn btn-warning btn-lg rounded-pill px-5 py-3 fw-bold shadow-lg">
                                <i class="bi bi-graph-up me-2"></i>Conheça o SysERP
                            </a>
                            <a href="#contato" class="btn btn-outline-light btn-lg rounded-pill px-5 py-3 fw-bold">
                                <i class="bi bi-send me-2"></i>Solicitar Orçamento
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 text-center mt-5 mt-lg-0">
                    <div class="floating-animation">
                        <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-3xl p-5 shadow-2xl border border-white border-opacity-20">
                            <i class="bi bi-layers text-white mb-4"></i>
                            <h3 class="text-white fw-bold">Syspanel Suite</h3>
                            <p class="text-white opacity-80">Excelência em cada detalhe</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-absolute top-0 end-0 w-50 h-100 bg-white rounded-start-3xl" style="--bs-bg-opacity: .05; transform: skewX(-10deg);"></div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5 animate-up">
                <h2 class="display-4 fw-bold mb-4">Por Que Escolher a <span class="gradient-text">Syspanel</span>?</h2>
                <p class="lead text-muted mx-auto" style="max-width: 800px;">
                    Somos especialistas em desenvolvimento de software e oferecemos soluções que transformam negócios através da tecnologia.
                </p>
            </div>

            <div class="row g-4 mb-5">
                <div class="col-lg-3 col-md-6 animate-up" style="animation-delay: 0.1s;">
                    <div class="text-center p-4 h-100 service-card">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4 pulse-ring feature-icon">
                            <i class="bi bi-rocket text-primary"></i>
                        </div>
                        <h4 class="h5 fw-bold mb-3">Inovação Constante</h4>
                        <p class="text-muted small mb-0">Tecnologia de ponta em todos os projetos para garantir sua competitividade.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 animate-up" style="animation-delay: 0.2s;">
                    <div class="text-center p-4 h-100 service-card">
                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4 pulse-ring feature-icon">
                            <i class="bi bi-shield-check text-success"></i>
                        </div>
                        <h4 class="h5 fw-bold mb-3">Segurança Robusta</h4>
                        <p class="text-muted small mb-0">Proteção avançada de dados e sistemas seguindo os mais altos padrões.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 animate-up" style="animation-delay: 0.3s;">
                    <div class="text-center p-4 h-100 service-card">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4 pulse-ring feature-icon">
                            <i class="bi bi-headset text-warning"></i>
                        </div>
                        <h4 class="h5 fw-bold mb-3">Suporte Especializado</h4>
                        <p class="text-muted small mb-0">Equipe técnica pronta para auxiliar sua empresa em qualquer desafio.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 animate-up" style="animation-delay: 0.4s;">
                    <div class="text-center p-4 h-100 service-card">
                        <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4 pulse-ring feature-icon">
                            <i class="bi bi-trophy text-info"></i>
                        </div>
                        <h4 class="h5 fw-bold mb-3">Qualidade Garantida</h4>
                        <p class="text-muted small mb-0">Entrega de projetos com excelência técnica e foco em resultados reais.</p>
            </div>
        </div>
    </section>

    <section id="erp" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5 animate-up">
                <span class="badge bg-primary bg-opacity-10 text-primary px-4 py-2 rounded-pill fw-bold text-uppercase mb-3">
                    <i class="bi bi-graph-up me-2"></i>Gestão Empresarial
                </span>
                <h2 class="display-4 fw-bold">Sistemas ERP <span class="gradient-text">Inteligentes</span></h2>
                <p class="lead text-muted">Plataformas completas para integrar e otimizar todos os processos do seu negócio</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-6 animate-up" style="animation-delay: 0.1s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-primary me-4">
                                    <i class="bi bi-database"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">SysERP</h3>
                                    <span class="badge bg-primary px-3 py-2 rounded-pill">ERP Completo</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Plataforma online desenvolvida para interligar e auxiliar na organização e gestão de diversas áreas da empresa, possibilitando integrações e controles nos processos gerenciais.
                            </p>
                            <h5 class="fw-bold mb-3">Funcionalidades Principais:</h5>
                            <div class="row g-2 mb-4">
                                <div class="col-md-6">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Gestão Financeira</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Controle de Estoque</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Gestão de Vendas</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Produção e Serviços</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Relatórios Avançados</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Personalização</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="https://erp.syspanel.com.br" target="_blank" class="btn btn-primary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-box-arrow-up-right me-2"></i>Acessar SysERP
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de saber mais sobre o SysERP" target="_blank" class="btn btn-outline-primary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.15s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-success me-4">
                                    <i class="bi bi-cash-coin"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Fluxo de Caixa Pro</h3>
                                    <span class="badge bg-success px-3 py-2 rounded-pill">Gestão Financeira Avançada</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Especializado em controle financeiro rigoroso, oferecendo ferramentas para gestão de fluxo de caixa, DRE gerencial e previsibilidade total para sua empresa.
                            </p>
                            <h5 class="fw-bold mb-3">Recursos Avançados:</h5>
                            <div class="row g-2 mb-4">
                                <div class="col-md-6">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>DRE Automático</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Conciliação OFX</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Gráficos em Tempo Real</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Previsão de Saldo</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Gestão de Contas</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Multi-Empresa</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="https://fluxodecaixapro.syspanel.com.br" target="_blank" class="btn btn-success rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-box-arrow-up-right me-2"></i>Acessar Fluxo de Caixa Pro
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de saber mais sobre o Fluxo de Caixa Pro" target="_blank" class="btn btn-outline-success rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-10 col-md-10 mx-auto animate-up" style="animation-delay: 0.2s;">
                    <div class="card border-0 shadow-lg h-100 hero-gradient rounded-3xl">
                        <div class="card-body p-5 text-white">
                            <h3 class="h3 fw-bold mb-4">Por que escolher o SysERP?</h3>
            <div class="row g-4 justify-content-center">
                                <div class="col-md-4">
                                    <div class="d-flex align-items-start mb-4 mb-md-0">
                                        <div class="bg-white bg-opacity-20 rounded-circle p-3 me-3">
                                            <i class="bi bi-arrow-repeat"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">Integração em Tempo Real</h5>
                                            <p class="opacity-90">Todos os setores da empresa conectados e sincronizados instantaneamente, eliminando falhas de comunicação.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-start mb-4 mb-md-0">
                                        <div class="bg-white bg-opacity-20 rounded-circle p-3 me-3">
                                            <i class="bi bi-gear"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">Personalização Total</h5>
                                            <p class="opacity-90">Adaptamos o sistema às necessidades específicas do seu negócio, criando módulos exclusivos se necessário.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-white bg-opacity-20 rounded-circle p-3 me-3">
                                            <i class="bi bi-bar-chart"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">Relatórios Inteligentes</h5>
                                            <p class="opacity-90">Dashboard completo com métricas e indicadores de performance para tomadas de decisão rápidas.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="frameworks" class="py-5">
        <div class="container">
            <div class="text-center mb-5 animate-up">
                <span class="badge bg-info bg-opacity-10 text-info px-4 py-2 rounded-pill fw-bold text-uppercase mb-3">
                    <i class="bi bi-code-slash me-2"></i>Desenvolvimento Web
                </span>
                <h2 class="display-4 fw-bold">Frameworks PHP <span class="gradient-text">Profissionais</span></h2>
                <p class="lead text-muted">Ferramentas poderosas para desenvolvimento de aplicações web modernas e escaláveis</p>
            </div>

            <div class="row g-4 justify-content-center">
                <div class="col-lg-8 col-md-10 mx-auto animate-up" style="animation-delay: 0.2s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-danger me-4">
                                    <i class="bi bi-diagram-2"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">SysMVC</h3>
                                    <span class="badge bg-danger px-3 py-2 rounded-pill">Framework PHP</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Framework PHP poderoso e flexível para desenvolvimento de aplicações web com arquitetura MVC clássica.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-lg text-success me-2"></i>Arquitetura MVC robusta</li>
                                <li class="mb-2"><i class="bi bi-check-lg text-success me-2"></i>Flexibilidade total</li>
                                <li class="mb-2"><i class="bi bi-check-lg text-success me-2"></i>Ideal para projetos complexos</li>
                                <li class="mb-2"><i class="bi bi-check-lg text-success me-2"></i>Desenvolvimento ágil</li>
                            </ul>
                            <a href="https://sysmvc.syspanel.com.br" target="_blank" class="btn btn-danger rounded-pill fw-bold px-4 py-2">
                                <i class="bi bi-box-arrow-up-right me-2"></i>Acessar SysMVC
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5 animate-up">
                <span class="badge bg-success bg-opacity-10 text-success px-4 py-2 rounded-pill fw-bold text-uppercase mb-3">
                    <i class="bi bi-hdd-network me-2"></i>Hospedagem
                </span>
                <h2 class="display-4 fw-bold">Infraestrutura <span class="gradient-text">Profissional</span></h2>
                <p class="lead text-muted">Soluções completas de hospedagem profissional para sua aplicação web</p>
            </div>

            <div class="row g-4 justify-content-center">
                <div class="col-lg-10 col-md-10 mx-auto animate-up" style="animation-delay: 0.1s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-success me-4">
                                    <i class="bi bi-hdd-network"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">SysHost</h3>
                                    <span class="badge bg-success px-3 py-2 rounded-pill">Hospedagem Profissional</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Hospedagem profissional com planos personalizados para sites, aplicativos, Laravel, WordPress e projetos SysMVC. Infraestrutura de alto desempenho.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Infraestrutura de alto desempenho</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Suporte especializado 24/7</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Planos flexíveis e personalizados</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Backup automático</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="https://host.syspanel.com.br" target="_blank" class="btn btn-success rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-box-arrow-up-right me-2"></i>Acessar SysHost
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de informações sobre hospedagem" target="_blank" class="btn btn-outline-success rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5 animate-up">
                <span class="badge bg-primary bg-opacity-10 text-primary px-4 py-2 rounded-pill fw-bold text-uppercase mb-3">
                    <i class="bi bi-laptop me-2"></i>Serviços Adicionais
                </span>
                <h2 class="display-4 fw-bold">Soluções <span class="gradient-text">Complementares</span></h2>
                <p class="lead text-muted">Serviços especializados para complementar sua infraestrutura digital</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-6 animate-up" style="animation-delay: 0.1s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-primary me-4">
                                    <i class="bi bi-globe"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Registro de Domínios</h3>
                                    <span class="badge bg-primary px-3 py-2 rounded-pill">Identidade Digital</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Registramos seu domínio nacional ou internacional para proteger sua identidade digital e garantir presença online profissional para sua empresa.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Registro nacional e internacional</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Gestão de DNS</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Gestão de renovações</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Proteção de identidade</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('contato') }}" class="btn btn-primary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de registrar um domínio" target="_blank" class="btn btn-outline-primary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.15s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-primary me-4">
                                    <i class="bi bi-registered"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Registro de Marcas</h3>
                                    <span class="badge bg-primary px-3 py-2 rounded-pill">INPI</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Proteção legal da sua marca junto ao INPI. Garantimos a exclusividade de uso do seu nome e logotipo em todo o território nacional.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Pesquisa de viabilidade</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Protocolo de registro</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Acompanhamento processual</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Defesa e oposições</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('contato') }}" class="btn btn-primary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de registrar uma marca no INPI" target="_blank" class="btn btn-outline-primary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.2s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-info me-4">
                                    <i class="bi bi-envelope-open"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Emails Corporativos</h3>
                                    <span class="badge bg-info px-3 py-2 rounded-pill">Comunicação</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Hospedagem de emails com seu domínio próprio. Infraestrutura robusta com proteção avançada e alta disponibilidade.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Emails personalizados</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Proteção antivírus e antispam</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Webmail moderno</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Sincronização mobile</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('contato') }}" class="btn btn-info rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de contratar hospedagem de emails" target="_blank" class="btn btn-outline-info rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.3s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-warning me-4">
                                    <i class="bi bi-laptop"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Desenvolvimento Web</h3>
                                    <span class="badge bg-warning px-3 py-2 rounded-pill">Web Design</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Criamos sites modernos, responsivos e otimizados para buscadores (SEO). Do site institucional ao e-commerce completo.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Sites responsivos</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Otimização SEO</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>E-commerce integrado</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Foco em conversão</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('contato') }}" class="btn btn-warning rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de um orçamento para desenvolvimento de site" target="_blank" class="btn btn-outline-warning rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.4s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-danger me-4">
                                    <i class="bi bi-code-slash"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Softwares Sob Medida</h3>
                                    <span class="badge bg-danger px-3 py-2 rounded-pill">Sistemas</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Desenvolvemos softwares personalizados para atender necessidades específicas. Sistemas desktop, web e mobile.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Sistemas personalizados</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Aplicativos mobile</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Integração de APIs</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Suporte contínuo</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('contato') }}" class="btn btn-danger rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de um orçamento para desenvolvimento de software" target="_blank" class="btn btn-outline-danger rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.5s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-purple bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-4" style="background-color: rgba(111, 66, 193, 0.1); color: #6f42c1;">
                                    <i class="bi bi-robot"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">ChatBots com IA</h3>
                                    <span class="badge px-3 py-2 rounded-pill" style="background-color: #6f42c1;">Inteligência Artificial</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Implementamos assistentes virtuais inteligentes para atendimento automático de clientes. ChatBots que respondem sobre sua empresa, produtos e serviços 24 horas por dia.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Atendimento 24/7 automático</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Base de conhecimento personalizada</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Integração com Inteligência Artificial</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Coleta de contatos e avaliações</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('contato') }}" class="btn rounded-pill fw-bold px-4 py-2" style="background-color: #6f42c1; color: white;">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de saber mais sobre o serviço de implantação de ChatBot com IA" target="_blank" class="btn btn-outline-purple rounded-pill fw-bold px-4 py-2" style="color: #6f42c1; border-color: #6f42c1;">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.5s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-dark bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center text-dark me-4">
                                    <i class="bi bi-terminal"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Servidores Linux</h3>
                                    <span class="badge bg-dark px-3 py-2 rounded-pill">Local / Nuvem</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Implantação e configuração de servidores Linux em infraestrutura local ou nuvem. Alta disponibilidade, segurança e desempenho otimizado.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Implantação local e nuvem</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Configuração e hardening</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Monitoramento 24/7</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Alta disponibilidade</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('servidores-linux') }}" class="btn btn-dark rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-info-circle me-2"></i>Saiba Mais
                                </a>
                                <a href="{{ route('contato') }}" class="btn btn-outline-secondary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de informações sobre implantação de servidores Linux" target="_blank" class="btn btn-outline-dark rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 animate-up" style="animation-delay: 0.6s;">
                    <div class="card border-0 shadow-lg h-100 service-card">
                        <div class="card-body p-5">
                            <div class="d-flex align-items-center mb-4">
                                <div class="feature-icon bg-purple bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-4" style="color: #6f42c1;">
                                    <i class="bi bi-robot"></i>
                                </div>
                                <div>
                                    <h3 class="h3 fw-bold mb-1">Assistentes Digitais com IA</h3>
                                    <span class="badge px-3 py-2 rounded-pill" style="background-color: #6f42c1;">Inteligência Artificial</span>
                                </div>
                            </div>
                            <p class="text-muted mb-4 fs-5">
                                Implantação de assistentes digitais inteligentes com inteligência artificial para automatizar atendimento, suporte e processos internos da sua empresa.
                            </p>
                            <ul class="list-unstyled mb-4">
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Chatbots inteligentes</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Automação de atendimento</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Integração com plataformas</li>
                                <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>Personalização por negócio</li>
                            </ul>
                            <div class="d-flex gap-3 flex-wrap">
                                <a href="{{ route('assistentes-digitais-ia') }}" class="btn rounded-pill fw-bold px-4 py-2" style="background-color: #6f42c1; color: #fff;">
                                    <i class="bi bi-info-circle me-2"></i>Saiba Mais
                                </a>
                                <a href="{{ route('contato') }}" class="btn btn-outline-secondary rounded-pill fw-bold px-4 py-2">
                                    <i class="bi bi-envelope me-2"></i>Solicitar
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}?text=Olá! Gostaria de informações sobre assistentes digitais com IA" target="_blank" class="btn rounded-pill fw-bold px-4 py-2" style="border: 1px solid #6f42c1; color: #6f42c1;">
                                    <i class="bi bi-whatsapp me-2"></i>WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 hero-gradient">
        <div class="container py-4">
            <div class="row align-items-center">
                <div class="col-lg-6 text-white mb-5 mb-lg-0 animate-up">
                    <h2 class="display-4 fw-bold mb-4">Precisa de Uma Solução <span class="text-warning">Personalizada</span>?</h2>
                    <p class="lead mb-4 opacity-90 fs-4">
                        Desenvolvemos sistemas sob medida para atender necessidades específicas do seu negócio. Nossa equipe tem experiência em projetos complexos e inovadores.
                    </p>
                    <ul class="list-unstyled mb-4">
                        <li class="mb-3 d-flex align-items-center">
                            <div class="bg-white bg-opacity-20 rounded-circle p-2 me-3">
                                <i class="bi bi-check-lg text-warning"></i>
                            </div>
                            <span class="fs-5">Análise completa dos requisitos</span>
                        </li>
                        <li class="mb-3 d-flex align-items-center">
                            <div class="bg-white bg-opacity-20 rounded-circle p-2 me-3">
                                <i class="bi bi-check-lg text-warning"></i>
                            </div>
                            <span class="fs-5">Desenvolvimento ágil e iterativo</span>
                        </li>
                        <li class="mb-3 d-flex align-items-center">
                            <div class="bg-white bg-opacity-20 rounded-circle p-2 me-3">
                                <i class="bi bi-check-lg text-warning"></i>
                            </div>
                            <span class="fs-5">Suporte contínuo e atualizações</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <div class="bg-white bg-opacity-20 rounded-circle p-2 me-3">
                                <i class="bi bi-check-lg text-warning"></i>
                            </div>
                            <span class="fs-5">Treinamento completo da equipe</span>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-6 animate-up" style="animation-delay: 0.2s;">
                    <div class="card border-0 shadow-2xl bg-white rounded-3xl overflow-hidden">
                        <div class="card-body p-5">
                            <div class="text-center mb-4">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                    <i class="bi bi-send text-primary"></i>
                                </div>
                                <h3 class="fw-bold mb-2">Solicite um Orçamento</h3>
                                <p class="text-muted">Entre em contato e descubra como podemos transformar seu negócio através da tecnologia.</p>
                            </div>
                            <div class="d-grid gap-3">
                                <a href="{{ route('contato') }}" class="btn btn-primary btn-lg rounded-pill fw-bold py-3 shadow-lg">
                                    <i class="bi bi-envelope me-2"></i>Enviar Mensagem
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $company->phone) }}" target="_blank" class="btn btn-success btn-lg rounded-pill fw-bold py-3 shadow-lg">
                                    <i class="bi bi-whatsapp me-2"></i>Falar no WhatsApp
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection