// auth.jsx — Shahdad authentication center v31.96
// The complete client experience is ready for backend integration, but this
// release never creates an authenticated session or accepts an OTP locally.

const AUTH_CENTER_CONFIG = Object.freeze({
  version: "31.96",
  providerStatus: "disconnected",
  otpStatus: "disconnected",
  phoneCountry: "IR",
  passwordMinimum: 8
});

const AUTH_COPY = {
  eyebrow: {
    fa: "حساب یکپارچه شهداد",
    ar: "حساب شهداد الموحّد",
    en: "Your Shahdad account"
  },
  trustTitle: {
    fa: "کار حقوقی‌تان را امن و پیوسته ادامه دهید",
    ar: "تابع عملك القانوني بأمان واستمرارية",
    en: "Keep your legal work secure and continuous"
  },
  trustBody: {
    fa: "یک حساب برای پرونده‌ها، مشاوره‌ها، اسناد و امور مالی؛ با دسترسی کنترل‌شده در همه بخش‌های شهداد.",
    ar: "حساب واحد للقضايا والاستشارات والمستندات والشؤون المالية، مع وصول مضبوط في جميع أقسام شهداد.",
    en: "One account for matters, consultations, documents and billing, with controlled access across Shahdad."
  },
  benefitOne: {
    fa: "ذخیره و ادامه کارها",
    ar: "حفظ الأعمال ومتابعتها",
    en: "Save and continue work"
  },
  benefitOneSub: {
    fa: "پرونده‌ها و پیش‌نویس‌ها از دست نمی‌روند.",
    ar: "تبقى القضايا والمسودات محفوظة.",
    en: "Keep matters and drafts available."
  },
  benefitTwo: {
    fa: "مرز روشن اطلاعات",
    ar: "حدود واضحة للبيانات",
    en: "Clear data boundaries"
  },
  benefitTwoSub: {
    fa: "رمز و کد تأیید در حافظه محلی شهداد ذخیره نمی‌شود.",
    ar: "لا يحفظ شهداد كلمة المرور أو رمز التحقق في التخزين المحلي.",
    en: "Shahdad does not keep passwords or verification codes in local storage."
  },
  benefitThree: {
    fa: "آماده برای تأیید موبایل",
    ar: "جاهز للتحقق من الهاتف",
    en: "Ready for mobile verification"
  },
  benefitThreeSub: {
    fa: "ورود واقعی پس از اتصال سرویس و تأیید سمت سرور انجام می‌شود.",
    ar: "يتم تسجيل الدخول الحقيقي بعد ربط الخدمة والتحقق من الخادم.",
    en: "Real sign-in begins only after the service and server verification are connected."
  },
  serviceState: {
    fa: "سرویس ورود هنوز متصل نیست",
    ar: "خدمة تسجيل الدخول غير متصلة بعد",
    en: "Sign-in service is not connected yet"
  },
  returnPrefix: {
    fa: "پس از ورود تأییدشده به",
    ar: "بعد تسجيل الدخول الموثّق ستعود إلى",
    en: "After verified sign-in, you will return to"
  },
  returnSuffix: {
    fa: "برمی‌گردید.",
    ar: ".",
    en: "."
  },
  loginTab: { fa: "ورود", ar: "تسجيل الدخول", en: "Sign in" },
  signupTab: { fa: "ساخت حساب", ar: "إنشاء حساب", en: "Create account" },
  loginTitle: { fa: "خوش برگشتید", ar: "مرحبًا بعودتك", en: "Welcome back" },
  loginLead: {
    fa: "با شماره موبایل ایران و رمز عبور وارد حساب شهداد شوید.",
    ar: "سجّل الدخول إلى حساب شهداد برقم هاتف إيراني وكلمة المرور.",
    en: "Sign in to Shahdad with your Iranian mobile number and password."
  },
  otpLead: {
    fa: "شماره موبایل را وارد کنید تا پس از اتصال سرویس، کد یک‌بارمصرف دریافت کنید.",
    ar: "أدخل رقم الهاتف لاستلام رمز لمرة واحدة بعد ربط الخدمة.",
    en: "Enter your mobile number to receive a one-time code once the service is connected."
  },
  signupTitle: {
    fa: "حساب رایگان شهداد را بسازید",
    ar: "أنشئ حساب شهداد مجانيًا",
    en: "Create your free Shahdad account"
  },
  signupLead: {
    fa: "اطلاعات پایه را وارد کنید؛ تأیید موبایل مرحله بعدیِ اتصال به سرور است.",
    ar: "أدخل المعلومات الأساسية؛ التحقق من الهاتف هو الخطوة التالية بعد ربط الخادم.",
    en: "Add your basic details. Mobile verification will be the next server-backed step."
  },
  forgotTitle: { fa: "بازیابی رمز عبور", ar: "استعادة كلمة المرور", en: "Recover your password" },
  forgotLead: {
    fa: "شماره موبایل حساب را وارد کنید؛ لینک یا کد بازیابی فقط از سرویس رسمی ارسال خواهد شد.",
    ar: "أدخل رقم الهاتف المرتبط بالحساب؛ سيرسل الرابط أو الرمز عبر الخدمة الرسمية فقط.",
    en: "Enter the account mobile number. A recovery link or code will only be sent by the official service."
  },
  fullName: { fa: "نام و نام خانوادگی", ar: "الاسم الكامل", en: "Full name" },
  fullNamePlaceholder: { fa: "مثلاً سارا احمدی", ar: "مثلاً سارة أحمدي", en: "e.g. Sara Ahmadi" },
  phone: { fa: "شماره موبایل ایران", ar: "رقم الهاتف المحمول الإيراني", en: "Iranian mobile number" },
  phonePlaceholder: { fa: "0912 345 6789", ar: "0912 345 6789", en: "0912 345 6789" },
  phoneHint: {
    fa: "با ۰۹ شروع شود؛ ارقام فارسی، عربی و انگلیسی پذیرفته می‌شود.",
    ar: "يبدأ بـ 09؛ تُقبل الأرقام الفارسية والعربية والإنجليزية.",
    en: "Begin with 09. Persian, Arabic and English digits are accepted."
  },
  password: { fa: "رمز عبور", ar: "كلمة المرور", en: "Password" },
  confirmPassword: { fa: "تکرار رمز عبور", ar: "تأكيد كلمة المرور", en: "Confirm password" },
  passwordHint: {
    fa: "حداقل ۸ نویسه و ترکیبی از حرف و عدد",
    ar: "٨ أحرف على الأقل ومزيج من الحروف والأرقام",
    en: "At least 8 characters with letters and numbers"
  },
  showPassword: { fa: "نمایش", ar: "إظهار", en: "Show" },
  hidePassword: { fa: "پنهان", ar: "إخفاء", en: "Hide" },
  remember: { fa: "این دستگاه را به خاطر بسپار", ar: "تذكّر هذا الجهاز", en: "Remember this device" },
  rememberHint: {
    fa: "فقط پس از اتصال سشن امن؛ رمز عبور هرگز ذخیره نمی‌شود.",
    ar: "فقط بعد ربط جلسة آمنة؛ لا تُحفظ كلمة المرور أبدًا.",
    en: "Only after a secure session is connected. The password is never stored."
  },
  forgotLink: { fa: "رمز را فراموش کرده‌اید؟", ar: "هل نسيت كلمة المرور؟", en: "Forgot your password?" },
  useOtp: { fa: "ورود با کد یک‌بارمصرف", ar: "الدخول برمز لمرة واحدة", en: "Use a one-time code" },
  usePassword: { fa: "ورود با رمز عبور", ar: "الدخول بكلمة المرور", en: "Use password instead" },
  loginSubmit: { fa: "ورود امن", ar: "تسجيل الدخول بأمان", en: "Sign in securely" },
  otpSubmit: { fa: "دریافت کد ورود", ar: "استلام رمز الدخول", en: "Get a sign-in code" },
  signupSubmit: { fa: "ساخت حساب رایگان", ar: "إنشاء حساب مجاني", en: "Create free account" },
  recoverySubmit: { fa: "دریافت راه بازیابی", ar: "استلام طريقة الاستعادة", en: "Get recovery instructions" },
  checking: { fa: "در حال بررسی آمادگی سرویس…", ar: "جارٍ التحقق من جاهزية الخدمة…", en: "Checking service readiness…" },
  continueGuest: { fa: "فعلاً به‌عنوان مهمان ادامه می‌دهم", ar: "المتابعة كضيف الآن", en: "Continue as guest for now" },
  divider: { fa: "یا", ar: "أو", en: "or" },
  termsConsent: {
    fa: "قوانین استفاده و حریم خصوصی شهداد را می‌پذیرم.",
    ar: "أوافق على شروط الاستخدام وسياسة الخصوصية في شهداد.",
    en: "I accept Shahdad's terms of use and privacy policy."
  },
  termsFoot: {
    fa: "ساخت حساب به معنی پذیرش قوانین استفاده و حریم خصوصی شهداد است.",
    ar: "إنشاء الحساب يعني الموافقة على شروط الاستخدام وسياسة الخصوصية في شهداد.",
    en: "Creating an account means accepting Shahdad's terms of use and privacy policy."
  },
  privacyFoot: {
    fa: "در این پیش‌نمایش، اطلاعات واردشده ارسال یا به‌عنوان حساب ذخیره نمی‌شود.",
    ar: "في هذه المعاينة لا تُرسل المعلومات المدخلة ولا تُحفظ كحساب.",
    en: "In this preview, entered information is neither sent nor stored as an account."
  },
  signupStepOne: { fa: "۱. اطلاعات حساب", ar: "١. معلومات الحساب", en: "1. Account details" },
  signupStepTwo: { fa: "۲. تأیید موبایل", ar: "٢. التحقق من الهاتف", en: "2. Mobile verification" },
  passwordWeak: { fa: "ضعیف", ar: "ضعيفة", en: "Weak" },
  passwordFair: { fa: "متوسط", ar: "متوسطة", en: "Fair" },
  passwordGood: { fa: "خوب", ar: "جيدة", en: "Good" },
  passwordStrong: { fa: "قوی", ar: "قوية", en: "Strong" },
  backToLogin: { fa: "بازگشت به ورود", ar: "العودة إلى تسجيل الدخول", en: "Back to sign in" },
  nameRequired: { fa: "نام و نام خانوادگی را وارد کنید.", ar: "أدخل الاسم الكامل.", en: "Enter your full name." },
  nameInvalid: { fa: "نام باید حداقل ۲ نویسه داشته باشد.", ar: "يجب أن يتكوّن الاسم من حرفين على الأقل.", en: "Name must contain at least 2 characters." },
  phoneRequired: { fa: "شماره موبایل را وارد کنید.", ar: "أدخل رقم الهاتف المحمول.", en: "Enter your mobile number." },
  phoneInvalid: {
    fa: "شماره معتبر نیست؛ باید با ۰۹ شروع شود و ۱۱ رقم باشد.",
    ar: "الرقم غير صالح؛ يجب أن يبدأ بـ 09 ويتكوّن من 11 رقمًا.",
    en: "Use a valid 11-digit mobile number beginning with 09."
  },
  passwordRequired: { fa: "رمز عبور را وارد کنید.", ar: "أدخل كلمة المرور.", en: "Enter your password." },
  passwordInvalid: {
    fa: "رمز باید حداقل ۸ نویسه و شامل حرف و عدد باشد.",
    ar: "يجب أن تتكوّن كلمة المرور من ٨ أحرف على الأقل وتحتوي على حروف وأرقام.",
    en: "Use at least 8 characters including a letter and a number."
  },
  confirmRequired: { fa: "رمز عبور را دوباره وارد کنید.", ar: "أعد إدخال كلمة المرور.", en: "Enter the password again." },
  confirmMismatch: { fa: "دو رمز عبور یکسان نیستند.", ar: "كلمتا المرور غير متطابقتين.", en: "The passwords do not match." },
  consentRequired: {
    fa: "برای ساخت حساب، پذیرش قوانین و حریم خصوصی الزامی است.",
    ar: "يجب قبول الشروط وسياسة الخصوصية لإنشاء الحساب.",
    en: "Accept the terms and privacy policy to create an account."
  },
  loginOffline: {
    fa: "سرویس ورود هنوز متصل نیست؛ اطلاعات ارسال نشد و هیچ ورود یا سشنی ساخته نشد.",
    ar: "خدمة تسجيل الدخول غير متصلة بعد؛ لم تُرسل المعلومات ولم يُنشأ تسجيل دخول أو جلسة.",
    en: "Sign-in is not connected yet. Nothing was sent and no sign-in or session was created."
  },
  signupOffline: {
    fa: "سرویس ثبت‌نام هنوز متصل نیست؛ اطلاعات ارسال نشد و هیچ حسابی ساخته نشد.",
    ar: "خدمة التسجيل غير متصلة بعد؛ لم تُرسل المعلومات ولم يُنشأ أي حساب.",
    en: "Sign-up is not connected yet. Nothing was sent and no account was created."
  },
  otpOffline: {
    fa: "سرویس کد یک‌بارمصرف هنوز متصل نیست؛ هیچ کدی ارسال نشد.",
    ar: "خدمة الرمز لمرة واحدة غير متصلة بعد؛ لم يُرسل أي رمز.",
    en: "One-time-code service is not connected yet. No code was sent."
  },
  recoveryOffline: {
    fa: "بازیابی رمز هنوز به سرویس رسمی متصل نیست؛ هیچ پیام یا لینکی ارسال نشد.",
    ar: "استعادة كلمة المرور غير متصلة بالخدمة الرسمية بعد؛ لم تُرسل رسالة أو رابط.",
    en: "Password recovery is not connected to the official service yet. No message or link was sent."
  }
};

