// act1-onboarding.jsx — Escenas 1-2: Login + Home con pills + activación módulos (0-9s)
//
// Timeline (act-local):
//   0.0-2.7s · LoginScreen with cursor typing email/password and clicking Entrar
//   2.6-9.0s · HomePills (~6.4s) — greeting 0.8s, pills 0.7s, 4 modules × 1.5s w/ 1s overlap

function Act1Onboarding() {
  return (
    <>
      {/* Login sub-scene */}
      <Sprite start={0} end={3.6}>
        <LoginScene />
      </Sprite>

      {/* Home sub-scene */}
      <Sprite start={3.5} end={9.0}>
        <HomeScene />
      </Sprite>

      {/* Cursor track — anchored to Act 1 absolute start (0) */}
      <CursorTrack track={[
        { t: 0.35, x: 510, y: 240 },
        { t: 0.55, x: 640, y: 340 },
        { t: 2.20, x: 640, y: 340 },
        { t: 2.40, x: 640, y: 408 },
        { t: 2.90, x: 640, y: 408 },
        { t: 3.05, x: 640, y: 502, click: true },
        { t: 3.40, x: 640, y: 502 },
      ]} />
    </>
  );
}

// ── Sub-scene: Login ─────────────────────────────────────────────────
function LoginScene() {
  const { localTime, duration } = useSprite();

  // Fade-in card 0.0-0.35
  const inOpacity = Math.min(1, localTime / 0.35);

  // Email typing 0.55-2.10 (1.55s for 23 chars ≈ 67ms/char — readable pace)
  const EMAIL = 'amelia@easyproplus.com';
  const emailP = clamp((localTime - 0.55) / 1.55, 0, 1);
  const emailChars = Math.floor(emailP * EMAIL.length);
  const emailText = EMAIL.slice(0, emailChars);

  // Password typing 2.40-2.85 (0.45s for 8 chars ≈ 56ms/char)
  const pwdP = clamp((localTime - 2.40) / 0.45, 0, 1);
  const pwdChars = Math.floor(pwdP * 8);
  const pwdText = '•'.repeat(pwdChars);

  // Focus tracking — visible blue caret in the active field
  let focus = null;
  if (localTime >= 0.45 && localTime < 2.30) focus = 'email';
  else if (localTime >= 2.35 && localTime < 2.95) focus = 'password';
  else if (localTime >= 3.00 && localTime < 3.20) focus = 'button';

  // Button pressed (~0.18s after click)
  const buttonPressed = localTime >= 3.03 && localTime < 3.18;
  // Loading after click
  const loading = localTime >= 3.18;

  // Fade-out at end of sub-scene (last 0.25s)
  const outStart = duration - 0.25;
  const outOpacity = localTime > outStart ? Math.max(0, 1 - (localTime - outStart) / 0.25) : 1;

  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      opacity: Math.min(inOpacity, outOpacity),
    }}>
      <LoginScreen
        emailText={emailText}
        passwordText={pwdText.replace(/•/g,'x')}
        buttonPressed={buttonPressed}
        focus={focus}
        loading={loading}
      />
    </div>
  );
}

// ── Sub-scene: Home dashboard ────────────────────────────────────────
function HomeScene() {
  const { localTime, duration } = useSprite();

  // Fade in 0.0-0.4
  const inOpacity = Math.min(1, localTime / 0.4);

  // Greeting appears 0.0-0.8
  const greetingP = clamp(localTime / 0.8, 0, 1);

  // Pills appear 0.6-1.4 (stagger inside HomePills, starts after greeting visible)
  const pillsP = clamp((localTime - 0.6) / 0.8, 0, 1);

  // Module activation sequence — compressed slightly so all 4 modules complete within the home window (5.5s)
  // Start sequence at 1.0s (after pills are mostly in)
  const ACTIVATION_START = 1.0;
  const ACTIVATION_DUR = 1.2;
  const ACTIVATION_GAP_BETWEEN_STARTS = 0.9;

  // Per-module independent progress (each module animates without resetting when next starts)
  const t = localTime - ACTIVATION_START;
  const moduleProgresses = [];
  for (let i = 0; i < 4; i++) {
    const startT = i * ACTIVATION_GAP_BETWEEN_STARTS;
    const p = clamp((t - startT) / ACTIVATION_DUR, 0, 1);
    moduleProgresses.push(p);
  }

  // Fade-out at end (last 0.25s)
  const outStart = duration - 0.25;
  const outOpacity = localTime > outStart ? Math.max(0, 1 - (localTime - outStart) / 0.25) : 1;

  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      opacity: Math.min(inOpacity, outOpacity),
    }}>
      <HomePills
        greetingProgress={greetingP}
        pillsProgress={pillsP}
        moduleProgresses={moduleProgresses}
        userName="Amelia"
      />
    </div>
  );
}

Object.assign(window, { Act1Onboarding });