// Lumen — Auth screens
function AuthPage({ mode = "signup", onComplete, onSwitch, onBackToMarketing }) {
  const [step, setStep] = React.useState(0); // 0: form, 1: role pick (signup only)
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [name, setName] = React.useState("");
  const [pickedRole, setPickedRole] = React.useState("instructor");

  const isSignup = mode === "signup";
  const valid = email.includes("@") && pw.length >= 6 && (!isSignup || name.length > 1);

  return (
    <div style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "1fr 1.1fr", background: "var(--bg)" }}>
      {/* Left: form */}
      <div style={{ padding: "32px 40px", display: "flex", flexDirection: "column" }}>
        <div className="row" style={{ justifyContent: "space-between" }}>
          <div className="row" style={{ gap: 10, cursor: "pointer" }} onClick={onBackToMarketing}>
            <div className="sidebar__logo" style={{ width: 28, height: 28 }}>L</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16 }}>Lumen</div>
          </div>
          <div style={{ fontSize: 13, color: "var(--ink-3)" }}>
            {isSignup ? "Already have an account? " : "New here? "}
            <a onClick={onSwitch} style={{ color: "var(--ink)", fontWeight: 500, cursor: "pointer", textDecoration: "underline" }}>
              {isSignup ? "Sign in" : "Create an account"}
            </a>
          </div>
        </div>

        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ width: "100%", maxWidth: 380 }}>
            {step === 0 && (
              <div className="fade-up">
                <h1 style={{ fontSize: 32, letterSpacing: "-0.03em", marginBottom: 8 }}>
                  {isSignup ? "Start your studio." : "Welcome back."}
                </h1>
                <p className="muted" style={{ fontSize: 14, marginBottom: 28 }}>
                  {isSignup ? "14-day free trial. No credit card." : "Sign in to your Lumen account."}
                </p>

                <div className="col" style={{ gap: 8, marginBottom: 16 }}>
                  <button className="btn btn--secondary btn--lg" style={{ justifyContent: "center" }}>
                    <svg width="14" height="14" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
                    Continue with Google
                  </button>
                  <button className="btn btn--secondary btn--lg" style={{ justifyContent: "center" }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16.365 1.43c0 1.14-.46 2.21-1.21 2.99-.81.84-2.13 1.5-3.21 1.41-.13-1.16.4-2.39 1.18-3.18.86-.86 2.16-1.49 3.24-1.51 0 .1.0 .2.0 .29zM20.5 17.32c-.55 1.27-.81 1.83-1.51 2.94-.99 1.55-2.39 3.48-4.13 3.49-1.55.01-1.95-1.01-4.05-.99-2.1.01-2.55 1.01-4.1.98-1.74-.04-3.07-1.78-4.05-3.33C.42 17.4-.16 12.55 1.41 9.84 2.5 7.91 4.32 6.78 6.05 6.78c1.55 0 2.51 1.01 4.05 1.01 1.5 0 2.43-1.01 4.27-1.01 1.55 0 3.18.84 4.32 2.27-3.81 2.08-3.18 7.46-.19 8.27z"/></svg>
                    Continue with Apple
                  </button>
                </div>

                <div className="row" style={{ gap: 12, margin: "24px 0", color: "var(--ink-4)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em" }}>
                  <div style={{ flex: 1, height: 1, background: "var(--border)" }}/>
                  <span>or with email</span>
                  <div style={{ flex: 1, height: 1, background: "var(--border)" }}/>
                </div>

                {isSignup && (
                  <div style={{ marginBottom: 14 }}>
                    <label className="label">Your name</label>
                    <input className="input" placeholder="Mara Klein" value={name} onChange={e => setName(e.target.value)}/>
                  </div>
                )}
                <div style={{ marginBottom: 14 }}>
                  <label className="label">Email</label>
                  <input className="input" placeholder="you@studio.com" value={email} onChange={e => setEmail(e.target.value)}/>
                </div>
                <div style={{ marginBottom: 20 }}>
                  <label className="label">Password</label>
                  <input className="input" type="password" placeholder="••••••••" value={pw} onChange={e => setPw(e.target.value)}/>
                  {!isSignup && <a style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 6, display: "inline-block" }}>Forgot password?</a>}
                </div>

                <button className="btn btn--primary btn--lg" disabled={!valid}
                        onClick={() => isSignup ? setStep(1) : onComplete("instructor")}
                        style={{ width: "100%", justifyContent: "center", opacity: valid ? 1 : 0.5 }}>
                  {isSignup ? "Continue" : "Sign in"} <I.arrowRight size={14}/>
                </button>

                {isSignup && (
                  <div style={{ fontSize: 11, color: "var(--ink-4)", marginTop: 16, textAlign: "center" }}>
                    By creating an account you agree to our Terms and Privacy.
                  </div>
                )}
              </div>
            )}

            {step === 1 && (
              <div className="fade-up">
                <h1 style={{ fontSize: 28, letterSpacing: "-0.03em", marginBottom: 8 }}>
                  How will you use Lumen?
                </h1>
                <p className="muted" style={{ fontSize: 14, marginBottom: 28 }}>
                  We'll tailor your dashboard. You can switch any time.
                </p>
                <div className="col" style={{ gap: 10 }}>
                  {[
                    { id: "instructor", title: "I'm a creator", sub: "I'll publish & sell courses", icon: "edit" },
                    { id: "student", title: "I'm a student", sub: "I'll take courses", icon: "cap" },
                    { id: "admin", title: "I'm an org admin", sub: "I run training for a team or school", icon: "users" },
                  ].map(r => (
                    <div key={r.id} onClick={() => setPickedRole(r.id)}
                         style={{
                           border: `1.5px solid ${pickedRole === r.id ? "var(--ink)" : "var(--border)"}`,
                           borderRadius: 8, padding: 16, cursor: "pointer", display: "flex", gap: 14, alignItems: "center",
                           background: pickedRole === r.id ? "var(--bg-hover)" : "var(--bg)", transition: "all 120ms"
                         }}>
                      <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--bg-sunken)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                        {React.createElement(I[r.icon], { size: 18 })}
                      </div>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 14 }}>{r.title}</div>
                        <div className="muted" style={{ fontSize: 12 }}>{r.sub}</div>
                      </div>
                      <div style={{ marginLeft: "auto" }}>
                        <div className={`checkbox ${pickedRole === r.id ? "checkbox--on" : ""}`} style={{ borderRadius: "50%" }}>
                          {pickedRole === r.id && <I.check size={11} stroke={2.4}/>}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
                <button className="btn btn--primary btn--lg" onClick={() => onComplete(pickedRole)}
                        style={{ width: "100%", justifyContent: "center", marginTop: 20 }}>
                  Open my studio <I.arrowRight size={14}/>
                </button>
              </div>
            )}
          </div>
        </div>

        <div style={{ fontSize: 11, color: "var(--ink-4)", textAlign: "center" }}>
          © Lumen Labs 2026 · SOC 2 · GDPR
        </div>
      </div>

      {/* Right: testimonial / proof */}
      <div style={{ background: "var(--ink)", color: "var(--bg)", padding: 56, display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.08, background: "radial-gradient(ellipse at 30% 20%, var(--accent), transparent 60%)" }}/>
        <div style={{ position: "relative", zIndex: 1 }}>
          <div className="row" style={{ gap: 8, fontSize: 11, color: "rgba(255,255,255,.6)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 24 }}>
            <span className="live-dot"></span> 12,400+ creators · $84M+ in sales
          </div>
        </div>
        <div style={{ position: "relative", zIndex: 1 }}>
          <div className="serif" style={{ fontStyle: "italic", fontSize: 36, lineHeight: 1.15, letterSpacing: "-0.02em", marginBottom: 28, fontFamily: "var(--font-serif), Georgia, serif", textWrap: "balance" }}>
            "I moved from Kajabi in a weekend. The watch-time analytics alone have grown my completion rate by 19 points."
          </div>
          <div className="row">
            <div className="avatar avatar--lg">RM</div>
            <div>
              <div style={{ fontWeight: 600 }}>Rae Mendez</div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,.6)" }}>Founder, Storyground · 8,400 students</div>
            </div>
          </div>
        </div>
        <div style={{ position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, paddingTop: 32, borderTop: "1px solid rgba(255,255,255,.1)" }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.03em" }}>$84M+</div>
              <div style={{ fontSize: 11, color: "rgba(255,255,255,.6)" }}>creator earnings to date</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.03em" }}>4.9★</div>
              <div style={{ fontSize: 11, color: "rgba(255,255,255,.6)" }}>G2 average rating</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, letterSpacing: "-0.03em" }}>18min</div>
              <div style={{ fontSize: 11, color: "rgba(255,255,255,.6)" }}>median first-launch time</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AuthPage = AuthPage;