// While2 — Splash (minimal)
// Logo + loading bar only, vertically centered.

const INK = '#e8e6df';

function useTick(intervalMs) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setT((x) => x + 1), intervalMs);
    return () => clearInterval(id);
  }, [intervalMs]);
  return t;
}

const TITLE_LINES = [
  '     _/\\/\\______/\\/\\__/\\/\\________/\\/\\____/\\/\\________________/\\/\\/\\/\\/\\___',
  '    _/\\/\\__/\\__/\\/\\__/\\/\\________________/\\/\\______/\\/\\/\\____________/\\/\\_ ',
  '   _/\\/\\/\\/\\/\\/\\/\\__/\\/\\/\\/\\____/\\/\\____/\\/\\____/\\/\\/\\/\\/\\____/\\/\\/\\/\\___  ',
  '  _/\\/\\/\\__/\\/\\/\\__/\\/\\__/\\/\\__/\\/\\____/\\/\\____/\\/\\________/\\/\\_________   ',
  ' _/\\/\\______/\\/\\__/\\/\\__/\\/\\__/\\/\\/\\__/\\/\\/\\____/\\/\\/\\/\\__/\\/\\/\\/\\/\\/\\_    ',
  '______________________________________________________________________     ',
];

// Render each line, painting every `/\` pair in cyan and leaving the rest
// (underscores + spaces) in INK.
function ColorizedTitle({ fontSize }) {
  const lines = TITLE_LINES.map((line, li) => {
    const segs = [];
    let i = 0;
    while (i < line.length) {
      if (line[i] === '/' && line[i + 1] === '\\') {
        segs.push({ t: '/\\', c: true });
        i += 2;
      } else {
        // accumulate run of non-slash chars
        let j = i;
        while (j < line.length && !(line[j] === '/' && line[j + 1] === '\\')) j++;
        segs.push({ t: line.slice(i, j), c: false });
        i = j;
      }
    }
    return (
      <div key={li}>
        {segs.map((s, k) =>
          s.c
            ? <span key={k}>{s.t}</span>
            : <span key={k} style={{ color: W2.cyan }}>{s.t}</span>
        )}
      </div>
    );
  });
  return (
    <pre style={{
      fontFamily: W2.mono, fontSize, lineHeight: 1.05,
      color: INK, whiteSpace: 'pre', margin: 0,
    }}>{lines}</pre>
  );
}

function LoadBar({ width = 22, durationMs = 4500 }) {
  const tick = useTick(durationMs / width);
  const filled = Math.min(width, tick);
  return (
    <div style={{ fontFamily: W2.mono, color: INK, fontSize: 7, letterSpacing: '1px' }}>
      <span style={{ margin: "0px", padding: "0px" }}>{'█'.repeat(filled)}</span><span style={{ color: 'rgba(232,230,223,0.25)' }}>{'░'.repeat(width - filled)}</span>
    </div>);

}

function SplashSwim() {
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative', overflow: 'hidden',
      background: '#000', color: INK, fontFamily: W2.mono,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 28, paddingBottom: '18%'
    }}>
      <div className="w2-scan" />
      <ColorizedTitle fontSize={7} />
      <LoadBar width={18} durationMs={4500} />
    </div>);

}

window.SplashSwim = SplashSwim;