function Login({ onLogin }) {
  const { Btn } = window.UI;
  const [email, setEmail] = useState("rachel.kim@cascade47.k12.us");
  const [password, setPassword] = useState("••••••••••");
  const [remember, setRemember] = useState(true);
  const [loading, setLoading] = useState(false);

  const submit = (e) => {
    e?.preventDefault();
    setLoading(true);
    setTimeout(() => onLogin(), 500);
  };

  return (
    <div style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "1fr 1fr", background: "var(--bg)" }}>
      {/* Left: form */}
      <div style={{ display: "flex", flexDirection: "column", padding: "40px 56px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Logo />
          <div style={{ fontWeight: 600, letterSpacing: -0.01, fontSize: 15, color: "var(--ink)" }}>
            Nexus Athlete Advising
          </div>
        </div>

        <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
          <div style={{ width: "100%", maxWidth: 380 }}>
            <div style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-3)", letterSpacing: 0.08, textTransform: "uppercase", marginBottom: 14 }}>
              Counselor Portal
            </div>
            <h1 className="serif" style={{ fontSize: 44, margin: 0, lineHeight: 1.05, letterSpacing: -0.015, color: "var(--ink)" }}>
              Welcome back.
            </h1>
            <p style={{ color: "var(--ink-3)", fontSize: 15, marginTop: 12, marginBottom: 36, lineHeight: 1.5 }}>
              Sign in to access this month's training, your resource hub, and the impact you're making for student-athletes.
            </p>

            <form onSubmit={submit}>
              <Field label="School email">
                <input type="email" value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="you@district.k12.us" style={inputStyle} />
              </Field>
              <Field label="Password" right={<a href="#" style={{ fontSize: 12, color: "var(--teal-ink)", textDecoration: "none", fontWeight: 500 }}>Forgot?</a>}>
                <input type="password" value={password} onChange={e => setPassword(e.target.value)} style={inputStyle} />
              </Field>

              <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8, marginBottom: 24 }}>
                <button type="button" onClick={() => setRemember(!remember)} style={{
                  width: 18, height: 18, borderRadius: 4,
                  border: remember ? "1.5px solid var(--ink)" : "1.5px solid var(--line-2)",
                  background: remember ? "var(--ink)" : "transparent",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 0,
                }}>
                  {remember && <window.I.Check size={12} stroke="white" sw={2.5} />}
                </button>
                <span style={{ fontSize: 13, color: "var(--ink-2)" }}>Remember this device for 30 days</span>
              </div>

              <button type="submit" onClick={submit} disabled={loading} style={{
                width: "100%", padding: "14px",
                background: "var(--accent)", color: "white",
                border: "none", borderRadius: 8,
                fontFamily: "inherit", fontSize: 14, fontWeight: 600,
                letterSpacing: -0.005, cursor: "pointer",
              }}>
                {loading ? "Signing in…" : "Sign in"}
              </button>

              <div style={{
                marginTop: 20, padding: "12px 14px",
                background: "var(--bg-2)", border: "1px solid var(--line)",
                borderRadius: 8, fontSize: 12.5, color: "var(--ink-3)",
                display: "flex", gap: 10,
              }}>
                <window.I.Shield size={14} stroke="var(--ink-3)" style={{ flexShrink: 0, marginTop: 1 }} />
                <div>District SSO available. Ask your admin to enable Clever or Google Workspace login.</div>
              </div>
            </form>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--ink-4)" }}>
          <div>© 2026 Nexus Athlete Advising</div>
          <div style={{ display: "flex", gap: 16 }}>
            {["Privacy", "Terms", "Support"].map(l => (
              <a key={l} href="#" style={{ color: "inherit", textDecoration: "none" }}>{l}</a>
            ))}
          </div>
        </div>
      </div>

      {/* Right: brand panel — deep forest green */}
      <div style={{
        background: "linear-gradient(160deg, #1B3D2F 0%, #224d3a 60%, #2C5C44 100%)",
        color: "white", padding: 56,
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        position: "relative", overflow: "hidden",
      }}>
        <DecorGrid />

        <div style={{ display: "flex", gap: 8, position: "relative", flexWrap: "wrap" }}>
          {["Recruiting", "Mental Health", "Academic Planning", "NCAA Eligibility"].map(t => (
            <span key={t} style={{
              fontSize: 11, letterSpacing: 0.04, textTransform: "uppercase",
              padding: "5px 11px", borderRadius: 999,
              background: "rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.18)",
            }}>{t}</span>
          ))}
        </div>

        <div style={{ position: "relative" }}>
          <div className="serif" style={{ fontSize: 50, lineHeight: 1.04, letterSpacing: -0.02 }}>
            Counselors are the
            <br />
            <em style={{ color: "#E8A020" }}>first line of support</em>
            <br />
            for every student-athlete.
          </div>
          <div style={{ marginTop: 28, fontSize: 14, color: "rgba(255,255,255,0.68)", lineHeight: 1.55, maxWidth: 440 }}>
            This portal gives you the training, resources, and frameworks you need — all aligned to NCAA, mental health best practices, and academic standards.
          </div>
        </div>

        <div style={{ display: "flex", gap: 40, position: "relative" }}>
          <Stat k="1,240+" v="counselors trained" />
          <Stat k="42" v="districts" />
          <Stat k="98%" v="return for year 2" />
        </div>
      </div>
    </div>
  );
}

function Stat({ k, v }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: 34, lineHeight: 1, color: "#E8A020" }}>{k}</div>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,0.58)", marginTop: 6, letterSpacing: 0.02 }}>{v}</div>
    </div>
  );
}

function DecorGrid() {
  return (
    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.14, pointerEvents: "none" }}>
      <defs>
        <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
          <path d="M 48 0 L 0 0 0 48" fill="none" stroke="white" strokeWidth="0.5" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />
      <circle cx="85%" cy="25%" r="200" fill="#E8A020" opacity="0.07" />
      <circle cx="10%" cy="75%" r="150" fill="#2B8C8C" opacity="0.12" />
    </svg>
  );
}

function Logo({ size = 28 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 7,
      background: "linear-gradient(135deg, #1B3D2F, #2C5C44)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      color: "#E8A020", fontWeight: 700, fontSize: size * 0.48,
      fontFamily: "'Instrument Serif', Georgia, serif", fontStyle: "italic",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.12)",
      border: "1px solid rgba(255,255,255,0.08)",
    }}>
      N
    </div>
  );
}

const inputStyle = {
  width: "100%", padding: "11px 13px",
  border: "1px solid var(--line-2)", borderRadius: 8,
  background: "var(--card)", fontSize: 14,
  transition: "border-color 120ms",
};

function Field({ label, right, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
        <label style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)" }}>{label}</label>
        {right}
      </div>
      {children}
    </div>
  );
}

window.Login = Login;
window.Logo = Logo;