script.js

document.addEventListener('DOMContentLoaded', () => {
        const codeSnippet = `// HTML structure for this example:
//  <button id="counterBtn">Click me: 0</button>
//  <p id="message"></p>

const button = document.getElementById('counterBtn');
let count = 0;

button.addEventListener('click', () => {
  count++;
  button.textContent = \`Click me: \${count}\`;

  if (count === 5) {
    const messageEl = document.getElementById('message');
    messageEl.textContent = "You've reached 5 clicks!";
  } else if (count > 5) {
    const msgEl = document.getElementById('message');
    msgEl.textContent = "Keep clicking!";
  }
});`;

        const journeyStructure = [
          {
            groupTitle: "Setup & Initialization",
            steps: [
              { category: "Setup", title: "HTML Structure", lineRanges: [[0, 3]], explanation: "This JavaScript interacts with specific HTML elements. We're assuming a button with <code>id=\"counterBtn\"</code> and a paragraph with <code>id=\"message\"</code> exist on the page. The comments at the top outline this structure." },
              { category: "DOM Query", title: "Access Button Element", lineRanges: [[4, 4]], explanation: "<code>const button = document.getElementById('counterBtn');</code><br>This line uses the DOM API to find the HTML button element with ID 'counterBtn' and stores it in the 'button' constant." },
              { category: "Variable Declaration", title: "Initialize Click Counter", lineRanges: [[5, 5]], explanation: "<code>let count = 0;</code><br>A variable 'count' is declared and initialized to 0. This variable will track clicks." }
            ]
          },
          {
            groupTitle: "Core Interaction Logic",
            steps: [
              { category: "Event Handling", title: "Attach Click Listener", lineRanges: [[7, 7], [16,16]], explanation: "<code>button.addEventListener('click', () => { ... });</code><br>An event listener is attached to the 'button'. The arrow function <code>() => { ... }</code> executes on each click." },
              { category: "State Update", title: "Increment Counter", lineRanges: [[8, 8]], explanation: "<code>count++;</code><br>Inside the click handler, 'count' is incremented by 1." },
              { category: "UI Update", title: "Update Button Text", lineRanges: [[9, 9]], explanation: "<code>button.textContent = \`Click me: \${count}\`;</code><br>The button's text is updated to show the new 'count' using template literals." }
            ]
          },
          {
            groupTitle: "Conditional Feedback",
            steps: [
              { category: "Conditional Logic", title: "Check 5-Click Milestone", lineRanges: [[11, 11],[12,12],[13,13]], explanation: "<code>if (count === 5) { ... }</code><br>If 'count' reaches 5, a special message is displayed in the 'message' paragraph. Note that line 13 is the closing brace of this `if` block." },
              { category: "Conditional Logic", title: "Handle Subsequent Clicks", lineRanges: [[13,13],[14,14],[15,15]], explanation: "<code>else if (count > 5) { ... }</code><br>If 'count' is over 5, a different message encourages continued clicking. Note that line 13 is also the start of this `else if`." }
            ]
          },
          {
            groupTitle: "Conclusion",
            steps: [
              { category: "Summary", title: "Tour Completed!", lineRanges: [], explanation: "You've completed the tour! This example showed DOM manipulation, events, variables, and conditional logic. Click 'Reset' to restart." }
            ]
          }
        ];

        const categoryStyles = {
            "Setup": "bg-slate-200 text-slate-700",
            "DOM Query": "bg-sky-100 text-sky-700",
            "Variable Declaration": "bg-emerald-100 text-emerald-700",
            "Event Handling": "bg-violet-100 text-violet-700",
            "State Update": "bg-amber-100 text-amber-700",
            "UI Update": "bg-indigo-100 text-indigo-700",
            "Conditional Logic": "bg-rose-100 text-rose-700",
            "Summary": "bg-cyan-100 text-cyan-700",
            "Default": "bg-gray-200 text-gray-700" // Fallback
        };

        const codeLinesContainer = document.getElementById('codeLinesContainer');
        const explanationStepTitle = document.getElementById('explanationStepTitle');
        const explanationMeta = document.getElementById('explanationMeta');
        const explanationText = document.getElementById('explanationText');
        const explanationStepCategoryContainer = document.getElementById('explanationStepCategoryContainer');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const resetBtn = document.getElementById('resetBtn');
        const progressIndicator = document.getElementById('progressIndicator');
        const stepsOutlineUl = document.getElementById('stepsOutline');
        const mobileCurrentGroupTextEl = document.getElementById('mobileCurrentGroupText');
        const mobileCurrentStepTextEl = document.getElementById('mobileCurrentStepText'); // New element

        let currentStepIndex = 0;
        let lineElements = [];
        let flatCodeSteps = [];

        // Flatten the journeyStructure for sequential navigation
        journeyStructure.forEach(group => {
          group.steps.forEach(step => {
            flatCodeSteps.push(step);
          });
        });

        function handleCodeLineClick(event) {
            const clickedLineDiv = event.currentTarget;
            const clickedLineIndex = parseInt(clickedLineDiv.dataset.lineIndex, 10);

            for (let i = 0; i < flatCodeSteps.length; i++) {
                const step = flatCodeSteps[i];
                if (step.lineRanges && step.lineRanges.length > 0) {
                    for (const range of step.lineRanges) {
                        if (clickedLineIndex >= range[0] && clickedLineIndex <= range[1]) {
                            currentStepIndex = i;
                            updateStep();
                            return;
                        }
                    }
                }
            }
        }

        function renderCode() {
            codeLinesContainer.innerHTML = '';
            lineElements = [];

            const tempCodeElement = document.createElement('code');
            tempCodeElement.className = 'language-javascript';
            tempCodeElement.textContent = codeSnippet;

            if (typeof Prism !== 'undefined' && Prism.highlightElement) {
                Prism.highlightElement(tempCodeElement);
            } else {
                console.warn("Prism.js not available. Syntax highlighting will be plain.");
            }

            const highlightedHtml = tempCodeElement.innerHTML;
            const linesHtml = highlightedHtml.split('\n');

            linesHtml.forEach((lineHtml, index) => {
                const lineDiv = document.createElement('div');
                lineDiv.classList.add('code-line');
                lineDiv.innerHTML = lineHtml || '&nbsp;';
                lineDiv.dataset.lineIndex = index;
                lineDiv.addEventListener('click', handleCodeLineClick);
                codeLinesContainer.appendChild(lineDiv);
                lineElements.push(lineDiv);
            });
        }

        function renderOutline() {
            stepsOutlineUl.innerHTML = '';
            let globalStepIndex = 0;

            journeyStructure.forEach((group, groupIndex) => {
                const groupLi = document.createElement('li');
                groupLi.className = `pt-3 pb-1 px-1 ${groupIndex > 0 ? 'mt-1' : ''}`;

                const groupTitleEl = document.createElement('h4');
                groupTitleEl.className = 'text-xs font-semibold text-slate-500 uppercase tracking-wider select-none';
                groupTitleEl.textContent = group.groupTitle;
                groupLi.appendChild(groupTitleEl);
                stepsOutlineUl.appendChild(groupLi);

                group.steps.forEach((step, stepIndexInGroup) => {
                    const li = document.createElement('li');
                    li.className = 'outline-step-item rounded-md ml-1';
                    li.dataset.stepIndex = globalStepIndex;

                    const button = document.createElement('button');
                    button.className = 'group flex items-start w-full text-left p-2 focus:outline-none focus:ring-2 focus:ring-sky-300 focus:z-10 rounded-md transition-colors hover:bg-slate-100';

                    const dotAndLineContainer = document.createElement('div');
                    dotAndLineContainer.className = 'flex flex-col items-center mr-3 mt-1 flex-shrink-0';

                    const dot = document.createElement('div');
                    dot.className = 'outline-dot w-3 h-3 rounded-full bg-slate-300 border-2 border-white group-hover:bg-sky-400 transition-all duration-150 ease-in-out';
                    dotAndLineContainer.appendChild(dot);

                    if (globalStepIndex < flatCodeSteps.length - 1) {
                        const isLastInGroup = stepIndexInGroup === group.steps.length - 1;
                        const isLastGroup = groupIndex === journeyStructure.length - 1;
                        if (isLastInGroup && !(isLastGroup && isLastInGroup) ) {
                            const line = document.createElement('div');
                            line.className = 'outline-connector w-0.5 h-2 bg-slate-300 mt-1 group-hover:bg-slate-400 transition-colors duration-150 ease-in-out';
                            dotAndLineContainer.appendChild(line);
                        } else if (!(isLastGroup && isLastInGroup)){
                            const line = document.createElement('div');
                            line.className = 'outline-connector w-0.5 h-5 bg-slate-300 mt-1 group-hover:bg-slate-400 transition-colors duration-150 ease-in-out';
                            dotAndLineContainer.appendChild(line);
                        } else {
                            const placeholder = document.createElement('div');
                            placeholder.className = 'h-5 mt-1';
                            dotAndLineContainer.appendChild(placeholder);
                        }
                    } else {
                        const placeholder = document.createElement('div');
                        placeholder.className = 'h-5 mt-1';
                        dotAndLineContainer.appendChild(placeholder);
                    }


                    const titleSpan = document.createElement('span');
                    titleSpan.className = 'outline-title text-sm text-slate-600 group-hover:text-sky-600 transition-colors duration-150 ease-in-out';
                    titleSpan.textContent = step.title;

                    button.appendChild(dotAndLineContainer);
                    button.appendChild(titleSpan);
                    li.appendChild(button);

                    button.addEventListener('click', () => {
                        currentStepIndex = parseInt(li.dataset.stepIndex, 10);
                        updateStep();
                    });
                    stepsOutlineUl.appendChild(li);
                    globalStepIndex++;
                });
            });
        }

        function updateOutlineActiveState() {
            const outlineItems = stepsOutlineUl.querySelectorAll('.outline-step-item[data-step-index]');
            const outlineNav = stepsOutlineUl.parentElement;

            outlineItems.forEach((itemLi) => {
                const idx = parseInt(itemLi.dataset.stepIndex, 10);
                const button = itemLi.querySelector('button');
                const dot = itemLi.querySelector('.outline-dot');
                const title = itemLi.querySelector('.outline-title');
                const connector = itemLi.querySelector('.outline-connector');

                if (idx === currentStepIndex) {
                    button.classList.add('bg-sky-50');
                    dot.classList.remove('bg-slate-300');
                    dot.classList.add('bg-sky-500', 'scale-125');
                     if (connector) connector.classList.add('bg-sky-400');
                    title.classList.remove('text-slate-600');
                    title.classList.add('text-sky-700', 'font-semibold');

                    if (outlineNav.scrollHeight > outlineNav.clientHeight && !outlineNav.classList.contains('hidden')) { // Only scroll if scrollable and visible
                        const itemRect = itemLi.getBoundingClientRect();
                        const navRect = outlineNav.getBoundingClientRect();
                        if (itemRect.top < navRect.top || itemRect.bottom > navRect.bottom) {
                           itemLi.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }
                    }
                } else {
                    button.classList.remove('bg-sky-50');
                    dot.classList.add('bg-slate-300');
                    dot.classList.remove('bg-sky-500', 'scale-125');
                    if (connector) connector.classList.remove('bg-sky-400');
                    title.classList.add('text-slate-600');
                    title.classList.remove('text-sky-700', 'font-semibold');
                }
            });
        }

        function updateStep() {
          if (currentStepIndex < 0 || currentStepIndex >= flatCodeSteps.length) return;

          const step = flatCodeSteps[currentStepIndex];
          const hasLineFocus = step.lineRanges && step.lineRanges.length > 0;

          // Update mobile current group and step titles
          if (mobileCurrentGroupTextEl && mobileCurrentStepTextEl) {
            let currentGroupTitleForMobile = "Loading...";
            let stepsProcessed = 0;
            for (const group of journeyStructure) {
                const stepsInGroup = group.steps.length;
                if (currentStepIndex >= stepsProcessed && currentStepIndex < stepsProcessed + stepsInGroup) {
                    currentGroupTitleForMobile = group.groupTitle;
                    break;
                }
                stepsProcessed += stepsInGroup;
            }
            mobileCurrentGroupTextEl.textContent = currentGroupTitleForMobile;
            mobileCurrentStepTextEl.textContent = step.title;
          }


          explanationStepCategoryContainer.innerHTML = '';
          if (step.category) {
            const badge = document.createElement('span');
            const styleClasses = categoryStyles[step.category] || categoryStyles["Default"];
            badge.className = `${styleClasses} text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full inline-block`;
            badge.textContent = step.category;
            explanationStepCategoryContainer.appendChild(badge);
            explanationStepCategoryContainer.classList.remove('hidden');
          } else {
            explanationStepCategoryContainer.classList.add('hidden');
          }

          explanationStepTitle.textContent = step.title;
          explanationText.innerHTML = step.explanation;

          lineElements.forEach(el => {
            el.classList.remove('highlighted', 'code-line-dimmed');
          });

          let firstHighlightedLineElement = null;
          let highlightedLineNumbersForMeta = [];

          if (hasLineFocus) {
            const focusedIndices = new Set();
            step.lineRanges.forEach(range => {
              for (let i = range[0]; i <= range[1]; i++) {
                focusedIndices.add(i);
                if (lineElements[i]) {
                   if (!highlightedLineNumbersForMeta.includes(i + 1)) {
                       highlightedLineNumbersForMeta.push(i + 1);
                   }
                   if (!firstHighlightedLineElement) firstHighlightedLineElement = lineElements[i];
                }
              }
            });

            lineElements.forEach((el, idx) => {
                if (focusedIndices.has(idx)) {
                    el.classList.add('highlighted');
                } else {
                    el.classList.add('code-line-dimmed');
                }
            });
            highlightedLineNumbersForMeta.sort((a,b) => a - b);
            const rangesSummary = highlightedLineNumbersForMeta.length === 1 ? `Line ${highlightedLineNumbersForMeta[0]}` : `Lines ${highlightedLineNumbersForMeta.join(', ')}`;
            explanationMeta.textContent = `Focus: ${rangesSummary}`;

          } else {
             explanationMeta.textContent = "General overview for this step.";
          }

          if (firstHighlightedLineElement) {
            const codePane = codeLinesContainer.parentElement;
            if (codePane.scrollHeight > codePane.clientHeight) {
                const lineRect = firstHighlightedLineElement.getBoundingClientRect();
                const paneRect = codePane.getBoundingClientRect();
                if (lineRect.top < paneRect.top || lineRect.bottom > paneRect.bottom) {
                    firstHighlightedLineElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
            }
          }


          prevBtn.disabled = currentStepIndex === 0;
          nextBtn.disabled = currentStepIndex === flatCodeSteps.length - 1;
          progressIndicator.textContent = `Step ${currentStepIndex + 1} / ${flatCodeSteps.length}`;
          updateOutlineActiveState();
        }

        nextBtn.addEventListener('click', () => {
          if (currentStepIndex < flatCodeSteps.length - 1) {
            currentStepIndex++;
            updateStep();
          }
        });

        prevBtn.addEventListener('click', () => {
          if (currentStepIndex > 0) {
            currentStepIndex--;
            updateStep();
          }
        });

        resetBtn.addEventListener('click', () => {
          currentStepIndex = 0;
          updateStep();
          const codePane = codeLinesContainer.parentElement;
          if (codePane) {
            codePane.scrollTop = 0;
          }
          const outlineNav = stepsOutlineUl.parentElement;
          if (outlineNav && !outlineNav.classList.contains('hidden')) { // Check if outlineNav is visible
            outlineNav.scrollTop = 0;
          }
        });

        renderCode();
        renderOutline();
        updateStep();
      });