<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learning Shell</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --shell-nav-h:      60px;
      --shell-footer-h:   72px;
      --lc-accent:         #e91e63;
      --lc-accent-inverted:#ffffff;
      --lc-bg:             #0f0f0f;
      --lc-surface:        #1a1a1a;
      --lc-border:         rgba(255,255,255,0.08);
      --lc-border-strong:  rgba(255,255,255,0.2);
      --lc-text:           rgba(255,255,255,0.92);
      --lc-text-muted:     rgba(255,255,255,0.45);
      --lc-progress:       #e91e63;
      --lc-progress-bg:    rgba(255,255,255,0.12);
      --lc-radius:         12px;
      --lc-radius-lg:      20px;
      --lc-transition:     0.28s cubic-bezier(0.4, 0, 0.2, 1);
      --lc-overlay:        rgba(0,0,0,0.82);
      --lc-btn:            #e91e63;
      --lc-btn-inverted:   #ffffff;
      --lc-btn-hover:      #c2185b;
    }

    html, body {
      height: 100%;
      background: var(--lc-bg);
      color: var(--lc-text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    #lc-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--shell-nav-h);
      background: var(--lc-surface);
      border-bottom: 1px solid var(--lc-border);
      display: flex;
      align-items: center;
      padding: 0 1.5rem;
      gap: 1rem;
      z-index: 100;
    }

    #lc-lesson-title {
      font-size: 0.95rem;
      font-weight: 600;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    #lc-progress-track {
      flex: 0 0 160px;
      height: 4px;
      background: var(--lc-progress-bg);
      border-radius: 2px;
      overflow: hidden;
    }
    #lc-progress-bar {
      height: 100%;
      width: 0%;
      background: var(--lc-progress);
      border-radius: 2px;
      transition: width var(--lc-transition);
    }
    #lc-progress-pct {
      font-size: 0.75rem;
      color: var(--lc-text-muted);
      white-space: nowrap;
    }

    #lc-page-dots { display: flex; gap: 6px; align-items: center; }
    .lc-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--lc-border);
      border: none; cursor: pointer; padding: 0;
      transition: background var(--lc-transition), transform var(--lc-transition);
    }
    .lc-dot.active { background: var(--lc-accent); transform: scale(1.4); }
    .lc-dot.done   { background: rgba(233,30,99,0.4); }

    #lc-main {
      padding-top: var(--shell-nav-h);
      padding-bottom: var(--shell-footer-h);
      min-height: 100%;
    }

    #lc-page-header {
      padding: 1.5rem 1.5rem 1rem;
      display: flex;
      align-items: baseline;
      gap: 1rem;
    }
    #lc-page-title {
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    #lc-page-label {
      font-size: 0.8rem;
      color: var(--lc-text-muted);
      margin-left: auto;
      white-space: nowrap;
    }

    #lc-components {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 0 1.5rem;
    }

    .lc-component-wrapper {
      border-radius: var(--lc-radius);
      overflow: hidden;
      border: 1px solid var(--lc-border);
      position: relative;
    }
    .lc-component-wrapper.lc-completed {
      border-color: rgba(233,30,99,0.5);
    }
    .lc-component-wrapper.lc-completed::after {
      content: '✓';
      position: absolute;
      top: 10px; right: 14px;
      width: 22px; height: 22px;
      background: var(--lc-accent);
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      line-height: 22px;
      text-align: center;
      z-index: 10;
      pointer-events: none;
    }

    #lc-footer {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: var(--shell-footer-h);
      background: var(--lc-surface);
      border-top: 1px solid var(--lc-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.5rem;
      z-index: 100;
    }

    .lc-nav-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.4rem;
      border-radius: 8px;
      border: 1px solid var(--lc-border-strong);
      background: transparent;
      color: var(--lc-text);
      font-family: inherit;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: background var(--lc-transition), border-color var(--lc-transition);
    }
    .lc-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); }
    .lc-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
    .lc-nav-btn.primary {
      background: var(--lc-btn);
      border-color: var(--lc-btn);
      color: var(--lc-btn-inverted);
    }
    .lc-nav-btn.primary:hover:not(:disabled) {
      background: var(--lc-btn-hover);
      border-color: var(--lc-btn-hover);
    }

    #lc-completion-overlay {
      position: fixed; inset: 0;
      background: var(--lc-overlay);
      display: flex; align-items: center; justify-content: center;
      z-index: 200; padding: 2rem;
    }
    #lc-completion-overlay[hidden] { display: none; }
    .lc-completion-card {
      background: var(--lc-surface);
      border: 1px solid var(--lc-border);
      border-radius: var(--lc-radius-lg);
      padding: 3rem 2.5rem;
      max-width: 440px; width: 100%;
      text-align: center;
    }
    .lc-completion-icon {
      width: 64px; height: 64px;
      background: rgba(233,30,99,0.15);
      border-radius: 50%;
      margin: 0 auto 1.5rem;
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem;
    }
    .lc-completion-card h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.75rem; }
    .lc-completion-card p  { color: var(--lc-text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; }
    }
    @media (max-width: 600px) {
      #lc-progress-track { flex: 0 0 80px; }
      #lc-components, #lc-page-header, #lc-footer { padding-left: 0.75rem; padding-right: 0.75rem; }
    }
  </style>
