/* Government — citizen-facing portal.
 * Multi-step submission flow: Service → Personal info → Documents → Review → Tracking
 * Bilingual FR/AR toggle. Click steps in the sidebar to jump around.
 */

const portalTheme = {
  // light surface; this is a public-facing portal
  pageBg:   "#eef0e8",
  surface:  "#ffffff",
  surfaceAlt: "#f7f5ee",
  line:     "#dcdbd2",
  line2:    "#c0bfb2",
  ink:      "#1c1c18",
  ink2:     "#4a4842",
  ink3:     "#7a7770",
  ink4:     "#a4a298",
  // accents — government-cred palette: deep emerald + amber
  green:    "#0d5d3a",
  greenInk: "#063b25",
  amber:    "#b87a2d",
  amberBg:  "#fbeed2",
  red:      "#a93826",
  redBg:    "#fbe5e1",
  bluebadge:"#26577a",
};

const SERVICES = [
  { id: "transfer",   icon: "T", titleFR: "Transfert de propriété",  titleAR: "نقل الملكية",    desc: "Acte de vente, succession ou donation.",        time: "14 jours" },
  { id: "extract",    icon: "E", titleFR: "Extrait cadastral",        titleAR: "مستخرج عقاري",    desc: "Plan parcellaire et désignation officielle.",  time: "5 jours" },
  { id: "boundary",   icon: "B", titleFR: "Litige de bornage",        titleAR: "نزاع حدود",        desc: "Demande de bornage contradictoire.",          time: "30 jours" },
  { id: "mortgage",   icon: "H", titleFR: "Inscription d'hypothèque", titleAR: "تسجيل رهن",        desc: "Dépôt de garantie bancaire au registre.",     time: "7 jours" },
  { id: "subdivide",  icon: "S", titleFR: "Subdivision parcellaire",  titleAR: "تقسيم القطعة",     desc: "Création de nouvelles parcelles.",            time: "21 jours" },
  { id: "copy",       icon: "C", titleFR: "Copie d'acte authentique", titleAR: "نسخة رسمية",       desc: "Réédition d'un titre déjà inscrit.",          time: "3 jours" },
];

const STEPS = [
  { id: "service",  fr: "Service",   ar: "الخدمة"   },
  { id: "details",  fr: "Informations", ar: "البيانات" },
  { id: "docs",     fr: "Documents",  ar: "الوثائق"  },
  { id: "review",   fr: "Vérifier",   ar: "المراجعة" },
  { id: "tracking", fr: "Suivi",      ar: "التتبع"  },
];

// Required documents per service
const SERVICE_DOCS = {
  transfer:  ["Pièce d'identité (recto/verso)", "Acte authentique de vente",        "Quitus fiscal récent (moins de 3 mois)"],
  extract:   ["Pièce d'identité (recto/verso)", "Référence du titre foncier"],
  boundary:  ["Pièce d'identité (recto/verso)", "Plan parcellaire actuel",          "Lettre de demande motivée"],
  mortgage:  ["Pièce d'identité (recto/verso)", "Contrat de prêt",                  "Décision de garantie de la banque"],
  subdivide: ["Pièce d'identité (recto/verso)", "Plan de subdivision",              "Autorisation municipale"],
  copy:      ["Pièce d'identité (recto/verso)", "Référence du titre foncier"],
};

function StepDot({ idx, active, complete, label, lang, onClick }) {
  return (
    <button onClick={onClick} style={{
      textAlign: "left",
      display: "flex", alignItems: "center", gap: 12,
      padding: "10px 14px",
      borderLeft: active ? "3px solid " + portalTheme.green : "3px solid transparent",
      background: active ? portalTheme.surface : "transparent",
      width: "100%",
      cursor: "pointer",
    }}>
      <div style={{
        width: 22, height: 22,
        borderRadius: "50%",
        background: complete ? portalTheme.green : (active ? portalTheme.green + "22" : portalTheme.line),
        color: complete ? "white" : (active ? portalTheme.green : portalTheme.ink3),
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 11, fontWeight: 700,
        flexShrink: 0,
      }}>
        {complete ? "✓" : (idx + 1)}
      </div>
      <span style={{ fontSize: 12.5, color: active ? portalTheme.ink : portalTheme.ink3, fontWeight: active ? 600 : 400 }}>
        {lang === "ar" ? label.ar : label.fr}
      </span>
    </button>
  );
}

