// Scenes — each panel's contents. Receives `progress` (0..1 within its window).

// ── PANEL 1 — Arrival at the camp gate ──────────────────────────────────────
function Scene1Arrival({ progress, time }) {
  // Carlito tiny, walks in from the left, looks up at the sign.
  const cx = 120 + progress * 120; // walk from left
  const cy = 360;
  const bobble = Math.sin(time * 8) * 3;
  const signProgress = Math.max(0, Math.min(1, (progress - 0.18) / 0.25));
  const bubbleProgress = Math.max(0, Math.min(1, (progress - 0.55) / 0.3));

  return (
    <>
      {/* Sky gradient base */}
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse 90% 70% at 50% 100%, #2A1F14 0%, #0B1410 60%)' }}/>
      <Sunburst x="50%" y="120%" size={1100} color="#FF6B35" opacity={0.14}/>

      {/* Distant pine silhouettes */}
      <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none'}} viewBox="0 0 600 460" preserveAspectRatio="none">
        {[40,110,180,260,340,410,490,560].map((px, i) => (
          <polygon key={i}
            points={`${px-20},420 ${px},${330 + (i%3)*20} ${px+20},420`}
            fill="#0A0F0A" stroke="#0A0A0A" strokeWidth="2"/>
        ))}
        {/* ground line */}
        <rect x="0" y="420" width="600" height="40" fill="#1A2820"/>
        <line x1="0" y1="420" x2="600" y2="420" stroke="#0A0A0A" strokeWidth="3"/>
      </svg>

      {/* Camp gate posts */}
      <div style={{ position:'absolute', left: 90, top: 110, width: 18, height: 320, background: '#5A3A1A', border:'3px solid #0A0A0A'}}/>
      <div style={{ position:'absolute', right: 70, top: 110, width: 18, height: 320, background: '#5A3A1A', border:'3px solid #0A0A0A'}}/>
      <div style={{ position:'absolute', left: 90, top: 110, right: 70, height: 14, background: '#5A3A1A', border:'3px solid #0A0A0A'}}/>

      <CampSign x="50%" y={170} w={260} text="carl.camp" sub="welcome, little one" rotate={-2} progress={signProgress}/>

      {/* Embers floating */}
      <Ember x={140 + Math.sin(time*1.2)*10} y={300 + Math.cos(time*0.9)*8} size={10} color="#FF6B35"/>
      <Ember x={420 + Math.cos(time*0.7)*12} y={260 + Math.sin(time*1.1)*8} size={8} color="#F2A93B"/>
      <Ember x={500 + Math.sin(time*1.5)*8} y={340 + Math.cos(time*1.3)*6} size={12} color="#FF6B35" glow={0.6}/>

      {/* Carlito — tiny, looking up */}
      <Carlito x={cx} y={cy + bobble} size={56} stage={1} expression="curious" rotate={Math.sin(time*8)*2}/>

      {/* tiny suitcase */}
      <div style={{ position:'absolute', left: cx + 30, top: cy + 8, transform: 'translateY(0)', pointerEvents:'none' }}>
        <svg width="36" height="28" viewBox="0 0 36 28">
          <rect x="2" y="6" width="32" height="20" fill="#C8A776" stroke="#0A0A0A" strokeWidth="2.5" rx="2"/>
          <rect x="14" y="2" width="8" height="6" fill="none" stroke="#0A0A0A" strokeWidth="2.5"/>
          <line x1="2" y1="14" x2="34" y2="14" stroke="#0A0A0A" strokeWidth="1.5"/>
        </svg>
      </div>

      {bubbleProgress > 0 && (
        <ComicBubble x={cx + 80} y={cy - 60} w={130} text="day one." rotate={-3} fontSize={20} progress={bubbleProgress} tail="bl"/>
      )}
    </>
  );
}