</head>

<body>

  <nav id="lc-nav" role="navigation" aria-label="Lesson navigation">
    <span id="lc-lesson-title" aria-live="polite"></span>
    <div id="lc-page-dots" role="tablist" aria-label="Pages"></div>
    <div id="lc-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Overall lesson progress">
      <div id="lc-progress-bar"></div>
    </div>
    <span id="lc-progress-pct" aria-hidden="true">0%</span>
  </nav>

  <main id="lc-main" tabindex="-1">
    <header id="lc-page-header">
      <h1 id="lc-page-title"></h1>
      <span id="lc-page-label" aria-live="polite"></span>
    </header>
    <div id="lc-components" aria-live="polite" aria-label="Learning content"></div>
  </main>

  <footer id="lc-footer">
    <button id="lc-btn-back" class="lc-nav-btn" aria-label="Go to previous page">← Back</button>
    <button id="lc-btn-next" class="lc-nav-btn primary" aria-label="Go to next page">Next →</button>
  </footer>

  <div id="lc-completion-overlay" role="dialog" aria-modal="true" aria-labelledby="lc-completion-title" hidden>
    <div class="lc-completion-card">
      <div class="lc-completion-icon" aria-hidden="true">🎉</div>
      <h2 id="lc-completion-title" tabindex="-1">You're done!</h2>
      <p id="lc-completion-message">You've completed this lesson. Your progress has been saved.</p>
      <button class="lc-nav-btn primary" onclick="document.getElementById('lc-completion-overlay').hidden=true">Close</button>
    </div>
  </div>

  <script>
  // ── Lesson config (inlined — no fetch required) ──────────────────────────
  var LESSON = {
    title: "mindboost. Learning Demo",
    completionMessage: "You've completed this lesson. Your progress has been saved.",
    pages: [
      {
        id: "p1",
        label: "Introduction",
        components: [
          {
            id: "c-intro-carousel",
            label: "Key Concepts",
            src: "components/card-carousel/index.html",
            required: true,
            height: "620px"
          }
        ]
      }
    ]
  };

  // ── Shell runtime ────────────────────────────────────────────────────────
  (function () {
    var pages        = LESSON.pages || [];
    var currentPage  = 0;
    var compState    = {};   // componentId → { pageIdx, required, completed, iframe, wrapper }

    // DOM refs
    var titleEl      = document.getElementById('lc-lesson-title');
    var dotsEl       = document.getElementById('lc-page-dots');
    var progBar      = document.getElementById('lc-progress-bar');
    var progPct      = document.getElementById('lc-progress-pct');
    var progTrack    = document.getElementById('lc-progress-track');
    var pageTitleEl  = document.getElementById('lc-page-title');
    var pageLabelEl  = document.getElementById('lc-page-label');
    var compsEl      = document.getElementById('lc-components');
    var btnBack      = document.getElementById('lc-btn-back');
    var btnNext      = document.getElementById('lc-btn-next');
    var overlay      = document.getElementById('lc-completion-overlay');
    var overlayMsg   = document.getElementById('lc-completion-message');

    titleEl.textContent = LESSON.title || 'Lesson';
    if (overlayMsg && LESSON.completionMessage) overlayMsg.textContent = LESSON.completionMessage;

    // Page dots
    var dots = pages.map(function (page, i) {
      var btn = document.createElement('button');
      btn.className = 'lc-dot';
      btn.setAttribute('aria-label', page.label || ('Page ' + (i + 1)));
      btn.addEventListener('click', function () { goToPage(i); });
      dotsEl.appendChild(btn);
      return btn;
    });

    // postMessage listener
    window.addEventListener('message', function (e) {
      var d = e.data;
      if (!d || !d.type || !d.componentId) return;
      var state = compState[d.componentId];
      if (!state) return;

      if (d.type === 'lc:ready') {
        try {
          state.iframe.contentWindow.postMessage({
            type: 'lc:init',
            componentId: d.componentId,
            pageId: (pages[state.pageIdx] || {}).id || '',
            config: {},
            themeUrl: ''
          }, '*');
        } catch (err) {}
      }

      if (d.type === 'lc:progress') {
        updateProgress();
      }

      if (d.type === 'lc:complete' && !state.completed) {
        state.completed = true;
        if (state.wrapper) state.wrapper.classList.add('lc-completed');
        updateProgress();
        checkComplete();
      }

      if (d.type === 'lc:resize' && typeof d.height === 'number') {
        state.iframe.style.height = d.height + 'px';
      }
    });

    function renderPage(idx) {
      var page = pages[idx];
      if (!page) return;

      compsEl.innerHTML = '';
      pageTitleEl.textContent = page.label || '';
      pageLabelEl.textContent = (idx + 1) + ' / ' + pages.length;

      dots.forEach(function (dot, i) {
        var done = isPageDone(i);
        dot.className = 'lc-dot' + (i === idx ? ' active' : '') + (done ? ' done' : '');
      });

      btnBack.disabled = idx === 0;
      btnNext.textContent = idx === pages.length - 1 ? 'Finish' : 'Next →';

      (page.components || []).forEach(function (comp) {
        if (!compState[comp.id]) {
          compState[comp.id] = { pageIdx: idx, required: comp.required !== false, completed: false, iframe: null, wrapper: null };
        }

        var wrapper = document.createElement('div');
        wrapper.className = 'lc-component-wrapper' + (compState[comp.id].completed ? ' lc-completed' : '');

        var iframe = document.createElement('iframe');
        iframe.name  = comp.id;
        iframe.src   = comp.src;
        iframe.title = comp.label || comp.id;
        iframe.setAttribute('sandbox', 'allow-scripts allow-forms allow-popups allow-modals allow-downloads');
        iframe.style.cssText = 'width:100%;height:' + (comp.height || '500px') + ';border:none;display:block;';

        compState[comp.id].iframe  = iframe;
        compState[comp.id].wrapper = wrapper;

        wrapper.appendChild(iframe);
        compsEl.appendChild(wrapper);
      });

      updateProgress();
    }

    function isPageDone(idx) {
      var page = pages[idx];
      if (!page) return false;
      return (page.components || []).filter(function (c) { return c.required !== false; })
                                    .every(function (c) { return compState[c.id] && compState[c.id].completed; });
    }

    function updateProgress() {
      var all = [], done = 0;
      pages.forEach(function (p) {
        (p.components || []).forEach(function (c) { if (c.required !== false) all.push(c.id); });
      });
      all.forEach(function (id) { if (compState[id] && compState[id].completed) done++; });
      var pct = all.length ? Math.round(done / all.length * 100) : 0;
      progBar.style.width = pct + '%';
      progPct.textContent = pct + '%';
      progTrack.setAttribute('aria-valuenow', pct);
    }

    function checkComplete() {
      var all = [];
      pages.forEach(function (p) {
        (p.components || []).forEach(function (c) { if (c.required !== false) all.push(c.id); });
      });
      if (all.length && all.every(function (id) { return compState[id] && compState[id].completed; })) {
        overlay.hidden = false;
        var h = overlay.querySelector('[tabindex="-1"]');
        if (h) h.focus();
      }
    }

    function goToPage(idx) {
      if (idx < 0 || idx >= pages.length) return;
      currentPage = idx;
      renderPage(idx);
      window.scrollTo(0, 0);
    }

    btnBack.addEventListener('click', function () { goToPage(currentPage - 1); });
    btnNext.addEventListener('click', function () {
      if (currentPage === pages.length - 1) { overlay.hidden = false; }
      else { goToPage(currentPage + 1); }
    });

    renderPage(0);
  })();
  </script>

</body>
</html>