function ServiceCard({ s, active, lang, onPick }) {
  return (
    <button onClick={() => onPick(s.id)} style={{
      textAlign: "left",
      padding: "16px 18px",
      background: active ? portalTheme.green : portalTheme.surface,
      border: "1px solid " + (active ? portalTheme.green : portalTheme.line),
      borderRadius: 8,
      cursor: "pointer",
      display: "flex", flexDirection: "column", gap: 6,
      transition: "all 0.15s ease",
      color: active ? "white" : portalTheme.ink,
    }}
    onMouseEnter={e => { if (!active) { e.currentTarget.style.borderColor = portalTheme.green; e.currentTarget.style.background = portalTheme.surfaceAlt; } }}
    onMouseLeave={e => { if (!active) { e.currentTarget.style.borderColor = portalTheme.line; e.currentTarget.style.background = portalTheme.surface; } }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{
          width: 30, height: 30,
          background: active ? "rgba(255,255,255,0.18)" : portalTheme.green + "12",
          color: active ? "white" : portalTheme.green,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 14, fontWeight: 700,
          borderRadius: 4,
        }}>{s.icon}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.25 }}>
            {lang === "ar" ? s.titleAR : s.titleFR}
          </div>
          <div style={{ fontSize: 11, color: active ? "rgba(255,255,255,0.8)" : portalTheme.ink3, marginTop: 2 }}>
            traitement · {s.time}
          </div>
        </div>
      </div>
      <div style={{ fontSize: 11.5, color: active ? "rgba(255,255,255,0.85)" : portalTheme.ink2, marginTop: 4 }}>
        {s.desc}
      </div>
    </button>
  );
}

function FormField({ label, value, placeholder, type = "text" }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: portalTheme.ink3, letterSpacing: "0.04em", marginBottom: 4 }}>{label}</div>
      <div style={{
        padding: "9px 12px",
        background: portalTheme.surfaceAlt,
        border: "1px solid " + portalTheme.line,
        borderRadius: 5,
        fontSize: 13,
        color: value ? portalTheme.ink : portalTheme.ink4,
      }}>
        {value || placeholder}
      </div>
    </div>
  );
}

