// Scene 1: Brand intro. 0–6s
function SceneIntro({ start, end }) {
  const t = useTime();
  const local = t - start;
  const dur = end - start;

  // Camera-ish drift: the whole composition slightly zooms in.
  const zoom = interpolate([0, dur], [1, 1.05], Easing.easeInOutCubic)(local);

  return (
    <Sprite start={start} end={end}>
      {/* Horizon line */}
      <div style={{
        position:'absolute', left: '10%', right: '10%', top: '50%',
        height: 1, background: liako.line,
      }}/>

      <div style={{
        position:'absolute', inset: 0,
        display:'flex', flexDirection:'column',
        alignItems:'center', justifyContent:'center',
        transform: `scale(${zoom})`,
        transformOrigin:'center',
      }}>
        <Sprite start={start + 0.3} end={start + 5.5}>
          <TextSprite
            text="嵩  慶"
            x={960} y={360}
            size={140}
            color={liako.cream}
            font={fonts.serif}
            weight={300}
            align="center"
            letterSpacing="0.3em"
            entryDur={1.0}
            exitDur={0.6}
          />
        </Sprite>

        <Sprite start={start + 0.8} end={start + 5.5}>
          <TextSprite
            text="L  I  A  K  O"
            x={960} y={540}
            size={22}
            color={liako.accent}
            font={fonts.mono}
            weight={500}
            align="center"
            letterSpacing="0.5em"
            entryDur={0.8}
            exitDur={0.6}
          />
        </Sprite>

        <Sprite start={start + 1.8} end={start + 5.5}>
          <TextSprite
            text="誠實 · 卓越 · 僕人精神"
            x={960} y={640}
            size={24}
            color={liako.cream2}
            font={fonts.sans}
            weight={300}
            align="center"
            letterSpacing="0.3em"
            entryDur={0.6}
            exitDur={0.6}
          />
        </Sprite>

        <Sprite start={start + 2.6} end={start + 5.5}>
          <TextSprite
            text="HONESTY  ·  EXCELLENCE  ·  STEWARDSHIP"
            x={960} y={680}
            size={11}
            color={liako.cream3}
            font={fonts.mono}
            weight={400}
            align="center"
            letterSpacing="0.4em"
            entryDur={0.5}
            exitDur={0.5}
          />
        </Sprite>
      </div>

      {/* Animated pipe across the bottom */}
      <Sprite start={start + 0.5} end={end}>
        {({ localTime }) => {
          const reveal = Easing.easeOutCubic(clamp(localTime / 1.2, 0, 1));
          return (
            <div style={{
              position:'absolute', left: 200, bottom: 160, width: 1520 * reveal,
              opacity: reveal,
            }}>
              <Pipe x={0} y={0} width={1520 * reveal} height={14} color={liako.accent} dotCount={10} speed={0.4}/>
            </div>
          );
        }}
      </Sprite>

      <Caption
        zh="專業管家的誠實承諾　·　流體傳輸的第一性原理"
        en="Honest Stewardship · First Principles of Fluid Transfer"
      />
    </Sprite>
  );
}

Object.assign(window, { SceneIntro });