/* eslint-disable */
/* =============================================================
   AuthPage — full-screen auth flows (outside the app shell)
   Modes: login | signup | forgot | verify | beta
   Cosmic split: living Quantum Logo + brand promise | form card.
   Browser build: classic <script type="text/babel">; window.AuthPage
   ============================================================= */
(function () {
  const { useState } = React;

  const Send = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4 20-7z"/></svg>
  );
  const Refresh = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M20 11a8 8 0 0 0-14-4.5L4 8"/><path d="M4 5v3h3"/><path d="M4 13a8 8 0 0 0 14 4.5L20 16"/><path d="M20 19v-3h-3"/></svg>
  );
  const KeyGlyph = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="7.5" cy="15.5" r="4.5"/><path d="m10.5 12.5 8-8M16 3l3 3M14 7l2 2"/></svg>
  );
  const Ext = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4h6v6M20 4l-9 9"/><path d="M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6"/></svg>
  );

  window.AuthPage = function AuthPage({ lang, onRoute, onLangToggle, recovery = false, passwordUpdated = false }) {
    const A = I18N[lang].auth;
    const [mode, setMode] = useState("login"); // login | signup | forgot | verify | beta | pending
    const isSignup = mode === "signup";
    const BETA = !!(window.ChartStore && ChartStore.BETA_MODE);

    const [fullName, setFullName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");
    const [busy, setBusy] = useState(false);
    const [resetSent, setResetSent] = useState(false);
    const [answers, setAnswers] = useState({ freq: "", level: "", why: "", goal: "", pace: "" });
    const [step, setStep] = useState(1);
    const [birthInput, setBirthInput] = useState(null);
    const [showPassword, setShowPassword] = useState(false);
    const [code, setCode] = useState("");
    const setAns = (k, v) => setAnswers((a) => ({ ...a, [k]: v }));

    const ERR = A.err;

    async function handleSubmit(e) {
      e.preventDefault();
      if (busy) return;
      setError("");
      const store = window.ChartStore;
      if (!store) { onRoute(isSignup ? "create" : "home"); return; }
      setBusy(true);
      try {
        let res;
      if (isSignup) {
        const parts = fullName.trim().split(/\s+/);
        if (BETA) {
          if (!ChartStore.remote && !answers.why.trim()) { setError(ERR.need_why); return; }
          res = await store.applyBeta({ firstName: parts[0] || "", lastName: parts.slice(1).join(" "), email, password,
            answers: birthInput ? { ...answers, birth_input: birthInput } : answers });
          if (res && res.ok) { setMode("pending"); return; }
        } else {
          res = await store.signup({ firstName: parts[0] || "", lastName: parts.slice(1).join(" "), email, password });
          if (res && res.ok) { onRoute("create"); return; }
        }
      } else {
        res = await store.login(email, password);
        if (res && res.ok) { onRoute(store.isAdmin?.() ? "admin" : store.hasComputedChart() ? "home" : "create"); return; }
      }
      const remoteErrors = lang === "ar" ? {
        confirm_email: "فعّل بريدك من رسالة التأكيد وبعدين سجّل دخول.",
        beta_pending: "طلبك قيد المراجعة. جرّب تسجيل الدخول تاني بعد الموافقة.",
        weak_password: "اختار كلمة مرور أقوى.",
        confirmation_unavailable: "إرسال رسالة التفعيل مش متاح حاليًا. طلب البيتا لسه ما اتسجّلش.",
        rate_limited: "فيه محاولات كتير دلوقتي. استنى شوية وجرّب تاني.",
        suspended: "حسابك موقوف حاليًا.",
        connection: "ما قدرناش نكمل الطلب. جرّب تاني.",
      } : {
        confirm_email: "Confirm your email before signing in.",
        beta_pending: "Your application is under review. Sign in again after approval.",
        weak_password: "Choose a stronger password.",
        confirmation_unavailable: "Confirmation email is currently unavailable. Your beta application has not been submitted.",
        rate_limited: "Too many attempts. Wait a little and try again.",
        suspended: "Your account is currently suspended.",
        connection: "The request failed. Try again.",
      };
      setError(remoteErrors[res?.error] || ERR[res?.error] || ERR.missing);
      } catch (error) {
        setError(lang === "ar" ? "ما قدرناش نكمل الطلب. جرّب تاني." : "The request failed. Try again.");
      } finally {
        setBusy(false);
      }
    }

    if (ChartStore.remote && mode !== "pending") {
      const ar = lang === "ar";
      const tr = (arabic, english) => ar ? arabic : english;
      const nextIcon = ar ? Icon.chevLeft : Icon.chevRight;
      const Arrow = nextIcon;
      const journey = isSignup && step === 1;
      const birth = isSignup && step === 2;
      const forgot = mode === "forgot";
      const complete = answers.level && answers.goal && answers.pace;
      const fields = [
        ["level", A.beta_q.level_label, [["new", tr("مبتدئ", "New")], ["some", tr("عندي فكرة", "Familiar")], ["deep", tr("متعمّق", "Advanced")]]],
        ["goal", tr("جاي تفهم إيه؟", "What brings you here?"), [["decisions", tr("قراراتي", "My decisions")], ["self", tr("أفهم نفسي", "Understand myself")], ["chart", tr("أفهم شارت", "Understand a chart")]]],
        ["pace", tr("تحب تمشي بإيقاع إيه؟", "How would you like to explore?"), [["guided", tr("خطوة بخطوة", "Step by step")], ["short", tr("جلسات قصيرة", "Short sessions")], ["open", tr("استكشاف مفتوح", "Open exploration")]]],
      ];
      function changeMode(next) {
        setMode(next); setStep(1); setError(""); setShowPassword(false); setResetSent(false);
      }
      async function handleRecovery(e) {
        e.preventDefault();
        if (busy) return;
        setError("");
        setBusy(true);
        try {
          if (recovery) await ChartStore.finishPasswordReset(password);
          else {
            await ChartStore.requestPasswordReset(email);
            setResetSent(true);
          }
        } catch (err) {
          setError(err?.status === 429
            ? tr("فيه محاولات كتير. استنى شوية وجرّب تاني.", "Too many attempts. Wait a little and try again.")
            : recovery
              ? tr("تعذّر حفظ كلمة المرور. اختار كلمة جديدة أو اطلب رابط تاني.", "Could not save your password. Choose a new one or request another link.")
              : tr("تعذّر إرسال رابط الاستعادة دلوقتي. جرّب تاني.", "Could not send a reset link right now. Try again."));
        } finally {
          setBusy(false);
        }
      }
      function nextStep(e) {
        e.preventDefault();
        if (!complete) return;
        setStep(2);
        requestAnimationFrame(() => document.getElementById("beta-account-title")?.focus());
      }
      return (
        <main className="auth-page auth-gateway" data-galaxy-ui>
          <button type="button" className="auth-lang" onClick={onLangToggle}><Icon.globe size={15} /> {I18N[lang].topbar.lang_toggle}</button>
          <aside className="auth-aside">
            <div className="auth-brand"><BrandOrb size={82} energy={1.5} /><div className="auth-brand-text">
              <strong>Spade’s Life Explained</strong><em>{tr("رحلة الوعي", "Journey of Awareness")}</em>
            </div></div>
            <div className="auth-promise"><span className="eyebrow">THE HUMAN EQUALIZER</span>
              <h1>{tr("ابدأ من حيث أنت", "Start where you are")}</h1>
              <p>{tr("شارتك نقطة البداية. اختار اللي عايز تفهمه والإيقاع اللي يناسبك، والرحلة تترتب حواليك.", "Your chart is the starting point. Choose what to explore and the pace that works for you.")}</p>
            </div>
          </aside>
          <div className="auth-main">
            <section className="auth-card">
              {isSignup && <p className="auth-step eyebrow">{tr(`خطوة ${["١", "٢", "٣"][step - 1]} من ٣`, `Step ${step} of 3`)}</p>}
              <h2 id="beta-account-title" tabIndex={-1} className="auth-form-title">{recovery ? tr("اختار كلمة مرور جديدة", "Choose a new password") : forgot ? tr("استعادة كلمة المرور", "Reset your password") : journey ? tr("رحلتك", "Your journey") : birth ? tr("بيانات الميلاد", "Birth details") : isSignup ? tr("حسابك", "Your account") : A.tab_login}</h2>
              <p className="auth-form-intro">{recovery ? tr("بعد الحفظ، سجّل دخول بكلمة المرور الجديدة.", "After saving, sign in with your new password.") : forgot ? tr("اكتب البريد اللي سجّلت بيه.", "Enter the email you signed up with.") : journey
                ? tr("إجاباتك هتحدد أول قراءة وترتيب الخطوات.", "Your answers shape your first reading and what comes next.")
                : birth ? tr("هتراجع البيانات دي بعد قبولك، قبل ما شارتك يتعمل.", "You’ll review these details after approval, before your chart is created.")
                : isSignup ? tr("فعّل بريدك وسجّل دخول عشان طلبك يروح للمراجعة.", "Confirm your email and sign in to submit your application.")
                  : tr("تابع طلبك أو ارجع لشارتك.", "Check your application or return to your chart.")}</p>
              {passwordUpdated && !forgot && !isSignup && <p role="status">{tr("كلمة المرور اتغيّرت. سجّل دخول من هنا.", "Password updated. Sign in below.")}</p>}
              {recovery || forgot ? (
                <form className="auth-form" onSubmit={handleRecovery}>
                  {recovery ? <label className="field">
                    <span className="field-label">{tr("كلمة المرور الجديدة", "New password")}</span>
                    <span className="field-wrap"><input type="password" autoComplete="new-password" minLength={6} dir="ltr"
                      value={password} onChange={(e) => setPassword(e.target.value)} required /></span>
                  </label> : !resetSent && <label className="field">
                    <span className="field-label">{A.email}</span>
                    <span className="field-wrap"><input type="email" autoComplete="email" dir="ltr"
                      value={email} onChange={(e) => setEmail(e.target.value)} required /></span>
                  </label>}
                  {error && <div className="cc-err" role="alert">{error}</div>}
                  {resetSent ? <p role="status">{tr("لو البريد مرتبط بحساب، هيوصلك رابط الاستعادة.", "If this email is linked to an account, you’ll receive a reset link.")}</p>
                    : <button type="submit" className="btn-gold auth-submit" disabled={busy}>{busy ? tr("لحظة…", "Please wait…")
                      : recovery ? tr("احفظ كلمة المرور", "Save password") : tr("ابعت رابط الاستعادة", "Send reset link")}</button>}
                  <button type="button" className="auth-back" disabled={busy} onClick={() => recovery ? ChartStore.logout() : changeMode("login")}>{tr("ارجع لتسجيل الدخول", "Back to sign in")}</button>
                </form>
              ) : journey ? (
                <form className="auth-form" onSubmit={nextStep}>
                  {fields.map(([key, label, options]) => <fieldset className="auth-choice" key={key}>
                    <legend>{label}</legend><div className="beta-seg">
                      {options.map(([value, text]) => <button type="button" className={`beta-seg-b ${answers[key] === value ? "on" : ""}`}
                        aria-pressed={answers[key] === value} key={value} onClick={() => setAns(key, value)}>{text}</button>)}
                    </div>
                  </fieldset>)}
                  <button type="submit" className="btn-gold auth-submit" disabled={!complete}>{tr("كمّل لبيانات الميلاد", "Continue to birth details")} <Arrow size={16} /></button>
                </form>
              ) : birth ? (
                <div className="beta-birth-intake">
                  <CreateChartPage lang={lang} intake initialInput={birthInput} onSaveInput={(input) => { setBirthInput(input); setStep(3); }} />
                  <button type="button" className="auth-back" onClick={() => setStep(1)}>{tr("ارجع لاختيارات الرحلة", "Back to journey choices")}</button>
                </div>
              ) : (
                <form className="auth-form" onSubmit={handleSubmit}>
                  {isSignup && <label className="field"><span className="field-label">{A.name}</span>
                    <span className="field-wrap"><span className="field-icon"><Icon.profile size={16} /></span>
                      <input type="text" autoComplete="name" maxLength={100} value={fullName} onChange={(e) => setFullName(e.target.value)} required /></span>
                  </label>}
                  <label className="field"><span className="field-label">{A.email}</span>
                    <span className="field-wrap"><span className="field-icon"><Icon.mail size={16} /></span>
                      <input type="email" autoComplete="email" dir="ltr" value={email} onChange={(e) => setEmail(e.target.value)} required /></span>
                  </label>
                  <div className="field"><label className="field-label" htmlFor="beta-password">{A.password}</label>
                    <span className="field-wrap auth-password"><span className="field-icon"><Icon.lock size={16} /></span>
                      <input id="beta-password" type={showPassword ? "text" : "password"} autoComplete={isSignup ? "new-password" : "current-password"}
                        minLength={isSignup ? 6 : undefined} dir="ltr" value={password} onChange={(e) => setPassword(e.target.value)} required />
                      <button type="button" className="auth-password-toggle" aria-pressed={showPassword} aria-label={tr("إظهار كلمة المرور", "Show password")}
                        onClick={() => setShowPassword(!showPassword)}><Icon.eye size={17} /></button></span>
                  </div>
                  {isSignup && <label className="field"><span className="field-label">{tr("تحب تشارك ملاحظاتك قد إيه؟ (اختياري)", "How often would you share feedback? (optional)")}</span>
                    <select className="auth-feedback" value={answers.freq} onChange={(e) => setAns("freq", e.target.value)}>
                      <option value="">{tr("من غير تفضيل", "No preference")}</option>
                      <option value="once">{tr("مرة أسبوعيًا", "Once a week")}</option>
                      <option value="few">{tr("مرتين في الأسبوع", "Twice a week")}</option>
                    </select></label>}
                  {error && <div className="cc-err" role="alert">{error}</div>}
                  <button type="submit" className="btn-gold auth-submit" disabled={busy}>
                    {busy ? tr("جارٍ التحقق…", "Please wait…") : isSignup ? A.submit_signup_beta : A.submit_login} <Arrow size={16} />
                  </button>
                  {!isSignup && <button type="button" className="auth-back" disabled={busy} onClick={() => changeMode("forgot")}>{tr("نسيت كلمة المرور؟", "Forgot password?")}</button>}
                  {isSignup && <button type="button" className="auth-back" disabled={busy} onClick={() => { setStep(2); setError(""); }}>{tr("ارجع لبيانات الميلاد", "Back to birth details")}</button>}
                </form>
              )}
              {!forgot && !recovery && <div className="auth-switch">
                <span>{isSignup ? tr("عندك حساب؟", "Already have an account?") : tr("أول مرة هنا؟", "New here?")}</span>
                <button type="button" className="auth-back" disabled={busy} onClick={() => changeMode(isSignup ? "login" : "signup")}>{isSignup ? A.tab_login : A.tab_signup_beta}</button>
              </div>}
            </section>
          </div>
        </main>
      );
    }

    // ── aside variants ──
    const asideContent = () => {
      if (mode === "beta" || (isSignup && BETA)) {
        const av = A.aside_beta;
        return {
          title: av.title,
          body: av.body,
          items: [
            { ic: <Icon.diamond size={16} />, t: av.items[0].t, s: av.items[0].s },
            { ic: <Icon.users size={16} />, t: av.items[1].t, s: av.items[1].s, green: true },
            { ic: <Icon.crown size={16} />, t: av.items[2].t, s: av.items[2].s, gold: true },
          ],
        };
      }
      if (mode === "forgot") {
        const av = A.aside_forgot;
        return {
          title: av.title,
          body: av.body,
          items: [
            { ic: <ShieldMini />, t: av.items[0].t, s: av.items[0].s },
            { ic: <Refresh size={16} />, t: av.items[1].t, s: av.items[1].s },
            { ic: <Icon.compass size={16} />, t: av.items[2].t, s: av.items[2].s },
          ],
        };
      }
      if (mode === "beta") {
        const av = A.aside_beta_discover;
        return {
          title: av.title,
          body: av.body,
          items: [
            { ic: <Icon.diamond size={16} />, t: av.items[0].t, s: av.items[0].s },
            { ic: <Icon.users size={16} />, t: av.items[1].t, s: av.items[1].s, green: true },
            { ic: <Icon.crown size={16} />, t: av.items[2].t, s: av.items[2].s, gold: true },
          ],
        };
      }
      return null; // login/signup use the default promise
    };

    const av = asideContent();

    // ── pending: application received ──
    if (mode === "pending") {
      const P = A.pending;
      return (
        <div className="auth-page auth-centered" data-galaxy-ui>
          <button className="auth-lang" onClick={onLangToggle}><Icon.globe size={15} /> {I18N[lang].topbar.lang_toggle}</button>
          <div className="auth-brand auth-brand-top">
            <BrandOrb size={56} energy={1.4} />
            <div className="auth-brand-text"><strong>{I18N[lang].brand.title}</strong><em>{I18N[lang].brand.subtitle}</em></div>
          </div>
          <div className="auth-card auth-verify">
            <div className="auth-verify-ic"><Icon.check size={34} /></div>
            <h2 className="auth-verify-title">{ChartStore.remote
              ? (lang === "ar" ? "الخطوة الجاية: فعّل بريدك" : "Next: confirm your email")
              : P.title}</h2>
            <p className="auth-verify-sub">{ChartStore.remote
              ? (lang === "ar" ? "فعّل بريدك من رسالة التأكيد، وبعدين سجّل دخول عشان طلبك يظهر للمراجعة." : "Confirm your email, then sign in to submit your application for review.")
              : P.sub}</p>
            {!ChartStore.remote && <div className="auth-verify-steps">
              {[
                { ic: <Icon.check size={18} />, t: P.steps[0].t, s: P.steps[0].s },
                { ic: <Icon.eye size={18} />, t: P.steps[1].t, s: P.steps[1].s },
                { ic: <Icon.mail size={18} />, t: P.steps[2].t, s: P.steps[2].s },
              ].map((s, i) => (
                <div key={i} className="auth-vstep"><span className="auth-vstep-ic">{s.ic}</span><strong>{s.t}</strong><span>{s.s}</span></div>
              ))}
            </div>}
            <button type="button" className="auth-secondary" onClick={() => { setMode("login"); setError(""); }}><Icon.chevRight size={14} /> {A.back_to_login}</button>
          </div>
        </div>
      );
    }

    // ── verify is a centered single-card layout ──
    if (mode === "verify") {
      const V = A.verify;
      return (
        <div className="auth-page auth-centered" data-galaxy-ui>
          <button className="auth-lang" onClick={onLangToggle}><Icon.globe size={15} /> {I18N[lang].topbar.lang_toggle}</button>
          <div className="auth-brand auth-brand-top">
            <BrandOrb size={56} energy={1.4} />
            <div className="auth-brand-text"><strong>{I18N[lang].brand.title}</strong><em>{I18N[lang].brand.subtitle}</em></div>
          </div>
          <div className="auth-card auth-verify">
            <div className="auth-verify-ic"><Icon.mail size={34} /></div>
            <h2 className="auth-verify-title">{V.title}</h2>
            <p className="auth-verify-sub">{V.sub}</p>
            <div className="auth-verify-steps">
              {[
                { ic: <Icon.check size={18} />, t: V.steps[0].t, s: V.steps[0].s },
                { ic: <Icon.mail size={18} />, t: V.steps[1].t, s: V.steps[1].s },
                { ic: <LinkMini />, t: V.steps[2].t, s: V.steps[2].s },
              ].map((s, i) => (
                <div key={i} className="auth-vstep"><span className="auth-vstep-ic">{s.ic}</span><strong>{s.t}</strong><span>{s.s}</span></div>
              ))}
            </div>
            <button type="button" className="btn-gold auth-submit" onClick={() => onRoute("create")}><Ext size={15} /> {V.open_email}</button>
            <button type="button" className="auth-secondary" onClick={() => window.HDToast && HDToast.show({ type: "success", title: V.resend_toast_title, msg: V.resend_toast_msg })}><Refresh size={14} /> {V.resend}</button>
            <button type="button" className="auth-back auth-back-inline" onClick={() => setMode("signup")}><Icon.chevRight size={13} /> {V.change_email}</button>
          </div>
        </div>
      );
    }

    return (
      <div className="auth-page" data-galaxy-ui>
        <button className="auth-lang" onClick={onLangToggle}><Icon.globe size={15} /> {I18N[lang].topbar.lang_toggle}</button>

        {/* ── left: brand promise ── */}
        <aside className="auth-aside">
          <div className="auth-brand">
            <BrandOrb size={92} energy={1.7} />
            <div className="auth-brand-text">
              <strong>{I18N[lang].brand.title}</strong>
              <em>{I18N[lang].brand.subtitle}</em>
            </div>
          </div>
          {av ? (
            <React.Fragment>
              <div className="auth-promise"><h1>{av.title}</h1><p>{av.body}</p></div>
              <div className="auth-aside-items">
                {av.items.map((it, i) => (
                  <div key={i} className="auth-aside-item">
                    <span className={`auth-aside-ic ${it.green ? "green" : it.gold ? "gold" : ""}`}>{it.ic}</span>
                    <div><strong>{it.t}</strong><p>{it.s}</p></div>
                  </div>
                ))}
              </div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div className="auth-promise">
                <span className="eyebrow">{A.eyebrow}</span>
                <h1>{A.title}</h1>
                <p>{A.sub}</p>
              </div>
              <button type="button" className="auth-beta auth-beta-btn" onClick={() => { setMode(ChartStore.remote ? "signup" : "beta"); setError(""); }}>
                <span className="auth-beta-icon"><Icon.lock size={16} /></span>
                <div><strong>{A.beta_title}</strong><p>{A.beta_body}</p></div>
                <Icon.chevLeft size={15} />
              </button>
            </React.Fragment>
          )}
        </aside>

        {/* ── right: form ── */}
        <main className="auth-main">
          {mode === "forgot" ? (
            <div className="auth-card">
              <h2 className="auth-verify-title">{A.forgot_form.title}</h2>
              <p className="auth-verify-sub">{A.forgot_form.sub}</p>
              <form className="auth-form" onSubmit={(e) => { e.preventDefault(); setMode("verify"); }}>
                <label className="field">
                  <span className="field-label">{A.email}</span>
                  <span className="field-wrap"><span className="field-icon"><Icon.mail size={16} /></span>
                    <input type="email" placeholder={A.forgot_form.email_ph} value={email} onChange={(e) => setEmail(e.target.value)} required /></span>
                </label>
                <button type="submit" className="btn-gold auth-submit"><Send size={15} /> {A.forgot_form.submit}</button>
                <button type="button" className="auth-secondary" onClick={() => setMode("login")}><Icon.chevRight size={14} /> {A.back_to_login}</button>
              </form>
              <p className="auth-foot"><Icon.lock size={12} /> {A.forgot_form.foot}</p>
            </div>
          ) : mode === "beta" ? (
            <div className="auth-card">
              <div className="auth-beta-lock"><Icon.lock size={22} /></div>
              <h2 className="auth-verify-title">{A.beta_code.title}</h2>
              <p className="auth-verify-sub">{A.beta_code.sub}</p>
              <form className="auth-form" onSubmit={(e) => { e.preventDefault(); window.HDToast && HDToast.show({ type: "success", title: A.beta_code.toast_title, msg: A.beta_code.toast_msg }); onRoute("create"); }}>
                <label className="field">
                  <span className="field-wrap"><span className="field-icon"><KeyGlyph size={16} /></span>
                    <input type="text" placeholder={A.beta_code.ph} required /></span>
                </label>
                <button type="submit" className="btn-gold auth-submit"><Icon.crown size={15} /> {A.beta_code.submit}</button>
                <button type="button" className="auth-secondary" onClick={() => setMode("login")}><Icon.chevRight size={14} /> {A.beta_code.back}</button>
              </form>
              <p className="auth-foot"><Icon.mail size={12} /> {A.beta_code.foot_prefix}<a className="auth-link" href="#" onClick={(e) => { e.preventDefault(); onRoute("support/ticket"); }}>{A.beta_code.foot_link}</a></p>
            </div>
          ) : (
            <div className="auth-card">
              <div className="auth-tabs" data-mode={isSignup ? "signup" : "login"}>
                <button type="button" className={`auth-tab ${!isSignup ? "active" : ""}`} disabled={busy} onClick={() => { setMode("login"); setError(""); }}>{A.tab_login}</button>
                <button type="button" className={`auth-tab ${isSignup ? "active" : ""}`} disabled={busy} onClick={() => { setMode("signup"); setError(""); }}>{BETA ? A.tab_signup_beta : A.tab_signup}</button>
                <span className="auth-tab-glow"></span>
              </div>

              <form className="auth-form" onSubmit={handleSubmit}>
                {ChartStore.remote && <div>
                  <h2 className="auth-form-title">{isSignup ? A.tab_signup_beta : A.tab_login}</h2>
                  <p className="auth-form-intro">{lang === "ar"
                    ? (isSignup ? "كمّل بياناتك، وبعد تفعيل بريدك سجّل دخول عشان طلبك يروح للمراجعة." : "ادخل ببريدك وكلمة المرور لمتابعة طلبك أو فتح شارتاتك.")
                    : (isSignup ? "Confirm your email and sign in to submit your application for review." : "Sign in to check your application or open your charts.")}</p>
                </div>}
                {isSignup && (
                  <label className="field">
                    <span className="field-label">{A.name}</span>
                    <span className="field-wrap"><span className="field-icon"><Icon.profile size={16} /></span>
                      <input type="text" placeholder={A.name_ph} value={fullName} onChange={(e) => setFullName(e.target.value)} required /></span>
                  </label>
                )}
                <label className="field">
                  <span className="field-label">{A.email}</span>
                  <span className="field-wrap"><span className="field-icon"><Icon.mail size={16} /></span>
                    <input type="email" placeholder={A.email_ph} value={email} onChange={(e) => setEmail(e.target.value)} required /></span>
                </label>
                <label className="field">
                  <span className="field-label">{A.password}</span>
                  <span className="field-wrap"><span className="field-icon"><Icon.lock size={16} /></span>
                    <input type="password" placeholder={A.password_ph} value={password} onChange={(e) => setPassword(e.target.value)}
                      autoComplete={isSignup ? "new-password" : "current-password"} minLength={isSignup && ChartStore.remote ? 6 : undefined} required /></span>
                </label>

                {isSignup && BETA && (
                  <React.Fragment>
                    <label className="field">
                      <span className="field-label">{A.beta_q.freq_label}</span>
                      <div className="beta-seg">
                        {[["once", A.beta_q.freq_opts[0]], ["few", A.beta_q.freq_opts[1]], ["daily", A.beta_q.freq_opts[2]]].map(([v, l]) => (
                          <button type="button" key={v} className={`beta-seg-b ${answers.freq === v ? "on" : ""}`} onClick={() => setAns("freq", v)}>{l}</button>
                        ))}
                      </div>
                    </label>
                    <label className="field">
                      <span className="field-label">{A.beta_q.level_label}</span>
                      <div className="beta-seg">
                        {[["new", A.beta_q.level_opts[0]], ["some", A.beta_q.level_opts[1]], ["deep", A.beta_q.level_opts[2]]].map(([v, l]) => (
                          <button type="button" key={v} className={`beta-seg-b ${answers.level === v ? "on" : ""}`} onClick={() => setAns("level", v)}>{l}</button>
                        ))}
                      </div>
                    </label>
                    <label className="field">
                      <span className="field-label">{A.beta_q.why_label}</span>
                      <textarea className="beta-textarea" rows={3} value={answers.why} onChange={(e) => setAns("why", e.target.value)} placeholder={A.beta_q.why_ph} required />
                    </label>
                  </React.Fragment>
                )}

                {error && <div className="cc-err" role="alert" style={{ marginTop: 4 }}>{error}</div>}

                {!isSignup && !ChartStore.remote && (
                  <div className="auth-row">
                    <label className="check-inline"><input type="checkbox" defaultChecked /><span>{A.remember}</span></label>
                    <a className="auth-link" href="#" onClick={(e) => { e.preventDefault(); setMode("forgot"); }}>{A.forgot}</a>
                  </div>
                )}

                  <button type="submit" className="btn-gold auth-submit" disabled={busy}>
                  {busy ? (lang === "ar" ? "جارٍ التحقق…" : "Please wait…") : isSignup ? (BETA ? A.submit_signup_beta : A.submit_signup) : A.submit_login}
                  <Icon.chevLeft size={16} />
                </button>

                {!ChartStore.remote && <>
                  <div className="auth-or"><span>{A.or}</span></div>
                  <button type="button" className="btn-ghost auth-google" onClick={() => onRoute("create")}>
                    <Icon.google size={18} /> {A.google}
                  </button>
                </>}
              </form>

              <p className="auth-foot">{A.foot}</p>
            </div>
          )}
          <button className="auth-back" onClick={() => onRoute("home")}>{A.back_home} ←</button>
        </main>
      </div>
    );
  };

  function ShieldMini() {
    return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 5 6v6c0 4 3 6.5 7 8 4-1.5 7-4 7-8V6z"/><path d="m9 12 2 2 4-4"/></svg>;
  }
  function LinkMini() {
    return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/></svg>;
  }
})();