<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erro de Conexão - Manda Receita</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --danger-color: #e74c3c;
            --light-bg: #f8f9fa;
        }

        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .error-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 2rem 0;
        }

        .error-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .error-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1.5rem;
            text-align: center;
        }

        .error-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: #fff;
            opacity: 0.9;
        }

        .error-content {
            padding: 2rem;
        }

        .error-details {
            background-color: var(--light-bg);
            border-radius: 8px;
            margin: 1.5rem 0;
            overflow: hidden;
        }

        .error-details-header {
            padding: 0.75rem 1.25rem;
            background-color: #e9ecef;
            border-bottom: 1px solid #dee2e6;
            cursor: pointer;
            font-weight: 500;
        }

        .error-details-body {
            padding: 1.25rem;
            background-color: white;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            max-height: 200px;
            overflow-y: auto;
        }

        .btn-primary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        .btn-outline-secondary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-secondary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .error-code {
            font-size: 0.8rem;
            color: #6c757d;
            margin-top: 0.5rem;
        }
    </style>
</head>

<body>
    <div class="container error-container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="error-card">
                    <div class="error-header">
                        <div class="error-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <h2 class="mb-0">Erro de Conexão</h2>
                    </div>
                    <div class="error-content">
                        <div class="alert alert-danger">
                            <h5 class="alert-heading"><i class="fas fa-exclamation-circle me-2"></i>Ocorreu um erro ao acessar o sistema</h5>
                            <p class="mb-0">Não foi possível estabelecer conexão com o servidor de banco de dados. Por favor, tente novamente mais tarde ou entre em contato com o suporte técnico.</p>
                        </div>



                        <div class="d-grid gap-3 d-md-flex justify-content-md-center mt-4">
                            <a href="../login.php" class="btn btn-primary px-4">
                                <i class="fas fa-arrow-left me-2"></i>Voltar ao Login
                            </a>

                            <a href="mailto:contato@mandareceita.com.br" class="btn btn-outline-secondary px-4">
                                <i class="fas fa-envelope me-2"></i>Enviar E-mail
                            </a>
                        </div>

                        <div class="text-center mt-4 text-muted small">
                            <p class="mb-1">Se o problema persistir, entre em contato com nossa equipe de suporte:</p>
                            <p class="mb-1">
                                <i class="fas fa-envelope ms-2 me-2"></i>contato@mandareceita.com.br
                            </p>
                            <p class="mb-0">Horário de atendimento: Segunda a Sexta, das 9h às 18h</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Adiciona animação ao botão de detalhes
        document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('.float-end');
                if (icon) {
                    icon.classList.toggle('fa-chevron-down');
                    icon.classList.toggle('fa-chevron-up');
                }
            });
        });
    </script>
</body>

</html>