function PortalPreview() {
  const [step, setStep] = React.useState("review"); // start at the review-ready step to show capability
  const [service, setService] = React.useState("transfer");
  const [lang, setLang] = React.useState("fr");
  const stepIdx = STEPS.findIndex(s => s.id === step);
  const svc = SERVICES.find(s => s.id === service);
  const docs = SERVICE_DOCS[service] || [];
  const rtl = lang === "ar";

  const t = (fr, ar) => lang === "ar" ? ar : fr;

  return (
    <div style={{
      background: portalTheme.pageBg,
      borderRadius: 14,
      boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
      maxWidth: 860,
      overflow: "hidden",
      fontFamily: '"Inter", system-ui, sans-serif',
      direction: rtl ? "rtl" : "ltr",
    }}>
      {/* Portal header — institutional */}
      <div style={{
        background: portalTheme.greenInk,
        color: "white",
        padding: "14px 22px",
        display: "flex", alignItems: "center", gap: 14,
      }}>
        <div style={{
          width: 34, height: 34,
          background: "white",
          color: portalTheme.greenInk,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontWeight: 700, fontSize: 16,
          borderRadius: 2,
        }}>⚖</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: "0.02em" }}>
            {t("Royaume du Maroc · Agence Nationale du Cadastre", "المملكة المغربية · الوكالة الوطنية للمسح العقاري")}
          </div>
          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.72)", marginTop: 1 }}>
            {t("Portail des démarches en ligne · www.cadastre.gov.ma", "بوابة الخدمات الإلكترونية · www.cadastre.gov.ma")}
          </div>
        </div>
        <div style={{
          display: "flex", gap: 0,
          border: "1px solid rgba(255,255,255,0.18)",
          borderRadius: 4,
          overflow: "hidden",
        }}>
          {["fr", "ar"].map(l => (
            <button key={l} onClick={() => setLang(l)} style={{
              padding: "5px 12px",
              fontSize: 11, fontWeight: 600,
              background: lang === l ? "white" : "transparent",
              color: lang === l ? portalTheme.greenInk : "rgba(255,255,255,0.85)",
              cursor: "pointer",
            }}>{l === "fr" ? "FR" : "AR"}</button>
          ))}
        </div>
        <div style={{
          fontSize: 11, color: "rgba(255,255,255,0.72)",
          paddingLeft: 12,
          borderLeft: "1px solid rgba(255,255,255,0.18)",
        }}>
          {t("Connecté en tant que", "متصل بصفة")}<br/>
          <span style={{ color: "white", fontWeight: 500 }}>K. Bouchaib</span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", background: portalTheme.pageBg, minHeight: 480 }}>
        {/* Step rail */}
        <div style={{
          padding: "18px 0",
          background: portalTheme.surfaceAlt,
          borderRight: "1px solid " + portalTheme.line,
        }}>
          <div style={{ padding: "0 14px 10px", fontSize: 10.5, letterSpacing: "0.14em", color: portalTheme.ink3, textTransform: "uppercase", fontWeight: 600 }}>
            {t("Votre demande", "طلبكم")}
          </div>
          {STEPS.map((s, i) => (
            <StepDot key={s.id}
              idx={i}
              active={s.id === step}
              complete={i < stepIdx}
              label={s}
              lang={lang}
              onClick={() => setStep(s.id)}
            />
          ))}

          <div style={{ padding: "20px 14px 0", borderTop: "1px solid " + portalTheme.line, marginTop: 18 }}>
            <div style={{ fontSize: 10.5, letterSpacing: "0.14em", color: portalTheme.ink3, textTransform: "uppercase", fontWeight: 600 }}>
              {t("Besoin d'aide ?", "هل تحتاج مساعدة؟")}
            </div>
            <div style={{ fontSize: 11.5, color: portalTheme.ink2, marginTop: 6, lineHeight: 1.55 }}>
              {t("Centre d'appel · 080 100 50 50", "مركز الاتصال · 080 100 50 50")}<br/>
              <span style={{ color: portalTheme.ink3 }}>{t("9h–17h, du lundi au vendredi", "من الإثنين إلى الجمعة")}</span>
            </div>
          </div>
        </div>

        {/* Main content */}
        <div style={{ padding: "28px 32px 32px", minWidth: 0 }}>
          {step === "service" && (
            <>
              <div style={{ fontSize: 11, letterSpacing: "0.14em", color: portalTheme.ink3, textTransform: "uppercase", marginBottom: 8 }}>{t("Étape 1 sur 5", "الخطوة 1 من 5")}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: portalTheme.ink, letterSpacing: "-0.01em" }}>
                {t("Quel document souhaitez-vous demander ?", "ما هو الطلب الذي ترغب في تقديمه؟")}
              </div>
              <div style={{ fontSize: 13, color: portalTheme.ink2, marginTop: 6 }}>
                {t("12 services disponibles en ligne. Sélectionnez celui qui correspond à votre besoin.", "12 خدمة متاحة عبر الإنترنت. اختر الخدمة المناسبة.")}
              </div>
              <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                {SERVICES.map(s => (
                  <ServiceCard key={s.id} s={s} active={s.id === service} lang={lang} onPick={(id) => { setService(id); setStep("details"); }} />
                ))}
              </div>
            </>
          )}

          {step === "details" && (
            <>
              <div style={{ fontSize: 11, letterSpacing: "0.14em", color: portalTheme.ink3, textTransform: "uppercase", marginBottom: 8 }}>{t("Étape 2 sur 5", "الخطوة 2 من 5")}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: portalTheme.ink, letterSpacing: "-0.01em" }}>
                {t("Vos informations", "بياناتكم الشخصية")}
              </div>
              <div style={{ fontSize: 13, color: portalTheme.ink2, marginTop: 6 }}>
                {t("Pré-remplies depuis votre compte. Modifiez si nécessaire.", "تم التعبئة المسبقة من حسابك. عدّلها إذا لزم الأمر.")}
              </div>

              <div style={{ marginTop: 22, padding: "20px 22px", background: portalTheme.surface, borderRadius: 8, border: "1px solid " + portalTheme.line }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                  <FormField label={t("Nom complet", "الاسم الكامل")}              value="K. Bouchaib" />
                  <FormField label={t("N° de CIN", "رقم البطاقة الوطنية")}        value="AB 481 207" />
                  <FormField label={t("Téléphone", "الهاتف")}                     value="+212 6 12 34 56 78" />
                  <FormField label={t("Email", "البريد الإلكتروني")}              value="k.bouchaib@example.ma" />
                  <FormField label={t("Wilaya", "الجهة")}                          value="Casablanca-Settat" />
                  <FormField label={t("Adresse postale", "العنوان البريدي")}      value="14 rue Allal Ben Abdellah, Casablanca" />
                </div>

                <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid " + portalTheme.line }}>
                  <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 10 }}>{t("Détails du bien", "تفاصيل العقار")}</div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                    <FormField label={t("Référence du titre foncier", "الرسم العقاري")}      value="41/284-T" />
                    <FormField label={t("Adresse / désignation", "العنوان / التعيين")}    value="Lot 12, Z.I. Aïn Sebaâ" />
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", direction: rtl ? "ltr" : "ltr" }}>
                <button onClick={() => setStep("service")} style={{
                  padding: "10px 16px", fontSize: 12.5,
                  background: "transparent", color: portalTheme.ink2,
                  border: "1px solid " + portalTheme.line2,
                  borderRadius: 5, cursor: "pointer",
                }}>{t("← Retour", "→ رجوع")}</button>
                <button onClick={() => setStep("docs")} style={{
                  padding: "10px 18px", fontSize: 12.5, fontWeight: 600,
                  background: portalTheme.green, color: "white",
                  borderRadius: 5, cursor: "pointer",
                }}>{t("Continuer →", "→ متابعة")}</button>
              </div>
            </>
          )}

          {step === "docs" && (
            <>
              <div style={{ fontSize: 11, letterSpacing: "0.14em", color: portalTheme.ink3, textTransform: "uppercase", marginBottom: 8 }}>{t("Étape 3 sur 5", "الخطوة 3 من 5")}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: portalTheme.ink, letterSpacing: "-0.01em" }}>
                {t("Documents requis", "الوثائق المطلوبة")}
              </div>
              <div style={{ fontSize: 13, color: portalTheme.ink2, marginTop: 6 }}>
                {t("Glissez vos fichiers ou cliquez pour parcourir. Formats acceptés : PDF, JPG. Max 8 Mo par fichier.", "اسحب الملفات أو اضغط للاستعراض.")}
              </div>

              <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 10 }}>
                {docs.map((d, i) => {
                  const uploaded = i < 2;
                  return (
                    <div key={i} style={{
                      padding: "14px 18px",
                      background: portalTheme.surface,
                      border: "1px solid " + (uploaded ? portalTheme.green + "55" : portalTheme.line),
                      borderRadius: 8,
                      display: "flex", alignItems: "center", gap: 14,
                    }}>
                      <div style={{
                        width: 30, height: 30,
                        background: uploaded ? portalTheme.green + "1f" : portalTheme.surfaceAlt,
                        color: uploaded ? portalTheme.green : portalTheme.ink3,
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 14, fontWeight: 700, borderRadius: 4,
                      }}>{uploaded ? "✓" : "+"}</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, color: portalTheme.ink, fontWeight: 500 }}>{d}</div>
                        <div style={{ fontSize: 11, color: portalTheme.ink3, marginTop: 2 }}>
                          {uploaded
                            ? (i === 0 ? "cin_bouchaib.pdf · 1.2 Mo · ajouté à 09:14" : "acte_vente_signe.pdf · 3.8 Mo · ajouté à 09:18")
                            : t("Aucun fichier sélectionné", "لم يتم اختيار ملف")
                          }
                        </div>
                      </div>
                      <button style={{
                        padding: "6px 12px", fontSize: 11.5,
                        background: uploaded ? "transparent" : portalTheme.green,
                        color: uploaded ? portalTheme.ink2 : "white",
                        border: uploaded ? "1px solid " + portalTheme.line2 : "none",
                        borderRadius: 5, cursor: "pointer",
                      }}>{uploaded ? t("Remplacer", "استبدال") : t("Téléverser", "تحميل")}</button>
                    </div>
                  );
                })}
              </div>

              <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between" }}>
                <button onClick={() => setStep("details")} style={{
                  padding: "10px 16px", fontSize: 12.5,
                  background: "transparent", color: portalTheme.ink2,
                  border: "1px solid " + portalTheme.line2,
                  borderRadius: 5, cursor: "pointer",
                }}>{t("← Retour", "→ رجوع")}</button>
                <button onClick={() => setStep("review")} style={{
                  padding: "10px 18px", fontSize: 12.5, fontWeight: 600,
                  background: portalTheme.green, color: "white",
                  borderRadius: 5, cursor: "pointer",
                }}>{t("Continuer →", "→ متابعة")}</button>
              </div>
            </>
          )}

          {step === "review" && (
            <>
              <div style={{ fontSize: 11, letterSpacing: "0.14em", color: portalTheme.ink3, textTransform: "uppercase", marginBottom: 8 }}>{t("Étape 4 sur 5", "الخطوة 4 من 5")}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: portalTheme.ink, letterSpacing: "-0.01em" }}>
                {t("Vérifiez et soumettez", "راجع وأرسل")}
              </div>
              <div style={{ fontSize: 13, color: portalTheme.ink2, marginTop: 6 }}>
                {t("Récapitulatif de votre demande avant envoi à l'agence.", "ملخص طلبكم قبل الإرسال إلى الوكالة.")}
              </div>

              <div style={{ marginTop: 22, background: portalTheme.surface, border: "1px solid " + portalTheme.line, borderRadius: 8, padding: "22px 24px" }}>
                {/* Service summary */}
                <div style={{ display: "flex", alignItems: "flex-start", gap: 14, paddingBottom: 16, borderBottom: "1px solid " + portalTheme.line }}>
                  <div style={{
                    width: 36, height: 36, background: portalTheme.green, color: "white",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 16, fontWeight: 700, borderRadius: 4,
                  }}>{svc.icon}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{lang === "ar" ? svc.titleAR : svc.titleFR}</div>
                    <div style={{ fontSize: 12, color: portalTheme.ink3, marginTop: 2 }}>{t("Délai de traitement", "أجل المعالجة")} · {svc.time}</div>
                  </div>
                  <button onClick={() => setStep("service")} style={{
                    fontSize: 11.5, color: portalTheme.green, fontWeight: 600,
                    padding: "4px 8px", cursor: "pointer",
                  }}>{t("Modifier", "تعديل")}</button>
                </div>

                {/* Applicant */}
                <div style={{ padding: "16px 0", borderBottom: "1px solid " + portalTheme.line }}>
                  <div style={{ display: "flex", justifyContent: "space-between" }}>
                    <div style={{ fontSize: 12, fontWeight: 600, color: portalTheme.ink2, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                      {t("Demandeur", "مقدم الطلب")}
                    </div>
                    <button onClick={() => setStep("details")} style={{ fontSize: 11.5, color: portalTheme.green, fontWeight: 600, cursor: "pointer" }}>
                      {t("Modifier", "تعديل")}
                    </button>
                  </div>
                  <div style={{ marginTop: 6, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 18px", fontSize: 12.5 }}>
                    <div><span style={{ color: portalTheme.ink3 }}>{t("Nom", "الاسم")} :</span> K. Bouchaib</div>
                    <div><span style={{ color: portalTheme.ink3 }}>{t("CIN", "البطاقة")} :</span> AB 481 207</div>
                    <div><span style={{ color: portalTheme.ink3 }}>{t("Tél", "هاتف")} :</span> +212 6 12 34 56 78</div>
                    <div><span style={{ color: portalTheme.ink3 }}>{t("Email", "بريد")} :</span> k.bouchaib@example.ma</div>
                  </div>
                </div>

                {/* Property */}
                <div style={{ padding: "16px 0", borderBottom: "1px solid " + portalTheme.line }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: portalTheme.ink2, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                    {t("Bien concerné", "العقار المعني")}
                  </div>
                  <div style={{ marginTop: 6, fontSize: 12.5 }}>
                    <div><span style={{ color: portalTheme.ink3 }}>{t("Titre foncier", "الرسم العقاري")} :</span> <span className="mono">41/284-T</span></div>
                    <div style={{ marginTop: 2 }}><span style={{ color: portalTheme.ink3 }}>{t("Désignation", "التعيين")} :</span> Lot 12, Z.I. Aïn Sebaâ, Casablanca</div>
                  </div>
                </div>

                {/* Documents */}
                <div style={{ padding: "16px 0" }}>
                  <div style={{ display: "flex", justifyContent: "space-between" }}>
                    <div style={{ fontSize: 12, fontWeight: 600, color: portalTheme.ink2, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                      {t("Documents joints", "الوثائق المرفقة")} ({docs.length})
                    </div>
                    <button onClick={() => setStep("docs")} style={{ fontSize: 11.5, color: portalTheme.green, fontWeight: 600, cursor: "pointer" }}>
                      {t("Modifier", "تعديل")}
                    </button>
                  </div>
                  <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 3, fontSize: 12.5 }}>
                    {docs.map((d, i) => (
                      <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, color: i < 2 ? portalTheme.ink : portalTheme.amber }}>
                        <span style={{ width: 6, height: 6, borderRadius: "50%", background: i < 2 ? portalTheme.green : portalTheme.amber, flexShrink: 0 }} />
                        <span>{d}</span>
                        <span style={{ marginLeft: "auto", fontSize: 11 }}>
                          {i < 2 ? t("téléversé", "تم التحميل") : t("manquant", "ناقص")}
                        </span>
                      </div>
                    ))}
                  </div>
                  {docs.length > 2 && (
                    <div style={{
                      marginTop: 10,
                      padding: "8px 12px",
                      background: portalTheme.amberBg,
                      border: "1px solid " + portalTheme.amber + "55",
                      borderRadius: 5,
                      fontSize: 11.5,
                      color: "#7d5512",
                    }}>
                      ⚠ {t("Le dossier sera mis en attente jusqu'à réception des pièces manquantes (délai : 15 jours).", "سيتم تعليق الملف حتى استلام الوثائق الناقصة.")}
                    </div>
                  )}
                </div>
              </div>

              <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
                <button onClick={() => setStep("docs")} style={{
                  padding: "10px 16px", fontSize: 12.5,
                  background: "transparent", color: portalTheme.ink2,
                  border: "1px solid " + portalTheme.line2,
                  borderRadius: 5, cursor: "pointer",
                }}>{t("← Retour", "→ رجوع")}</button>
                <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  <div style={{ fontSize: 11, color: portalTheme.ink3 }}>
                    {t("Frais", "الرسوم")} : <span style={{ color: portalTheme.ink, fontWeight: 600 }}>120 MAD</span> · {t("payé à la soumission", "تُدفع عند الإرسال")}
                  </div>
                  <button onClick={() => setStep("tracking")} style={{
                    padding: "11px 22px", fontSize: 13, fontWeight: 600,
                    background: portalTheme.green, color: "white",
                    borderRadius: 5, cursor: "pointer",
                  }}>{t("Soumettre la demande", "إرسال الطلب")}</button>
                </div>
              </div>
            </>
          )}

          {step === "tracking" && (
            <>
              <div style={{ fontSize: 11, letterSpacing: "0.14em", color: portalTheme.ink3, textTransform: "uppercase", marginBottom: 8 }}>{t("Étape 5 sur 5", "الخطوة 5 من 5")}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: portalTheme.ink, letterSpacing: "-0.01em" }}>
                {t("Demande enregistrée", "تم تسجيل الطلب")}
              </div>
              <div style={{ fontSize: 13, color: portalTheme.ink2, marginTop: 6 }}>
                {t("Vous recevrez un SMS et un email à chaque étape du traitement.", "ستتلقى رسالة SMS وبريداً إلكترونياً في كل مرحلة من المعالجة.")}
              </div>

              <div style={{ marginTop: 20, padding: "22px 24px", background: portalTheme.surface, border: "2px solid " + portalTheme.green, borderRadius: 8 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: "0.14em", color: portalTheme.green, textTransform: "uppercase", fontWeight: 700 }}>{t("Numéro de suivi", "رقم التتبع")}</div>
                    <div className="mono" style={{ fontSize: 24, fontWeight: 700, color: portalTheme.ink, marginTop: 4, letterSpacing: "0.02em" }}>
                      LR-2026-04127
                    </div>
                  </div>
                  <div style={{
                    fontSize: 11, padding: "4px 10px",
                    background: portalTheme.green + "1f", color: portalTheme.green,
                    borderRadius: 4, fontWeight: 600, letterSpacing: "0.05em",
                  }}>{t("REÇU", "تم الاستلام")}</div>
                </div>

                <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 0 }}>
                  {[
                    { label: t("Reçu",                 "تم الاستلام"),     done: true,  time: "Aujourd'hui · 09:42" },
                    { label: t("Vérification des pièces", "التحقق من الوثائق"), done: true,  time: t("en cours · auto", "قيد المعالجة · آلي") },
                    { label: t("Routé vers le bureau",    "إحالة إلى المكتب"),  done: false, time: t("estimé · sous 2h", "متوقع · خلال ساعتين") },
                    { label: t("Traité par un agent",      "معالجة بواسطة موظف"), done: false, time: t("estimé · 14 jours", "متوقع · 14 يوم") },
                    { label: t("Document prêt",            "الوثيقة جاهزة"),    done: false, time: t("estimé · 31 mai 2026", "متوقع · 31 ماي 2026") },
                  ].map((m, i, all) => (
                    <div key={i} style={{ display: "flex", gap: 14, paddingBottom: i < all.length - 1 ? 14 : 0 }}>
                      <div style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center" }}>
                        <div style={{
                          width: 14, height: 14, borderRadius: "50%",
                          background: m.done ? portalTheme.green : portalTheme.line,
                          border: m.done ? "none" : "1px solid " + portalTheme.line2,
                          flexShrink: 0,
                          marginTop: 2,
                        }} />
                        {i < all.length - 1 && <div style={{ width: 2, flex: 1, background: m.done ? portalTheme.green : portalTheme.line, marginTop: 2 }} />}
                      </div>
                      <div style={{ flex: 1, paddingBottom: i < all.length - 1 ? 4 : 0 }}>
                        <div style={{ fontSize: 13, color: m.done ? portalTheme.ink : portalTheme.ink2, fontWeight: m.done ? 600 : 400 }}>{m.label}</div>
                        <div style={{ fontSize: 11.5, color: portalTheme.ink3, marginTop: 1 }}>{m.time}</div>
                      </div>
                    </div>
                  ))}
                </div>

                <div style={{
                  marginTop: 18, padding: "12px 14px",
                  background: portalTheme.surfaceAlt, borderRadius: 5,
                  fontSize: 11.5, color: portalTheme.ink2, lineHeight: 1.55,
                }}>
                  📱 {t("SMS de confirmation envoyé au +212 6 12 34 56 78.", "تم إرسال رسالة تأكيد إلى +212 6 12 34 56 78.")}
                  <br/>
                  ✉ {t("Reçu PDF disponible à tout moment dans votre compte.", "الإيصال متاح في حسابك في أي وقت.")}
                </div>
              </div>

              <div style={{ marginTop: 16, display: "flex", justifyContent: "flex-end" }}>
                <button onClick={() => setStep("service")} style={{
                  padding: "10px 16px", fontSize: 12.5, fontWeight: 600,
                  background: "transparent", color: portalTheme.green,
                  border: "1px solid " + portalTheme.green,
                  borderRadius: 5, cursor: "pointer",
                }}>{t("Nouvelle demande", "طلب جديد")}</button>
              </div>
            </>
          )}
        </div>
      </div>

      {/* Footer */}
      <div style={{
        background: portalTheme.surfaceAlt,
        borderTop: "1px solid " + portalTheme.line,
        padding: "10px 22px",
        display: "flex", justifyContent: "space-between",
        fontSize: 11, color: portalTheme.ink3,
      }}>
        <span>{t("Portail sécurisé · TLS · Identification eIN", "بوابة مؤمنة · TLS · هوية eIN")}</span>
        <span>{t("v2.4 · Agence du Cadastre · 2026", "v2.4 · وكالة المسح العقاري · 2026")}</span>
      </div>
    </div>
  );
}

window.PortalPreview = PortalPreview;