// ── PANEL 2 — The Grounds (training/RL drills) ──────────────────────────────
function Scene2Grounds({ progress, time }) {
  const carlScale = 0.85 + progress * 0.15;
  const reps = Math.floor(progress * 4);
  const armSwing = Math.sin(time * 10);
  const targetHit = progress > 0.55;
  const onoProgress = Math.max(0, Math.min(1, (progress - 0.5) / 0.4));
  const patchProgress = Math.max(0, Math.min(1, (progress - 0.7) / 0.3));

  return (
    <>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, #1A2820 0%, #0B1410 100%)' }}/>
      <GridFloor color="rgba(242,169,59,0.28)"/>

      {/* Distant target dummy */}
      <svg style={{ position:'absolute', right:50, top: 110, pointerEvents:'none' }} width="120" height="160" viewBox="0 0 120 160">
        <rect x="56" y="60" width="8" height="100" fill="#5A3A1A" stroke="#0A0A0A" strokeWidth="2.5"/>
        {/* Bullseye */}
        <circle cx="60" cy="50" r="46" fill="#F5EBD8" stroke="#0A0A0A" strokeWidth="3.5"/>
        <circle cx="60" cy="50" r="34" fill="#C72C2C" stroke="#0A0A0A" strokeWidth="2.5"/>
        <circle cx="60" cy="50" r="22" fill="#F5EBD8" stroke="#0A0A0A" strokeWidth="2.5"/>
        <circle cx="60" cy="50" r="10" fill="#C72C2C" stroke="#0A0A0A" strokeWidth="2.5"/>
        {targetHit && (
          <>
            <circle cx="60" cy="50" r="3" fill="#FFD93D" stroke="#0A0A0A" strokeWidth="2"/>
            <line x1="60" y1="50" x2="60" y2="-30" stroke="#0A0A0A" strokeWidth="2.5" strokeDasharray="3 3"/>
          </>
        )}
      </svg>

      {/* Sweat drops / motion */}
      {progress > 0.2 && [0,1,2].map(i => (
        <Spark key={i}
          x={180 + i*30 - armSwing*8}
          y={250 + i*8 + (Math.sin(time*6 + i)*4)}
          size={8} color="#A8FFB0" opacity={0.8} rotate={i*30}/>
      ))}

      {/* Carlito mid-rep with tiny dumbbell */}
      <div style={{ position: 'absolute', left: 200, top: 320, transform: 'translate(-50%, -50%)' }}>
        <Carlito x={0} y={0} size={120} stage={2} expression="determined" scale={carlScale} bobble={armSwing*2}/>
      </div>
      {/* Dumbbell (bell + bar in front of carlito) */}
      <svg style={{ position:'absolute', left: 130 - armSwing*4, top: 290 + armSwing*4, pointerEvents:'none' }} width="80" height="60" viewBox="0 0 80 60">
        <line x1="10" y1="30" x2="70" y2="30" stroke="#0A0A0A" strokeWidth="6" strokeLinecap="round"/>
        <rect x="0" y="14" width="18" height="32" fill="#3A1A2E" stroke="#0A0A0A" strokeWidth="3" rx="3"/>
        <rect x="62" y="14" width="18" height="32" fill="#3A1A2E" stroke="#0A0A0A" strokeWidth="3" rx="3"/>
      </svg>

      {/* Action lines around carlito */}
      <ActionLines x={200} y={320} count={16} length={140} color="#F2A93B" opacity={0.6} rotate={time*40}/>

      {/* Rep counter */}
      <div style={{ position:'absolute', left: 60, top: 60, fontFamily: 'Akira Expanded, sans-serif', fontWeight: 900, fontSize: 36, color:'#F2A93B', WebkitTextStroke:'2px #0A0A0A', textShadow:'4px 4px 0 #0A0A0A' }}>
        REP × {reps}
      </div>

      {/* Coach whistle bubble */}
      {progress > 0.1 && progress < 0.6 && (
        <ComicBubble x={420} y={310} w={140} text="train hard. earn it." rotate={3} fontSize={16} progress={Math.min(1, progress*2.5)} tail="br" font="Special Elite, monospace"/>
      )}

      {onoProgress > 0 && (
        <Onomatopoeia x={460} y={170} text="THWACK!" color="#FFD93D" size={56} rotate={-10} progress={onoProgress}/>
      )}

      {patchProgress > 0 && (
        <ScoutPatch x={500} y={340} size={70} label="GROUNDS" color="#F2A93B" glyph="⚡" rotate={-12} progress={patchProgress}/>
      )}
    </>
  );
}

