// Login screen — dark hero treatment matching marketing site
const LoginScreen = ({ onLogin }) => {
  const isMobile = useIsMobile();
  const [email, setEmail] = React.useState("dr.amelia.chen@acmepharma.com");
  const [password, setPassword] = React.useState("••••••••••••");
  const [loading, setLoading] = React.useState(false);
  const [showPw, setShowPw] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => onLogin({ email, name: "Amelia Chen", role: "Brand & Regulatory Lead", tenant: "Acme Pharma" }), 850);
  };

  return (
    <div style={{ minHeight: "100vh", background: "var(--ink)", color: "var(--bone)", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr", position: "relative" }}>
      {/* LEFT — editorial */}
      <div style={{ position: "relative", padding: isMobile ? "28px 24px" : "36px 56px", display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "hidden", gap: isMobile ? 32 : 0 }}>
        <div className="login-bg" />
        <div style={{ position: "relative", zIndex: 1, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Logo light size={18} />
          <div style={{ display: "flex", gap: 24, fontSize: 13, color: "var(--muted-2)" }}>
            <a>Status</a><a>Docs</a><a>Support</a>
          </div>
        </div>

        <div style={{ position: "relative", zIndex: 1, maxWidth: 620 }}>
          <div className="eyebrow eyebrow-coral" style={{ marginBottom: 24 }}>● Client Portal · v2.4</div>
          <h1 className="h-display" style={{ color: "var(--bone)" }}>
            Regulated design,<br/>
            without the <span className="accent">friction</span>.
          </h1>
          <p style={{ color: "var(--muted-2)", fontSize: 17, lineHeight: 1.55, marginTop: 24, maxWidth: 480 }}>
            Your secure workspace for design assets, governance audits, and platform integrations — built for life sciences, MedTech and pharma.
          </p>

          <div style={{ marginTop: isMobile ? 36 : 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line-dark)" }}>
            {[
              { k: "140+", v: "Brands governed" },
              { k: "12 min", v: "Median audit time" },
              { k: "99.98%", v: "Uptime SLA" },
            ].map((s, i) => (
              <div key={i} style={{ padding: "20px 20px 0 0", borderRight: i < 2 ? "1px solid var(--line-dark)" : "none", paddingLeft: i ? 24 : 0 }}>
                <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--accent)" }}>{s.k}</div>
                <div style={{ fontSize: 12, color: "var(--muted-2)", marginTop: 4 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ position: "relative", zIndex: 1, fontSize: 12, color: "var(--muted-2)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
          <span>© 2026 Graphite Studio · Dublin · London</span>
          <span style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <span><Icon name="shield" size={12} style={{verticalAlign:"-2px"}}/> SOC 2 Type II</span>
            <span>ISO 27001</span>
            <span>HIPAA</span>
          </span>
        </div>
      </div>

      {/* RIGHT — form card */}
      <div style={{ background: "var(--ink-2)", display: "grid", placeItems: "center", padding: isMobile ? "32px 20px" : 48, position: "relative" }}>
        <form onSubmit={submit} className="chamfer" style={{
          background: "var(--bone)", color: "var(--ink)", padding: isMobile ? "28px 24px 24px" : "44px 44px 36px",
          width: "100%", maxWidth: 460, "--chamfer": "20px", position: "relative"
        }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Sign in</div>
          <h2 style={{ fontSize: 30, fontWeight: 500, letterSpacing: "-0.02em", margin: "0 0 8px" }}>Welcome back.</h2>
          <p style={{ color: "var(--muted)", fontSize: 14, margin: 0 }}>
            Use your Acme Pharma SSO or work email.
          </p>

          <button type="button" style={{
            marginTop: 28, width: "100%", padding: "13px 16px", border: "1px solid var(--ink)",
            background: "var(--paper)", borderRadius: 10, fontSize: 14, fontWeight: 500,
            display: "flex", alignItems: "center", justifyContent: "center", gap: 10, cursor: "pointer"
          }}>
            <Icon name="lock" size={15}/> Continue with Acme SSO (Okta)
          </button>

          <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "20px 0", color: "var(--muted)", fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}/>
            OR
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}/>
          </div>

          <label style={{ display: "block", fontSize: 12, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--muted)", marginBottom: 6 }}>Email</label>
          <div style={{ position: "relative" }}>
            <Icon name="mail" size={15} style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--muted)" }} />
            <input className="input" value={email} onChange={e=>setEmail(e.target.value)} style={{ paddingLeft: 40 }} />
          </div>

          <label style={{ display: "block", fontSize: 12, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--muted)", margin: "16px 0 6px" }}>Password</label>
          <div style={{ position: "relative" }}>
            <Icon name="key" size={15} style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--muted)" }} />
            <input className="input" type={showPw ? "text" : "password"} value={password} onChange={e=>setPassword(e.target.value)} style={{ paddingLeft: 40, paddingRight: 40 }} />
            <button type="button" onClick={()=>setShowPw(s=>!s)} style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", background: "transparent", border: "none", color: "var(--muted)", padding: 4 }}>
              <Icon name="eye" size={15} />
            </button>
          </div>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14, fontSize: 13 }}>
            <label style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--muted)", cursor: "pointer" }}>
              <input type="checkbox" defaultChecked /> Remember device for 30 days
            </label>
            <a style={{ color: "var(--accent)", cursor: "pointer" }}>Forgot?</a>
          </div>

          <button type="submit" className="btn btn-primary" style={{ width: "100%", marginTop: 24, justifyContent: "center", padding: "13px 18px", fontSize: 14 }} disabled={loading}>
            {loading ? <><Icon name="spinner" size={14}/> Signing in…</> : <>Sign in <Icon name="arrow-right" size={14}/></>}
          </button>

          <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 24, textAlign: "center" }}>
            Protected by hardware MFA. New here? <a style={{ color: "var(--ink)", textDecoration: "underline" }}>Request access →</a>
          </p>
        </form>

        {/* corner ticker */}
        <div style={{ position: "absolute", top: 24, right: 24, display: isMobile ? "none" : "flex", alignItems: "center", gap: 8, fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--muted-2)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--ok)", animation: "pulse-coral 2s infinite" }} />
          All systems operational
        </div>
      </div>
    </div>
  );
};

window.LoginScreen = LoginScreen;