// Common visual primitives shared across scenes.

// Palette (declared once, used everywhere)
const liako = {
  ink:   '#0e1a2b',        // deep navy background
  ink2:  '#142336',        // slightly lighter panel
  cream: '#f2ece0',        // warm off-white
  cream2:'rgba(242,236,224,0.65)',
  cream3:'rgba(242,236,224,0.35)',
  line:  'rgba(242,236,224,0.14)',
  accent:'oklch(72% 0.13 215)',    // calm technical blue
  warm:  'oklch(72% 0.13 55)',     // warm amber (for shield)
  mint:  'oklch(74% 0.12 160)',    // cool mint (for steer / cooling)
  violet:'oklch(72% 0.13 295)',    // violet (for view)
};

const fonts = {
  sans: '"Noto Sans TC", "Inter", system-ui, sans-serif',
  mono: '"IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace',
  serif:'"Noto Serif TC", "Source Serif Pro", serif',
};

// Flowing pipe — a rounded rect with moving "fluid" dots inside.
function Pipe({
  x, y, width, height = 28,
  color = liako.accent,
  dotCount = 6,
  speed = 1,          // cycles per second
  direction = 1,      // 1 = L→R, -1 = R→L
  opacity = 1,
  radius = 999,
  showFluid = true,
  capL = false, capR = false,
}) {
  const t = useTime();
  const dots = [];
  if (showFluid) {
    for (let i = 0; i < dotCount; i++) {
      const phase = (t * speed + i / dotCount) % 1;
      const x0 = direction > 0 ? phase : 1 - phase;
      dots.push(
        <div key={i} style={{
          position: 'absolute',
          left: `${x0 * 100}%`,
          top: '50%',
          width: height * 0.35,
          height: height * 0.35,
          marginLeft: -height * 0.175,
          marginTop: -height * 0.175,
          background: color,
          borderRadius: 999,
          opacity: 0.85,
          boxShadow: `0 0 ${height * 0.6}px ${color}`,
        }}/>
      );
    }
  }
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y, width, height,
      borderRadius: radius,
      background: 'rgba(255,255,255,0.04)',
      border: `1.5px solid ${color}`,
      boxShadow: `inset 0 0 ${height * 0.3}px rgba(255,255,255,0.06)`,
      overflow: 'hidden',
      opacity,
    }}>
      {dots}
      {capL && <div style={{position:'absolute',left:-2,top:-2,bottom:-2,width:height*0.5,borderRadius:`${radius}px 0 0 ${radius}px`,background:color,opacity:0.35}}/>}
      {capR && <div style={{position:'absolute',right:-2,top:-2,bottom:-2,width:height*0.5,borderRadius:`0 ${radius}px ${radius}px 0`,background:color,opacity:0.35}}/>}
    </div>
  );
}

// Corner registration ticks (decorative frame)
function CornerTicks({ inset = 48, color = liako.cream3, len = 20 }) {
  const bar = { position:'absolute', background: color };
  return (
    <>
      {/* TL */}
      <div style={{...bar, left: inset, top: inset, width: len, height: 1}}/>
      <div style={{...bar, left: inset, top: inset, width: 1, height: len}}/>
      {/* TR */}
      <div style={{...bar, right: inset, top: inset, width: len, height: 1}}/>
      <div style={{...bar, right: inset, top: inset, width: 1, height: len}}/>
      {/* BL */}
      <div style={{...bar, left: inset, bottom: inset, width: len, height: 1}}/>
      <div style={{...bar, left: inset, bottom: inset, width: 1, height: len}}/>
      {/* BR */}
      <div style={{...bar, right: inset, bottom: inset, width: len, height: 1}}/>
      <div style={{...bar, right: inset, bottom: inset, width: 1, height: len}}/>
    </>
  );
}

// Scene chrome: scene number + scene name in corner, plus a thin horizon line.
function SceneChrome({ num, nameCN, nameEN, accent = liako.accent }) {
  return (
    <>
      <CornerTicks />
      <div style={{
        position:'absolute', left: 72, top: 68,
        display:'flex', alignItems:'baseline', gap: 14,
        fontFamily: fonts.mono,
        color: liako.cream2,
        fontSize: 13,
        letterSpacing: '0.12em',
      }}>
        <span style={{color: accent}}>●</span>
        <span>{num}</span>
        <span style={{opacity: 0.5}}>/</span>
        <span>06</span>
      </div>
      <div style={{
        position:'absolute', right: 72, top: 68,
        fontFamily: fonts.mono,
        color: liako.cream3,
        fontSize: 12,
        letterSpacing: '0.2em',
        textAlign:'right',
        whiteSpace:'nowrap',
      }}>
        LIAKO · 嵩慶
      </div>
    </>
  );
}

// Caption bar at bottom
function Caption({ zh, en, accent = liako.accent }) {
  return (
    <div style={{
      position:'absolute', left: 72, bottom: 68,
      display:'flex', alignItems:'baseline', gap: 18,
      maxWidth: 1400,
    }}>
      <div style={{
        width: 6, height: 28, background: accent, borderRadius: 2,
        alignSelf:'center',
      }}/>
      <div>
        <div style={{
          fontFamily: fonts.sans, fontWeight: 500,
          color: liako.cream, fontSize: 22, letterSpacing: '0.02em',
        }}>{zh}</div>
        {en && <div style={{
          fontFamily: fonts.mono, color: liako.cream3,
          fontSize: 12, letterSpacing: '0.18em',
          marginTop: 6, textTransform: 'uppercase',
        }}>{en}</div>}
      </div>
    </div>
  );
}

// A single data cell used by the comparison table
function SpecCell({ label, value, highlight = false, accent = liako.accent }) {
  return (
    <div style={{
      padding: '14px 16px',
      borderTop: `1px solid ${liako.line}`,
      color: highlight ? liako.cream : liako.cream2,
      fontFamily: fonts.mono,
      fontSize: 13,
      letterSpacing: '0.03em',
      background: highlight ? `${accent}18` : 'transparent',
      borderLeft: highlight ? `2px solid ${accent}` : '2px solid transparent',
    }}>
      {value}
    </div>
  );
}

Object.assign(window, { liako, fonts, Pipe, CornerTicks, SceneChrome, Caption, SpecCell });