// Generic product scene — used by Shield / Stream / View / Steer with different props.
function ProductScene({
  start, end, num,
  material,        // "PTFE"
  seriesName,      // "Pure-Shield™"
  tagline,         // "化學惰性防黏"
  taglineEN,       // "CHEMICAL INERTNESS"
  subline,         // 1 short descriptive sentence zh
  sublineEN,       // short en sub
  accent,
  tempRange,       // "-70°C  /  +260°C"
  stats,           // [{k, v, u}]   (kpis)
  bullets,         // [{zh, en}] (4 items)
  applications,    // ["強酸強鹼輸送", ...]
  captionZH, captionEN,
}) {
  return (
    <Sprite start={start} end={end}>
      <SceneChrome num={num} accent={accent}/>

      {/* Material watermark */}
      <Sprite start={start + 0.1} end={end - 0.2}>
        {({ localTime, duration }) => {
          const reveal = Easing.easeOutCubic(clamp(localTime / 0.8, 0, 1));
          return (
            <div style={{
              position:'absolute', right: 60, top: 120,
              fontFamily: fonts.serif, fontSize: 420, fontWeight: 300,
              color: accent, opacity: 0.07 * reveal,
              letterSpacing:'-0.05em', lineHeight: 0.9,
              pointerEvents:'none',
            }}>{material}</div>
          );
        }}
      </Sprite>

      {/* Header block */}
      <Sprite start={start + 0.25} end={end - 0.3}>
        <TextSprite
          text={`0${num.replace(/^0/,'')} · ${material}`}
          x={120} y={180}
          size={14}
          color={accent}
          font={fonts.mono}
          weight={500}
          letterSpacing="0.38em"
          entryDur={0.4}
        />
      </Sprite>

      <Sprite start={start + 0.5} end={end - 0.3}>
        <TextSprite
          text={seriesName}
          x={120} y={220}
          size={54}
          color={liako.cream}
          font={fonts.serif}
          weight={400}
          letterSpacing="0.02em"
          entryDur={0.55}
        />
      </Sprite>

      <Sprite start={start + 0.9} end={end - 0.3}>
        <TextSprite
          text={tagline}
          x={120} y={300}
          size={96}
          color={liako.cream}
          font={fonts.sans}
          weight={700}
          letterSpacing="0.06em"
          entryDur={0.65}
        />
      </Sprite>

      <Sprite start={start + 1.3} end={end - 0.3}>
        <TextSprite
          text={taglineEN}
          x={120} y={420}
          size={14}
          color={liako.cream3}
          font={fonts.mono}
          weight={500}
          letterSpacing="0.38em"
          entryDur={0.4}
        />
      </Sprite>

      {/* Subline */}
      <Sprite start={start + 1.7} end={end - 0.3}>
        {({ localTime }) => {
          const reveal = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
          return (
            <div style={{
              position:'absolute', left: 120, top: 470,
              opacity: reveal, maxWidth: 720,
              fontFamily: fonts.sans, fontSize: 22, lineHeight: 1.6,
              color: liako.cream2, letterSpacing:'0.02em',
              textWrap:'pretty',
            }}>{subline}</div>
          );
        }}
      </Sprite>

      {/* Flowing pipe section */}
      <Sprite start={start + 2.0} end={end - 0.3}>
        {({ localTime }) => {
          const reveal = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1));
          return (
            <div style={{position:'absolute', left: 120, top: 620, width: 900, height: 90, opacity: reveal}}>
              <Pipe x={0} y={0} width={900} height={36} color={accent} dotCount={7} speed={0.35}/>
              <div style={{
                position:'absolute', left: 0, top: 50,
                fontFamily: fonts.mono, fontSize: 11, color: liako.cream3,
                letterSpacing:'0.3em',
              }}>OPERATING TEMPERATURE · {tempRange}</div>
            </div>
          );
        }}
      </Sprite>

      {/* Right column: stats + bullets + applications */}

      {/* Stats row */}
      <Sprite start={start + 2.4} end={end - 0.3}>
        {({ localTime }) => {
          const reveal = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
          return (
            <div style={{
              position:'absolute', left: 1100, top: 200,
              width: 720, opacity: reveal,
              display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 18,
            }}>
              {stats.map((s, i) => (
                <div key={i} style={{
                  borderLeft: `2px solid ${accent}`,
                  padding: '6px 0 6px 16px',
                }}>
                  <div style={{
                    fontFamily: fonts.mono, fontSize: 11, color: liako.cream3,
                    letterSpacing:'0.22em', textTransform:'uppercase',
                  }}>{s.k}</div>
                  <div style={{
                    fontFamily: fonts.serif, fontSize: 42, color: liako.cream,
                    fontWeight: 400, marginTop: 8, lineHeight: 1,
                    fontVariantNumeric:'tabular-nums',
                  }}>{s.v}<span style={{
                    fontSize: 18, color: liako.cream2, marginLeft: 4,
                    fontFamily: fonts.mono,
                  }}>{s.u || ''}</span></div>
                </div>
              ))}
            </div>
          );
        }}
      </Sprite>

      {/* Bullets (staggered) */}
      {bullets.map((b, i) => {
        const bStart = start + 3.0 + i * 0.25;
        return (
          <Sprite key={i} start={bStart} end={end - 0.3}>
            {({ localTime }) => {
              const reveal = Easing.easeOutCubic(clamp(localTime / 0.4, 0, 1));
              return (
                <div style={{
                  position:'absolute', left: 1100, top: 380 + i * 80,
                  width: 720, opacity: reveal,
                  transform: `translateX(${(1 - reveal) * 12}px)`,
                  display:'flex', gap: 20, alignItems:'baseline',
                }}>
                  <div style={{
                    fontFamily: fonts.mono, fontSize: 12, color: accent,
                    letterSpacing:'0.2em', width: 32, flexShrink: 0,
                  }}>0{i+1}</div>
                  <div style={{flex: 1}}>
                    <div style={{
                      fontFamily: fonts.sans, fontSize: 22, color: liako.cream,
                      fontWeight: 500, letterSpacing:'0.02em',
                    }}>{b.zh}</div>
                    <div style={{
                      fontFamily: fonts.mono, fontSize: 11, color: liako.cream3,
                      letterSpacing:'0.25em', marginTop: 4,
                    }}>{b.en}</div>
                  </div>
                </div>
              );
            }}
          </Sprite>
        );
      })}

      {/* Applications strip — bottom */}
      <Sprite start={start + 4.5} end={end - 0.3}>
        {({ localTime }) => {
          const reveal = Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1));
          return (
            <div style={{
              position:'absolute', left: 1100, bottom: 170,
              width: 720, opacity: reveal,
            }}>
              <div style={{
                fontFamily: fonts.mono, fontSize: 11, color: liako.cream3,
                letterSpacing:'0.32em', marginBottom: 14,
              }}>APPLICATIONS　·　應用領域</div>
              <div style={{display:'flex', flexWrap:'wrap', gap: 10}}>
                {applications.map((a, i) => (
                  <div key={i} style={{
                    padding: '8px 14px',
                    border: `1px solid ${liako.line}`,
                    borderRadius: 999,
                    fontFamily: fonts.sans, fontSize: 14,
                    color: liako.cream2, letterSpacing:'0.05em',
                  }}>{a}</div>
                ))}
              </div>
            </div>
          );
        }}
      </Sprite>

      <Caption zh={captionZH} en={captionEN} accent={accent}/>
    </Sprite>
  );
}

Object.assign(window, { ProductScene });