Embed

<section id="lesson1"
  style="font-family:'Poppins',sans-serif;background:#fff;color:#0f172a;
         min-height:100vh;display:flex;justify-content:center;align-items:center;margin:0;">
  <div class="wrap" style="width:100%;max-width:900px;padding:30px 20px;">
    <header style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;">
      <div style="font-weight:900;font-size:1.4rem;background:linear-gradient(90deg,#7873f5,#ff6ec4);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;">Mind-Tech Academy</div>
      <button id="logout"
        style="border:none;background:#111;color:#fff;border-radius:8px;padding:8px 14px;
               font-weight:600;cursor:pointer;">Logout</button>
    </header>

    
    <h2 style="font-size:1.6rem;margin-bottom:8px;">Lesson 1 — The Power of Self-Awareness</h2>
    <p style="color:#475569;margin-bottom:16px;">
      Discover how your thoughts shape emotions — and how emotions shape actions.  
      This lesson teaches you to pause, reflect and respond intentionally.
    </p>
    <div style="background:#e2e8f0;border-radius:8px;height:8px;margin-bottom:20px;overflow:hidden;">
      <div id="progress" style="height:8px;width:0;background:linear-gradient(90deg,#ff6ec4,#7873f5);
      transition:width 0.8s ease;"></div>
    </div>

    
    <div id="chat" style="border:1px solid #e2e8f0;border-radius:12px;padding:18px;height:55vh;
         overflow-y:auto;background:#fafafa;margin-bottom:12px;"></div>

    
    <div id="inputArea" style="display:flex;gap:10px;">
      <textarea id="input" placeholder="Type your reflection here…"
        style="flex:1;border:1px solid #e2e8f0;border-radius:10px;padding:10px;
               font:inherit;min-height:50px;"></textarea>
      <button id="send"
        style="background:linear-gradient(90deg,#7873f5,#ff6ec4);border:none;border-radius:10px;
               padding:0 16px;font-weight:700;color:#fff;cursor:pointer;">Send</button>
    </div>
  </div>

  <script>
  const chat=document.getElementById("chat");
  const inp=document.getElementById("input");
  const send=document.getElementById("send");
  const progress=document.getElementById("progress");

  function addMsg(role,text){
    const row=document.createElement("div");
    row.style.display="flex";
    row.style.justifyContent=role==="you"?"flex-end":"flex-start";
    row.style.marginBottom="10px";
    const msg=document.createElement("div");
    msg.style.borderRadius="10px";
    msg.style.padding="10px 14px";
    msg.style.maxWidth="75%";
    msg.style.whiteSpace="pre-wrap";
    msg.style.background=role==="you"?"#1e40af":"#f1f5f9";
    msg.style.color=role==="you"?"#fff":"#111";
    msg.textContent=text;
    row.appendChild(msg);
    chat.appendChild(row);
    chat.scrollTop=chat.scrollHeight;
  }

  // ---------------- LESSON SCRIPT ----------------
  let step=0;
  const lesson=[
    {role:"ai",text:"👋 Welcome to Lesson 1: *The Power of Self-Awareness*.\n\nIn this session you’ll discover how your thoughts trigger emotions and how emotions influence actions."},
    {role:"ai",text:"🎯 Learning Objectives:\n1️⃣ Understand the Thought → Emotion → Action chain.\n2️⃣ Identify personal reaction patterns.\n3️⃣ Practice conscious pause before response."},
    {role:"ai",text:"🧠 Think about today. What’s one moment when you reacted automatically without thinking?"},
    {role:"userinput"},
    {role:"ai",text:"That’s a great example. Every reaction begins with a thought you barely notice. Awareness is about catching that thought."},
    {role:"ai",text:"Let’s explore how your body helps you notice emotions. Where do you feel tension first — chest, stomach or shoulders?"},
    {role:"userinput"},
    {role:"ai",text:"Excellent. Your body is your first teacher. When you notice that sensation, you can pause before reacting."},
    {role:"ai",text:"Now, imagine the same situation tomorrow. What’s a calmer action you could take instead?"},
    {role:"userinput"},
    {role:"ai",text:"Perfect. That’s the practice of self-regulation in action."},
    {role:"ai",text:"🧩 Mini-Quiz: Self-awareness helps you:\n(a) Control others \n(b) Pause before reacting \n(c) Ignore feelings"},
    {role:"quiz",answer:"b"},
    {role:"ai",text:"🎯 Correct! Awareness = Pause → Choice → Power."},
    {role:"complete",text:"✨ Lesson Summary:\nToday you learned to observe your reactions, listen to your body signals, and pause before responding.\n\n🌿 Next Lesson: *Focus & Flow — Training Your Attention.*"}
  ];

  function updateProgress(){
    const pct=Math.min((step/lesson.length)*100,100);
    progress.style.width=pct+"%";
  }

  function next(userInput){
    if(step>=lesson.length)return;
    const curr=lesson[step];
    updateProgress();

    if(curr.role==="userinput"){
      if(!userInput){addMsg("ai","Take a moment to reflect and type your answer.");return;}
      addMsg("you",userInput);
      step++;setTimeout(()=>next(),800);
      return;
    }

    if(curr.role==="quiz"){
      if(!userInput){addMsg("ai","Please answer a, b or c.");return;}
      addMsg("you",userInput);
      if(userInput.toLowerCase()===curr.answer){addMsg("ai","✅ Correct!");}
      else{addMsg("ai","❌ Not quite. Correct answer: (b).");}
      step++;setTimeout(()=>next(),800);
      return;
    }

    if(curr.role==="complete"){addMsg("ai",curr.text);updateProgress();return;}

    addMsg("ai",curr.text);
    step++;
    if(lesson[step] && lesson[step].role==="ai"){setTimeout(()=>next(),1500);}
  }

  send.onclick=()=>{const val=inp.value.trim();if(!val)return;next(val);inp.value="";};
  document.getElementById("logout").onclick=()=>{localStorage.clear();location.href="/login";};

  // start
  next();
  </script>
</section>