/* Task 1 — Login / auth */
const { useState: useStateLogin } = React;

function Login({ onLogin }) {
  const [email, setEmail] = useStateLogin("marco@thorwallet.org");
  const [pw, setPw] = useStateLogin("••••••••••");
  const [loading, setLoading] = useStateLogin(false);
  const [err, setErr] = useStateLogin("");

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) { setErr("Enter a valid work email."); return; }
    setErr(""); setLoading(true);
    setTimeout(() => { setLoading(false); onLogin(); }, 850);
  };

  return React.createElement("div", { className: "co-login" },
    // left art panel
    React.createElement("div", { className: "co-login-art" },
      React.createElement("div", { className: "glow", style: { width: 520, height: 520, background: "#00CCFF", top: -160, left: -120, opacity: 0.32 } }),
      React.createElement("div", { className: "glow", style: { width: 460, height: 460, background: "#31FD9D", bottom: -160, right: -80, opacity: 0.3 } }),
      React.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: 12 } },
        React.createElement("div", { className: "co-brand-marks" },
          React.createElement("span", { className: "co-mark", style: { width: 42, height: 42, borderRadius: 11 } }, React.createElement("img", { src: "cardops/assets/thorwallet-appicon.png", alt: "THORWallet" })),
          React.createElement("span", { className: "co-mark", style: { width: 42, height: 42, borderRadius: 11 } }, React.createElement("img", { src: "cardops/assets/mine-appicon.png", alt: "MINE" }))),
        React.createElement("div", { style: { fontWeight: 800, fontSize: 17 } }, "Card Ops",
          React.createElement("span", { style: { display: "block", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", color: "var(--co-text-3)", textTransform: "uppercase" } }, "THORWallet · MINE"))),
      React.createElement("div", { style: { position: "relative", maxWidth: 440 } },
        React.createElement("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--co-green)", marginBottom: 16 } }, "Internal · Premium card lifecycle"),
        React.createElement("h1", { style: { fontSize: 40, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.05, margin: 0 } }, "Run the card desk.",
          React.createElement("br"), "Orders to activation to ship."),
        React.createElement("p", { style: { color: "var(--co-text-2)", fontSize: 15, marginTop: 16, lineHeight: 1.6 } },
          "Take premium orders, assign stock, verify with photo + AI, and enforce renewals — one calm console for the ops team.")),
      React.createElement("div", { style: { position: "relative", display: "flex", gap: 24, fontSize: 12.5, color: "var(--co-text-3)" } },
        ["SSO-ready","SOC 2 audit log","Maker-checker"].map((t) =>
          React.createElement("span", { key: t, style: { display: "flex", alignItems: "center", gap: 7 } },
            React.createElement(window.Icon, { name: "check", size: 14, style: { color: "var(--co-green)" } }), t)))),
    // right form
    React.createElement("div", { className: "co-login-form" },
      React.createElement("form", { className: "co-login-box", onSubmit: submit },
        React.createElement("div", null,
          React.createElement("div", { style: { fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em" } }, "Sign in"),
          React.createElement("div", { style: { color: "var(--co-text-3)", fontSize: 13, marginTop: 4 } }, "Use your THORWallet ops account.")),
        React.createElement("div", null,
          React.createElement("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--co-text-3)", marginBottom: 10 } }, "Demo · jump straight in"),
          React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 } },
            [["admin", "Owner / Admin", "Full access", "LF"], ["fulfillment", "Fulfillment", "Activate & ship", "MR"]].map(function (r) {
              var rc = window.CardOps.ROLES[r[0]];
              return React.createElement("button", { key: r[0], type: "button", className: "co-demo-login", disabled: loading, onClick: function () { setLoading(true); setTimeout(function () { onLogin(r[0]); }, 550); } },
                React.createElement("span", { className: "co-avatar", style: { background: rc.color, width: 30, height: 30, color: "#0c1525", fontSize: 11, flexShrink: 0 } }, r[3]),
                React.createElement("span", { style: { textAlign: "left", minWidth: 0 } },
                  React.createElement("span", { style: { display: "block", fontWeight: 700, fontSize: 13 } }, r[1]),
                  React.createElement("span", { style: { display: "block", fontSize: 11, color: "var(--co-text-3)" } }, r[2])));
            }))),
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 12, color: "var(--co-text-3)", fontSize: 11.5 } },
          React.createElement("span", { style: { flex: 1, height: 1, background: "var(--co-border)" } }), "OR SIGN IN",
          React.createElement("span", { style: { flex: 1, height: 1, background: "var(--co-border)" } })),
        React.createElement("button", { type: "button", className: "co-btn co-btn-secondary co-btn-block", onClick: () => { setLoading(true); setTimeout(() => onLogin(), 700); } },
          React.createElement(window.Icon, { name: "shield" }), "Continue with SSO"),
        React.createElement("div", { className: "co-field" },
          React.createElement("label", null, "Work email"),
          React.createElement("input", { className: "co-input" + (err ? " err" : ""), type: "email", value: email, onChange: (e) => setEmail(e.target.value), autoComplete: "username" })),
        React.createElement("div", { className: "co-field" },
          React.createElement("label", null, "Password"),
          React.createElement("input", { className: "co-input", type: "password", value: pw, onChange: (e) => setPw(e.target.value), autoComplete: "current-password" })),
        err && React.createElement("div", { className: "co-help co-field-err" }, err),
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5 } },
          React.createElement("label", { style: { display: "flex", alignItems: "center", gap: 8, color: "var(--co-text-2)", cursor: "pointer" } },
            React.createElement("input", { type: "checkbox", defaultChecked: true, style: { accentColor: "var(--co-primary)" } }), "Keep me signed in"),
          React.createElement("a", { href: "#", style: { color: "var(--co-primary)", textDecoration: "none" }, onClick: (e) => e.preventDefault() }, "Forgot password?")),
        React.createElement(window.Button, { variant: "primary", block: true, type: "submit", disabled: loading },
          loading ? "Signing in…" : "Sign in"),
        React.createElement("div", { style: { fontSize: 11.5, color: "var(--co-text-3)", textAlign: "center", marginTop: 4 } },
          "Signing in as Fulfillment for this demo."))));
}

window.Login = Login;