Embed

<section id="nbp-classroom" style="font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--ink:#0f172a;--muted:#475569;--line:#e2e8f0;--brand2:#7873f5;--brand3:#ff6ec4;color:var(--ink);background:#fff;min-height:100vh;">
  <style>
    .nbp-wrap{display:grid;grid-template-columns:280px 1fr;min-height:100vh;}
    .nbp-left{border-right:1px solid var(--line);padding:20px;background:#fff;overflow:auto;}
    .nbp-right{padding:30px;max-width:1100px;margin:0 auto;width:100%;}
    .nbp-logo{font-weight:900;font-size:1.3rem;background:linear-gradient(90deg,var(--brand2),var(--brand3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
    .nbp-user{font-weight:700;color:#64748b;font-size:.9rem;margin-top:4px;}
    .nbp-weeklist{margin-top:16px;display:grid;gap:8px;}
    .nbp-week{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;cursor:pointer;font-weight:800;display:flex;align-items:center;justify-content:space-between;}
    .nbp-week:hover{box-shadow:0 6px 16px #00000010;transform:translateY(-1px);}
    .nbp-week.active{border-color:#c7d2fe;box-shadow:0 8px 20px #1e40af1a;}
    .nbp-week small{color:#94a3b8;font-weight:600;}
    .nbp-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
    .nbp-title{font-weight:900;font-size:1.6rem;margin:0;}
    .nbp-sub{color:var(--muted);max-width:780px;line-height:1.6;}
    .nbp-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
    .nbp-toolbar button{background:#0f172a;color:#fff;border:none;padding:6px 12px;border-radius:8px;font-weight:600;cursor:pointer;}
    .nbp-toolbar button:hover{opacity:.9;}
    .nbp-progress{display:flex;align-items:center;gap:10px;margin-top:8px;}
    .nbp-bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;width:220px;}
    .nbp-bar>i{display:block;height:8px;width:0;background:linear-gradient(90deg,var(--brand3),var(--brand2));transition:width .5s ease;}
    .nbp-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 16px;margin:12px 0;box-shadow:0 6px 20px #0000000a;}
    .nbp-card h3{margin:.25rem 0 .45rem;font-size:1.1rem;font-weight:900;}
    .nbp-meta{color:#64748b;font-size:.9rem;margin:-4px 0 10px;}
    .nbp-list{margin:0;padding-left:1.2rem;}
    .nbp-list li{margin:.3rem 0;}
    .nbp-reflect{display:grid;gap:10px;}
    .nbp-q{font-weight:800;color:#0f172a;}
    .nbp-text{width:100%;min-height:100px;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;resize:vertical;}
    .nbp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
    .nbp-btn{appearance:none;border:1px solid var(--line);background:#0f172a;color:#fff;border-radius:10px;padding:.6rem 1rem;font-weight:800;cursor:pointer;}
    .nbp-hint{font-size:.9rem;color:#64748b;}
    .nbp-ok{color:#16a34a;font-weight:800;}
    .nbp-err{color:#dc2626;font-weight:800;}
    .nbp-quiz .q{font-weight:900;margin:10px 0 6px;}
    .nbp-radio{display:flex;gap:10px;margin:6px 0;flex-wrap:wrap;}
    .nbp-pill{border:1px solid var(--line);padding:.55rem .8rem;border-radius:999px;cursor:pointer;}
    .nbp-pill input{margin-right:6px;}
    .nbp-score{font-weight:900;margin-top:10px;}
    .nbp-win{border:1px solid #c7d2fe;background:#f5f7ff;border-radius:14px;padding:16px;margin-top:16px;}

    /* BIG Chat Overlay (responsive, no cutting) */
    #aurionChatToggle{position:fixed;bottom:22px;right:22px;background:linear-gradient(90deg,#7873f5,#ff6ec4);color:#fff;font-weight:700;border:none;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 6px 16px #0003;z-index:9999;}
    #aurionChatBox{position:fixed;right:22px;bottom:90px;width:420px;max-width:92vw;height:70vh;max-height:84vh;display:none;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px #00000026;z-index:9998;}
    #aurionHeader{background:linear-gradient(90deg,#7873f5,#ff6ec4);color:#fff;font-weight:800;padding:12px 14px;font-size:1rem;display:flex;align-items:center;justify-content:space-between;}
    #aurionMessages{flex:1;overflow:auto;padding:12px;font-size:.95rem;display:flex;flex-direction:column;gap:10px;}
    .aurionMsg{padding:10px 12px;border-radius:10px;line-height:1.5;max-width:88%;white-space:pre-wrap;word-wrap:break-word;}
    .aurionUser{background:#e2e8f0;align-self:flex-end;}
    .aurionBot{background:#f5f7ff;border:1px solid #c7d2fe;align-self:flex-start;}
    #aurionForm{display:flex;border-top:1px solid #e2e8f0;}
    #aurionInput{flex:1;border:none;padding:12px;font:inherit;outline:none;}
    #aurionSend{background:#0f172a;color:#fff;border:none;padding:0 16px;font-weight:700;cursor:pointer;}
    #aurionSend:hover{opacity:.9;}
    @media (max-width:720px){#aurionChatBox{left:4vw;right:4vw;width:auto;height:70vh;}}
  </style>

  <div class="nbp-wrap">
    <aside class="nbp-left">
      <div class="nbp-logo">Mind-Tech Academy</div>
      <div class="nbp-user" id="nbpUser">Loading user…</div>
      <div style="margin-top:16px;font-weight:900">Module 1 • Weeks</div>
      <div id="weekList" class="nbp-weeklist"></div>
      <div class="nbp-card" style="margin-top:16px">
        <div style="font-weight:900;margin-bottom:6px">Progress</div>
        <div class="nbp-progress">
          <div class="nbp-bar"><i id="nbpBar" style="width:0%"></i></div>
          <div id="nbpPct" style="font-weight:800">0%</</div>
        </div>
        <div class="nbp-hint" style="margin-top:6px">Save reflections daily to advance.</div>
      </div>
    </aside>

    <main class="nbp-right">
      <header class="nbp-header">
        <div>
          <h1 class="nbp-title" id="weekTitle">Neuro-Behavioral Mastery</h1>
          <div class="nbp-sub" id="weekIntro">Select a week to begin your journey.</div>
        </div>
        <div class="nbp-toolbar">
          <button id="voiceReplay">🔊 Replay Voice</button>
          <button id="goDashboard">🏠 Dashboard</button>
          <button id="refreshBtn">↻ Refresh</button>
        </div>
      </header>

      <section id="weekOverview" class="nbp-card" style="display:none">
        <h3>Overview</h3><p id="overviewText" style="white-space:pre-line;"></p>
      </section>

      <section id="daysGrid" class="nbp-days"></section>

      <section id="quizBox" class="nbp-card" style="display:none">
        <h3>Weekly Quiz</h3>
        <div id="quizItems"></div>
        <div class="nbp-row" style="margin-top:8px">
          <button class="nbp-btn" id="submitQuiz">Submit Quiz</button>
          <div id="quizMsg" class="nbp-hint"></div>
        </div>
      </section>

      <section id="milestoneBox" class="nbp-win" style="display:none">
        <div style="font-weight:900">Milestone Unlocked</div>
        <div id="milestoneText"></div>
      </section>
    </main>
  </div>

  
  <button id="aurionChatToggle">💬 Ask Instructor</button>
  <div id="aurionChatBox">
    <div id="aurionHeader">
      <div>Aurion — Mind-Tech Instructor</div>
      <button style="background:transparent;border:none;color:#fff;font-weight:800;cursor:pointer" id="aurionClose">✕</button>
    </div>
    <div id="aurionMessages"></div>
    <form id="aurionForm">
      <input id="aurionInput" placeholder="Type your question..." autocomplete="off" />
      <button type="submit" id="aurionSend">Send</button>
    </form>
  </div>

  <script>
  (function(){
    const API_BASE = "https://aitrainer.register-d12.workers.dev"; // ← change if needed

    // current student
    const mtid = localStorage.getItem("MTA_USER_ID") || "MTID-Guest";
    document.getElementById("nbpUser").textContent = "Welcome " + mtid;

    // which module (dashboard sends ?module=neuro)
    const params   = new URLSearchParams(window.location.search);
    const moduleId = params.get("module") || "neuro";

    let currentWeek=null,answers={},currentVoiceText="";
    const el = (id)=>document.getElementById(id);
    const weekList=el("weekList"),weekTitle=el("weekTitle"),weekIntro=el("weekIntro"),
          overviewCard=el("weekOverview"),overviewText=el("overviewText"),
          daysGrid=el("daysGrid"),quizBox=el("quizBox"),quizItems=el("quizItems"),
          milestoneBox=el("milestoneBox"),milestoneText=el("milestoneText"),
          bar=el("nbpBar"),pct=el("nbpPct"),quizMsg=el("quizMsg");

    function speak(text){
      if(!text) return;
      const s=window.speechSynthesis; s.cancel();
      const u=new SpeechSynthesisUtterance(text); u.rate=1;u.pitch=1; s.speak(u);
      currentVoiceText=text;
    }
    el("voiceReplay").onclick=()=>speak(currentVoiceText);
    el("goDashboard").onclick=()=>window.location.href="/dashboard";
    el("refreshBtn").onclick=()=>loadWeek(currentWeek || 1);

    // per-week local progress (for module 1)
    const progressKey=w=>`M1_PROGRESS:${mtid}:W${w}`;
    const getProgress=w=>JSON.parse(localStorage.getItem(progressKey(w))||"{}");
    const updateProgressUI=w=>{
      const p=getProgress(w); const done=Object.keys(p).filter(k=>p[k]?.reflectionSaved).length;
      const ratio=Math.round((done/7)*100); bar.style.width=ratio+"%"; pct.textContent=ratio+"%";
    };

    // sync this module's overall progress to dashboard keys
    function syncModuleProgress(){
      // Module 1 = 2 weeks × 7 days = 14 reflections
      const weeks=[1,2];
      let totalDays=weeks.length*7;
      let doneDays=0;

      weeks.forEach(w=>{
        const p=getProgress(w);
        doneDays += Object.keys(p).filter(k=>p[k]?.reflectionSaved).length;
      });

      const ratio = Math.round((doneDays/totalDays)*100);

      // keys used by dashboard for locks & progress bars
      localStorage.setItem("MTA_PROGRESS:"+moduleId, String(ratio));
      if(ratio>=100){
        localStorage.setItem("MTA_DONE:"+moduleId, "true");
      }
    }

    // set & persist per-week progress + update dashboard mapping
    const setProgress=(w,d)=>{
      localStorage.setItem(progressKey(w), JSON.stringify(d||{}));
      updateProgressUI(w);
      syncModuleProgress();
    };

    async function loadModuleMeta(){
      try{
        const r=await fetch(API_BASE+"/module"); const j=await r.json();
        if(!j.ok) throw 0;
        weekList.innerHTML="";
        j.module.weeks.forEach(w=>{
          const b=document.createElement("button");
          b.className="nbp-week"; b.dataset.week=w;
          b.innerHTML=`<span>Week ${w}</span><small>${w===1?"Foundation":"Application"}</small>`;
          b.onclick=()=>loadWeek(w); weekList.appendChild(b);
        });
      }catch(_){
        weekList.innerHTML="<div class='nbp-hint'>Could not load module.</div>";
      }
    }

    async function loadWeek(week){
      currentWeek=week;answers={};quizMsg.textContent="";
      weekTitle.textContent=`Neuro-Behavioral Mastery — Week ${week}`;
      weekIntro.textContent="Loading your immersive week…";
      overviewCard.style.display="none";quizBox.style.display="none";milestoneBox.style.display="none";
      daysGrid.innerHTML="";
      try{
        const r=await fetch(API_BASE+"/week",{
          method:"POST",
          headers:{"Content-Type":"application/json"},
          body:JSON.stringify({week,mtid})
        });
        const data=await r.json();
        if(!data.ok) throw new Error(data.error||"Failed");
        overviewText.textContent=data.overview||""; overviewCard.style.display="block";
        weekIntro.textContent=data.theme||"";
        speak(`Welcome ${mtid}. This is Week ${week}: ${data.theme}.`);
        renderDays(data.days||[]); renderQuiz(data.quiz||[]); milestoneText.textContent=data.milestone||"";
        milestoneBox.style.display=data.milestone?"block":"none"; updateProgressUI(week);
        document.querySelectorAll(".nbp-week").forEach(wEl=>wEl.classList.toggle("active",Number(wEl.dataset.week)===currentWeek));
        // make sure dashboard progress is synced when week is loaded (for old data)
        syncModuleProgress();
      }catch(e){
        weekIntro.textContent=e.message||"Could not load week.";
      }
    }

    function renderDays(days){
      daysGrid.innerHTML="";
      const prog=getProgress(currentWeek);
      days.forEach(d=>{
        const card=document.createElement("article"); card.className="nbp-card";
        const teaching = (d.teaching||"").replace(/\n/g,"<br>");
        const steps = (d.exercise?.steps||[]).map(s=>`<li>${s}</li>`).join("");
        card.innerHTML = `
          <h3>Day ${d.day}: ${d.title||"Lesson"}</h3>
          <p style="white-space:pre-line">${teaching}</p>
          <div class="nbp-meta"><strong>Practice:</strong> ${d.exercise?.name||"Practice"}</div>
          <ul class="nbp-list">${steps}</ul>
          <div class="nbp-hint"><em>Evidence:</em> ${d.exercise?.evidence||"Observe and note."}</div>
        `;
        const ref=document.createElement("div"); ref.className="nbp-reflect";
        (d.reflection||[]).forEach((q,i)=>{
          const el=document.createElement("div"); el.className="nbp-q"; el.textContent=`${i+1}. ${q}`; ref.appendChild(el);
        });
        const ta=document.createElement("textarea"); ta.className="nbp-text"; ta.value=prog[`day${d.day}`]?.text||"";
        const row=document.createElement("div"); row.className="nbp-row";
        const btn=document.createElement("button"); btn.className="nbp-btn"; btn.textContent="Save Reflection";
        const msg=document.createElement("div"); msg.className="nbp-hint";
        btn.onclick=async()=>{
          const text=ta.value.trim();
          if(!text){ msg.textContent="Please write your reflection."; msg.className="nbp-err"; return; }
          btn.disabled=true; btn.textContent="Saving…";
          try{
            await fetch(API_BASE+"/submit",{
              method:"POST",
              headers:{"Content-Type":"application/json"},
              body:JSON.stringify({mtid,week:currentWeek,day:d.day,reflection:text})
            });
            const p=getProgress(currentWeek); p[`day${d.day}`]={reflectionSaved:true,text}; setProgress(currentWeek,p);
            msg.textContent="Saved ✓"; msg.className="nbp-ok"; speak("Reflection saved successfully.");
          }catch(_){ msg.textContent="Could not save."; msg.className="nbp-err"; }
          finally{ btn.disabled=false; btn.textContent="Save Reflection"; }
        };
        row.append(btn,msg); ref.append(ta,row); card.append(ref); daysGrid.append(card);
      });
    }

    function renderQuiz(list){
      if(!list?.length){ quizBox.style.display="none"; return; }
      quizBox.style.display="block"; quizItems.innerHTML="";
      list.forEach((q,idx)=>{
        const wrap=document.createElement("div"); wrap.className="nbp-quiz nbp-card";
        wrap.innerHTML=`<div class="q">${idx+1}. ${q.q}</div>`;
        const opts=document.createElement("div"); opts.className="nbp-radio";
        (q.options||[]).forEach(opt=>{
          const lab=document.createElement("label"); lab.className="nbp-pill";
          const ip=document.createElement("input"); ip.type="radio"; ip.name="q"+idx; ip.value=opt;
          ip.onchange=()=>answers["q"+idx]=opt; lab.append(ip, document.createTextNode(opt)); opts.append(lab);
        });
        wrap.append(opts); quizItems.append(wrap);
      });
      el("submitQuiz").onclick=()=>{
        let score=0; list.forEach((q,i)=>{ if(answers["q"+i]===q.answer) score++; });
        quizMsg.textContent=`Score: ${score}/${list.length}`; quizMsg.className="nbp-score";
        speak(`You scored ${score} out of ${list.length}.`);
      };
    }

    // Chat UI
    const chatToggle=el("aurionChatToggle"), chatBox=el("aurionChatBox"), chatClose=el("aurionClose"),
          chatMsgs=el("aurionMessages"), chatForm=el("aurionForm"), chatInput=el("aurionInput");
    const showChat=()=>{chatBox.style.display="flex"; chatMsgs.scrollTop=chatMsgs.scrollHeight;};
    const hideChat=()=>{chatBox.style.display="none";};
    chatToggle.onclick=()=>chatBox.style.display==="flex"?hideChat():showChat();
    chatClose.onclick=hideChat;

    function addMsg(text, cls){
      const d=document.createElement("div");
      d.className="aurionMsg "+cls;
      d.innerHTML = String(text).replace(/\n/g,"<br>");
      chatMsgs.appendChild(d);
      chatMsgs.scrollTop = chatMsgs.scrollHeight;
    }

    chatForm.onsubmit = async (e)=>{
      e.preventDefault();
      const q=chatInput.value.trim(); if(!q) return;
      addMsg(q,"aurionUser"); chatInput.value="";
      const thinking=document.createElement("div");
      thinking.className="aurionMsg aurionBot"; thinking.textContent="Thinking…";
      chatMsgs.appendChild(thinking); chatMsgs.scrollTop=chatMsgs.scrollHeight;

      try{
        const r=await fetch(API_BASE+"/chat",{
          method:"POST",
          headers:{"Content-Type":"application/json"},
          body:JSON.stringify({mtid,question:q})
        });
        const j=await r.json();
        thinking.remove();
        if(j.ok) addMsg(j.reply,"aurionBot");
        else addMsg("⚠️ "+(j.error||"Something went wrong"),"aurionBot");
      }catch(err){
        thinking.remove();
        addMsg("⚠️ Connection error. Please retry.","aurionBot");
      }
    };

    // init
    loadModuleMeta();
    loadWeek(1);
  })();
  </script>
</section>