const AUTH_RETURN_LABELS = {
  wallet: { fa: "کیف پول و پرداخت‌ها", ar: "المحفظة والمدفوعات", en: "Wallet & payments" },
  plans: { fa: "پلن‌ها و اشتراک", ar: "الخطط والاشتراك", en: "Plans & subscription" },
  profile: { fa: "پروفایل", ar: "الملف الشخصي", en: "Profile" },
  cases: { fa: "پرونده‌ها", ar: "القضايا", en: "Matters" },
  consult: { fa: "مشاوره‌ها", ar: "الاستشارات", en: "Consultations" }
};

const authText = (lang, key) => {
  const value = AUTH_COPY[key];
  return value ? value[lang] || value.en : key;
};

const authReturnLabel = (lang, intent) => {
  const moduleId = intent && intent.moduleId;
  const label = AUTH_RETURN_LABELS[moduleId];
  return label ? label[lang] || label.en : "";
};

const AUTH_FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹";
const AUTH_AR_DIGITS = "٠١٢٣٤٥٦٧٨٩";
const authNormalizeDigits = (value) => String(value || "")
  .replace(/[۰-۹]/g, (digit) => String(AUTH_FA_DIGITS.indexOf(digit)))
  .replace(/[٠-٩]/g, (digit) => String(AUTH_AR_DIGITS.indexOf(digit)));