// ── PANEL 3 — The Lab (terminal coherence) ──────────────────────────────────
function Scene3Lab({ progress, time }) {
  const termProgress = Math.max(0, Math.min(1, progress / 0.7));
  const bubbleProg = Math.max(0, Math.min(1, (progress - 0.55) / 0.3));
  const carlPulse = 1 + Math.sin(time * 4) * 0.04;

  return (
    <>
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse 80% 70% at 30% 30%, rgba(0,240,255,0.15), transparent 60%), radial-gradient(ellipse 60% 60% at 80% 80%, rgba(176,38,255,0.18), transparent 60%), #0A0F0A' }}/>
      {/* CRT scanlines */}
      <div style={{ position:'absolute', inset:0, backgroundImage:'repeating-linear-gradient(0deg, rgba(0,240,255,0.05) 0 1px, transparent 1px 4px)', pointerEvents:'none' }}/>
      <GridFloor color="rgba(0,240,255,0.25)"/>

      {/* Floating coherence orbs (Kuramoto oscillators syncing) */}
      {[0,1,2,3,4,5].map(i => {
        const phase = (i / 6) * Math.PI * 2;
        const sync = Math.min(1, progress * 1.5);
        const a = phase + time * (1 + (1-sync)*2);
        const baseX = 90 + i * 18;
        const baseY = 90 + i * 6;
        return (
          <div key={i} style={{
            position:'absolute', left: baseX + Math.cos(a)*16, top: baseY + Math.sin(a)*10,
            width: 12, height: 12, borderRadius:'50%',
            background: '#00F0FF',
            boxShadow: '0 0 16px #00F0FF, 0 0 32px rgba(0,240,255,0.6)',
            opacity: 0.85,
          }}/>
        );
      })}

      {/* Terminal */}
      <LabTerminal x={360} y={200} w={340} h={170} progress={termProgress} lines={[
        { text: '$ carl train --coherence', color: '#00F0FF' },
        { text: '> spinning up oscillators...', color: '#A8FFB0' },
        { text: '> kuramoto sync: 0.412', color: '#FFFF33' },
        { text: '> kuramoto sync: 0.847', color: '#FFFF33' },
        { text: '> COHERENCE: LOCKED', color: '#39FF14' },
      ]}/>

      {/* Carlito at the keyboard, glowing cyan */}
      <Carlito x={130} y={340} size={130} stage={3} expression="thinking" scale={carlPulse}/>

      {/* Tiny keyboard */}
      <div style={{ position:'absolute', left: 75, top: 410, width: 110, height: 22, background:'#1A2820', border:'3px solid #0A0A0A', borderRadius:4 }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(8,1fr)', gap:1, padding:2, height:'100%'}}>
          {Array.from({length:8}).map((_,i)=>(
            <div key={i} style={{ background:'#3A1A2E', borderRadius:2, opacity: Math.sin(time*8 + i)*0.3 + 0.7 }}/>
          ))}
        </div>
      </div>

      {bubbleProg > 0 && (
        <ComicBubble x={180} y={250} w={130} text="oh… i see now." rotate={-2} fontSize={17} progress={bubbleProg} tail="br"/>
      )}

      {progress > 0.7 && (
        <Onomatopoeia x={280} y={120} text="ZAP!" color="#00F0FF" size={48} rotate={8} progress={Math.min(1, (progress-0.7)/0.25)}/>
      )}
    </>
  );
}

