/* =====================================================================
   AI-COS — Login + role chooser (Super Admin / Customer Portal)
   ===================================================================== */
function Login({ onEnter }) {
  const [role, setRole] = useState('admin');
  const cust = window.DB.custById('C-PDO');
  return (
    <div style={{ height: '100vh', display: 'grid', gridTemplateColumns: '1.05fr 1fr', overflow: 'hidden' }}>
      {/* ---- Left: brand panel ---- */}
      <div style={{ position: 'relative', background: 'linear-gradient(155deg, #0c2138 0%, #102a45 45%, #163a5e 100%)', color: '#fff', padding: '52px 56px', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {/* decorative grid + glow */}
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0)', backgroundSize: '26px 26px', opacity: .7 }} />
        <div style={{ position: 'absolute', top: -120, right: -120, width: 380, height: 380, borderRadius: '50%', background: 'radial-gradient(circle, rgba(47,111,237,.45), transparent 65%)', filter: 'blur(10px)' }} />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <div className="row" style={{ gap: 12 }}>
            <BrandMark size={46} light />
            <div>
              <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: '-.4px' }}>AI-COS</div>
              <div style={{ fontSize: 11.5, color: '#8fa6c4', fontWeight: 600, letterSpacing: '.6px', textTransform: 'uppercase' }}>Al Duqum Al Masiya ENT</div>
            </div>
          </div>
        </div>

        <div style={{ position: 'relative', zIndex: 1, marginTop: 'auto' }}>
          <div className="badge" style={{ background: 'rgba(47,111,237,.18)', color: '#9ec2ff', border: '1px solid rgba(47,111,237,.35)' }}>
            <Icon name="shield" size={12} /> ISO/IEC 17025:2017 · ISO 9001:2015
          </div>
          <h1 style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-1.2px', lineHeight: 1.08, margin: '18px 0 14px', maxWidth: 460 }}>
            The Calibration &amp; Compliance Operating System.
          </h1>
          <p style={{ fontSize: 15, color: '#aebfd6', maxWidth: 440, lineHeight: 1.55 }}>
            One platform for the commercial, technical and compliance cycles of a gas-monitor calibration lab — with standards gates enforced in the flow and AI assisting every role.
          </p>
          <div className="row" style={{ gap: 26, marginTop: 30 }}>
            {[['19', 'Modules'], ['17025', 'ISO gated flow'], ['1-action', 'Certificate issue']].map(([a, b], i) => (
              <div key={i} style={{ borderLeft: i ? '1px solid rgba(255,255,255,.12)' : 'none', paddingLeft: i ? 20 : 0 }}>
                <div style={{ fontSize: 20, fontWeight: 800, whiteSpace: 'nowrap' }}>{a}</div>
                <div style={{ fontSize: 12, color: '#8fa6c4', whiteSpace: 'nowrap' }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', zIndex: 1, marginTop: 34, fontSize: 12, color: '#6f87a6' }}>
          Clear Loft · Kochi, Kerala · Calibration Lab ERP v2.1
        </div>
      </div>

      {/* ---- Right: sign-in ---- */}
      <div style={{ display: 'grid', placeItems: 'center', padding: 40, background: 'var(--bg)' }}>
        <div style={{ width: 380, maxWidth: '100%' }}>
          <div className="eyebrow">Sign in</div>
          <h2 style={{ fontSize: 25, fontWeight: 800, letterSpacing: '-.6px', margin: '6px 0 4px' }}>Welcome back</h2>
          <p className="muted" style={{ fontSize: 13.5, marginBottom: 14 }}>Choose how you'd like to enter the demo.</p>

          <div className="row" style={{ gap: 10, alignItems: 'flex-start', background: 'var(--warn-bg)', border: '1px solid var(--warn-line)', borderRadius: 11, padding: '11px 13px', marginBottom: 22 }}>
            <span style={{ color: 'var(--warn)', flex: 'none', marginTop: 1 }}><Icon name="alert" size={16} /></span>
            <div style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>
              <b style={{ color: 'var(--ink)' }}>Demonstration only.</b> Everything you see is sample data for preview. No real records are created, saved or sent — nothing here is operational.
            </div>
          </div>

          {/* role chooser */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
            <RoleCard active={role === 'admin'} onClick={() => setRole('admin')}
              icon="grid" color="var(--primary-600)" title="Super Admin"
              sub="Full ERP — all 19 modules, gated workflow, AI" who="Savad Ahammed · Lab Manager" />
            <RoleCard active={role === 'customer'} onClick={() => setRole('customer')}
              icon="building" color={cust.color} title="Customer Portal"
              sub="Equipment, certificates, due status, requests" who="Petroleum Development Oman" />
          </div>

          <label className="eyebrow" style={{ fontSize: 10.5 }}>Email</label>
          <div className="searchbox" style={{ width: '100%', marginTop: 5, marginBottom: 12, cursor: 'text' }}>
            <Icon name="users" size={15} />
            <input defaultValue={role === 'admin' ? 'savad.ahammed@aldam.om' : 'hilal.rashdi@pdo.co.om'} key={role} />
          </div>
          <label className="eyebrow" style={{ fontSize: 10.5 }}>Password</label>
          <div className="searchbox" style={{ width: '100%', marginTop: 5, marginBottom: 18, cursor: 'text' }}>
            <Icon name="lock" size={15} />
            <input type="password" defaultValue="demo-access" />
            <Icon name="eye" size={15} />
          </div>

          <Btn variant="primary" size="lg" style={{ width: '100%' }} iconR="arrowR"
            onClick={() => onEnter(role)}>
            Enter {role === 'admin' ? 'AI-COS' : 'Customer Portal'}
          </Btn>
          <div className="row" style={{ justifyContent: 'center', gap: 7, marginTop: 16, fontSize: 12, color: 'var(--text-3)' }}>
            <Icon name="lock" size={13} /> SSO &amp; MFA enforced · audit-logged session
          </div>
        </div>
      </div>
    </div>
  );
}

function RoleCard({ active, onClick, icon, color, title, sub, who }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 13, textAlign: 'left', cursor: 'pointer', width: '100%',
      background: active ? 'var(--surface)' : 'var(--surface-2)', fontFamily: 'inherit',
      border: `1.5px solid ${active ? color : 'var(--border)'}`, borderRadius: 13, padding: '13px 15px',
      boxShadow: active ? 'var(--sh)' : 'none', transition: 'all .14s',
    }}>
      <span style={{ width: 40, height: 40, borderRadius: 11, flex: 'none', display: 'grid', placeItems: 'center', background: active ? color : '#eef1f6', color: active ? '#fff' : 'var(--text-2)' }}>
        <Icon name={icon} size={20} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 750, fontSize: 14.5 }}>{title}</div>
        <div className="faint" style={{ fontSize: 12, marginTop: 1 }}>{sub}</div>
        <div style={{ fontSize: 11, color, fontWeight: 600, marginTop: 3 }}>{who}</div>
      </div>
      <span style={{ width: 20, height: 20, borderRadius: '50%', border: `2px solid ${active ? color : 'var(--border-2)'}`, display: 'grid', placeItems: 'center' }}>
        {active && <span style={{ width: 10, height: 10, borderRadius: '50%', background: color }} />}
      </span>
    </button>
  );
}

window.Login = Login;