/* Cornell AI Network — Website UI kit: Auth (login / sign up) */
const AUTH_DS = window.CornellAINetworkDesignSystem_392896;

function AuthScreen({ onNavigate }) {
  const { Button, Input, Checkbox } = AUTH_DS;
  const [mode, setMode] = React.useState("login");
  const isLogin = mode === "login";

  return (
    <main style={{ minHeight: "calc(100vh - 60px)", display: "grid", gridTemplateColumns: "1.05fr 0.95fr" }}>
      {/* Left: brand panel */}
      <div style={{ position: "relative", background: "var(--cain-ink)", color: "#fff", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "var(--space-8) var(--space-7)" }}>
        <img src="../design-system/assets/photos/campus-aerial.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.32 }} />
        <div style={{ position: "relative" }}>
          <img src="../design-system/assets/logos/cain-wordmark.png" alt="Cornell AI Network" style={{ height: "30px", filter: "invert(1) brightness(1.7)" }} />
        </div>
        <div style={{ position: "relative" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2rem,3vw,2.8rem)", lineHeight: 1.1, margin: "0 0 14px", color: "#fff" }}>
            Come for the AI,<br/>stay for the network.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", opacity: 0.85, margin: 0, maxWidth: "380px", lineHeight: 1.6 }}>
            The professional community where Cornell alumni and students connect around AI — to learn, build, hire, invest, and grow.
          </p>
        </div>
        <div style={{ position: "relative", fontFamily: "var(--font-ui)", fontSize: "13px", opacity: 0.7 }}>© 2025 Cornell AI Network Club</div>
      </div>

      {/* Right: form */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--space-8) var(--gutter)", background: "var(--cain-white)" }}>
        <div style={{ width: "100%", maxWidth: "380px" }}>
          <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--fs-eyebrow)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--text-muted)" }}>
            {isLogin ? "Welcome back" : "Join the network"}
          </span>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "32px", margin: "10px 0 26px", color: "var(--text-strong)" }}>
            {isLogin ? "Sign in to CAIN" : "Create your account"}
          </h1>

          <form onSubmit={(e) => { e.preventDefault(); onNavigate && onNavigate("home"); }} style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
            {!isLogin && <Input label="Full name" placeholder="Jane Founder" />}
            <Input label="Email" type="email" placeholder="you@cornell.edu" />
            <Input label="Password" type="password" placeholder="••••••••" />
            {!isLogin && (
              <Checkbox label="I agree to the Terms and Privacy Policy" defaultChecked />
            )}
            {isLogin && (
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "-4px" }}>
                <Checkbox label="Remember me" />
                <a style={{ fontFamily: "var(--font-ui)", fontSize: "13.5px", color: "var(--cain-red)", cursor: "pointer" }}>Forgot password?</a>
              </div>
            )}
            <Button type="submit" variant="solid" size="lg" style={{ width: "100%", marginTop: "4px" }}>
              {isLogin ? "Sign in" : "Create account"}
            </Button>
          </form>

          <div style={{ display: "flex", alignItems: "center", gap: "14px", margin: "22px 0" }}>
            <span style={{ flex: 1, height: "1px", background: "var(--border-soft)" }} />
            <span style={{ fontFamily: "var(--font-ui)", fontSize: "12px", color: "var(--text-muted)" }}>or</span>
            <span style={{ flex: 1, height: "1px", background: "var(--border-soft)" }} />
          </div>
          <Button variant="outline" size="lg" style={{ width: "100%" }}
            iconLeft={<span style={{ fontFamily: "var(--font-display)", fontWeight: 700, marginRight: "2px" }}>C</span>}>
            Continue with Cornell NetID
          </Button>

          <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--text-muted)", textAlign: "center", marginTop: "26px" }}>
            {isLogin ? "New to the network? " : "Already a member? "}
            <a onClick={() => setMode(isLogin ? "signup" : "login")} style={{ color: "var(--cain-red)", cursor: "pointer" }}>
              {isLogin ? "Create an account" : "Sign in"}
            </a>
          </p>
          <p style={{ textAlign: "center", marginTop: "18px" }}>
            <a onClick={() => onNavigate && onNavigate("home")} style={{ fontFamily: "var(--font-ui)", fontSize: "13px", color: "var(--text-muted)", cursor: "pointer" }}>← Back to site</a>
          </p>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CAIN_AuthScreen: AuthScreen });