<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Campus CFC LITE — Inicio</title>

  <!-- ✅ CFC_FUNC_PATH_FIX_V14.5 — Base absoluta estable -->
  <base href="/frontend/">
  <script>
    console.log("🧩 CFC_SYNC checkpoint: base href → /frontend/");
  </script>

  <!-- CSS principal -->
  <link rel="stylesheet" href="css/variables.css?v=20251031" />
  <link rel="stylesheet" href="css/premium.min.css?v=20251031" />
  <link rel="stylesheet" href="css/exam-extra.css?v=20251031" />

  <script src="js/preload.js?v=20251031" defer></script>

  <style>
    body {
      background: #0b0b0b;
      color: #eee;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Poppins, sans-serif;
      display: grid;
      place-items: center;
      text-align: center;
      min-height: 100vh;
    }
    .card {
      background: linear-gradient(180deg, #111, #0b0b0b);
      border: 1px solid #222;
      border-radius: 10px;
      padding: 40px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      width: 90%;
      max-width: 600px;
    }
    h1 { font-size: 2rem; color: gold; margin-bottom: 8px; }
    .lead { opacity: 0.8; font-size: 1rem; margin: 12px 0 24px; }
    .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px; padding: 12px 20px; border: none;
      font-weight: 600; text-decoration: none; transition: transform .25s, box-shadow .25s;
    }
    .btn-primary {
      background: linear-gradient(90deg, gold, orange); color: #111;
      box-shadow: 0 0 8px rgba(255,215,0,0.4);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 12px rgba(255,215,0,0.6); }
    .btn-ghost { background: #111; color: #fff; border: 1px solid #555; }
    .btn-ghost:hover { color: gold; border-color: gold; }
    .hint { opacity: 0.7; font-size: 0.85rem; margin-top: 14px; }
    .btn-switch-demo {
      background: linear-gradient(90deg, gold, orange);
      color: #111; font-weight: 700; padding: 12px 24px;
      border-radius: 10px; border: none; cursor: pointer;
      transition: transform .2s ease-in-out;
    }
    .btn-switch-demo:hover { transform: scale(1.05); }
  </style>
</head>

<body>
  <div id="loader">
    <img src="img/logo.png" alt="Campus CFC Logo" id="logoCFC">
    <p id="quote"></p>
    <button id="enterBtn">Entrar al Campus</button>
  </div>

  <main class="card">
    <span class="pill">Versión LITE con progreso, exámenes y sonidos 🎧</span>
    <h1>Campus CFC LITE</h1>
    <p class="lead">
      20 módulos (4 capítulos + examen por módulo), progreso, historial y refuerzos motivacionales.
    </p>

    <div class="actions">
      <a class="btn btn-primary" href="modules/index.html?v=20251031" id="enterModules">Entrar a los módulos</a>
      <a class="btn btn-ghost" href="results.html?v=20251031">🧠 Mi historial de exámenes</a>
      <a class="btn btn-ghost" href="pages/repo.html?v=20251031">📁 Repositorio</a>
    </div>

    <div style="margin-top: 24px;">
      <button class="btn-switch-demo" onclick="alert('Modo PREMIUM disponible en Campus V2.0')">
        Cambiar modo DEMO / PREMIUM
      </button>
    </div>

    <p class="hint">
      💡 Sugerencia: guardá este enlace directo a los módulos:<br>
      <code>modules/index.html</code>
    </p>
  </main>

  <div id="footer-placeholder"></div>

  <!-- Scripts -->
  <script src="js/loader.js?v=20251031" defer></script>
  <script src="js/header.js?v=20251031" defer></script>
  <script src="js/footer.js?v=20251031" defer></script>
  <script src="js/auto_injector.js?v=20251031" defer></script>

  <!-- ✅ FIX — Registro correcto del SW dentro de /frontend/ -->
  <script>
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", async () => {
        try {
          const reg = await navigator.serviceWorker.register("/frontend/sw.js", { scope: "/frontend/" });
          console.log("✅ CFC-SYNC V14.5 — SW registrado correctamente:", reg.scope);
        } catch (err) {
          console.error("⚠️ Error al registrar el Service Worker:", err);
        }
      });
    }
  </script>
</body>
</html>
