// Scene 2: Four-series overview — "適才適所"
function SceneOverview({ start, end }) {
  const dur = end - start;

  const cards = [
    { key:'shield', zh:'Pure-Shield™', mat:'PTFE', tag:'化學惰性防黏', en:'CHEMICAL INERTNESS', accent: liako.warm },
    { key:'stream', zh:'Pure-Stream™', mat:'PFA', tag:'分級流體傳輸', en:'TIERED TRANSFER',    accent: liako.accent },
    { key:'view',   zh:'Pure-View™',   mat:'FEP', tag:'高透視監控', en:'VISIBLE CLARITY',    accent: liako.violet },
    { key:'steer',  zh:'Pure-Steer™',  mat:'EPDM',tag:'AI 液冷專用', en:'AI LIQUID COOLING', accent: liako.mint },
  ];

  return (
    <Sprite start={start} end={end}>
      <SceneChrome num="01" nameCN="產品總覽" nameEN="SERIES OVERVIEW" accent={liako.accent}/>

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

      <Sprite start={start + 0.9} end={end - 0.4}>
        <TextSprite
          text="THE RIGHT MATERIAL · FOR THE RIGHT PLACE"
          x={960} y={290}
          size={13}
          color={liako.accent}
          font={fonts.mono}
          weight={500}
          align="center"
          letterSpacing="0.4em"
          entryDur={0.5}
          exitDur={0.4}
        />
      </Sprite>

      {/* Four cards */}
      {cards.map((c, i) => {
        const cardStart = start + 1.4 + i * 0.35;
        return (
          <Sprite key={c.key} start={cardStart} end={end - 0.3}>
            {({ localTime }) => {
              const reveal = Easing.easeOutCubic(clamp(localTime / 0.55, 0, 1));
              const x = 120 + i * 430;
              const y = 400 + (1 - reveal) * 30;
              return (
                <div style={{
                  position:'absolute', left: x, top: y,
                  width: 390, height: 380,
                  background: liako.ink2,
                  border: `1px solid ${liako.line}`,
                  borderTop: `3px solid ${c.accent}`,
                  opacity: reveal,
                  padding: '36px 32px',
                  display:'flex', flexDirection:'column',
                }}>
                  <div style={{
                    fontFamily: fonts.mono, fontSize: 12, color: c.accent,
                    letterSpacing:'0.3em', marginBottom: 18,
                  }}>0{i+1} · {c.mat}</div>

                  <div style={{
                    fontFamily: fonts.serif, fontSize: 34, color: liako.cream,
                    fontWeight: 500, letterSpacing:'0.01em', lineHeight: 1.1,
                  }}>{c.zh}</div>

                  <div style={{
                    fontFamily: fonts.sans, fontSize: 22, color: liako.cream,
                    fontWeight: 500, marginTop: 30, letterSpacing:'0.08em',
                  }}>{c.tag}</div>

                  <div style={{
                    fontFamily: fonts.mono, fontSize: 11, color: liako.cream3,
                    letterSpacing:'0.28em', marginTop: 8,
                  }}>{c.en}</div>

                  <div style={{flex: 1}}/>

                  <div style={{position:'absolute', left: 32, right: 32, bottom: 32, height: 10}}>
                    <Pipe x={0} y={0} width={326} height={10} color={c.accent} dotCount={4} speed={0.5} />
                  </div>
                </div>
              );
            }}
          </Sprite>
        );
      })}

      <Caption
        zh="四個系列　·　從嚴苛化工、精密製程、可視監控到 AI 液冷"
        en="FOUR SERIES · FROM HARSH CHEMISTRY TO LIQUID-COOLED AI"
      />
    </Sprite>
  );
}

Object.assign(window, { SceneOverview });