const authNormalizeIranMobile = (value) => {
  const ascii = authNormalizeDigits(value).trim();
  const compact = ascii.replace(/[\s\-()]/g, "");
  if (!/^(?:\+|00)?\d+$/.test(compact)) return "";
  let digits = compact.replace(/\D/g, "");
  if (compact.startsWith("+98")) digits = "0" + digits.slice(2);
  else if (digits.startsWith("0098")) digits = "0" + digits.slice(4);
  else if (digits.startsWith("98") && digits.length === 12) digits = "0" + digits.slice(2);
  else if (digits.startsWith("9") && digits.length === 10) digits = "0" + digits;
  return digits;
};

const authIsValidIranMobile = (value) => /^09\d{9}$/.test(authNormalizeIranMobile(value));

const authPasswordChecks = (value) => {
  const password = String(value || "");
  const checks = {
    length: password.length >= AUTH_CENTER_CONFIG.passwordMinimum,
    letter: /[A-Za-z\u0600-\u06FF]/.test(password),
    number: /\d/.test(authNormalizeDigits(password)),
    varied: /[^A-Za-z0-9\u0600-\u06FF\s]/.test(password) || password.length >= 12
  };
  const score = Object.values(checks).filter(Boolean).length;
  return { checks, score };
};

const authValidateFields = ({ lang, screen, loginMethod, values }) => {
  const errors = {};
  if (screen === "signup") {
    if (!values.name.trim()) errors.name = authText(lang, "nameRequired");
    else if (values.name.trim().length < 2) errors.name = authText(lang, "nameInvalid");
  }

  if (!values.phone.trim()) errors.phone = authText(lang, "phoneRequired");
  else if (!authIsValidIranMobile(values.phone)) errors.phone = authText(lang, "phoneInvalid");

  const needsPassword = screen === "signup" || (screen === "login" && loginMethod === "password");
  if (needsPassword) {
    if (!values.password) errors.password = authText(lang, "passwordRequired");
    else if (screen === "signup") {
      const strength = authPasswordChecks(values.password);
      if (!strength.checks.length || !strength.checks.letter || !strength.checks.number) {
        errors.password = authText(lang, "passwordInvalid");
      }
    }
  }

  if (screen === "signup") {
    if (!values.confirmPassword) errors.confirmPassword = authText(lang, "confirmRequired");
    else if (values.confirmPassword !== values.password) errors.confirmPassword = authText(lang, "confirmMismatch");
    if (!values.consent) errors.consent = authText(lang, "consentRequired");
  }

  return errors;
};

