<!DOCTYPE html>
<html lang="<?= esc(service('request')->getLocale()) ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc(lang('Backoffice.loginTitle')) ?></title>
    <link rel="icon" type="image/png" href="<?= base_url('assets/icon.png') ?>">
    <link rel="shortcut icon" type="image/png" href="<?= base_url('assets/icon.png') ?>">
    <link rel="apple-touch-icon" href="<?= base_url('assets/icon.png') ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url('assets/quantum-backoffice.css') ?>">
</head>
<body class="qb-auth-body">
    <div class="pointer-events-none fixed inset-0 overflow-hidden">
        <div class="qb-orb qb-orb--one"></div>
        <div class="qb-orb qb-orb--two"></div>
        <div class="qb-orb qb-orb--three"></div>
    </div>

    <div class="qb-auth-shell">
        <div class="qb-auth-layout">
            <section class="qb-auth-showcase">
                <div class="qb-auth-brand">
                    <a href="<?= site_url('/') ?>"><img src="<?= base_url('assets/quantum-wordmark.svg') ?>" alt="Quantum"></a>
                    <span>Rastreabilidade tecnica confidencial</span>
                </div>

                <div class="eyebrow"><?= esc(lang('Backoffice.demoAccess')) ?></div>
                <h1 class="qb-auth-title">Entrar no cockpit Quantum</h1>
                <p class="qb-auth-lead"><?= esc(lang('Backoffice.loginIntro')) ?></p>

                <div class="qb-auth-stats">
                    <div class="qb-auth-stat">
                        <strong>24/7</strong>
                        <span>Manutenção rastreável pronta para auditoria.</span>
                    </div>
                    <div class="qb-auth-stat">
                        <strong>Audit + chain</strong>
                        <span>Eventos, auditoria e verificação pública no mesmo fluxo.</span>
                    </div>
                    <div class="qb-auth-stat">
                        <strong>Multi-tenant</strong>
                        <span>Empresa, equipa e ativos isolados por workspace.</span>
                    </div>
                </div>

                <div class="qb-auth-canvas" aria-hidden="true">
                    <div class="qb-auth-float qb-auth-float--one">
                        <strong>Lusitania Wind Demo</strong>
                        <span>Tenant de demonstração com manutenções, eventos e equipa pronta.</span>
                    </div>
                    <div class="qb-auth-float qb-auth-float--two">
                        <strong>Intervencao registada</strong>
                        <span>`MI-2026-0003` com hash de rastreabilidade e transacao Polygon mock confirmada.</span>
                    </div>
                    <div class="qb-auth-float qb-auth-float--three">
                        <strong>Workspace operacional</strong>
                        <span>Entrar, explorar analytics, manutenções e estrutura de equipa em segundos.</span>
                    </div>
                </div>
            </section>

            <section class="qb-auth-panel">
                <div class="qb-auth-panel-top">
                    <div class="qb-auth-panel-copy">Acede ao backoffice Quantum com a conta demo ou com as tuas credenciais.</div>
                    <a class="qb-auth-link" href="<?= site_url('register') ?>"><?= esc(lang('Backoffice.registerCta')) ?></a>
                </div>

                <?php if (session()->getFlashdata('error')): ?>
                    <div class="qb-alert qb-alert--error mb-4"><?= esc(session()->getFlashdata('error')) ?></div>
                <?php endif; ?>

                <?php if (session()->getFlashdata('success')): ?>
                    <div class="qb-alert qb-alert--success mb-4"><?= esc(session()->getFlashdata('success')) ?></div>
                <?php endif; ?>

                <?php if (session('errors')): ?>
                    <ul class="qb-alert qb-alert--error mb-4">
                        <?php foreach (session('errors') as $error): ?>
                            <li><?= esc($error) ?></li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>

                <form method="post" action="<?= site_url('login') ?>" class="grid gap-4">
                    <?= csrf_field() ?>
                    <div class="qb-auth-field">
                        <label for="email"><?= esc(lang('Backoffice.email')) ?></label>
                        <input id="email" type="email" name="email" value="<?= esc(old('email', 'demo@quantum.local')) ?>" autocomplete="email">
                    </div>
                    <div class="qb-auth-field">
                        <label for="password"><?= esc(lang('Backoffice.password')) ?></label>
                        <input id="password" type="password" name="password" value="Demo123!" autocomplete="current-password">
                    </div>
                    <div class="qb-auth-actions">
                        <button type="submit"><?= esc(lang('Backoffice.loginAction')) ?></button>
                        <a class="link-btn" href="<?= site_url('register') ?>"><?= esc(lang('Backoffice.registerCta')) ?></a>
                    </div>
                </form>

                <div class="qb-auth-note">
                    <div class="qb-auth-note-card">
                        <strong><?= esc(lang('Backoffice.demoAccess')) ?></strong>
                        <p><?= esc(lang('Backoffice.demoCompany')) ?>: <code>Quantum Wind Operations Demo</code></p>
                        <p><?= esc(lang('Backoffice.email')) ?>: <code>demo@quantum.local</code></p>
                        <p><?= esc(lang('Backoffice.initialPassword')) ?>: <code>Demo123!</code></p>
                    </div>
                </div>
            </section>
        </div>
    </div>
</body>
</html>
