const DSa = window.RallyAIBusiness_2d8789;
const { RallyFace: AFace, Button: AButton, PixelIcon: AIcon } = DSa;

const ACCOUNTS = [
  { init: 'JT', email: 'jamie@shiokpun.sg', sub: 'Shiok Pun · business', biz: true },
  { init: 'J', email: 'jamie.tan88@gmail.com', sub: 'Personal', biz: false },
];

function GoogleG() {
  return <span style={{ width: 22, height: 22, border: '1px solid var(--ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0 }}>G</span>;
}

function LoginScreen({ onLogin }) {
  const [step, setStep] = React.useState('landing'); // landing | choose | signing
  const [warn, setWarn] = React.useState(false);
  const pick = (a) => {
    if (!a.biz) { setWarn(true); return; }
    setStep('signing');
    setTimeout(() => onLogin(a.email), 1200);
  };
  if (step === 'signing') return <div style={{ '--accent': 'var(--orange)', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, background: 'var(--paper)' }}>
    <AFace size={96} talking />
    <div className="u-pixel">SIGNING YOU IN…</div>
    <div className="u-label" style={{ color: 'var(--text-muted)' }}>jamie@shiokpun.sg</div>
  </div>;
  if (step === 'choose') return <div style={{ '--accent': 'var(--orange)', height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--paper)' }}>
    <div style={{ padding: '32px 24px 20px', borderBottom: '1px solid var(--ink)', display: 'flex', alignItems: 'center', gap: 14 }}>
      <GoogleG />
      <div><h1 style={{ fontSize: 'var(--text-title)' }}>Choose an account</h1><div className="u-label" style={{ color: 'var(--text-muted)', marginTop: 2 }}>to continue to Rally Business</div></div>
    </div>
    <div style={{ flex: 1 }}>
      {ACCOUNTS.map(a => <div key={a.email}>
        <div onClick={() => pick(a)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 24px', borderBottom: '1px solid var(--divider-soft, rgba(32,36,27,.2))', cursor: 'pointer' }}>
          <span style={{ width: 40, height: 40, background: a.biz ? 'var(--ink)' : 'var(--sage)', color: a.biz ? 'var(--white)' : 'var(--ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, flexShrink: 0 }}>{a.init}</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 500 }}>{a.email}</div>
            <div className="u-label" style={{ color: 'var(--text-muted)', marginTop: 2 }}>{a.sub}</div>
          </div>
          <AIcon name="arrow-right" size={16} />
        </div>
        {warn && !a.biz && <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '12px 24px', background: 'var(--orange)' }}>
          <AIcon name="alert" size={20} />
          <span style={{ fontSize: 13, fontWeight: 500 }}>That's a personal account — pick your business account.</span>
        </div>}
      </div>)}
      <div onClick={() => setStep('landing')} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 24px', cursor: 'pointer' }}>
        <span style={{ width: 40, height: 40, border: '1px solid var(--ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><AIcon name="plus" size={16} /></span>
        <span style={{ fontSize: 16, fontWeight: 500 }}>Use another account</span>
      </div>
    </div>
    <div style={{ padding: '16px 24px', borderTop: '1px solid var(--ink)' }} className="u-label"><span style={{ color: 'var(--text-muted)' }}>Simulated sign-in · no real Google account is used</span></div>
  </div>;
  return <div style={{ '--accent': 'var(--orange)', height: '100%', display: 'flex', flexDirection: 'column' }}>
    <div style={{ background: 'var(--sage)', padding: '28px 28px 32px', flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <img src="assets/logo.png" style={{ height: 16, display: 'block' }} alt="RALLY!" />
        <span className="u-pixel">BUSINESS</span>
      </div>
      <div style={{ flex: 1 }}></div>
      <div><AFace size={84} talking /></div>
      <h1 style={{ fontSize: 44, lineHeight: 1.02, letterSpacing: '-0.01em', marginTop: 20, textWrap: 'pretty' }}>Know your customers like a game.</h1>
      <p style={{ fontSize: 15, lineHeight: 1.45, marginTop: 14, maxWidth: 300, color: 'var(--text-muted)' }}>Run quests, meet your segments, walk the journey — with RALLY watching the numbers.</p>
    </div>
    <div style={{ background: 'var(--paper)', padding: '24px 28px 28px' }}>
      <AButton full size="lg" variant="outline" onClick={() => setStep('choose')} style={{ justifyContent: 'flex-start', gap: 14 }}><GoogleG /> Continue with Google</AButton>
      <div className="u-label" style={{ color: 'var(--text-muted)', marginTop: 14 }}>Business accounts only · your customer data stays yours</div>
    </div>
  </div>;
}

Object.assign(window, { LoginScreen });