// Scene 2: The Diagnosis (4.5–9s)
// A clock face where hours blur/spin unevenly, with the term "time-blindness" defined.

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

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: TB.fg,
      overflow: 'hidden',
    }}>
      {/* Soft glow behind clock */}
      <div style={{
        position: 'absolute',
        left: 480, top: 140,
        width: 800, height: 800,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${TB.orange}33 0%, transparent 60%)`,
        filter: 'blur(40px)',
      }}/>

      {/* Distorted clock */}
      <DistortedClock x={580} y={240} size={600} />

      {/* Definition text — appears bottom-left */}
      <LocalSprite start={0.4} end={4.2}>
        <DefinitionText />
      </LocalSprite>

      {/* Subtitle */}
      <LocalSprite start={2.4} end={4.4}>
        <DiagnosisCaption />
      </LocalSprite>
    </div>
  );
}

function DistortedClock({ x, y, size }) {
  const { localTime } = useSprite();
  const cx = size / 2;
  const cy = size / 2;
  const r = size / 2 - 20;

  // Hour hand: erratic — sometimes barely moves, sometimes leaps
  const hourAngle = interpolate(
    [0, 0.6, 0.8, 1.4, 1.6, 2.4, 2.6, 3.4, 3.6, 4.4],
    [0, 0, 90, 90, 30, 30, 220, 220, 140, 320],
    [Easing.easeInOutCubic, Easing.easeOutBack, Easing.easeInOutCubic, Easing.easeInBack,
     Easing.easeInOutCubic, Easing.easeOutExpo, Easing.easeInOutCubic, Easing.easeOutBack,
     Easing.easeInExpo]
  )(localTime);

  // Minute hand: spins fast
  const minuteAngle = localTime * 360 * 0.8;

  // Clock face entry
  const faceT = clamp(localTime / 0.5, 0, 1);
  const faceScale = 0.7 + 0.3 * Easing.easeOutBack(faceT);

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width: size, height: size,
      transform: `scale(${faceScale})`,
      opacity: faceT,
    }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        {/* Outer face */}
        <circle cx={cx} cy={cy} r={r} fill={TB.bg} stroke={TB.bgDeep} strokeWidth="3"/>

        {/* Hour ticks */}
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i * 30 - 90) * Math.PI / 180;
          const x1 = cx + Math.cos(a) * (r - 10);
          const y1 = cy + Math.sin(a) * (r - 10);
          const x2 = cx + Math.cos(a) * (r - 30);
          const y2 = cy + Math.sin(a) * (r - 30);
          return (
            <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
              stroke={TB.fg} strokeWidth={i % 3 === 0 ? 5 : 2} strokeLinecap="round"/>
          );
        })}

        {/* Hour numerals */}
        {[12, 3, 6, 9].map((n, i) => {
          const a = (i * 90 - 90) * Math.PI / 180;
          const tx = cx + Math.cos(a) * (r - 60);
          const ty = cy + Math.sin(a) * (r - 60);
          return (
            <text key={n} x={tx} y={ty + 14} textAnchor="middle"
              fontFamily={TB.display} fontSize="42" fontWeight="800" fill={TB.fg}>
              {n}
            </text>
          );
        })}

        {/* Hands */}
        <g transform={`translate(${cx} ${cy}) rotate(${hourAngle})`}>
          <rect x="-7" y="-130" width="14" height="160" rx="7" fill={TB.fg}/>
        </g>
        <g transform={`translate(${cx} ${cy}) rotate(${minuteAngle})`}>
          <rect x="-4" y="-200" width="8" height="220" rx="4" fill={TB.orange}/>
        </g>
        <circle cx={cx} cy={cy} r="14" fill={TB.fg}/>
        <circle cx={cx} cy={cy} r="6" fill={TB.orange}/>
      </svg>

      {/* Floating time annotations: "5 min?" "an hour?" */}
      <FloatingLabel text="5 min?" x={-40} y={120} appear={1.0} disappear={2.4}/>
      <FloatingLabel text="an hour?" x={size - 80} y={80} appear={1.6} disappear={3.2}/>
      <FloatingLabel text="three?" x={size - 60} y={size - 80} appear={2.6} disappear={4.0}/>
    </div>
  );
}

function FloatingLabel({ text, x, y, appear, disappear }) {
  const { localTime } = useSprite();
  const inT = clamp((localTime - appear) / 0.3, 0, 1);
  const outT = clamp((localTime - disappear) / 0.4, 0, 1);
  const opacity = Easing.easeOutCubic(inT) * (1 - outT);
  const ty = (1 - Easing.easeOutCubic(inT)) * 16;

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      transform: `translateY(${ty}px)`,
      opacity,
      fontFamily: TB.mono,
      fontSize: 28,
      color: TB.orange,
      fontWeight: 600,
      whiteSpace: 'nowrap',
      textShadow: '0 2px 12px rgba(0,0,0,0.4)',
    }}>
      {text}
    </div>
  );
}

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

  // Type-on effect for the definition
  const fullText = 'when an hour and three hours feel the same.';
  const charProgress = clamp((localTime - 0.5) / 2.0, 0, 1);
  const visibleChars = Math.floor(charProgress * fullText.length);
  const visibleText = fullText.slice(0, visibleChars);

  return (
    <div style={{
      position: 'absolute',
      left: 130, top: 180,
      width: 420,
      opacity: o,
      transform: `translateX(${(1 - inT) * -20}px)`,
    }}>
      <div style={{
        fontFamily: TB.mono,
        fontSize: 18,
        color: TB.orange,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        marginBottom: 18,
        fontWeight: 600,
      }}>
        time blindness
      </div>
      <div style={{
        fontFamily: TB.display,
        fontSize: 56,
        fontWeight: 700,
        color: TB.bg,
        letterSpacing: '-0.02em',
        lineHeight: 1.15,
      }}>
        <span style={{ color: TB.muted, fontWeight: 500, fontSize: 28, fontStyle: 'italic' }}>
          (noun)
        </span>
        <br/>
        {visibleText}
        <span style={{
          opacity: charProgress < 1 && Math.floor(localTime * 3) % 2 === 0 ? 1 : 0,
          color: TB.orange,
        }}>|</span>
      </div>
    </div>
  );
}

function DiagnosisCaption() {
  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);

  return (
    <div style={{
      position: 'absolute',
      left: 130, top: 720,
      opacity: o,
      transform: `translateY(${(1 - inT) * 12}px)`,
      fontFamily: TB.body,
      fontSize: 26,
      color: TB.muted,
      fontWeight: 500,
      maxWidth: 480,
      lineHeight: 1.4,
    }}>
      Common in ADHD, autism, anxiety. Affects ~1 in 5.
    </div>
  );
}

window.Scene2Diagnosis = Scene2Diagnosis;