/* global React */
(function(){
const { useState, useEffect, useRef, useCallback } = React;

/* =============================================================
   UploadWizard.jsx — full-screen flow
   نوع → ساب → شماره → کد → آپلود tus → کپشن → موفق
   ============================================================= */

const CATEGORIES = [
  { id: "text",  icon: "text",  title: "متن",     opts: ["متن", "داستانک", "انتقاد"], color: "#9a6cff", needsFile: false },
  { id: "image", icon: "image", title: "تصویر",   opts: ["عکس", "هوش مصنوعی", "خلاقیت"], color: "#ff8a3d", needsFile: true,  accept: "image/*", sizeMB: 25  },
  { id: "video", icon: "video", title: "ویدیو",   opts: ["ویدیو", "چالش", "گفت‌وگو"],     color: "#ff4ea8", needsFile: true,  accept: "video/*", sizeMB: 500 },
  { id: "audio", icon: "audio", title: "صوت",     opts: ["صوت", "پادکست"],                color: "#44e3b8", needsFile: true,  accept: "audio/*", sizeMB: 100 },
];

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);
const fmtSize = (b) => {
  if (!b && b !== 0) return "—";
  if (b < 1024) return fmtFa(b) + " B";
  if (b < 1024*1024) return fmtFa((b/1024).toFixed(1)) + " KB";
  if (b < 1024*1024*1024) return fmtFa((b/1024/1024).toFixed(1)) + " MB";
  return fmtFa((b/1024/1024/1024).toFixed(2)) + " GB";
};
const fmtTime = (s) => {
  if (!isFinite(s) || s < 0) return "—";
  if (s < 60) return fmtFa(Math.ceil(s)) + " ث";
  return fmtFa(Math.ceil(s/60)) + " د";
};

window.UploadWizard = function UploadWizard({ open, onClose, onDone, initialType }) {
  // Accept 09xxxxxxxxx · 989xxxxxxxxx · 9xxxxxxxxx → canonical 09xxxxxxxxx
  const normMobile = (digits) => {
    let d = digits;
    if (d.startsWith("0098")) d = d.slice(4);
    else if (d.startsWith("98") && d.length >= 12) d = d.slice(2);
    if (d.length === 10 && d.startsWith("9")) d = "0" + d;
    return d;
  };
  const validMobile = (d) => /^09\d{9}$/.test(normMobile(d));
  const presetCat = initialType ? CATEGORIES.find(c => c.id === initialType) : null;
  const noPicker = !!presetCat;
  const [step, setStep] = useState(noPicker ? 1 : 0);
  // 0 picker (skipped when noPicker) · 1 sub · 2 phone · 3 otp · 4 file/upload · 5 caption · 6 done
  const [picked, setPicked] = useState(presetCat);
  const [sub, setSub] = useState(null);
  const [phone, setPhone] = useState("");
  const [otp, setOtp] = useState(["","","","",""]);
  const [resendIn, setResendIn] = useState(0);
  const [file, setFile] = useState(null);
  const [drag, setDrag] = useState(false);
  const [progress, setProgress] = useState(0);   // bytes uploaded
  const [running, setRunning] = useState(false);
  const [resumed, setResumed] = useState(false);
  const [speed, setSpeed] = useState(0);         // bytes/sec
  const [caption, setCaption] = useState("");
  const [publishMode, setPublishMode] = useState("now"); // now | schedule
  const [scheduleAt, setScheduleAt] = useState("");
  const [savedDraft, setSavedDraft] = useState(false);
  const tickRef = useRef(null);

  // ----- caption token typeahead: # hashtags + @ users (mirrors comment composer) -----
  const TAG_POOL = [
    { tag: "جشنواره_تهران", count: 12400 }, { tag: "صبحانه_ایرانی", count: 8600 },
    { tag: "قاب_کشور", count: 5300 }, { tag: "کوچه_پس_کوچه", count: 4100 },
    { tag: "غروب_کاشان", count: 2700 }, { tag: "بازار_تجریش", count: 1900 },
    { tag: "خاطره_شهر", count: 1500 }, { tag: "هنر_خیابانی", count: 980 },
    { tag: "موسیقی_محلی", count: 760 }, { tag: "عکاسی_موبایل", count: 540 },
  ];
  const USER_POOL = [
    { name: "علی رحمانی", handle: "ali.r", ring: "#ff4ea8", followsYou: true },
    { name: "نگار رستمی", handle: "negar.rashti", ring: "#f5d589", verified: true },
    { name: "زهرا مرادی", handle: "z.moradi", ring: "#4be3ff", followsYou: true },
    { name: "سعید نوری", handle: "saeid.podcast", ring: "#9a6cff" },
    { name: "فاطمه دلیری", handle: "f.daliri", ring: "#44e3b8", followsYou: true },
    { name: "روزبه بهزاد", handle: "roozbeh.b", ring: "#ff8a3d" },
    { name: "مهسا کریمی", handle: "mahsa_k", ring: "#ff4ea8" },
  ];
  const [tokOpen, setTokOpen] = useState(false);
  const [tokType, setTokType] = useState("@"); // "@" | "#"
  const [tokQuery, setTokQuery] = useState("");
  const [tokIndex, setTokIndex] = useState(0);

  const tokMatches = !tokOpen ? [] : (
    tokType === "#"
      ? TAG_POOL.filter(t => t.tag.includes(tokQuery)).slice(0, 5)
      : USER_POOL.filter(u => u.handle.toLowerCase().includes(tokQuery.toLowerCase()) || u.name.includes(tokQuery)).slice(0, 5)
  );

  const onCaptionChange = (val, el) => {
    setCaption(val);
    const caret = el ? el.selectionStart : val.length;
    const upto = val.slice(0, caret);
    const m = upto.match(/(?:^|\s)([@#])([\u0600-\u06FF\w._]*)$/);
    if (m) {
      setTokOpen(true); setTokType(m[1]); setTokQuery(m[2] || ""); setTokIndex(0);
    } else {
      setTokOpen(false);
    }
  };
  const pickToken = (item) => {
    const ins = tokType === "#" ? `#${item.tag} ` : `@${item.handle} `;
    setCaption(prev => prev.replace(/([@#])([\u0600-\u06FF\w._]*)$/, ins));
    setTokOpen(false); setTokQuery("");
  };
  const onCaptionKey = (e) => {
    if (tokOpen && tokMatches.length > 0) {
      if (e.key === "ArrowDown") { e.preventDefault(); setTokIndex(i => (i + 1) % tokMatches.length); return; }
      if (e.key === "ArrowUp")   { e.preventDefault(); setTokIndex(i => (i - 1 + tokMatches.length) % tokMatches.length); return; }
      if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); pickToken(tokMatches[tokIndex]); return; }
      if (e.key === "Escape") { setTokOpen(false); return; }
    }
  };
  const lastBytesRef = useRef(0);
  const lastTsRef = useRef(0);

  const reset = useCallback(() => {
    setStep(noPicker ? 1 : 0); setPicked(noPicker ? presetCat : null);
    setSub(null); setPhone("");
    setOtp(["","","","",""]); setResendIn(0); setFile(null);
    setDrag(false); setProgress(0); setRunning(false); setResumed(false);
    setSpeed(0); setCaption("");
    setPublishMode("now"); setScheduleAt(""); setSavedDraft(false);
    setTokOpen(false); setTokQuery("");
    if (tickRef.current) { clearInterval(tickRef.current); tickRef.current = null; }
  }, [noPicker, presetCat]);

  // When opened with a fresh preset, sync state. (parent may swap initialType.)
  useEffect(() => {
    if (open && noPicker) { setStep(1); setPicked(presetCat); }
  // eslint-disable-next-line
  }, [open, initialType]);

  const close = () => { onClose?.(); reset(); };

  // Resend countdown
  useEffect(() => {
    if (resendIn <= 0) return;
    const t = setTimeout(() => setResendIn(s => s - 1), 1000);
    return () => clearTimeout(t);
  }, [resendIn]);

  // Simulated tus PATCH loop — sends 5MB chunks at ~3MB/s
  // In real life: tus-js-client with the upload_url returned from POST /submissions
  const startUpload = useCallback(() => {
    if (!file || running) return;
    setRunning(true);
    lastBytesRef.current = progress;
    lastTsRef.current = Date.now();
    tickRef.current = setInterval(() => {
      setProgress(prev => {
        const chunk = 1024 * 256; // ~256 KB per 100ms tick = 2.5 MB/s
        const next = Math.min(file.size, prev + chunk);
        const now = Date.now();
        const dt = (now - lastTsRef.current) / 1000;
        if (dt > 0.4) {
          setSpeed((next - lastBytesRef.current) / dt);
          lastBytesRef.current = next;
          lastTsRef.current = now;
        }
        if (next >= file.size) {
          clearInterval(tickRef.current); tickRef.current = null;
          setRunning(false);
          setSpeed(0);
        }
        return next;
      });
    }, 100);
  }, [file, running, progress]);

  const pauseUpload = useCallback(() => {
    if (tickRef.current) { clearInterval(tickRef.current); tickRef.current = null; }
    setRunning(false);
    setSpeed(0);
  }, []);

  const cancelUpload = useCallback(() => {
    pauseUpload();
    setFile(null);
    setProgress(0);
    setResumed(false);
  }, [pauseUpload]);

  // Auto-start on file pick
  useEffect(() => {
    if (file && progress === 0) startUpload();
    // eslint-disable-next-line
  }, [file]);

  // Cleanup on unmount
  useEffect(() => () => {
    if (tickRef.current) clearInterval(tickRef.current);
  }, []);

  if (!open) return null;

  const onPickFile = (f) => {
    if (!f) return;
    const maxBytes = (picked?.sizeMB || 100) * 1024 * 1024;
    if (f.size > maxBytes) {
      alert(`حجم فایل بیشتر از ${picked.sizeMB} مگابایته.`);
      return;
    }
    setFile(f);
    setProgress(0);
    setResumed(false);
  };
  const onDrop = (e) => {
    e.preventDefault(); setDrag(false);
    const f = e.dataTransfer.files?.[0];
    onPickFile(f);
  };

  const sendOtp = () => {
    setStep(3);
    setResendIn(60);
  };

  const otpFull = otp.every(c => c !== "");
  const verifyOtp = () => {
    // pretend it's good
    if (picked?.needsFile) setStep(4);
    else setStep(5); // text-only → straight to caption
  };

  const setOtpDigit = (i, v) => {
    const ch = v.replace(/\D/g, "").slice(-1);
    setOtp(o => { const n = [...o]; n[i] = ch; return n; });
    if (ch && i < 4) {
      const next = document.getElementById(`kd-otp-${i+1}`);
      next?.focus();
    }
  };

  const finalize = () => {
    setStep(6);
    setTimeout(() => { onDone?.(picked, sub); reset(); }, 1800);
  };

  // ---- step labels for header
  // Build the visible sequence so the indicator matches reality.
  // (Step 0 picker is skipped when noPicker; step 4 upload is skipped for text.)
  const visibleSteps = noPicker
    ? (picked?.needsFile === false ? [1,2,3,5] : [1,2,3,4,5])
    : (picked?.needsFile === false ? [0,1,2,3,5] : [0,1,2,3,4,5]);
  const stepNum = Math.max(1, visibleSteps.indexOf(step) + 1);
  const stepTotal = visibleSteps.length;

  return (
    <div className="kd-wizard" onClick={close}>
      <div className="kd-wizard__bg" />
      <div className="kd-wizard__panel kd-glass" onClick={e => e.stopPropagation()}>
        <button className="kd-wizard__close" onClick={close} aria-label="بستن"><Icon name="close" size={18} stroke={2} /></button>

        {step <= 5 && (
          <div style={{ position: "absolute", top: 22, insetInlineStart: 22, fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,.5)", letterSpacing: ".1em" }}>
            {fmtFa(stepNum)} / {fmtFa(stepTotal)}
          </div>
        )}

        {/* ===== 0 — Category picker ===== */}
        {step === 0 && (
          <div className="kd-wizard__step">
            <h2 className="kd-wizard__h">چی آوردی برامون؟</h2>
            <p className="kd-wizard__sub">یکی رو انتخاب کن. می‌بریمت همون‌جا که باید بری.</p>
            <div className="kd-wizard__grid">
              {CATEGORIES.map(c => (
                <button key={c.id} className="kd-wizard__cat"
                  style={{ ['--cat-color']: c.color }}
                  onClick={() => { setPicked(c); setSub(null); setStep(1); }}>
                  <span className="kd-wizard__cat-icon" style={{ color: c.color }}><Icon name={c.icon} size={32} stroke={1.6} /></span>
                  <span className="kd-wizard__cat-title">{c.title}</span>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* ===== 1 — Subcategory ===== */}
        {step === 1 && picked && (
          <div className="kd-wizard__step">
            <button className="kd-wizard__back" onClick={() => (noPicker ? close() : setStep(0))}><Icon name="chevron" size={16} stroke={2} /> {noPicker ? "بستن" : "برگرد"}</button>
            <h2 className="kd-wizard__h" style={{ color: picked.color }}><Icon name={picked.icon} size={26} stroke={1.6} style={{ verticalAlign: "middle", marginInlineEnd: 8 }} />{picked.title}</h2>
            <p className="kd-wizard__sub">دقیقا چی می‌فرستی؟</p>
            <div className="kd-wizard__opts">
              {picked.opts.map(o => (
                <button key={o} className={`kd-wizard__opt ${sub === o ? "is-on" : ""}`} onClick={() => setSub(o)}>{o}</button>
              ))}
            </div>
            <button className="kd-btn kd-btn--primary kd-btn--lg" disabled={!sub} onClick={() => setStep(2)}>ادامه <Icon name="back" size={16} stroke={2.4} /></button>
          </div>
        )}

        {/* ===== 2 — Phone ===== */}
        {step === 2 && (
          <div className="kd-wizard__step">
            <button className="kd-wizard__back" onClick={() => setStep(1)}><Icon name="chevron" size={16} stroke={2} /> برگرد</button>
            <h2 className="kd-wizard__h">شماره‌ت رو بگو</h2>
            <p className="kd-wizard__sub">یه کد ۵ رقمی برات می‌فرستیم. هیچ فرم خسته‌کننده‌ای در کار نیست.</p>
            <input className="kd-wizard__input" placeholder="0912 345 6789" inputMode="tel" value={phone} onChange={e => setPhone(e.target.value.replace(/\D/g, "").slice(0,14))} />
            <button className="kd-btn kd-btn--primary kd-btn--lg" disabled={!validMobile(phone)} onClick={sendOtp}>ارسال کد</button>
          </div>
        )}

        {/* ===== 3 — OTP ===== */}
        {step === 3 && (
          <div className="kd-wizard__step">
            <button className="kd-wizard__back" onClick={() => setStep(2)}><Icon name="chevron" size={16} stroke={2} /> برگرد</button>
            <h2 className="kd-wizard__h">کد رو بزن</h2>
            <p className="kd-wizard__sub">به <b style={{ color: "#fff", direction: "ltr", display: "inline-block" }}>{phone || "—"}</b> پیامک کردیم.</p>
            <div className="kd-wizard__otp">
              {otp.map((v, i) => (
                <input key={i} id={`kd-otp-${i}`} value={v}
                  inputMode="numeric" maxLength={1}
                  onChange={e => setOtpDigit(i, e.target.value)}
                  onKeyDown={e => {
                    if (e.key === "Backspace" && !otp[i] && i > 0) {
                      const prev = document.getElementById(`kd-otp-${i-1}`);
                      prev?.focus();
                    }
                  }} />
              ))}
            </div>
            <button className="kd-wizard__resend" disabled={resendIn > 0} onClick={() => { setResendIn(60); setOtp(["","","","",""]); }}>
              {resendIn > 0 ? `ارسال مجدد در ${fmtFa(resendIn)} ثانیه` : "ارسال دوباره کد"}
            </button>
            <button className="kd-btn kd-btn--primary kd-btn--lg" disabled={!otpFull} onClick={verifyOtp}>تأیید و ادامه</button>
          </div>
        )}

        {/* ===== 4 — Upload (tus) ===== */}
        {step === 4 && picked?.needsFile && (
          <div className="kd-wizard__step">
            <button className="kd-wizard__back" onClick={() => { cancelUpload(); setStep(3); }}><Icon name="chevron" size={16} stroke={2} /> برگرد</button>
            <h2 className="kd-wizard__h">فایلتو بفرست</h2>
            <p className="kd-wizard__sub">
              حداکثر {fmtFa(picked.sizeMB)} مگابایت.
              {' '}<span className="kd-wizard__tustag"><Icon name="upload" size={11} stroke={2.2} /> tus · resumable</span>
              {' '}اگه ارتباط قطع شه، از همون‌جا که بود ادامه می‌دیم.
            </p>

            {!file && (
              <label className={`kd-wizard__drop ${drag ? "is-drag" : ""}`}
                onDragOver={e => { e.preventDefault(); setDrag(true); }}
                onDragLeave={() => setDrag(false)}
                onDrop={onDrop}>
                <div className="kd-wizard__drop-icon"><Icon name="upload" size={36} stroke={1.6} /></div>
                <div className="kd-wizard__drop-h">فایلتو بکش بیار اینجا</div>
                <div className="kd-wizard__drop-p">یا کلیک کن. {picked.accept?.replace("/*", "")}</div>
                <input type="file" accept={picked.accept} onChange={e => onPickFile(e.target.files?.[0])} />
              </label>
            )}

            {file && (() => {
              const pct = file.size > 0 ? (progress / file.size) * 100 : 0;
              const done = progress >= file.size;
              const eta = speed > 0 ? (file.size - progress) / speed : 0;
              const statusCls = done ? "is-active" : (running ? "is-active" : (resumed ? "is-resume" : "is-paused"));
              const statusTxt = done ? "آپلود کامل شد" : (running ? "در حال آپلود…" : (resumed ? "آماده ادامه" : (progress > 0 ? "متوقف شد" : "آماده شروع")));
              return (
                <div className="kd-wizard__upload">
                  <div className="kd-wizard__upload-row">
                    <span className="kd-wizard__upload-thumb"><Icon name={picked.icon} size={22} stroke={1.7} /></span>
                    <div className="kd-wizard__upload-meta">
                      <p className="kd-wizard__upload-name" title={file.name}>{file.name}</p>
                      <p className="kd-wizard__upload-size">{fmtSize(progress)} / {fmtSize(file.size)}</p>
                    </div>
                    <div className="kd-wizard__upload-pct">{fmtFa(Math.floor(pct))}<span style={{ fontSize: 13, opacity: .6 }}>٪</span></div>
                  </div>
                  <div className="kd-wizard__upload-bar"><i style={{ width: pct + "%" }} /></div>
                  <div className="kd-wizard__upload-foot">
                    <span className={`kd-wizard__upload-status ${statusCls}`}>
                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor", boxShadow: "0 0 8px currentColor", display: "inline-block" }} />
                      {statusTxt}
                    </span>
                    <span>{running && speed > 0 ? `${fmtSize(speed)}/ث · ${fmtTime(eta)} مونده` : (done ? "✓" : (progress > 0 ? `${fmtFa(Math.floor(pct))}٪ ذخیره شد` : ""))}</span>
                  </div>
                  {!done && (
                    <div className="kd-wizard__upload-actions" style={{ marginTop: 12 }}>
                      {running ? (
                        <button className="kd-wizard__upload-act" onClick={pauseUpload}><Icon name="close" size={12} stroke={2.2} /> توقف</button>
                      ) : (
                        <button className="kd-wizard__upload-act" onClick={() => { setResumed(true); startUpload(); }}>
                          <Icon name="upload" size={12} stroke={2.2} /> {progress > 0 ? "ادامه از همون‌جا" : "شروع"}
                        </button>
                      )}
                      <button className="kd-wizard__upload-act" onClick={cancelUpload}>لغو و فایل دیگه</button>
                    </div>
                  )}
                </div>
              );
            })()}

            <button className="kd-btn kd-btn--primary kd-btn--lg"
              disabled={!file || progress < (file?.size || Infinity)}
              onClick={() => setStep(5)}>
              ادامه <Icon name="back" size={16} stroke={2.4} />
            </button>
          </div>
        )}

        {/* ===== 5 — Caption ===== */}
        {step === 5 && (
          <div className="kd-wizard__step">
            <button className="kd-wizard__back" onClick={() => setStep(picked?.needsFile ? 4 : 3)}><Icon name="chevron" size={16} stroke={2} /> برگرد</button>
            <h2 className="kd-wizard__h">یه چیزی بگو دربارش</h2>
            <p className="kd-wizard__sub">کپشن کوتاه، تگ، توضیح — هر چی به مخاطب کمک کنه بفهمه.</p>
            <div className="kd-wizard__captionwrap">
              <textarea className="kd-wizard__caption" maxLength={600}
                placeholder="مثلاً: اولین چالشمه، روی پشت‌بوم خونه‌مون گرفتم. با #جشنواره_تهران و منشن @ دوستات بیشتر دیده می‌شه."
                value={caption}
                onChange={e => onCaptionChange(e.target.value, e.target)}
                onKeyDown={onCaptionKey}
                onBlur={() => setTimeout(() => setTokOpen(false), 150)} />
              {tokOpen && tokMatches.length > 0 && (
                <div className="kd-tokenbox">
                  <div className="kd-mention__head">{tokType === "#" ? "هشتگ" : "منشن کن"}</div>
                  {tokType === "#"
                    ? tokMatches.map((t, i) => (
                        <button key={t.tag} className={`kd-mention__item ${i === tokIndex ? "is-active" : ""}`}
                          onMouseDown={e => e.preventDefault()}
                          onMouseEnter={() => setTokIndex(i)} onClick={() => pickToken(t)}>
                          <span className="kd-tokenbox__hash">#</span>
                          <span className="kd-mention__text">
                            <strong>{t.tag}</strong>
                            <span>{fmtFa(t.count >= 1000 ? (t.count/1000).toFixed(1) + "هزار" : t.count)} پست</span>
                          </span>
                        </button>
                      ))
                    : tokMatches.map((u, i) => (
                        <button key={u.handle} className={`kd-mention__item ${i === tokIndex ? "is-active" : ""}`}
                          onMouseDown={e => e.preventDefault()}
                          onMouseEnter={() => setTokIndex(i)} onClick={() => pickToken(u)}>
                          <Avatar name={u.name} size={30} ring={u.ring} />
                          <span className="kd-mention__text">
                            <strong>{u.name}</strong>
                            <span>@{u.handle}{u.followsYou ? " · دنبالت می‌کنه" : ""}</span>
                          </span>
                          {u.verified && <span className="kd-userlist__verified"><Icon name="check" size={8} stroke={3} /></span>}
                        </button>
                      ))}
                </div>
              )}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,.45)", textAlign: "end", marginBottom: 14 }}>
              {fmtFa(caption.length)} / {fmtFa(600)}
            </div>

            {/* publish timing (P2-05) */}
            <div className="kd-wizard__publish">
              <button className={`kd-wizard__pubopt ${publishMode === "now" ? "is-on" : ""}`} onClick={() => setPublishMode("now")}>
                <Icon name="upload" size={16} stroke={2} />
                <span><strong>همین حالا</strong><em>به‌محض تأیید منتشر می‌شه</em></span>
              </button>
              <button className={`kd-wizard__pubopt ${publishMode === "schedule" ? "is-on" : ""}`} onClick={() => setPublishMode("schedule")}>
                <Icon name="bell" size={16} stroke={2} />
                <span><strong>زمان‌بندی</strong><em>یه وقت مشخص بعداً</em></span>
              </button>
            </div>
            {publishMode === "schedule" && (
              <label className="kd-wizard__schedule">
                <span>کِی منتشر بشه؟</span>
                <input type="datetime-local" value={scheduleAt} onChange={e => setScheduleAt(e.target.value)} />
              </label>
            )}

            <button className="kd-btn kd-btn--primary kd-btn--lg" disabled={publishMode === "schedule" && !scheduleAt} onClick={finalize}>
              {publishMode === "schedule" ? "زمان‌بندی کن" : "ثبت اثر"}
            </button>
            <button className="kd-wizard__draftbtn" onClick={() => { setSavedDraft(true); setTimeout(() => close(), 1100); }}>
              {savedDraft ? <React.Fragment><Icon name="check" size={14} stroke={2.6} /> توی پیش‌نویس‌ها ذخیره شد</React.Fragment> : "فعلاً پیش‌نویس بمونه"}
            </button>
          </div>
        )}

        {/* ===== 6 — Done ===== */}
        {step === 6 && (
          <div className="kd-wizard__step kd-wizard__step--done">
            <div className="kd-wizard__check"><Icon name="check" size={48} stroke={3} /></div>
            <h2 className="kd-wizard__h">فرستادی!</h2>
            <p className="kd-wizard__sub">منتظر بازخورد بمون. اگه بین ۵ تای برتر بشی، خبرت می‌کنیم.</p>
          </div>
        )}
      </div>
    </div>
  );
};
})();