// ── PANEL 4 — The Campfire (gathering, sharing) ─────────────────────────────
function Scene4Campfire({ progress, time }) {
  const otherFade = Math.min(1, progress * 1.5);
  const sparksUp = progress;
  const onoProg = Math.max(0, Math.min(1, (progress - 0.55) / 0.3));
  const patchProg = Math.max(0, Math.min(1, (progress - 0.75) / 0.25));

  return (
    <>
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse 80% 60% at 50% 90%, #4A2010 0%, #2A1F14 30%, #0B1410 70%)'}}/>
      <Sunburst x="50%" y="100%" size={1000} color="#FF6B35" opacity={0.22}/>

      <Bunting w={620} y={6} count={11}/>

      {/* Stars */}
      {[[80,40],[140,25],[260,15],[360,30],[460,18],[540,38]].map(([x,y],i)=>(
        <Spark key={i} x={x} y={y + Math.sin(time*2 + i)*2} size={6} color="#FFD93D" opacity={0.7 + Math.sin(time*3+i)*0.3}/>
      ))}

      {/* Campfire — center */}
      <Campfire x="50%" y={340} scale={1.1} time={time}/>

      {/* Rising sparks */}
      {Array.from({length: 8}).map((_, i) => {
        const phase = (time * 0.6 + i / 8) % 1;
        const x = 280 + Math.sin(time*1.5 + i*1.7)*40 + i*4;
        const y = 320 - phase * 280;
        return <Ember key={i} x={x} y={y} size={5 + (i%3)*2} color={i%2 ? '#FFD93D' : '#FF6B35'} glow={1-phase}/>;
      })}

      {/* Carlito (left of fire) */}
      <Carlito x={210} y={340} size={92} stage={4} expression="joyful" scale={otherFade}/>

      {/* Other little carlitos around the fire */}
      <Carlito x={420} y={340} size={84} stage={2} expression="curious" scale={Math.max(0,otherFade-0.05)}/>
      <Carlito x={480} y={310} size={70} stage={2} expression="thinking" scale={Math.max(0,otherFade-0.1)}/>
      <Carlito x={170} y={310} size={70} stage={3} expression="wise" scale={Math.max(0,otherFade-0.15)}/>

      {/* Speech bubble - sharing */}
      {progress > 0.25 && (
        <ComicBubble x={170} y={230} w={180} text="we figured it out together." rotate={-3} fontSize={16} progress={Math.min(1, (progress-0.25)*3)} tail="br"/>
      )}

      {onoProg > 0 && (
        <Onomatopoeia x={380} y={140} text="GLOW!" color="#F2A93B" size={50} rotate={-6} progress={onoProg}/>
      )}

      {patchProg > 0 && (
        <ScoutPatch x={540} y={380} size={68} label="CAMPFIRE" color="#FF6B35" glyph="♦" rotate={10} progress={patchProg}/>
      )}
    </>
  );
}

