Embed

<section id="mta-dashboard"
  style="font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
         background:#fff;min-height:100vh;color:#0f172a;margin:0;">

<style>
.wrap{max-width:1180px;margin:0 auto;padding:40px 20px;}
header.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.logo{font-weight:900;font-size:1.5rem;
background:linear-gradient(90deg,#7873f5,#ff6ec4);
-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.user{font-weight:600;color:#475569}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;
box-shadow:0 6px 18px rgba(0,0,0,.06);padding:20px}
.title{font-size:1.12rem;font-weight:800}
.desc{color:#475569;font-size:.95rem}
.row{display:flex;justify-content:space-between;align-items:center}
.start{padding:8px 14px;background:linear-gradient(90deg,#ff6ec4,#7873f5);
border:none;border-radius:10px;color:#fff;font-weight:700;cursor:pointer}
.locked{padding:8px 14px;background:#e2e8f0;border:none;
border-radius:10px;color:#64748b;font-weight:700}
.bar{height:6px;background:#e2e8f0;border-radius:999px;margin-top:10px}
.bar i{display:block;height:6px;background:linear-gradient(90deg,#ff6ec4,#7873f5)}
.logout{background:#111827;color:#fff;padding:8px 16px;border:none;border-radius:8px;font-weight:700}
</style>

<div class="wrap">
<header class="top">
  <div class="logo">Mind-Tech Academy</div>
  <div class="user" id="user-id"></div>
</header>

<div class="grid" id="modulesGrid"></div>

<div style="text-align:center;margin-top:30px">
  <button class="logout" id="logoutBtn">Logout</button>
</div>
</div>

<script>
(function(){

const TRAINER_PATH = "/ai-trainer";

const MODULES = [
 {id:"neuro",name:"Neuro-Behavioral Mastery",weeks:2},
 {id:"ai",name:"AI Tools & Automation",weeks:2},
 {id:"mkt",name:"Digital Marketing 360°",weeks:2},
 {id:"ent",name:"Entrepreneurship Labs",weeks:2},
 {id:"cult",name:"Relocation & Global Culture",weeks:2},
 {id:"mind",name:"Mind Mastery Trainer AI",weeks:2}
];

const mtid = localStorage.getItem("MTA_USER_ID");
document.getElementById("user-id").textContent =
  mtid ? "Welcome " + mtid : "Welcome Student";

/* --------------------------------------------------
   🔑 LEGACY SYNC (ONE-TIME FIX)
   If student already reached Week 5+, auto-complete
   previous modules so dashboard unlocks correctly.
-------------------------------------------------- */

const LEGACY_UNLOCK_UPTO = "mkt"; // Week 5 starts here

let legacyReached = localStorage.getItem("MTA_LEGACY_SYNCED");

if(!legacyReached){
  const idx = MODULES.findIndex(m=>m.id===LEGACY_UNLOCK_UPTO);
  if(idx > 0){
    for(let i=0;i<idx;i++){
      localStorage.setItem("MTA_DONE:"+MODULES[i].id,"true");
      localStorage.setItem("MTA_PROGRESS:"+MODULES[i].id,"100");
    }
  }
  localStorage.setItem("MTA_LEGACY_SYNCED","true");
}

/* -------------------------------------------------- */

const progress = id =>
  Number(localStorage.getItem("MTA_PROGRESS:"+id) || 0);

const done = id =>
  localStorage.getItem("MTA_DONE:"+id)==="true";

const unlocked = i =>
  i===0 || done(MODULES[i-1].id);

// RENDER
const grid=document.getElementById("modulesGrid");
grid.innerHTML="";

MODULES.forEach((m,i)=>{
 const card=document.createElement("div");
 card.className="card";
 card.innerHTML=`<h3 class="title">${m.name}</h3>
 <p class="desc">${m.weeks} weeks</p>`;

 const row=document.createElement("div");
 row.className="row";

 const btn=document.createElement("button");
 if(unlocked(i)){
   btn.className="start";
   btn.textContent="Start Module";
   btn.onclick=()=>{
     localStorage.setItem("MTA_CURRENT_MODULE",m.id);
     window.location.href=
       TRAINER_PATH+"?module="+encodeURIComponent(m.id);
   };
 }else{
   btn.className="locked";
   btn.textContent="Locked";
 }

 row.appendChild(btn);
 card.appendChild(row);

 const bar=document.createElement("div");
 bar.className="bar";
 const fill=document.createElement("i");
 fill.style.width=progress(m.id)+"%";
 bar.appendChild(fill);
 card.appendChild(bar);

 grid.appendChild(card);
});

// LOGOUT
document.getElementById("logoutBtn").onclick=()=>{
 localStorage.clear();
 window.location.href="/login";
};

})();
</script>
</section>