// Login / site-access screen.
(function () {
  const NS = window.MineSafeGlobalDesignSystem_760fd2;
  const { Button, Input, Icon, LanguageSelect } = NS;

  function LoginScreen({ onLogin }) {
    const T = (k) => (window.msT ? window.msT(k) : k);
    return (
      <div style={{ display: 'flex', minHeight: '100vh', fontFamily: 'var(--font-body)' }}>
        {/* Left: brand panel */}
        <div style={{
          flex: '1 1 52%', background: 'var(--brand-ink)', color: '#fff', position: 'relative',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 56, overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0, background: 'center/cover no-repeat url("../../assets/imagery/modules/level9.png")', opacity: 0.42,
          }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(160deg,rgba(26,26,26,0.75),rgba(26,26,26,0.94))' }} />
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.06,
            background: 'repeating-linear-gradient(135deg,#fff,#fff 2px,transparent 2px,transparent 18px)',
          }} />
          <img src="../../assets/minesafe-logo-white.png" alt="Mine Safe Global" style={{ height: 56, position: 'relative', alignSelf: 'flex-start' }} />
          <div style={{ position: 'relative', maxWidth: 460 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--brand-yellow)', marginBottom: 14 }}>Mine Safe {T('academy')}</div>
            <h1 style={{ color: '#fff', fontSize: 46, lineHeight: 1.04 }}>{T('tagline').split('.').slice(0,1)}.<br /><span style={{ color: 'var(--brand-yellow)' }}>{T('tagline').split('.').slice(1).join('.').trim()}</span></h1>
            <p style={{ color: 'var(--grey-300)', fontSize: 16, marginTop: 18, lineHeight: 1.5 }}>{T('login_blurb')}</p>
          </div>
          <div style={{ position: 'relative', display: 'flex', gap: 28, color: 'var(--grey-400)', fontSize: 13 }}>
            <span style={{ display: 'inline-flex', gap: 7, alignItems: 'center' }}><Icon name="shield-check" size={16} color="var(--brand-yellow)" />ISO 21815</span>
            <span style={{ display: 'inline-flex', gap: 7, alignItems: 'center' }}><Icon name="globe" size={16} color="var(--brand-yellow)" />Global sites</span>
            <span style={{ display: 'inline-flex', gap: 7, alignItems: 'center' }}><Icon name="file-badge" size={16} color="var(--brand-yellow)" />Certificates</span>
          </div>
        </div>
        {/* Right: form */}
        <div style={{ flex: '1 1 48%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 40, background: 'var(--surface-card)', position: 'relative' }}>
          <div style={{ position: 'absolute', top: 24, right: 28 }}>
            <LanguageSelect dark value={window.__msLang || 'en'} onChange={(c) => { (window.__msSetLang || (() => {}))(c); }} />
          </div>
          <form onSubmit={e => { e.preventDefault(); onLogin(); }} style={{ width: '100%', maxWidth: 380, display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div>
              <h2 style={{ fontSize: 28 }}>{T('signin_title')}</h2>
              <p style={{ color: 'var(--text-muted)', marginTop: 6 }}>{T('signin_sub')}</p>
            </div>
            <Input label={T('signin_email')} icon="mail" type="email" placeholder="you@kolomela.co.za" defaultValue="thabo.nkosi@kolomela.co.za" />
            <Input label={T('signin_pw')} icon="lock" type="password" placeholder="••••••••" defaultValue="password" />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
              <label style={{ display: 'inline-flex', gap: 7, alignItems: 'center', color: 'var(--text-body)', cursor: 'pointer' }}>
                <input type="checkbox" defaultChecked style={{ accentColor: 'var(--brand-yellow)', width: 16, height: 16 }} />{T('keep_signed')}
              </label>
              <a href="#" onClick={e => e.preventDefault()}>{T('forgot')}</a>
            </div>
            <Button type="submit" variant="primary" fullWidth iconRight="arrow-right">{T('signin_btn')}</Button>
            <p style={{ fontSize: 12.5, color: 'var(--text-faint)', textAlign: 'center' }}>{T('signin_new')}</p>
          </form>
        </div>
      </div>
    );
  }

  Object.assign(window, { LoginScreen });
})();