// ── PANEL 5 — The Cabin (mastery, coherence locked) ─────────────────────────
function Scene5Cabin({ progress, time }) {
  const glow = progress > 0.4;
  const meterFill = Math.min(1, progress * 1.3);
  const onoProg = Math.max(0, Math.min(1, (progress - 0.65) / 0.3));

  return (
    <>
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse 80% 60% at 50% 110%, #1A2820 0%, #0B1410 60%)'}}/>
      {/* Night sky stars */}
      {Array.from({length: 24}).map((_, i) => {
        const x = (i * 37) % 600;
        const y = (i * 53) % 200;
        return <Spark key={i} x={x} y={y} size={4 + (i%3)} color="#A8FFB0" opacity={0.5 + Math.sin(time*2 + i)*0.3}/>;
      })}

      {/* Moon */}
      <div style={{ position:'absolute', right: 70, top: 60, width: 70, height: 70, borderRadius:'50%', background:'#ECE7DC', border:'3px solid #0A0A0A', boxShadow:'0 0 30px rgba(236,231,220,0.5)'}}>
        <div style={{ position:'absolute', left:14, top:18, width:10, height:10, borderRadius:'50%', background:'rgba(0,0,0,0.12)'}}/>
        <div style={{ position:'absolute', left:36, top:36, width:14, height:14, borderRadius:'50%', background:'rgba(0,0,0,0.12)'}}/>
      </div>

      {/* Pine silhouettes */}
      <svg style={{ position:'absolute', inset:0, pointerEvents:'none' }} viewBox="0 0 600 460" preserveAspectRatio="none">
        {[20,60,520,560].map((px, i) => (
          <polygon key={i} points={`${px-22},420 ${px},${300 + (i%2)*15} ${px+22},420`} fill="#0A0F0A" stroke="#0A0A0A" strokeWidth="2"/>
        ))}
        <rect x="0" y="420" width="600" height="40" fill="#1A2820"/>
        <line x1="0" y1="420" x2="600" y2="420" stroke="#0A0A0A" strokeWidth="3"/>
      </svg>

      {/* Cabin */}
      <Cabin x={170} y={330} scale={1.05} glow={glow}/>

      {/* Firefly orbs around the cabin */}
      {Array.from({length: 7}).map((_, i) => {
        const a = time * 0.5 + i;
        const x = 170 + Math.cos(a + i)*120;
        const y = 320 + Math.sin(a*0.7 + i)*40;
        return <Ember key={i} x={x} y={y} size={9} color="#A8FFB0"/>;
      })}

      {/* Carlito stepping out — calm, coherent, larger */}
      <Carlito x={400} y={310} size={130} stage={5} expression="wise" bobble={Math.sin(time*1.5)*2}/>

      {/* Coherence meter (right side) */}
      <div style={{ position:'absolute', left: 360, top: 80, width: 230 }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'#A8FFB0', letterSpacing:'0.18em', marginBottom:8 }}>COHERENCE · R</div>
        <div style={{ height: 18, background:'#1A2820', border:'3px solid #0A0A0A', borderRadius:2, overflow:'hidden', position:'relative' }}>
          <div style={{ height:'100%', width: `${meterFill*100}%`, background:'linear-gradient(90deg, #FF6B35, #A8FFB0)', transition:'width 0.1s linear' }}/>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'#ECE7DC', marginTop:6, letterSpacing:'0.1em'}}>
          <span>0.000</span>
          <span style={{color: meterFill > 0.85 ? '#A8FFB0' : '#F2A93B', fontWeight:700}}>{meterFill.toFixed(3)}</span>
          <span>1.000</span>
        </div>
      </div>

      {progress > 0.3 && (
        <ComicBubble x={420} y={210} w={150} text="i'm ready, carl." rotate={-2} fontSize={18} progress={Math.min(1, (progress-0.3)*3)} tail="bl"/>
      )}

      {onoProg > 0 && (
        <Onomatopoeia x={460} y={150} text="LOCKED IN." color="#A8FFB0" size={42} rotate={-4} progress={onoProg}/>
      )}
    </>
  );
}

