// Scene 4: Live now-line glides through the day (17–23s)
// Reuses the rail layout. Camera zooms in slightly. The "now" line moves
// from morning through afternoon. Active block pulses gently.

function Scene4Living() {
  const { localTime, progress, duration } = useSprite();

  // Now-line: from 9:47am at start, sweeps to ~3:30pm by end (5h 43m in 6s)
  const nowMin = interpolate(
    [0, duration],
    [9*60 + 47, 15*60 + 30],
    Easing.easeInOutCubic
  )(localTime);

  // Camera: zoom in slightly, follow the now-line vertically (Screen-Studio-style)
  const targetY = (nowMin - RAIL_START_MIN) * PX_PER_MIN;
  const railTop = 110 + 64;
  const camFocusY = railTop + targetY;

  // Pull camera so the now-line stays roughly mid-screen
  const camScale = 1.25;
  const camTy = STAGE_H/2 - camFocusY * camScale + (camScale - 1) * 200;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: TB.bg,
      overflow: 'hidden',
    }}>
      {/* Faux-app camera viewport */}
      <div style={{
        position: 'absolute',
        left: 0, top: 0, width: STAGE_W, height: STAGE_H,
        transform: `translateY(${camTy}px) scale(${camScale})`,
        transformOrigin: 'center top',
      }}>
        <AppChrome localTime={1}/>
        <ScheduleRail nowMin={nowMin}/>
      </div>

      {/* Caption (lives in non-scaled overlay) */}
      <LocalSprite start={0.5} end={duration - 0.4}>
        <LivingCaption nowMin={nowMin}/>
      </LocalSprite>

      {/* Subtle vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to bottom, rgba(250,247,242,0.92) 0%, transparent 18%, transparent 82%, rgba(250,247,242,0.92) 100%)',
        pointerEvents: 'none',
      }}/>
    </div>
  );
}

// Reusable rail with all blocks settled and a moving now-line.
function ScheduleRail({ nowMin, hideHeader = false }) {
  const railTop = 110;
  const nowY = (nowMin - RAIL_START_MIN) * PX_PER_MIN;

  return (
    <div style={{
      position: 'absolute',
      left: '50%',
      top: railTop,
      transform: 'translateX(-50%)',
      width: 720,
      height: RAIL_HEIGHT + 40,
    }}>
      {!hideHeader && (
        <>
          <div style={{
            fontFamily: TB.display, fontWeight: 800, fontSize: 32, color: TB.fg,
            letterSpacing: '-0.02em', marginBottom: 4,
          }}>Tuesday</div>
          <div style={{
            fontFamily: TB.body, fontSize: 16, color: TB.muted, marginBottom: 22, fontWeight: 500,
          }}>April 28 · 8 blocks · 5h 25m planned</div>
        </>
      )}

      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '70px 1fr', gap: 12, height: RAIL_HEIGHT }}>
        {/* Hour gutter */}
        <div style={{ position: 'relative', height: RAIL_HEIGHT }}>
          {Array.from({ length: 14 }, (_, i) => {
            const h = 6 + i;
            const y = i * 60 * PX_PER_MIN;
            const isNow = Math.abs((h * 60) - nowMin) < 40;
            return (
              <div key={h} style={{
                position: 'absolute', left: 0, top: y - 8,
                fontFamily: TB.mono, fontSize: 13,
                color: isNow ? TB.orange : TB.muted,
                fontWeight: isNow ? 700 : 500, letterSpacing: '0.04em',
              }}>
                {String(h).padStart(2, '0')}:00
              </div>
            );
          })}
        </div>

        {/* Block area */}
        <div style={{ position: 'relative', height: RAIL_HEIGHT }}>
          {Array.from({ length: 14 }, (_, i) => {
            const y = i * 60 * PX_PER_MIN;
            return (
              <div key={i} style={{
                position: 'absolute', left: 0, right: 0, top: y,
                height: 1, background: TB.rail,
              }}/>
            );
          })}

          {/* Settled blocks */}
          {SCHEDULE.map(b => {
            const top = (b.startMin - RAIL_START_MIN) * PX_PER_MIN;
            const height = b.dur * PX_PER_MIN;
            const isActive = nowMin >= b.startMin && nowMin < b.startMin + b.dur;
            const isPast = nowMin >= b.startMin + b.dur;

            return (
              <div key={b.id} style={{
                position: 'absolute', left: 4, right: 4, top, height,
                background: b.color,
                borderRadius: 14,
                padding: '12px 18px',
                opacity: isPast ? 0.42 : 1,
                boxShadow: isActive
                  ? `0 0 0 3px ${TB.orange}, 0 8px 24px ${TB.orange}33`
                  : '0 1px 2px rgba(0,0,0,0.04)',
                transform: isActive ? 'scale(1.012)' : 'scale(1)',
                transition: 'opacity 0.4s, transform 0.3s, box-shadow 0.3s',
                display: 'flex', gap: 14, alignItems: 'flex-start',
                overflow: 'hidden',
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 9,
                  background: 'rgba(0,0,0,0.18)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontWeight: 800, fontSize: 16,
                  flexShrink: 0,
                  textDecoration: isPast ? 'line-through' : 'none',
                }}>{b.icon}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: TB.display, fontWeight: 700, fontSize: 19,
                    color: 'rgba(0,0,0,0.82)', letterSpacing: '-0.01em',
                    textDecoration: isPast ? 'line-through' : 'none',
                  }}>{b.title}</div>
                  {height > 50 && (
                    <div style={{
                      fontFamily: TB.mono, fontSize: 13,
                      color: 'rgba(0,0,0,0.55)', marginTop: 4, fontWeight: 500,
                    }}>
                      {fmtTime12(b.startMin)} – {fmtTime12(b.startMin + b.dur)}
                    </div>
                  )}
                </div>
              </div>
            );
          })}

          {/* Now line */}
          <div style={{
            position: 'absolute', left: -12, right: 0, top: nowY,
            zIndex: 4,
          }}>
            <div style={{
              position: 'absolute', left: 0, right: 0, top: -1, height: 2,
              background: TB.orange,
              boxShadow: `0 0 12px ${TB.orange}99`,
            }}/>
            <div style={{
              position: 'absolute', left: -8, top: -7, width: 14, height: 14,
              borderRadius: '50%', background: TB.orange,
              boxShadow: `0 0 0 4px ${TB.orange}33`,
              animation: 'tb-pulse 1.6s ease-in-out infinite',
            }}/>
            <div style={{
              position: 'absolute', right: -2, top: -22,
              fontFamily: TB.mono, fontSize: 12, fontWeight: 700,
              color: TB.orange, letterSpacing: '0.08em',
            }}>NOW · {fmtTime(Math.round(nowMin))}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function LivingCaption({ nowMin }) {
  const { localTime, duration } = useSprite();
  const inT = clamp(localTime / 0.4, 0, 1);
  const outT = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);
  const o = Easing.easeOutCubic(inT) * (1 - outT);

  // Find current/active block
  const active = SCHEDULE.find(b => nowMin >= b.startMin && nowMin < b.startMin + b.dur);
  const status = active ? active.title : 'between blocks';

  return (
    <div style={{
      position: 'absolute',
      right: 60, top: 140,
      opacity: o,
      width: 380,
    }}>
      <div style={{
        fontFamily: TB.mono, fontSize: 13, color: TB.muted,
        letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700,
        marginBottom: 10,
      }}>Your day, in motion</div>
      <div style={{
        fontFamily: TB.display, fontSize: 38, fontWeight: 800, color: TB.fg,
        letterSpacing: '-0.025em', lineHeight: 1.05, marginBottom: 20,
      }}>
        Always know<br/>where you are.
      </div>
      <div style={{
        fontFamily: TB.body, fontSize: 15, color: TB.muted, fontWeight: 500,
        lineHeight: 1.5, marginBottom: 24,
      }}>
        The "now" line glides with you. Past blocks fade. Active block glows.
      </div>
      <div style={{
        background: '#fff',
        border: `1px solid ${TB.rail}`,
        borderRadius: 14,
        padding: '16px 20px',
        boxShadow: '0 4px 12px rgba(0,0,0,0.04)',
      }}>
        <div style={{
          fontFamily: TB.mono, fontSize: 11, color: TB.muted,
          letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700,
        }}>Right now</div>
        <div style={{
          fontFamily: TB.display, fontSize: 22, fontWeight: 700,
          color: TB.fg, marginTop: 4, letterSpacing: '-0.01em',
        }}>{status}</div>
      </div>
    </div>
  );
}

window.Scene4Living = Scene4Living;
window.ScheduleRail = ScheduleRail;