// Scene 1: The Chaos (0–4.5s)
// A messy desk view: scattered sticky notes, a clock, scribbled todo list.
// Camera slowly drifts in. Title overlays.

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

  // Camera: very slow ken-burns push in
  const camScale = 1 + 0.06 * progress;
  const camX = -progress * 18;
  const camY = -progress * 10;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 40%, ${TB.bg} 0%, ${TB.bgDeep} 100%)`,
      overflow: 'hidden',
    }}>
      {/* Desk: paper grain */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          radial-gradient(circle at 20% 30%, rgba(180,160,130,0.08) 0%, transparent 40%),
          radial-gradient(circle at 80% 70%, rgba(180,160,130,0.06) 0%, transparent 35%)
        `,
        transform: `scale(${camScale}) translate(${camX}px, ${camY}px)`,
        transformOrigin: 'center',
      }}>
        {/* Scattered sticky notes */}
        <StickyNote x={120} y={140} w={260} h={220} rot={-7} color={TB.butter} delay={0}>
          <div style={{ fontSize: 38, fontWeight: 700, color: '#5a4a1f', lineHeight: 1.1 }}>
            email<br/>back<br/>Sarah !!
          </div>
        </StickyNote>

        <StickyNote x={1480} y={90} w={280} h={200} rot={5} color={TB.mint} delay={0.15}>
          <div style={{ fontSize: 32, fontWeight: 700, color: '#1f4a3a' }}>
            dentist?<br/>call back<br/><span style={{textDecoration:'underline'}}>today</span>
          </div>
        </StickyNote>

        <StickyNote x={1500} y={720} w={290} h={250} rot={-9} color={TB.rose} delay={0.4}>
          <div style={{ fontSize: 30, fontWeight: 700, color: '#5a1f2a' }}>
            pick up<br/>kids<br/>3:30
          </div>
        </StickyNote>

        <StickyNote x={140} y={760} w={300} h={230} rot={8} color={TB.sky} delay={0.55}>
          <div style={{ fontSize: 32, fontWeight: 700, color: '#1a3a5a' }}>
            quarterly<br/>review<br/>!!!
          </div>
        </StickyNote>

        <StickyNote x={420} y={650} w={240} h={180} rot={-3} color={TB.lavender} delay={0.7}>
          <div style={{ fontSize: 26, fontWeight: 700, color: '#3a1f5a' }}>
            groceries
          </div>
        </StickyNote>

        <StickyNote x={1280} y={420} w={220} h={180} rot={11} color={TB.peach} delay={0.85}>
          <div style={{ fontSize: 26, fontWeight: 700, color: '#5a2a1f' }}>
            laundry<br/>+ vet
          </div>
        </StickyNote>

        {/* Notepad with scribbled todos in center */}
        <Notepad x={STAGE_W/2 - 280} y={300} delay={0.2} />
      </div>

      {/* Title overlay (fades in late, fades out before scene end) */}
      <LocalSprite start={0.6} end={4.2}>
        <ChaosTitle />
      </LocalSprite>

      {/* Vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.18) 100%)',
        pointerEvents: 'none',
      }}/>
    </div>
  );
}

function StickyNote({ x, y, w, h, rot, color, delay = 0, children }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / 0.5, 0, 1);
  const ease = Easing.easeOutBack(t);

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width: w, height: h,
      background: color,
      transform: `rotate(${rot}deg) scale(${0.7 + 0.3 * ease})`,
      opacity: t,
      boxShadow: '0 8px 18px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08)',
      padding: 22,
      borderRadius: 2,
      transformOrigin: 'center',
      animation: t >= 1 ? 'tb-jitter 4s ease-in-out infinite' : undefined,
      '--r': `${rot}deg`,
    }}>
      {children}
    </div>
  );
}

function Notepad({ x, y, delay = 0 }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / 0.6, 0, 1);
  const ease = Easing.easeOutCubic(t);

  // Scribbled todos appearing one by one, then getting crossed out chaotically
  const items = [
    { text: 'finish report', appear: 0.6, cross: 0 },
    { text: 'call insurance', appear: 0.9, cross: 0 },
    { text: 'submit expenses', appear: 1.2, cross: 2.5 },
    { text: 'team standup', appear: 1.5, cross: 0 },
    { text: 'reply to design ↓', appear: 1.8, cross: 0 },
    { text: 'lunch??', appear: 2.1, cross: 0 },
    { text: 'gym', appear: 2.4, cross: 3.0 },
  ];

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width: 560, height: 660,
      background: '#fffdf6',
      transform: `rotate(-2deg) scale(${0.85 + 0.15 * ease})`,
      opacity: t,
      boxShadow: '0 24px 48px rgba(0,0,0,0.18), 0 6px 12px rgba(0,0,0,0.1)',
      borderRadius: 4,
      padding: '40px 50px',
      backgroundImage: 'repeating-linear-gradient(transparent 0 47px, rgba(150,100,150,0.18) 47px 48px)',
    }}>
      <div style={{
        fontFamily: '"Caveat", "Comic Sans MS", cursive',
        fontSize: 44,
        color: '#222',
        marginBottom: 10,
        fontWeight: 700,
        letterSpacing: '0.02em',
      }}>
        TODAY
      </div>

      {items.map((item, i) => {
        const itemT = clamp((localTime - item.appear) / 0.25, 0, 1);
        const crossT = item.cross > 0 ? clamp((localTime - item.cross) / 0.4, 0, 1) : 0;
        return (
          <div key={i} style={{
            position: 'relative',
            fontFamily: '"Caveat", "Comic Sans MS", cursive',
            fontSize: 36,
            color: '#222',
            opacity: itemT,
            transform: `translateX(${(1 - itemT) * -20}px) rotate(${(i % 2 === 0 ? -0.5 : 0.5)}deg)`,
            marginBottom: 10,
            paddingLeft: 8,
            fontWeight: 600,
          }}>
            – {item.text}
            {crossT > 0 && (
              <div style={{
                position: 'absolute',
                left: 0, right: `${(1 - crossT) * 100}%`,
                top: '52%', height: 3,
                background: '#c33',
                transform: 'rotate(-1.5deg)',
              }}/>
            )}
          </div>
        );
      })}
    </div>
  );
}

function ChaosTitle() {
  const { localTime, duration, progress } = useSprite();
  const entryT = clamp(localTime / 0.4, 0, 1);
  const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
  const o = Easing.easeOutCubic(entryT) * (1 - exitT);
  const ty = (1 - Easing.easeOutCubic(entryT)) * 12 + exitT * -12;

  return (
    <div style={{
      position: 'absolute',
      left: '50%', top: 88,
      transform: `translateX(-50%) translateY(${ty}px)`,
      opacity: o,
      textAlign: 'center',
    }}>
      <div style={{
        fontFamily: TB.mono,
        fontSize: 22,
        color: TB.muted,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        marginBottom: 14,
        fontWeight: 500,
      }}>
        9:47 am · Tuesday
      </div>
      <div style={{
        fontFamily: TB.display,
        fontSize: 88,
        fontWeight: 800,
        color: TB.fg,
        letterSpacing: '-0.03em',
        lineHeight: 1,
      }}>
        Where did the morning go?
      </div>
    </div>
  );
}

window.Scene1Chaos = Scene1Chaos;