// ── PANEL 6 — Partnered & Ready (CTA) ───────────────────────────────────────
function Scene6Partner({ progress, time }) {
  // Build-up: human comes in from right, carl from left, fist-bump in middle.
  const meet = Math.min(1, progress * 1.4);
  const sunburstRot = time * 8;
  const ctaProg = Math.max(0, Math.min(1, (progress - 0.5) / 0.4));
  const onoProg = Math.max(0, Math.min(1, (progress - 0.55) / 0.25));
  const finalGlow = Math.max(0, Math.min(1, (progress - 0.4) / 0.3));

  // Carl positions — fist-bump centered around y=220 so CTA bar has room below
  const carlX = 200 + (1-meet)*-180;
  const humanX = 400 + (1-meet)*180;

  return (
    <>
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse 90% 80% at 50% 50%, #2A1F14 0%, #0B1410 70%)'}}/>
      <Sunburst x="50%" y="50%" size={1200} color="#FF6B35" opacity={0.18 + finalGlow * 0.1} rotate={sunburstRot}/>
      <Halftone color="rgba(255,217,61,0.18)" size={8} opacity={0.6}/>

      {/* Confetti / sparks */}
      {finalGlow > 0 && Array.from({length: 14}).map((_, i) => {
        const a = (i / 14) * Math.PI * 2;
        const r = 200 + Math.sin(time*2 + i) * 30;
        const cx = 340 + Math.cos(a)*r;
        const cy = 240 + Math.sin(a)*r*0.6;
        const colors = ['#FF6B35','#F2A93B','#A8FFB0','#FFD93D','#00F0FF'];
        return <Spark key={i} x={cx} y={cy} size={10 + (i%3)*3} color={colors[i%5]} rotate={time*60 + i*30} opacity={finalGlow}/>;
      })}

      {/* Carl — final hero form, with cape */}
      <Carlito x={carlX} y={220} size={150} stage={6} expression="confident" cape={true} bobble={Math.sin(time*2)*3}/>

      {/* Human partner — flipped so reaching arm faces carl */}
      <div style={{ position:'absolute', left: humanX, top: 220, transform: 'translate(-50%,-50%) scaleX(-1)'}}>
        <div style={{ transform: 'translate(50%, 0)'}}>
          <HumanPartner x={0} y={0} scale={0.78} progress={meet}/>
        </div>
      </div>

      {/* Fist-bump impact */}
      {meet > 0.85 && onoProg > 0 && (
        <>
          <ActionLines x={300} y={230} count={20} length={110} color="#FFD93D" opacity={onoProg*0.85}/>
          <Onomatopoeia x={300} y={120} text="POW!" color="#FFD93D" size={62} rotate={-8} progress={onoProg}/>
        </>
      )}

      {/* CTA bar at bottom */}
      {ctaProg > 0 && (
        <div style={{
          position:'absolute',
          left:'50%', bottom: 16,
          transform: `translateX(-50%) scale(${ctaProg < 0.4 ? Easing.easeOutBack(ctaProg/0.4) : 1})`,
          opacity: ctaProg,
          zIndex: 20,
        }}>
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 6 }}>
            <div style={{
              background:'#FFE89A',
              border:'3px solid #0A0A0A',
              padding:'4px 14px',
              boxShadow:'4px 4px 0 #0A0A0A',
              fontFamily:'Akira Expanded, sans-serif',
              fontWeight: 900,
              fontSize: 20,
              color:'#0A0A0A',
              letterSpacing:'0.04em',
              textAlign:'center',
              whiteSpace:'nowrap',
              transform:'rotate(-1deg)',
            }}>
              READY FOR ANYTHING.
            </div>
            <button style={{
              background:'#FF6B35',
              border:'4px solid #0A0A0A',
              borderRadius: 10,
              padding:'10px 24px',
              fontFamily:'Akira Expanded, sans-serif',
              fontWeight: 900,
              fontSize: 18,
              letterSpacing:'0.06em',
              color:'#0A0A0A',
              boxShadow:'5px 5px 0 #0A0A0A',
              cursor:'pointer',
              textTransform:'uppercase',
              whiteSpace:'nowrap',
            }}>
              Light the fire →
            </button>
            <div style={{ fontFamily:'Special Elite, monospace', fontSize:10, color:'#C8A776', marginTop:2, letterSpacing:'0.05em' }}>
              carl.camp · intelligence isn't a country club
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { Scene1Arrival, Scene2Grounds, Scene3Lab, Scene4Campfire, Scene5Cabin, Scene6Partner });