/* Poise onboarding - S0 · Splash.
   Trace → pause → rise: hairline draws the chevron silhouette (1.3s), holds
   empty for 400ms, then the logo gradient pours up from the feet while the
   wordmark rises beneath it on the same curve. Holds a beat, then crossfades
   into S1's film. Plays once per flow restart; iOS's static launch frame is
   the first frame of this. */

const { useState, useEffect } = React;
const { Button } = window.PoiseDesignSystem_eee0d2;

/* Pre-flow gate - not part of the S0-S24 spec sequence, so it's kept outside
   SCREENS (progress bar / screen jumper both key off that array and treat an
   unmatched id as "before the flow", which is exactly right here). Sits in
   front of S0: the demo loads paused on this screen and only starts the
   splash → welcome → ... sequence once the visitor presses the button.

   Mobile fills the phone viewport edge-to-edge like the rest of the flow
   (fills its absolutely-positioned parent) - StartGateScreen. Desktop keeps
   the phone shell visible but blank behind a separate floating card
   (StartGateCard) holding just the button, so the button itself doesn't
   read as though it were rendered inside the phone as an onboarding
   screen. */
function StartGateScreen() {
  const flow = useFlow();
  return (
    <div data-screen-label="Start" style={{ position: 'absolute', inset: 0, background: 'var(--black)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40, padding: '0 var(--screen-margin)', boxSizing: 'border-box' }}>
      <Wordmark size={34} />
      <Button variant="primary" size="lg" onClick={() => flow.go('splash')}>Start onboarding demo</Button>
    </div>
  );
}

function StartGateCard() {
  const flow = useFlow();
  return (
    <div style={{
      position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
      zIndex: 30, boxSizing: 'border-box', width: 640,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28, padding: '48px 40px',
      background: '#0b0a0c', border: '1px solid var(--border-hairline)', borderRadius: 24,
      boxShadow: '0 24px 60px rgba(0,0,0,0.55)',
    }}>
      <Wordmark size={32} />
      <Button variant="primary" size="lg" onClick={() => flow.go('splash')}>Start onboarding demo</Button>
    </div>
  );
}

const SPLASH_OUTLINE = 'M 8.14 55.31 L 40.14 15.31 A 7.5 7.5 0 0 1 51.86 15.31 L 83.86 55.31 A 7.5 7.5 0 0 1 72.14 64.69 L 46 32.02 L 19.86 64.69 A 7.5 7.5 0 0 1 8.14 55.31 Z';
/* trace 200+1300 → pause 400 → fill 900 → hold 700 → mark fades on black 450
   → beat of pure black 300 → black lifts onto rolling film 700.
   The dip-to-black makes the splash→welcome handoff read as a deliberate
   film cut instead of the logo dissolving into footage. */
const SPLASH_FILL_AT = 1900, SPLASH_MARK_OUT_AT = 3500, SPLASH_REVEAL_AT = 4250, SPLASH_DONE_AT = 4950;

function SplashScreen() {
  const flow = useFlow();
  const [phase, setPhase] = useState('hold'); // hold → black (mark gone) → reveal (black lifts)

  useEffect(() => {
    if (!flow.t.motion) { const id = setTimeout(() => flow.next(), 400); return () => clearTimeout(id); }
    const ts = [
      setTimeout(() => setPhase('black'), SPLASH_MARK_OUT_AT),
      setTimeout(() => setPhase('reveal'), SPLASH_REVEAL_AT),
      setTimeout(() => flow.next(), SPLASH_DONE_AT),
    ];
    return () => ts.forEach(clearTimeout);
  }, [flow.t.motion]);

  return (
    <div data-screen-label="S0 · Splash" style={{ position: 'absolute', inset: 0, background: 'var(--black)', opacity: phase === 'reveal' ? 0 : 1, transition: 'opacity 700ms cubic-bezier(0.33, 0, 0.55, 1)' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: phase === 'hold' ? 1 : 0, transition: 'opacity 450ms cubic-bezier(0.33, 0, 0.55, 1)' }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
        <svg width="118" height="92" viewBox="0 0 92 76" fill="none" style={{ overflow: 'visible', display: 'block' }} aria-label="Poise">
          <path className="splash-fill" d={SPLASH_OUTLINE} fill="url(#splashGrad)"></path>
          <path className="splash-edge" d={SPLASH_OUTLINE} pathLength="100" stroke="rgba(233,231,234,0.5)" strokeWidth="1.1" fill="none"></path>
          <defs>
            <linearGradient id="splashGrad" x1="10" y1="60" x2="82" y2="24" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#7DE0A6"></stop>
              <stop offset="0.55" stopColor="#65DAB6"></stop>
              <stop offset="1" stopColor="#56D2C8"></stop>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div className="splash-word" style={{ position: 'absolute', top: '50%', left: '50%', marginTop: 66 }}>
        <Wordmark size={34} chevron={false} />
      </div>
      </div>
    </div>
  );
}

Object.assign(window, { SplashScreen, StartGateScreen, StartGateCard });