From e11858c2f3812a4c909e20fbf92f423a960fb683 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Wed, 3 Jun 2026 16:07:54 -0400
Subject: [PATCH] gated lessions

---
 data/study-reminders.json |  2 +-
 src/colossiansStudy.tsx   | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/data/study-reminders.json b/data/study-reminders.json
index 9edc739..419e498 100644
--- a/data/study-reminders.json
+++ b/data/study-reminders.json
@@ -1,4 +1,4 @@
 {
   "users": {},
-  "updatedAt": "2026-06-03T19:07:22.282Z"
+  "updatedAt": "2026-06-03T20:07:22.259Z"
 }
\ No newline at end of file
diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx
index 8333fd4..c680324 100644
--- a/src/colossiansStudy.tsx
+++ b/src/colossiansStudy.tsx
@@ -1284,12 +1284,15 @@ export function ColossiansStudyIndexPage({ content }: Props) {
               <h2>{study.title}</h2>
             </div>
             <div className="study-module-list">
-              {sections.map(section => {
+              {sections.map((section, sectionIdx) => {
                 const lessonNumber = getLessonNumber(sections, section.id)
                 const isNew = isNewLesson(section)
                 const coming = isComingSoon(section)
-                const isDisabled = coming || !enrolled
-                
+                const prevSection = sectionIdx > 0 ? sections[sectionIdx - 1] : null
+                const prevCompleted = !prevSection || studyProgress.completedSectionIds.includes(prevSection.id)
+                const lockedByProgress = enrolled && !coming && sectionIdx > 0 && !prevCompleted && !studyProgress.completedSectionIds.includes(section.id)
+                const isDisabled = coming || !enrolled || lockedByProgress
+
                 return (
                   <Link key={section.id} to={isDisabled ? '#' : `/study/${study.slug}/${section.id}`} className={`study-module-row${isDisabled ? ' study-module-row--disabled' : ''}`} onClick={e => isDisabled && e.preventDefault()}>
                     <div className="study-module-row-left">
@@ -1298,7 +1301,8 @@ export function ColossiansStudyIndexPage({ content }: Props) {
                         {isNew && <span style={{ backgroundColor: '#4caf50', color: '#fff', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>New</span>}
                         {coming && <span style={{ backgroundColor: '#ffb74d', color: '#333', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Coming {getReleaseDateDisplay(section)}</span>}
                         {!coming && !enrolled && <span style={{ backgroundColor: '#ef5350', color: '#fff', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Enroll to open</span>}
-                        {enrolled && studyProgress.completedSectionIds.includes(section.id) && (
+                        {lockedByProgress && <span style={{ backgroundColor: '#5a5440', color: '#f0e9cc', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Complete previous lesson</span>}
+                        {enrolled && !lockedByProgress && studyProgress.completedSectionIds.includes(section.id) && (
                           <span style={{ backgroundColor: '#2196f3', color: '#fff', padding: '0.2rem 0.5rem', borderRadius: '3px', fontSize: '0.75rem', fontWeight: '600' }}>Completed</span>
                         )}
                       </div>
@@ -1836,10 +1840,12 @@ export function ColossiansStudySectionPage({ content }: Props) {
                 {previousSection ? (
                   <Link to={`/study/${study.slug}/${previousSection.id}`} className="btn-secondary">Previous Lesson</Link>
                 ) : <span className="study-nav-placeholder" />}
-                {nextSection && isSectionReleased(nextSection) ? (
-                  <Link to={`/study/${study.slug}/${nextSection.id}`} className="btn-secondary">Next Lesson</Link>
-                ) : nextSection ? (
+                {nextSection && !isSectionReleased(nextSection) ? (
                   <span className="study-nav-placeholder">Available {getReleaseDateDisplay(nextSection)}</span>
+                ) : nextSection && !lessonCompleted ? (
+                  <span className="study-nav-placeholder" title="Complete this lesson's checkpoint to unlock the next one">🔒 Complete checkpoint first</span>
+                ) : nextSection ? (
+                  <Link to={`/study/${study.slug}/${nextSection.id}`} className="btn-secondary">Next Lesson</Link>
                 ) : <span className="study-nav-placeholder" />}
               </div>
             </article>