/* Login screen — recreated from Authentication/Login01 Figma frame */

function ChevronBg() {
  // The pastel chevron / arrow background bleeds off the left edge.
  // Reconstructed roughly: blue + mint + peach offset arrows.
  return (
    <svg className="auth-deco" viewBox="0 0 1100 1400" fill="none" preserveAspectRatio="xMinYMin slice">
      <defs>
        <g id="chev">
          <path d="M0 100 L300 100 L500 300 L300 500 L0 500 L200 300 Z" />
        </g>
      </defs>
      <g opacity="0.55"><use href="#chev" x="-100" y="-50" fill="#69b1ff"/></g>
      <g opacity="0.4"><use href="#chev" x="-150" y="200" fill="#b7eb8f"/></g>
      <g opacity="0.3"><use href="#chev" x="-200" y="500" fill="#ffccc7"/></g>
      <g opacity="0.45"><use href="#chev" x="-50" y="700" fill="#69b1ff"/></g>
      <g opacity="0.3"><use href="#chev" x="-150" y="950" fill="#b7eb8f"/></g>
    </svg>
  );
}

function GoogleG() {
  return (<svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92A8.78 8.78 0 0 0 17.64 9.2z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.83.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.32A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.97 10.72A5.41 5.41 0 0 1 3.68 9c0-.6.1-1.18.29-1.72V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.04l3.01-2.32z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.96l3.01 2.32C4.68 5.16 6.66 3.58 9 3.58z"/></svg>);
}
function TwitterX() {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="#1DA1F2"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05A4.28 4.28 0 0 0 16.11 4c-2.37 0-4.29 1.92-4.29 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79a4.29 4.29 0 0 0 1.33 5.71c-.7-.02-1.36-.21-1.94-.53v.05c0 2.08 1.48 3.82 3.44 4.21a4.3 4.3 0 0 1-1.93.07 4.29 4.29 0 0 0 4 2.98 8.6 8.6 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06A12.13 12.13 0 0 0 8.29 21c7.55 0 11.68-6.25 11.68-11.67 0-.18 0-.36-.01-.53A8.36 8.36 0 0 0 22.46 6z"/></svg>);
}
function FacebookF() {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.03 4.39 11.02 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.88v2.26h3.33l-.53 3.49h-2.8V24c5.74-.91 10.12-5.9 10.12-11.93z"/></svg>);
}

function LoginScreen({ onBack }) {
  return (
    <div className="auth">
      <ChevronBg/>
      <div className="auth-brand">
        <img src="../../assets/tolbnet-icon.svg" alt=""/>
        <span>TolbNet</span>
      </div>

      <div className="auth-card">
        <div className="auth-head">
          <span className="t">Sign in</span>
          <a className="btn-link" style={{cursor:"pointer"}}>I don't have an account</a>
        </div>

        <div>
          <div className="oauth">
            <button><GoogleG/></button>
            <button><TwitterX/></button>
            <button><FacebookF/></button>
          </div>
          <div className="divider">or with email</div>
        </div>

        <div>
          <div className="field">
            <label className="lbl">Email Address</label>
            <input className="input" placeholder="you@example.com" defaultValue="stebin.ben@tolb.net"/>
          </div>
          <div className="field">
            <label className="lbl">Password</label>
            <div style={{position:"relative"}}>
              <input className="input" type="password" defaultValue="hunter2hunter2" style={{paddingRight:38}}/>
              <span style={{position:"absolute",right:10,top:"50%",transform:"translateY(-50%)",color:"#bfbfbf",cursor:"pointer"}}>
                <Icon.Eye size={16}/>
              </span>
            </div>
          </div>
        </div>

        <Button type="primary" style={{width:"100%"}} onClick={onBack}>Login</Button>
      </div>

      <div style={{position:"absolute",right:32,bottom:24,display:"flex",gap:24,fontSize:12,color:"#8c8c8c"}}>
        <span>Terms and Conditions</span><span>Privacy Policy</span><span>CA Privacy Notice</span>
      </div>
      <div style={{position:"absolute",left:32,bottom:24,fontSize:12,color:"#8c8c8c"}}>
        This site is protected by RE-CAPTCHA and the Google Privacy Policy
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;