// Scene 7: Closing card.
function SceneOutro({ start, end }) {
  const dur = end - start;

  return (
    <Sprite start={start} end={end}>
      <CornerTicks/>

      <Sprite start={start + 0.2} end={end - 0.2}>
        <TextSprite
          text="SHIELD · STREAM · VIEW · STEER"
          x={960} y={310}
          size={18}
          color={liako.accent}
          font={fonts.mono}
          weight={500}
          align="center"
          letterSpacing="0.5em"
          entryDur={0.6}
        />
      </Sprite>

      <Sprite start={start + 0.8} end={end - 0.2}>
        <TextSprite
          text="適才適所"
          x={960} y={450}
          size={140}
          color={liako.cream}
          font={fonts.serif}
          weight={400}
          align="center"
          letterSpacing="0.25em"
          entryDur={0.8}
        />
      </Sprite>

      <Sprite start={start + 1.4} end={end - 0.2}>
        <TextSprite
          text="守護每一段流體傳輸的誠實一致"
          x={960} y={610}
          size={26}
          color={liako.cream2}
          font={fonts.sans}
          weight={300}
          align="center"
          letterSpacing="0.3em"
          entryDur={0.5}
        />
      </Sprite>

      <Sprite start={start + 2.0} end={end - 0.2}>
        <TextSprite
          text="LIAKO  ·  嵩慶"
          x={960} y={720}
          size={14}
          color={liako.cream3}
          font={fonts.mono}
          weight={500}
          align="center"
          letterSpacing="0.6em"
          entryDur={0.5}
        />
      </Sprite>

      {/* Four accent dots representing the four series */}
      <Sprite start={start + 0.4} end={end - 0.2}>
        {({ localTime }) => {
          const colors = [liako.warm, liako.accent, liako.violet, liako.mint];
          return (
            <div style={{
              position:'absolute', left: '50%', top: 820,
              transform:'translateX(-50%)',
              display:'flex', gap: 36,
            }}>
              {colors.map((c, i) => {
                const r = Easing.easeOutCubic(clamp((localTime - i * 0.15) / 0.5, 0, 1));
                return (
                  <div key={i} style={{
                    width: 10, height: 10, borderRadius: 999,
                    background: c, opacity: r,
                    boxShadow: `0 0 14px ${c}`,
                    transform: `scale(${r})`,
                  }}/>
                );
              })}
            </div>
          );
        }}
      </Sprite>

      {/* Full-width pipe at the very bottom */}
      <Sprite start={start + 0.3} end={end - 0.1}>
        {({ localTime }) => {
          const reveal = Easing.easeOutCubic(clamp(localTime / 1.2, 0, 1));
          const width = 1680 * reveal;
          return (
            <div style={{position:'absolute', left: (1920-width)/2, bottom: 130, opacity: reveal}}>
              <Pipe x={0} y={0} width={width} height={18} color={liako.accent} dotCount={14} speed={0.3}/>
            </div>
          );
        }}
      </Sprite>
    </Sprite>
  );
}

Object.assign(window, { SceneOutro });