const AuthInput = ({
  id,
  label,
  iconKey,
  error,
  hint,
  action,
  inputRef,
  ...inputProps
}) => {
  const Icon = Ic[iconKey] || Ic.user;
  const describedBy = [hint ? `${id}-hint` : "", error ? `${id}-error` : ""].filter(Boolean).join(" ") || undefined;
  return (
    <div className={"auth-field" + (error ? " invalid" : "")}>
      <label htmlFor={id}>{label}</label>
      <div className="auth-input-shell">
        <Icon size={17} className="auth-input-icon" aria-hidden="true" />
        <input
          {...inputProps}
          ref={inputRef}
          id={id}
          aria-invalid={error ? "true" : "false"}
          aria-describedby={describedBy}
        />
        {action}
      </div>
      {hint && !error && <p className="auth-field-hint" id={`${id}-hint`}>{hint}</p>}
      {error && <p className="auth-field-error" id={`${id}-error`} role="alert">{error}</p>}
    </div>
  );
};

const AuthCenterView = ({
  lang = "fa",
  initialMode = "login",
  returnTo = null,
  onGuest
}) => {
  const safeInitialMode = initialMode === "signup" ? "signup" : "login";
  const [screen, setScreen] = React.useState(safeInitialMode);
  const [loginMethod, setLoginMethod] = React.useState("password");
  const [values, setValues] = React.useState({
    name: "",
    phone: "",
    password: "",
    confirmPassword: "",
    remember: true,
    consent: false
  });
  const [touched, setTouched] = React.useState({});
  const [errors, setErrors] = React.useState({});
  const [showPassword, setShowPassword] = React.useState(false);
  const [showConfirm, setShowConfirm] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [notice, setNotice] = React.useState(null);
  const timerRef = React.useRef(null);
  const nameRef = React.useRef(null);
  const phoneRef = React.useRef(null);
  const passwordRef = React.useRef(null);
  const confirmRef = React.useRef(null);
  const consentRef = React.useRef(null);
  const baseId = React.useId().replace(/:/g, "");
  const loginTabId = `${baseId}-login-tab`;
  const signupTabId = `${baseId}-signup-tab`;
  const panelId = `${baseId}-panel`;

  React.useEffect(() => () => window.clearTimeout(timerRef.current), []);

  const currentErrors = (nextValues = values) =>
    authValidateFields({ lang, screen, loginMethod, values: nextValues });

  const updateField = (key, value) => {
    const nextValues = { ...values, [key]: value };
    setValues(nextValues);
    setNotice(null);
    if (touched[key]) {
      const nextErrors = currentErrors(nextValues);
      setErrors((current) => ({
        ...current,
        [key]: nextErrors[key],
        ...(key === "password" && touched.confirmPassword
          ? { confirmPassword: nextErrors.confirmPassword }
          : {})
      }));
    }
  };

  const blurField = (key) => {
    const nextTouched = { ...touched, [key]: true };
    setTouched(nextTouched);
    const nextErrors = currentErrors();
    setErrors((current) => ({ ...current, [key]: nextErrors[key] }));
    if (key === "phone" && authIsValidIranMobile(values.phone)) {
      setValues((current) => ({ ...current, phone: authNormalizeIranMobile(current.phone) }));
    }
  };

  const resetFeedback = () => {
    window.clearTimeout(timerRef.current);
    setBusy(false);
    setTouched({});
    setErrors({});
    setNotice(null);
    setShowPassword(false);
    setShowConfirm(false);
    setValues((current) => ({
      ...current,
      password: "",
      confirmPassword: "",
      consent: false
    }));
  };

  const switchScreen = (nextScreen) => {
    resetFeedback();
    setScreen(nextScreen);
    if (nextScreen !== "login") setLoginMethod("password");
  };

  const switchLoginMethod = () => {
    resetFeedback();
    setLoginMethod((current) => current === "password" ? "otp" : "password");
  };

  const focusFirstError = (nextErrors) => {
    const orderedRefs = [
      ["name", nameRef],
      ["phone", phoneRef],
      ["password", passwordRef],
      ["confirmPassword", confirmRef],
      ["consent", consentRef]
    ];
    const match = orderedRefs.find(([key]) => nextErrors[key]);
    window.requestAnimationFrame(() => match && match[1].current && match[1].current.focus());
  };

  const submit = (event) => {
    event.preventDefault();
    if (busy) return;
    const nextErrors = currentErrors();
    setTouched({
      name: screen === "signup",
      phone: true,
      password: screen === "signup" || (screen === "login" && loginMethod === "password"),
      confirmPassword: screen === "signup",
      consent: screen === "signup"
    });
    setErrors(nextErrors);
    setNotice(null);
    if (Object.keys(nextErrors).length) {
      focusFirstError(nextErrors);
      return;
    }

    setBusy(true);
    timerRef.current = window.setTimeout(() => {
      const messageKey = screen === "signup"
        ? "signupOffline"
        : screen === "forgot"
          ? "recoveryOffline"
          : loginMethod === "otp"
            ? "otpOffline"
            : "loginOffline";
      setBusy(false);
      setNotice({ kind: "offline", text: authText(lang, messageKey) });
      setValues((current) => ({ ...current, password: "", confirmPassword: "" }));
    }, 420);
  };

  const handleTabKey = (event, mode) => {
    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
    event.preventDefault();
    let nextMode = mode;
    if (event.key === "Home") nextMode = "login";
    else if (event.key === "End") nextMode = "signup";
    else {
      const moveForward = lang === "en" ? event.key === "ArrowRight" : event.key === "ArrowLeft";
      nextMode = moveForward
        ? (mode === "login" ? "signup" : "login")
        : (mode === "signup" ? "login" : "signup");
    }
    switchScreen(nextMode);
    const nextId = nextMode === "login" ? loginTabId : signupTabId;
    window.requestAnimationFrame(() => document.getElementById(nextId)?.focus());
  };

  const returnLabel = authReturnLabel(lang, returnTo);
  const headingKey = screen === "signup" ? "signupTitle" : screen === "forgot" ? "forgotTitle" : "loginTitle";
  const leadKey = screen === "signup"
    ? "signupLead"
    : screen === "forgot"
      ? "forgotLead"
      : loginMethod === "otp"
        ? "otpLead"
        : "loginLead";
  const submitKey = screen === "signup"
    ? "signupSubmit"
    : screen === "forgot"
      ? "recoverySubmit"
      : loginMethod === "otp"
        ? "otpSubmit"
        : "loginSubmit";
  const passwordStrength = authPasswordChecks(values.password);
  const strengthKey = passwordStrength.score <= 1
    ? "passwordWeak"
    : passwordStrength.score === 2
      ? "passwordFair"
      : passwordStrength.score === 3
        ? "passwordGood"
        : "passwordStrong";
  const DirectionIcon = lang === "en" ? Ic.chevR : Ic.chevL;
  const benefitItems = [
    ["folder", "benefitOne", "benefitOneSub"],
    ["shield", "benefitTwo", "benefitTwoSub"],
    ["phone", "benefitThree", "benefitThreeSub"]
  ];

  return (
    <div
      className="auth-center"
      data-auth-status={AUTH_CENTER_CONFIG.providerStatus}
      data-auth-screen={screen}
    >
      <div className="auth-layout">
        <aside className="auth-trust-panel" aria-label={authText(lang, "eyebrow")}>
          <div className="auth-orbit" aria-hidden="true">
            <span></span><span></span><span></span>
            <div className="auth-orbit-core">
              <span className="auth-orbit-symbol">
                <Ic.shieldCheck size={30} />
              </span>
            </div>
          </div>
          <div className="auth-eyebrow"><span></span>{authText(lang, "eyebrow")}</div>
          <h2>{authText(lang, "trustTitle")}</h2>
          <p className="auth-trust-lead">{authText(lang, "trustBody")}</p>

          {returnLabel && (
            <div className="auth-return-card">
              <Ic.chevL size={16} aria-hidden="true" />
              <p>
                {authText(lang, "returnPrefix")} <strong>{returnLabel}</strong>
                {lang === "fa" ? " " : ""}{authText(lang, "returnSuffix")}
              </p>
            </div>
          )}

          <ul className="auth-benefits">
            {benefitItems.map(([iconKey, titleKey, bodyKey]) => {
              const Icon = Ic[iconKey];
              return (
                <li className="auth-benefit" key={titleKey}>
                  <span className="auth-benefit-icon" aria-hidden="true"><Icon size={17} /></span>
                  <span className="auth-benefit-copy">
                    <strong>{authText(lang, titleKey)}</strong>
                    <span>{authText(lang, bodyKey)}</span>
                  </span>
                </li>
              );
            })}
          </ul>

          <div className="auth-service-state" role="status">
            <span className="auth-state-dot" aria-hidden="true"></span>
            <span>{authText(lang, "serviceState")}</span>
          </div>
        </aside>

        <section className={`auth-form-panel auth-form-panel-${screen}`}>
          {returnLabel && (
            <div className="auth-mobile-return">
              <Ic.chevL size={14} />
              <span>{authText(lang, "returnPrefix")} <b>{returnLabel}</b>{lang === "fa" ? " " : ""}{authText(lang, "returnSuffix")}</span>
            </div>
          )}

          {screen === "forgot" ? (
            <button className="auth-back" type="button" onClick={() => switchScreen("login")}>
              {lang === "en" ? <Ic.chevL size={15} /> : <Ic.chevR size={15} />}
              <span>{authText(lang, "backToLogin")}</span>
            </button>
          ) : (
            <div className="auth-tabs" role="tablist" aria-label={authText(lang, "eyebrow")}>
              <button
                type="button"
                id={loginTabId}
                role="tab"
                aria-selected={screen === "login"}
                aria-controls={panelId}
                tabIndex={screen === "login" ? 0 : -1}
                className={screen === "login" ? "active" : ""}
                onClick={() => switchScreen("login")}
                onKeyDown={(event) => handleTabKey(event, "login")}
              >
                {authText(lang, "loginTab")}
              </button>
              <button
                type="button"
                id={signupTabId}
                role="tab"
                aria-selected={screen === "signup"}
                aria-controls={panelId}
                tabIndex={screen === "signup" ? 0 : -1}
                className={screen === "signup" ? "active" : ""}
                onClick={() => switchScreen("signup")}
                onKeyDown={(event) => handleTabKey(event, "signup")}
              >
                {authText(lang, "signupTab")}
              </button>
            </div>
          )}

          <div className="auth-heading">
            <h2>{authText(lang, headingKey)}</h2>
            <p>{authText(lang, leadKey)}</p>
          </div>

          {screen === "signup" && (
            <div className="auth-stepper" aria-label={authText(lang, "signupStepOne")}>
              <div className="active"><span>1</span><b>{authText(lang, "signupStepOne").replace(/^[۱۲1١]\.\s*/, "")}</b></div>
              <i></i>
              <div><span>2</span><b>{authText(lang, "signupStepTwo").replace(/^[۲2٢]\.\s*/, "")}</b></div>
            </div>
          )}

          <form
            id={panelId}
            className="auth-form"
            role={screen === "forgot" ? "region" : "tabpanel"}
            aria-labelledby={screen === "signup" ? signupTabId : screen === "login" ? loginTabId : undefined}
            aria-label={screen === "forgot" ? authText(lang, "forgotTitle") : undefined}
            onSubmit={submit}
            noValidate
          >
            {screen === "signup" && (
              <AuthInput
                id={`${baseId}-name`}
                label={authText(lang, "fullName")}
                iconKey="user"
                inputRef={nameRef}
                type="text"
                name="name"
                value={values.name}
                placeholder={authText(lang, "fullNamePlaceholder")}
                autoComplete="name"
                maxLength="100"
                error={errors.name}
                onChange={(event) => updateField("name", event.target.value)}
                onBlur={() => blurField("name")}
              />
            )}

            <AuthInput
              id={`${baseId}-phone`}
              label={authText(lang, "phone")}
              iconKey="phone"
              inputRef={phoneRef}
              type="tel"
              name="tel"
              value={values.phone}
              placeholder={authText(lang, "phonePlaceholder")}
              autoComplete="tel"
              inputMode="tel"
              dir="ltr"
              maxLength="18"
              hint={authText(lang, "phoneHint")}
              error={errors.phone}
              onChange={(event) => updateField("phone", event.target.value)}
              onBlur={() => blurField("phone")}
            />

            {(screen === "signup" || (screen === "login" && loginMethod === "password")) && (
              <AuthInput
                id={`${baseId}-password`}
                label={authText(lang, "password")}
                iconKey="shield"
                inputRef={passwordRef}
                type={showPassword ? "text" : "password"}
                name="password"
                value={values.password}
                autoComplete={screen === "signup" ? "new-password" : "current-password"}
                dir="ltr"
                hint={screen === "signup" ? authText(lang, "passwordHint") : undefined}
                error={errors.password}
                onChange={(event) => updateField("password", event.target.value)}
                onBlur={() => blurField("password")}
                action={
                  <button
                    type="button"
                    className="auth-password-toggle"
                    aria-label={authText(lang, showPassword ? "hidePassword" : "showPassword")}
                    onClick={() => setShowPassword((current) => !current)}
                  >
                    {authText(lang, showPassword ? "hidePassword" : "showPassword")}
                  </button>
                }
              />
            )}

            {screen === "signup" && values.password && (
              <div className="auth-strength" data-score={passwordStrength.score} aria-live="polite">
                <div><span></span><span></span><span></span><span></span></div>
                <p>{authText(lang, "passwordHint")} · <b>{authText(lang, strengthKey)}</b></p>
              </div>
            )}

            {screen === "signup" && (
              <AuthInput
                id={`${baseId}-confirm`}
                label={authText(lang, "confirmPassword")}
                iconKey="shieldCheck"
                inputRef={confirmRef}
                type={showConfirm ? "text" : "password"}
                name="password-confirmation"
                value={values.confirmPassword}
                autoComplete="new-password"
                dir="ltr"
                error={errors.confirmPassword}
                onChange={(event) => updateField("confirmPassword", event.target.value)}
                onBlur={() => blurField("confirmPassword")}
                action={
                  <button
                    type="button"
                    className="auth-password-toggle"
                    aria-label={authText(lang, showConfirm ? "hidePassword" : "showPassword")}
                    onClick={() => setShowConfirm((current) => !current)}
                  >
                    {authText(lang, showConfirm ? "hidePassword" : "showPassword")}
                  </button>
                }
              />
            )}

            {screen === "login" && loginMethod === "password" && (
              <div className="auth-form-options">
                <label className="auth-check">
                  <input
                    type="checkbox"
                    checked={values.remember}
                    onChange={(event) => updateField("remember", event.target.checked)}
                  />
                  <span><b>{authText(lang, "remember")}</b><small>{authText(lang, "rememberHint")}</small></span>
                </label>
                <button className="auth-text-button" type="button" onClick={() => switchScreen("forgot")}>
                  {authText(lang, "forgotLink")}
                </button>
              </div>
            )}

            {screen === "signup" && (
              <div>
                <label className={"auth-check auth-consent" + (errors.consent ? " invalid" : "")}>
                  <input
                    ref={consentRef}
                    type="checkbox"
                    checked={values.consent}
                    aria-invalid={errors.consent ? "true" : "false"}
                    aria-describedby={errors.consent ? `${baseId}-consent-error` : undefined}
                    onChange={(event) => updateField("consent", event.target.checked)}
                    onBlur={() => blurField("consent")}
                  />
                  <span><b>{authText(lang, "termsConsent")}</b></span>
                </label>
                {errors.consent && <p className="auth-field-error" id={`${baseId}-consent-error`} role="alert">{errors.consent}</p>}
              </div>
            )}

            {notice && (
              <div className={`auth-notice ${notice.kind}`} role="alert" aria-live="assertive">
                <Ic.info size={17} />
                <p>{notice.text}</p>
              </div>
            )}

            <button className="auth-submit" type="submit" disabled={busy} aria-busy={busy ? "true" : "false"}>
              <span>{authText(lang, busy ? "checking" : submitKey)}</span>
              {!busy && <DirectionIcon size={16} />}
              {busy && <i className="auth-spinner" aria-hidden="true"></i>}
            </button>

            {screen === "login" && (
              <button className="auth-method-toggle" type="button" onClick={switchLoginMethod}>
                <Ic.phone size={15} />
                <span>{authText(lang, loginMethod === "password" ? "useOtp" : "usePassword")}</span>
              </button>
            )}
          </form>

          <div className="auth-divider" aria-hidden="true"><span></span><b>{authText(lang, "divider")}</b><span></span></div>
          <button className="auth-guest" type="button" onClick={onGuest}>
            <Ic.user size={16} />
            <span>{authText(lang, "continueGuest")}</span>
          </button>

          <div className="auth-legal">
            <p>{screen === "signup" ? authText(lang, "termsFoot") : authText(lang, "privacyFoot")}</p>
          </div>
        </section>
      </div>
    </div>
  );
};

Object.assign(window, {
  AuthCenterView,
  ShahdadAuth: {
    config: AUTH_CENTER_CONFIG,
    normalizeIranMobile: authNormalizeIranMobile,
    isValidIranMobile: authIsValidIranMobile,
    passwordChecks: authPasswordChecks
  }
});
