// Login / signup
const Auth = ({ t, lang, setPage }) => {
  const [mode, setMode] = React.useState("signin");
  return (
    <div className="auth-shell">
      <div className="auth-form-side">
        <div className="auth-form">
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold-700)", letterSpacing: "0.08em", marginBottom: 16 }}>
            {mode === "signin" ? (lang === "ar" ? "العودة" : "WELCOME BACK") : (lang === "ar" ? "أنشئ حسابًا" : "GET STARTED")}
          </div>
          <h1 className="t-h2" style={{ margin: "0 0 32px" }}>{mode === "signin" ? t.auth.signin_h : t.auth.signup_h}</h1>

          <button className="btn btn-outline" style={{ width: "100%", justifyContent: "center", padding: "12px" }}>
            <span style={{ width: 18, height: 18, background: "var(--green-700)", borderRadius: 3, display: "grid", placeItems: "center", color: "var(--paper)", fontSize: 10, fontWeight: 700, marginInlineEnd: 8 }}>ن</span>
            {t.auth.sso}
          </button>

          <div className="auth-divider">{t.auth.or}</div>

          <div className="col gap-3">
            {mode === "signup" && (
              <div className="field">
                <label>{t.contact.f_name}</label>
                <input/>
              </div>
            )}
            <div className="field">
              <label>{t.auth.email}</label>
              <input placeholder="you@example.com"/>
            </div>
            <div className="field">
              <label>{t.auth.password}</label>
              <input type="password" placeholder="••••••••••••"/>
              {mode === "signin" && (
                <a style={{ alignSelf: "flex-end", fontSize: 12, color: "var(--green-700)", marginTop: 4 }}>{t.auth.forgot}</a>
              )}
            </div>
            <button className="btn btn-primary" style={{ justifyContent: "center", padding: "12px", marginTop: 8 }} onClick={() => setPage("dashboard")}>
              {mode === "signin" ? t.auth.signin : t.auth.signup}
            </button>
          </div>

          <p style={{ fontSize: 12, color: "var(--ink-400)", margin: "16px 0 0", lineHeight: 1.5 }}>
            {t.auth.tos}
          </p>

          <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--hairline)", fontSize: 14, color: "var(--ink-500)" }}>
            <a onClick={() => setMode(mode === "signin" ? "signup" : "signin")} style={{ color: "var(--green-700)", cursor: "pointer", fontWeight: 500 }}>
              {mode === "signin" ? t.auth.to_signup : t.auth.to_signin}
            </a>
          </div>
        </div>
      </div>
      <div className="auth-quote-side">
        <div>
          <div className="hero-eyebrow" style={{ color: "var(--gold-400)" }}>
            <span style={{ width: 24, height: 1.5, background: "var(--gold-400)" }}/>
            {lang === "ar" ? "شهادة عميل" : "Client testimonial"}
          </div>
        </div>
        <div>
          <p className="q">{t.auth.side_quote}</p>
          <div className="att">{t.auth.side_attrib}</div>
        </div>
        <div style={{ display: "flex", gap: 32, position: "relative", color: "rgba(246,242,232,0.7)", fontSize: 12 }}>
          <div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 32, color: "var(--paper)" }}>2,840</div>
            <div>{lang === "ar" ? "تقرير مُسلّم" : "Reports delivered"}</div>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 32, color: "var(--paper)" }}>68h</div>
            <div>{lang === "ar" ? "متوسط الإنجاز" : "Avg. turnaround"}</div>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 32, color: "var(--paper)" }}>92%</div>
            <div>{lang === "ar" ? "مستوى الثقة" : "Confidence"}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Auth });