<?php
/* Help Center home / landing.
   In scope (from HelpController::index): $baseUrl, $topicsMeta, $isAdmin. */
$b = rtrim((string) ($baseUrl ?? ''), '/');
$meta = $topicsMeta ?? [];
$byGroup = static function (array $meta, string $g) {
    $r = array_values(array_filter($meta, static fn ($t) => ($t['group'] ?? '') === $g));
    usort($r, static fn ($a, $b) => ($a['order'] ?? 99) <=> ($b['order'] ?? 99));
    return $r;
};
$components = $byGroup($meta, 'components');
$client     = $byGroup($meta, 'client');
$server     = $byGroup($meta, 'server');
$devs       = $byGroup($meta, 'developer');
$hh = static fn ($v) => htmlspecialchars((string) $v, ENT_QUOTES);
$tile = static function (array $t, string $b, callable $hh, bool $dev = false): string {
    return '<a href="' . $hh($b) . '/help/' . urlencode($t['name']) . '" class="help-tile">'
        . '<span class="help-tile-ic"><i class="bi ' . $hh($t['icon']) . '"></i></span>'
        . '<h3>' . $hh($t['label']) . ($dev ? ' <span class="help-badge-dev">dev</span>' : '') . '</h3>'
        . ($t['blurb'] !== '' ? '<p>' . $hh($t['blurb']) . '</p>' : '')
        . '<span class="help-tile-go">Open guide <i class="bi bi-arrow-right"></i></span></a>';
};
?>
<div class="help-home">

    <section class="help-hero">
        <span class="help-eyebrow"><i class="bi bi-life-preserver"></i> <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> Help Center</span>
        <h1>Build database-driven web apps, visually.</h1>
        <p><?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> is a low-code platform: design tables, forms and pages on a visual canvas, wire up events,
           themes, security, dashboards and reports — then generate a complete, standalone PHP application you
           fully own. This is where you learn how every piece fits together.</p>
        <div class="help-hero-stats">
            <div><b><?= count($meta) ?></b><span>Guides</span></div>
            <div><b>Visual</b><span>Designer &amp; pages</span></div>
            <div><b>Themeable</b><span>Light &amp; dark</span></div>
            <div><b>Standalone</b><span>Generated apps</span></div>
        </div>
    </section>

    <div class="help-sec-head">
        <h2><i class="bi bi-compass"></i> How to use this Help Center</h2>
        <p>Two kinds of help, always within reach.</p>
    </div>
    <div class="help-steps">
        <div class="help-step">
            <div class="n">1</div>
            <h4>Browse the guides</h4>
            <p>Pick a topic from the sidebar. Each covers one module or API with copy-ready examples.</p>
        </div>
        <div class="help-step">
            <div class="n">2</div>
            <h4>Search everything</h4>
            <p>Use the search box at the top of the sidebar to jump straight to a keyword across all guides.</p>
        </div>
        <div class="help-step">
            <div class="n">3</div>
            <h4>In-context Guides</h4>
            <p>Most modules have their own <strong>Guide</strong> button built in — open it there for help specific
               to the screen you're on (Designer, Security, Deploy, Update Engine, and more).</p>
        </div>
    </div>

    <?php if ($components): ?>
        <div class="help-sec-head">
            <h2><i class="bi bi-grid-1x2-fill"></i> Component guides</h2>
            <p>Every component you can drop on a page — what it does, and how far you can push it.</p>
        </div>
        <div class="help-grid">
            <?php foreach ($components as $t) echo $tile($t, $b, $hh); ?>
        </div>
    <?php endif; ?>

    <?php if ($client): ?>
        <div class="help-sec-head">
            <h2><i class="bi bi-braces"></i> Client API — JavaScript</h2>
            <p>Everything your event code can do in the browser — controls, grid, Master/Detail, buttons, dialogs.</p>
        </div>
        <div class="help-grid">
            <?php foreach ($client as $t) echo $tile($t, $b, $hh); ?>
        </div>
    <?php endif; ?>

    <?php if ($server): ?>
        <div class="help-sec-head">
            <h2><i class="bi bi-server"></i> Server API — PHP</h2>
            <p>Reference docs for the building blocks you use in server events and custom code.</p>
        </div>
        <div class="help-grid">
            <?php foreach ($server as $t) echo $tile($t, $b, $hh); ?>
        </div>
    <?php endif; ?>

    <?php if ($devs): ?>
        <div class="help-sec-head">
            <h2><i class="bi bi-code-slash"></i> Developer guides</h2>
            <p>Extend the platform itself — visible to owners &amp; administrators.</p>
        </div>
        <div class="help-grid">
            <?php foreach ($devs as $t) echo $tile($t, $b, $hh, true); ?>
        </div>
    <?php endif; ?>

    <div class="help-callout">
        <i class="bi bi-lightbulb"></i>
        <div><strong>New here?</strong> Start in the <strong>Designer</strong> to lay out your tables and pages,
            then explore <strong>Security</strong> and the module guides as you add features. Everything you build
            generates into standalone PHP you can host anywhere.</div>
    </div>

</div>
