From 570a9bc4a4406c6fcf0b87ba66e68dd85a113b78 Mon Sep 17 00:00:00 2001
From: martbost <martybostick@gmail.com>
Date: Sat, 22 Aug 2026 08:42:39 -0500
Subject: [PATCH] Angle pages host the hook video itself: watch on-page,
 skip-ahead for repeat viewers, auto-advance to overview + join on video end

---
 public/join.js | 43 ++++++++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/public/join.js b/public/join.js
index 093fb99..70635e6 100644
--- a/public/join.js
+++ b/public/join.js
@@ -102,15 +102,20 @@
   load();
 })();
 
-// Angle-matched landing: ?v=<hook> continues the thought of the curiosity
-// video that brought them — headline bridges, then the OVERVIEW video advances
-// the story (they already watched the hook video; don't replay it).
+// Angle-matched landing: ?v=<hook> serves BOTH arrivals — link-clickers get the
+// hook video right on the page under the matched headline; people who already
+// watched it skip ahead. When the hook video ends, the page auto-advances to
+// the overview + join steps. Nobody ever leaves the site.
 (function(){
   var ANGLES={
-    pocket:{h:'You already <span class="gold">found the money</span>.',w:'You saw where it goes. Here’s how the flip actually works.',r:'/v/rmc-pocket-change-b403fb2f75.mp4'},
-    phone:{h:'Time your phone started <span class="gold">paying YOU</span>.',w:'You saw who’s profiting. Here’s how the phone starts paying you back.',r:'/v/rmc-phone-32ac648844.mp4'},
-    two:{h:'You know two people.<br><span class="gold">That’s all this takes.</span>',w:'You’ve got your two in mind already. Here’s exactly what this is.',r:'/v/rmc-two-people-4102f2d719.mp4'},
-    graveyard:{h:'This one runs on <span class="gold">teamwork</span> — not your transmission.',w:'You’ve buried enough hustles. Here’s why this one’s built different.',r:'/v/rmc-graveyard-290fabee9d.mp4'}
+    pocket:{h:'You already <span class="gold">found the money</span>.',w:'You saw where it goes. Here’s how the flip actually works.',
+      v:'/v/rmc-pocket-change-b403fb2f75.mp4',p:'/v/rmc-pocket-change-poster.jpg'},
+    phone:{h:'Time your phone started <span class="gold">paying YOU</span>.',w:'You saw who’s profiting. Here’s how the phone starts paying you back.',
+      v:'/v/rmc-phone-32ac648844.mp4',p:'/v/rmc-phone-poster.jpg'},
+    two:{h:'You know two people.<br><span class="gold">That’s all this takes.</span>',w:'You’ve got your two in mind. Here’s exactly what this is.',
+      v:'/v/rmc-two-people-4102f2d719.mp4',p:'/v/rmc-two-people-poster.jpg'},
+    graveyard:{h:'This one runs on <span class="gold">teamwork</span> — not your transmission.',w:'You’ve buried enough hustles. Here’s why this one’s built different.',
+      v:'/v/rmc-graveyard-290fabee9d.mp4',p:'/v/rmc-graveyard-poster.jpg'}
   };
   var a=ANGLES[new URLSearchParams(location.search).get('v')];
   if(!a)return;
@@ -121,12 +126,24 @@
     var sub=document.getElementById('invSub');
     if(sub)sub.innerHTML='Personally invited by <span class="gold">Member '+idTxt+'</span> — this page is their real position, read live from the blockchain.';
   }
+  // the overview section becomes step two, with a bridge headline
   var wh=document.getElementById('angleWatchHead'); if(wh)wh.textContent=a.w;
-  // the main video stays the team overview; offer a rewatch of the hook below it
-  var vid=document.getElementById('angleVideo');
-  if(vid&&vid.parentNode){
-    var p=document.createElement('p');p.className='micro';p.style.cssText='text-align:center;margin:8px 0 0';
-    p.innerHTML='Missed the short video that sent you here? <a href="'+a.r+'" target="_blank" rel="noopener" style="color:var(--teal)">Rewatch it ↗</a>';
-    vid.parentNode.appendChild(p);
+  var overviewSection=null, ov=document.getElementById('angleVideo');
+  if(ov)overviewSection=ov.closest('section');
+  // insert the hook video as its own section ABOVE the overview
+  if(overviewSection&&overviewSection.parentNode){
+    var s=document.createElement('section');
+    s.className='section'; s.style.paddingBottom='0'; s.id='hookVideo';
+    s.innerHTML='<div class="wrap"><div class="section-head"><div class="eyebrow">Ninety seconds</div>'+
+      '<h2>Watch this first.</h2>'+
+      '<p>Already seen it? <a href="#afterHook" id="hookSkip" style="color:var(--teal)">Skip to how it works ↓</a></p></div>'+
+      '<div class="video-card" style="max-width:880px;margin:0 auto">'+
+      '<video id="hookPlayer" class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" controls preload="metadata" poster="'+a.p+'" src="'+a.v+'"></video></div></div>';
+    overviewSection.parentNode.insertBefore(s,overviewSection);
+    overviewSection.id='afterHook';
+    var hp=document.getElementById('hookPlayer');
+    if(hp)hp.addEventListener('ended',function(){
+      overviewSection.scrollIntoView({behavior:'smooth',block:'start'});
+    });
   }
 })();