<?php
/** @var \BotGuard\Core\View $this */
$this->layout('layouts.app');
$appName = e(config('app.name', 'BotGuard'));
?>
<div class="row align-items-center g-5 py-lg-5">
    <div class="col-lg-6">
        <span class="badge text-bg-primary-subtle text-primary-emphasis mb-3">Enterprise Bot Detection</span>
        <h1 class="display-5 fw-bold mb-3"><?= $appName ?> verifies real humans, blocks bots.</h1>
        <p class="lead text-secondary mb-4">
            A modular scoring engine inspects the user agent, HTTP headers, browser fingerprint,
            behavior and challenge results to produce a 0&ndash;100 human score &mdash; then routes
            each visitor to the right destination.
        </p>
        <div class="d-flex flex-wrap gap-2">
            <a href="/verify" class="btn btn-primary btn-lg px-4"><i class="bi bi-shield-check"></i> Try verification</a>
            <a href="/login" class="btn btn-outline-secondary btn-lg px-4">Dashboard sign in</a>
        </div>
        <div class="row row-cols-3 g-3 mt-4 text-center">
            <div class="col"><div class="fw-bold fs-4">15</div><div class="small text-secondary">Detection modules</div></div>
            <div class="col"><div class="fw-bold fs-4">3</div><div class="small text-secondary">Risk tiers</div></div>
            <div class="col"><div class="fw-bold fs-4">0</div><div class="small text-secondary">External keys needed</div></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card shadow-sm border-0">
            <div class="card-body p-4">
                <h6 class="text-uppercase text-secondary small mb-3">How scoring works</h6>
                <?php foreach ([
                    ['User-Agent & headers', 'Server-side fingerprint of the client', 30],
                    ['Browser fingerprint', 'Canvas, WebGL, fonts, hardware', 15],
                    ['Behavior & timing', 'Mouse, keyboard, scroll, dwell', 30],
                    ['Challenge', 'Self-hosted puzzle or CAPTCHA', 25],
                ] as [$label, $desc, $pct]): ?>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span class="fw-semibold"><?= e($label) ?></span>
                            <span class="text-secondary small"><?= e($desc) ?></span>
                        </div>
                        <div class="progress mt-1" style="height:6px">
                            <div class="progress-bar" style="width: <?= (int) $pct ?>%"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>
