// Login screen — faithful to the live Zeranda sign-in.
function GoogleG() {
  return (
    <svg width="20" height="20" viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.5 2.5 30.1 0 24 0 14.6 0 6.4 5.4 2.6 13.2l7.9 6.1C12.3 13.2 17.6 9.5 24 9.5z" />
      <path fill="#4285F4" d="M46.1 24.5c0-1.6-.1-2.8-.4-4.1H24v7.7h12.4c-.3 2.1-1.6 5.2-4.6 7.3l7.1 5.5c4.2-3.9 6.6-9.6 6.6-16.4z" />
      <path fill="#FBBC05" d="M10.5 28.7c-.5-1.4-.8-2.9-.8-4.7s.3-3.3.8-4.7l-7.9-6.1C1 16.3 0 20 0 24s1 7.7 2.6 10.8l7.9-6.1z" />
      <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.1-5.5c-1.9 1.3-4.5 2.3-8.8 2.3-6.4 0-11.7-3.7-13.5-9.8l-7.9 6.1C6.4 42.6 14.6 48 24 48z" />
    </svg>
  );
}
function MsLogo() {
  return (
    <svg width="18" height="18" viewBox="0 0 23 23" aria-hidden="true">
      <rect x="1" y="1" width="10" height="10" fill="#F25022" />
      <rect x="12" y="1" width="10" height="10" fill="#7FBA00" />
      <rect x="1" y="12" width="10" height="10" fill="#00A4EF" />
      <rect x="12" y="12" width="10" height="10" fill="#FFB900" />
    </svg>
  );
}

function Login({ onSignIn }) {
  return (
    <div className="login">
      <div className="login-card zd-scroll">
        <img src={(window.__resources && window.__resources.logo) || 'assets/zeranda-mark.svg'} alt="Zeranda" />
        <div className="wm">Zeranda</div>
        <div className="tag">Your personal AI Assistant</div>
        <h2>Welcome</h2>
        <div className="sub">Sign in to access your personal AI assistant</div>
        <div className="oauth">
          <button onClick={onSignIn}><GoogleG /> Continue with Google</button>
          <button onClick={onSignIn}><MsLogo /> Continue with Microsoft</button>
        </div>
        <div className="terms">By continuing, you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a></div>
        <div className="whatyouget">
          <div className="lbl">What you get</div>
          {['Intelligent email sorting', 'Calendar sync & management', 'Package tracking', 'Bills & subscriptions, handled'].map(f => (
            <div className="feat" key={f}><span className="ck"><Icon name="check" size={15} color="var(--green-600)" /></span>{f}</div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.Login = Login;
// Reused by the reconnect flow (Permissions.jsx) so consent UI matches sign-in.
window.GoogleG = GoogleG;
window.MsLogo = MsLogo;