// welcome-screens.jsx — First-run welcome AFTER setup completes.
// Stroke-writes the greeting in the user's chosen language, then settles to
// just: Ghast logo + localized "Start" button. No "Welcome" text.

const WELCOME_W = 1100;
const WELCOME_H = 720;

// Greeting + Start label per language
const HELLO_BY_LANG = {
  'zh-CN': { hello: '你好',     start: '开始',      cjk: true,  size: 220 },
  'zh-TW': { hello: '你好',     start: '開始',      cjk: true,  size: 220 },
  'en':    { hello: 'Hello',    start: 'Start',     cjk: false, size: 220 },
  'ja':    { hello: 'こんにちは', start: 'はじめる',  cjk: true,  size: 140 },
  'ko':    { hello: '안녕하세요',  start: '시작',      cjk: true,  size: 150 },
  'fr':    { hello: 'Bonjour',  start: 'Commencer', cjk: false, size: 200 },
  'vi':    { hello: 'Xin chào', start: 'Bắt đầu',   cjk: false, size: 200 },
  'ru':    { hello: 'Привет',   start: 'Начать',    cjk: false, size: 200 },
  'es':    { hello: 'Hola',     start: 'Empezar',   cjk: false, size: 220 },
  'de':    { hello: 'Hallo',    start: 'Starten',   cjk: false, size: 220 },
  'pt':    { hello: 'Olá',      start: 'Começar',   cjk: false, size: 220 },
  'ar':    { hello: 'مرحبا',    start: 'ابدأ',      cjk: false, size: 200 },
};

