<?php
declare(strict_types=1);
$bp = Auth::basePath();
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Education demo — <?= h(cfg('app_name')) ?></title>
  <script>
    (function () {
      var t = localStorage.getItem('crash_console_theme');
      if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
    })();
  </script>
  <link rel="stylesheet" href="<?= h($bp) ?>/assets/css/app.css">
  <script src="<?= h($bp) ?>/assets/js/cookie_consent.js" defer></script>
  <?php AnalyticsHead::render('live_education'); ?>
  <script src="<?= h($bp) ?>/assets/js/live_cast_webrtc.js" defer></script>
  <script src="<?= h($bp) ?>/assets/js/live_education.js" defer></script>
</head>
<body class="live-page" data-base-path="<?= h($bp) ?>" data-view="live_education">
  <main id="live-education-app" class="live-shell">
    <header class="live-header">
      <a href="<?= h(Auth::projectBasePath()) ?>/" class="live-brand">← Back to the console</a>
      <span class="tag-pill">Education demo</span>
    </header>
    <section class="card card--lift live-card">
      <h1>Try screen sharing in your browser</h1>
      <p class="muted">Free demo up to 5 minutes. No install required — great for first-time visitors.</p>
      <p id="edu-status" class="reports-status muted" aria-live="polite">Ready when you are.</p>
      <p class="live-timer-label">Time left: <strong id="edu-timer">5:00</strong></p>
      <video id="edu-preview" class="live-preview" playsinline muted autoplay hidden></video>
      <div id="edu-share" class="live-share card card--lift" hidden></div>
      <pre id="edu-stats" class="live-stats-nerds" hidden aria-live="polite"></pre>
      <div class="live-actions">
        <button type="button" class="btn btn--primary" id="edu-start">Start screen share</button>
        <button type="button" class="btn" id="edu-stop">Stop</button>
        <button type="button" class="btn btn--ghost" id="edu-notify">Enable notifications</button>
      </div>
      <p class="muted graphs-footnote">
        WebRTC P2P (no SFU): share the viewer link or QR. Same REST signaling API supports future mobile cast to browser on LAN.
      </p>
    </section>
  </main>
  <?php require __DIR__ . '/partials/cookie_consent.php'; ?>
  <?php platform_render_footer(); ?>
</body>
</html>
