/* Logo mark + Login screen. Exports: Logo, Login. */

function Logo({ size = 26, mono = false }) {
  const c = mono ? "currentColor" : "var(--accent)";
  return (
    <svg width={size} height={size} viewBox="0 0 28 28" fill="none" style={{ display: "block", flex: "none" }}>
      <circle cx="6" cy="8" r="3" fill={c} />
      <circle cx="21" cy="6" r="2.4" fill={c} opacity="0.55" />
      <circle cx="20" cy="20" r="3.4" fill={c} />
      <circle cx="8" cy="21" r="2.2" fill={c} opacity="0.55" />
      <path d="M8.4 9.2 17.6 18M9 8.6 18.8 6.6M8.4 19.4 17 20M20 9.2 20.2 16.8" stroke={c} strokeWidth="1.6" strokeLinecap="round" opacity="0.7" />
    </svg>
  );
}

function Wordmark({ light }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <Logo size={26} />
      <div style={{ lineHeight: 1 }}>
        <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: "-0.02em" }}>Applied Neuroscience</div>
      </div>
    </div>
  );
}

function Login({ onLogin }) {
  const [email, setEmail] = React.useState("test@test.com");
  const [pw, setPw] = React.useState("••••••••••");
  return (
    <div className="grid-texture" style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", background: "var(--bg)", overflow: "auto" }}>
      {/* ambient glow */}
      <div style={{ position: "absolute", top: "-10%", left: "50%", transform: "translateX(-50%)", width: 720, height: 480, background: "radial-gradient(ellipse at center, var(--accent-soft-2), transparent 70%)", opacity: 0.6, pointerEvents: "none" }} />
      <div className="fade-up" style={{ position: "relative", width: 440, maxWidth: "92vw", padding: "8px 0 44px" }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 30 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
            <div style={{ width: 52, height: 52, borderRadius: 16, display: "grid", placeItems: "center", background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow)" }}>
              <Logo size={30} />
            </div>
            <div className="display" style={{ fontSize: 23 }}>Applied Neuroscience</div>
          </div>
        </div>
        <div className="card" style={{ padding: 36, borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)" }}>
          <div style={{ textAlign: "center", marginBottom: 28 }}>
            <div className="display" style={{ fontSize: 30 }}>Welcome back</div>
            <div style={{ fontSize: 15.5, color: "var(--text-muted)", marginTop: 8 }}>Sign in to map and manage your ecosystem.</div>
          </div>
          <form onSubmit={(e) => { e.preventDefault(); onLogin(); }}>
            <div style={{ marginBottom: 16 }}>
              <label className="field-label">Email</label>
              <input className="input focusable" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="off" />
            </div>
            <div style={{ marginBottom: 22 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <label className="field-label">Password</label>
                <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 13, color: "var(--accent)", textDecoration: "none", marginBottom: 7 }}>Forgot?</a>
              </div>
              <input className="input focusable" type="password" value={pw} onChange={(e) => setPw(e.target.value)} />
            </div>
            <button type="submit" className="btn btn-primary focusable" style={{ width: "100%", justifyContent: "center", padding: "14px", fontSize: 15.5 }}>
              Log in <Icon name="arrowRight" size={17} />
            </button>
          </form>
          <div style={{ display: "flex", alignItems: "center", gap: 11, margin: "24px 0" }}>
            <div style={{ flex: 1, height: 1, background: "var(--border)" }} />
            <span style={{ fontSize: 12, color: "var(--text-faint)" }}>OR</span>
            <div style={{ flex: 1, height: 1, background: "var(--border)" }} />
          </div>
          <button className="btn focusable" style={{ width: "100%", justifyContent: "center", padding: "14px" }} onClick={onLogin}>
            <Icon name="shield" size={17} /> Continue with SSO
          </button>
        </div>
        <div style={{ textAlign: "center", marginTop: 22, fontSize: 13, color: "var(--text-faint)" }}>
          Demo build · no real authentication · any details work
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Wordmark, Login });