// Inject keyframes once
if (typeof document !== 'undefined' && !document.getElementById('welcome-anim-styles')) {
  const s = document.createElement('style');
  s.id = 'welcome-anim-styles';
  s.textContent = `
    @keyframes gh-stroke-write {
      0%   { clip-path: inset(0 100% 0 0); }
      100% { clip-path: inset(0 0 0 0); }
    }
    @keyframes gh-fade-up {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes gh-fade-out-up {
      0%   { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-30px) scale(0.92); }
    }
    @keyframes gh-pen-trail {
      from { transform: translateX(-100%); }
      to   { transform: translateX(0%); }
    }
  `;
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// StrokeReveal — left-to-right ink reveal with a faint outline behind
// ─────────────────────────────────────────────────────────────
function StrokeReveal({ text, fontFamily, fontSize, color, duration = 2.2, delay = 0, cjk = false, replayKey = 0 }) {
  return (
    <div key={replayKey} style={{
      position: 'relative', display: 'inline-block',
      fontFamily, fontSize, lineHeight: 1, color,
      letterSpacing: cjk ? '0.04em' : '-0.02em',
    }}>
      {/* Ghost outline behind */}
      <span aria-hidden style={{
        position: 'absolute', inset: 0,
        color: 'transparent',
        WebkitTextStroke: `1px ${color}`,
        opacity: 0.10,
        pointerEvents: 'none',
      }}>{text}</span>
      {/* Ink reveal */}
      <span style={{
        position: 'relative', display: 'inline-block',
        clipPath: 'inset(0 100% 0 0)',
        animation: `gh-stroke-write ${duration}s cubic-bezier(0.32, 0.72, 0, 1) ${delay}s forwards`,
      }}>{text}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 0 · Idle (right after setup-finish, before greeting writes)
// ─────────────────────────────────────────────────────────────
function WelcomeIdle({ dark, lang = 'en' }) {
  const t = dark ? G.d : G.l;
  const cfg = HELLO_BY_LANG[lang] || HELLO_BY_LANG.en;
  return (
    <Theme dark={dark}>
      <GhastWindow dark={dark} style={{ height: WELCOME_H }}>
        <div style={{ position: 'absolute', top: 16, left: 18, zIndex: 10 }}><TrafficLights /></div>
        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
          <div style={{
            fontFamily: cfg.cjk ? G.font : G.borel,
            fontSize: cfg.size, color: t.fg, opacity: 0.06,
            letterSpacing: cfg.cjk ? '0.04em' : '-0.02em',
            fontWeight: cfg.cjk ? 300 : 400,
          }}>{cfg.hello}</div>
        </div>
      </GhastWindow>
    </Theme>
  );
}

// ─────────────────────────────────────────────────────────────
// 1 · Greeting writing (mid-stroke)
// ─────────────────────────────────────────────────────────────
function WelcomeHello({ dark, lang = 'en', replayKey = 0 }) {
  const t = dark ? G.d : G.l;
  const cfg = HELLO_BY_LANG[lang] || HELLO_BY_LANG.en;
  return (
    <Theme dark={dark}>
      <GhastWindow dark={dark} style={{ height: WELCOME_H }}>
        <div style={{ position: 'absolute', top: 16, left: 18, zIndex: 10 }}><TrafficLights /></div>
        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
          <div style={{ fontWeight: cfg.cjk ? 300 : 400 }}>
            <StrokeReveal
              text={cfg.hello}
              fontFamily={cfg.cjk ? G.font : G.borel}
              fontSize={cfg.size}
              color={t.fg}
              cjk={cfg.cjk}
              duration={2.4}
              replayKey={replayKey}
            />
          </div>
        </div>
      </GhastWindow>
    </Theme>
  );
}

// ─────────────────────────────────────────────────────────────
// 2 · Greeting fully drawn (animation finished, holding)
// ─────────────────────────────────────────────────────────────
function WelcomeHelloDone({ dark, lang = 'en' }) {
  const t = dark ? G.d : G.l;
  const cfg = HELLO_BY_LANG[lang] || HELLO_BY_LANG.en;
  return (
    <Theme dark={dark}>
      <GhastWindow dark={dark} style={{ height: WELCOME_H }}>
        <div style={{ position: 'absolute', top: 16, left: 18, zIndex: 10 }}><TrafficLights /></div>
        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
          <div style={{
            fontFamily: cfg.cjk ? G.font : G.borel,
            fontSize: cfg.size, color: t.fg, lineHeight: 1,
            letterSpacing: cfg.cjk ? '0.04em' : '-0.02em',
            fontWeight: cfg.cjk ? 300 : 400,
          }}>{cfg.hello}</div>
        </div>
      </GhastWindow>
    </Theme>
  );
}

// ─────────────────────────────────────────────────────────────
// 3 · Final — only Ghast logo + localized Start button
// ─────────────────────────────────────────────────────────────
function WelcomeStart({ dark, lang = 'en' }) {
  const t = dark ? G.d : G.l;
  const cfg = HELLO_BY_LANG[lang] || HELLO_BY_LANG.en;
  return (
    <Theme dark={dark}>
      <GhastWindow dark={dark} style={{ height: WELCOME_H }}>
        <div style={{ position: 'absolute', top: 16, left: 18, zIndex: 10 }}><TrafficLights /></div>
        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
          <div style={{ animation: 'gh-fade-up 0.9s cubic-bezier(0.32,0.72,0,1) 0.05s both' }}>
            <GhastLogo size={120} color={t.fg} />
          </div>
          <div style={{ marginTop: 76, animation: 'gh-fade-up 0.9s cubic-bezier(0.32,0.72,0,1) 0.45s both' }}>
            <button style={{
              minWidth: 240, height: 52,
              padding: '0 28px',
              background: t.fg, color: t.bg,
              border: 'none', borderRadius: 26,
              fontFamily: G.font, fontSize: 17, fontWeight: 500,
              letterSpacing: cfg.cjk ? 1.5 : 0.2,
              cursor: 'pointer',
              boxShadow: dark ? '0 8px 24px rgba(0,0,0,0.5)' : '0 8px 24px rgba(0,0,0,0.12)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            }}>
              <span>{cfg.start}</span>
              <Icon name="arrowRight" size={16} color={t.bg} />
            </button>
          </div>
        </div>
      </GhastWindow>
    </Theme>
  );
}

Object.assign(window, {
  WelcomeIdle, WelcomeHello, WelcomeHelloDone, WelcomeStart,
  HELLO_BY_LANG, WELCOME_W, WELCOME_H,
});