<?php
require_once __DIR__ . '/includes/lang.php';
require_once __DIR__ . '/includes/header.php';
?>
<main class="container py-5">
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold mb-3"><?php echo __('help'); ?></h1>
        <p class="text-white-50"><?= __('help_subtitle') ?></p>
        <div class="input-group mb-3 mx-auto" style="max-width: 600px;">
            <input type="text" class="form-control form-control-lg bg-dark text-white border-secondary" placeholder="<?= __('help_search_placeholder') ?>">
            <button class="btn btn-primary px-4"><i class="bi bi-search"></i></button>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="card bg-surface border-secondary h-100 p-4 text-center hover-up shadow-sm">
                <i class="bi bi-person-plus fs-1 text-primary mb-3"></i>
                <h4 class="fw-bold text-white"><?= __('getting_started') ?></h4>
                <p class="text-white-50 small"><?= __('getting_started_desc') ?></p>
                <a href="#" class="stretched-link"></a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-surface border-secondary h-100 p-4 text-center hover-up shadow-sm">
                <i class="bi bi-wallet2 fs-1 text-success mb-3"></i>
                <h4 class="fw-bold text-white"><?= __('dep_with_title') ?></h4>
                <p class="text-white-50 small"><?= __('dep_with_desc') ?></p>
                <a href="#" class="stretched-link"></a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-surface border-secondary h-100 p-4 text-center hover-up shadow-sm">
                <i class="bi bi-graph-up-arrow fs-1 text-info mb-3"></i>
                <h4 class="fw-bold text-white"><?= __('trading_tutorials') ?></h4>
                <p class="text-white-50 small"><?= __('trading_tutorials_desc') ?></p>
                <a href="#" class="stretched-link"></a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-surface border-secondary h-100 p-4 text-center hover-up shadow-sm">
                <i class="bi bi-shield-lock fs-1 text-warning mb-3"></i>
                <h4 class="fw-bold text-white"><?= __('sec_acc_title') ?></h4>
                <p class="text-white-50 small"><?= __('sec_acc_desc') ?></p>
                <a href="#" class="stretched-link"></a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-surface border-secondary h-100 p-4 text-center hover-up shadow-sm">
                <i class="bi bi-cpu fs-1 text-danger mb-3"></i>
                <h4 class="fw-bold text-white"><?= __('api_doc_title') ?></h4>
                <p class="text-white-50 small"><?= __('api_doc_desc') ?></p>
                <a href="/api.php" class="stretched-link"></a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-surface border-secondary h-100 p-4 text-center hover-up shadow-sm">
                <i class="bi bi-chat-dots fs-1 text-light mb-3"></i>
                <h4 class="fw-bold text-white"><?= __('contact_sup_title') ?></h4>
                <p class="text-white-50 small"><?= __('contact_sup_desc') ?></p>
                <a href="/support.php" class="stretched-link"></a>
            </div>
        </div>
    </div>
</main>
<style>
.hover-up:hover {
    transform: translateY(-10px);
    border-color: var(--primary) !important;
    transition: all 0.3s;
}
</style>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
