<?php
$stats = [
    ['label' => 'Architecture', 'value' => 'MVC-ready', 'note' => 'Controller → Service → Repository → Model'],
    ['label' => 'Routing', 'value' => 'Working', 'note' => 'Front controller and clean URLs'],
    ['label' => 'Responsive UI', 'value' => 'Ready', 'note' => 'Desktop + mobile navigation'],
    ['label' => 'Phase', 'value' => '5 of 25', 'note' => 'Users, roles & permissions'],
];
?>
<?php require dirname(__DIR__) . '/components/page-header.php'; ?>

<div class="grid grid-4">
    <?php foreach ($stats as $stat): ?>
        <article class="card stat-card">
            <span class="stat-label"><?= htmlspecialchars($stat['label'], ENT_QUOTES, 'UTF-8') ?></span>
            <strong class="stat-value"><?= htmlspecialchars($stat['value'], ENT_QUOTES, 'UTF-8') ?></strong>
            <span class="stat-note"><?= htmlspecialchars($stat['note'], ENT_QUOTES, 'UTF-8') ?></span>
        </article>
    <?php endforeach; ?>
</div>

<section class="grid grid-2 section-gap">
    <article class="card">
        <div class="card-header"><div><h2>Phase 5 users, roles & permissions</h2><p>Foundation components are rendering through the application bootstrap.</p></div><span class="badge badge-success">PASS</span></div>
        <div class="component-stack">
            <div class="demo-row"><span>Buttons</span><div><a class="btn btn-primary" href="#">Primary</a> <a class="btn btn-secondary" href="#">Secondary</a></div></div>
            <div class="demo-row"><span>Alerts</span><div class="alert alert-info compact" role="status">Reusable alert component.</div></div>
            <div class="demo-row"><span>Loading</span><div class="loading compact"><span class="spinner"></span> Loading state</div></div>
            <div class="demo-row"><span>Empty state</span><div class="empty-state compact"><strong>No records</strong><p>Empty-state foundation.</p></div></div>
        </div>
    </article>

    <article class="card">
        <div class="card-header"><div><h2>Database pagination UI</h2><p>UI foundation only; SQL pagination will be implemented in later modules.</p></div></div>
        <div class="table-wrap">
            <table class="data-table">
                <thead><tr><th>Module</th><th>Page size</th><th>Status</th></tr></thead>
                <tbody>
                    <tr><td>Patients</td><td>25</td><td><span class="badge">Foundation</span></td></tr>
                    <tr><td>Sessions</td><td>25</td><td><span class="badge">Foundation</span></td></tr>
                    <tr><td>Invoices</td><td>25</td><td><span class="badge">Foundation</span></td></tr>
                </tbody>
            </table>
        </div>
        <?php require dirname(__DIR__) . '/components/pagination.php'; ?>
    </article>
</section>

<section class="card section-gap">
    <div class="card-header"><div><h2>Phase 5 architecture checklist</h2><p>The Phase 3 application core is now wired through the front controller and route files.</p></div></div>
    <div class="checklist">
        <div>✓ Front controller</div><div>✓ Route file loading</div><div>✓ Router / Request / Response</div><div>✓ Route parameters</div><div>✓ Middleware pipeline</div><div>✓ View + layout system</div><div>✓ Service foundation</div><div>✓ Repository foundation</div><div>✓ PDO database foundation</div><div>✓ Header / sidebar / mobile nav / footer</div><div>✓ Reusable UI components</div><div>✓ Basic CSS + JavaScript</div><div>✓ Error handling</div><div>✓ README + setup guide</div><div>✓ Architecture test page</div>
    </div>
</section>
