/* scope guard: file-scoped IIFE — see index.html */
(function () {
/* Stoic+ — Sign-in / authentication.
   Subscriber-only product: this is a sign-IN, not sign-up. No paywall.
   v1: Enter proceeds with or without an email (no auth backend yet) →
   first-launch Welcome. The real membership check slots into the
   Store.api.signIn seam that App calls on submit. */

const { GlassButton } = window;

function SignInScreen({ onEnter }) {
  const Wic = window.Icons;
  const [email, setEmail] = React.useState("");
  const submit = (e) => { if (e) e.preventDefault(); onEnter(email); };

  return (
    <div className="screen" style={{ display: "flex", flexDirection: "column", minHeight: "100%", padding: "8px 4px 0" }}>
      {/* Brand, centered block */}
      <div style={{ margin: "auto 0", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 3, marginBottom: 30 }}>
          <img src="assets/stoic-wordmark-white.png" alt="STOIC" style={{ height: 22, display: "block" }} />
          <span style={{ fontSize: 22, fontWeight: 800, color: "var(--color-amber)", lineHeight: 1 }}>+</span>
        </div>

        <h1 style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.1, margin: "0 0 12px", color: "var(--color-text)" }}>
          Welcome back.
        </h1>
        <p style={{ fontSize: 15, fontWeight: 500, lineHeight: 1.5, color: "var(--color-text-muted)", margin: "0 0 28px", maxWidth: "32ch" }}>
          Sign in to pick up your streak. Your membership stays on this account.
        </p>

        <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <label className="glass glass-lit" style={{ display: "flex", alignItems: "center", gap: 12, borderRadius: 16, padding: "15px 16px" }}>
            <span style={{ color: "var(--color-text-faint)", display: "flex", flex: "none" }}><Wic.AtSign size={18} sw={2} /></span>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@email.com"
              autoComplete="email"
              inputMode="email"
              style={{ flex: 1, minWidth: 0, background: "transparent", border: "none", outline: "none", color: "var(--color-text)", fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 500 }}
            />
          </label>
          <GlassButton onClick={submit}>Enter</GlassButton>
        </form>
      </div>

      {/* Footer */}
      <div style={{ paddingBottom: 14, textAlign: "center" }}>
        <button onClick={() => onEnter(email)} style={{ background: "none", border: "none", color: "var(--color-text-faint)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, cursor: "pointer", padding: 6 }}>
          Use a sign-in link instead
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { SignInScreen });
})();