/* global React */
(function(){
const { useState } = React;

/* =============================================================
   Settings.jsx — settings hub + sub-screens
   --------------------------------------------------------------
   Sub-screens are state-driven (not separate routes) so the
   back-arrow returns to the hub. Items reachable from hub:
     - account (اطلاعات حساب) — display name, bio, avatar, province
     - phone (تغییر شماره) — double-OTP flow
     - privacy (حریم خصوصی) — public/private + visibility toggles
     - notifications (اعلان‌ها) — per-channel + per-type
     - blocked (کاربران بلاک‌شده) — list + unblock
     - about (درباره / حقوقی) — static links
     - delete (حذف حساب) — goes to its own /delete-account route (P0-08)
     - logout (خروج)
   ============================================================= */

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);

const HUB_GROUPS = [
  {
    title: "حسابت",
    items: [
      { id: "account",  label: "اطلاعات حساب",       sub: "نام، یوزرنیم، آواتار، استان", icon: "profile",   color: "#ff4ea8" },
      { id: "phone",    label: "تغییر شماره موبایل", sub: "با تأیید ۲ مرحله‌ای",          icon: "bell",      color: "#4be3ff" },
      { id: "privacy",  label: "حریم خصوصی",         sub: "پروفایل عمومی یا خصوصی",      icon: "bookmark",  color: "#9a6cff" },
    ],
  },
  {
    title: "تجربه",
    items: [
      { id: "notifications", label: "اعلان‌ها",         sub: "پوش، ایمیل، پیامک",       icon: "bell",     color: "#f5d589" },
      { id: "appearance",    label: "ظاهر و دسترس‌پذیری", sub: "تم، اندازه متن، حرکت",   icon: "image",    color: "#4be3ff" },
      { id: "blocked",       label: "کاربران بلاک‌شده", sub: "مدیریت بلاک و بی‌صدا",     icon: "close",    color: "#ff5774" },
    ],
  },
  {
    title: "امنیت",
    items: [
      { id: "sessions", label: "دستگاه‌ها و نشست‌ها", sub: "جاهایی که واردی", icon: "profile", color: "#9a6cff" },
    ],
  },
  {
    title: "درباره و کمک",
    items: [
      { id: "help",  label: "راهنما و پشتیبانی", sub: "سوال‌های پرتکرار، تماس",        icon: "search",   color: "#44e3b8" },
      { id: "about", label: "درباره‌ی کشوردوست", sub: "تیم، تماس، نسخه ۱٫۲٫۰",       icon: "trophy",   color: "#f5d589" },
      { id: "rules", label: "قوانین و حریم خصوصی",  sub: "شرایط استفاده، Privacy Policy", icon: "bookmark", color: "#7d6ad4" },
    ],
  },
];

window.Settings = function Settings({ onBack, onDeleteAccount, onLogout, onStates, onTour }) {
  const [page, setPage] = useState("hub");
  // ===== shared user state (mocked) =====
  const [profile, setProfile] = useState({
    display_name: "مهسا کریمی",
    username: "mahsa_k",
    bio: "داستانک‌نویس · گیلان · از ۱۴۰۲",
    province: "گیلان",
  });
  const [privacy, setPrivacy] = useState({
    private_profile: false,
    show_online: true,
    show_last_seen: true,
    allow_dm: "everyone",
    allow_remix: true,
  });
  const [notifs, setNotifs] = useState({
    push_ratings: true,
    push_follows: true,
    push_comments: true,
    push_challenges: false,
    email_weekly: true,
    sms_winners: true,
  });
  const [blocked] = useState([
    { id: "u1", name: "اسپمی جعلی", handle: "spam_account_44", reason: "اسپم تبلیغاتی" },
    { id: "u2", name: "ع. ر.",         handle: "akward_dm",         reason: "DM ناخواسته" },
  ]);

  // ===== sub-screen titles =====
  const TITLES = {
    hub: "تنظیمات",
    account: "اطلاعات حساب",
    phone: "تغییر شماره موبایل",
    privacy: "حریم خصوصی",
    notifications: "اعلان‌ها",
    appearance: "ظاهر و دسترس‌پذیری",
    sessions: "دستگاه‌ها و نشست‌ها",
    help: "راهنما و پشتیبانی",
    blocked: "کاربران بلاک‌شده",
    about: "درباره‌ی کشوردوست",
    rules: "قوانین و حریم خصوصی",
  };

  return (
    <div className="kd-settings">
      <header className="kd-settings__head">
        <button className="kd-settings__back" onClick={page === "hub" ? onBack : () => setPage("hub")} aria-label="برگشت">
          <Icon name="back" size={20} stroke={2.2} />
        </button>
        <h1 className="kd-settings__title">{TITLES[page]}</h1>
        <span style={{ width: 36 }} />
      </header>

      {/* ========== HUB ========== */}
      {page === "hub" && (
        <React.Fragment>
          {HUB_GROUPS.map(g => (
            <section key={g.title} className="kd-settings__group">
              <h3 className="kd-settings__group-title">{g.title}</h3>
              <div className="kd-settings__list">
                {g.items.map(it => (
                  <button key={it.id} className="kd-settings__row" onClick={() => setPage(it.id)}>
                    <span className="kd-settings__row-icon" style={{ ['--c']: it.color }}>
                      <Icon name={it.icon} size={18} stroke={1.8} />
                    </span>
                    <span className="kd-settings__row-text">
                      <strong>{it.label}</strong>
                      <span>{it.sub}</span>
                    </span>
                    <Icon name="chevron" size={16} stroke={2.2} className="kd-settings__row-chev" style={{ transform: "scaleX(-1)" }} />
                  </button>
                ))}
              </div>
            </section>
          ))}

          <section className="kd-settings__group">
            <div className="kd-settings__list">
              <button className="kd-settings__row" onClick={onStates}>
                <span className="kd-settings__row-icon" style={{ ['--c']: "#4be3ff" }}>
                  <Icon name="filter" size={18} stroke={2} />
                </span>
                <span className="kd-settings__row-text">
                  <strong>گالری حالت‌ها (طراحی)</strong>
                  <span>Empty / Error / Skeleton — برای دیزاین</span>
                </span>
                <Icon name="chevron" size={16} stroke={2.2} className="kd-settings__row-chev" style={{ transform: "scaleX(-1)" }} />
              </button>
              <button className="kd-settings__row" onClick={onTour}>
                <span className="kd-settings__row-icon" style={{ ['--c']: "#ff4ea8" }}>
                  <Icon name="swipe" size={18} stroke={2} />
                </span>
                <span className="kd-settings__row-text">
                  <strong>نمایش معرفی</strong>
                  <span>تور خوش‌آمدگویی ۳ گامی</span>
                </span>
                <Icon name="chevron" size={16} stroke={2.2} className="kd-settings__row-chev" style={{ transform: "scaleX(-1)" }} />
              </button>
              <button className="kd-settings__row kd-settings__row--alert" onClick={onLogout}>
                <span className="kd-settings__row-icon" style={{ ['--c']: "#f5d589" }}>
                  <Icon name="back" size={18} stroke={2} />
                </span>
                <span className="kd-settings__row-text">
                  <strong>خروج از حساب</strong>
                  <span>روی این دستگاه</span>
                </span>
              </button>
              <button className="kd-settings__row kd-settings__row--danger" onClick={onDeleteAccount}>
                <span className="kd-settings__row-icon" style={{ ['--c']: "#ff5774" }}>
                  <Icon name="close" size={18} stroke={2.2} />
                </span>
                <span className="kd-settings__row-text">
                  <strong>حذف حساب کاربری</strong>
                  <span>غیرقابل بازگشت بعد از ۴ ماه</span>
                </span>
              </button>
            </div>
          </section>

          <p className="kd-settings__version">کشوردوست · نسخه ۱٫۲٫۰ — ساخت تیم تهران</p>
        </React.Fragment>
      )}

      {/* ========== ACCOUNT / EDIT PROFILE ========== */}
      {page === "account" && <AccountForm value={profile} onChange={setProfile} />}

      {/* ========== PHONE ========== */}
      {page === "phone" && <ChangePhone onDone={() => setPage("hub")} />}

      {/* ========== PRIVACY ========== */}
      {page === "privacy" && <PrivacyForm value={privacy} onChange={setPrivacy} />}

      {/* ========== NOTIFICATIONS ========== */}
      {page === "notifications" && <NotificationsForm value={notifs} onChange={setNotifs} />}

      {/* ========== BLOCKED ========== */}
      {page === "blocked" && <BlockedList items={blocked} />}

      {/* ========== APPEARANCE / A11Y (P2-03) ========== */}
      {page === "appearance" && <AppearanceForm />}

      {/* ========== SESSIONS & DEVICES (P2-01) ========== */}
      {page === "sessions" && <SessionsList />}

      {/* ========== HELP (P1-13) ========== */}
      {page === "help" && <HelpCenter />}

      {/* ========== ABOUT / RULES ========== */}
      {page === "about" && <AboutPage />}
      {page === "rules" && <LegalPage />}
    </div>
  );
};

/* ===================== sub-forms ===================== */

function AccountForm({ value, onChange }) {
  const initial = (value.display_name || "؟").trim().charAt(0);
  return (
    <section className="kd-settings__card">
      <div className="kd-settings__avatar-row">
        <div className="kd-setup__avatar" style={{ width: 80, height: 80 }}>
          <span className="kd-setup__avatar-initial" style={{ fontSize: 36 }}>{initial}</span>
        </div>
        <div className="kd-settings__avatar-actions">
          <button className="kd-btn kd-btn--secondary kd-btn--sm">عوض کن</button>
          <button className="kd-settings__textbtn">حذف</button>
        </div>
      </div>

      <Field label="نام نمایشی"
        value={value.display_name}
        onChange={v => onChange({ ...value, display_name: v })} />
      <Field label="یوزرنیم" prefix="@" mono
        value={value.username}
        onChange={v => onChange({ ...value, username: v.toLowerCase() })} />
      <Field label="استان" hint="مثلاً «گیلان»، «تهران»"
        value={value.province}
        onChange={v => onChange({ ...value, province: v })} />
      <Field label="بیو" multiline
        value={value.bio}
        onChange={v => onChange({ ...value, bio: v })}
        maxLength={240} hint="حداکثر ۲۴۰ کاراکتر" />

      <div className="kd-settings__formfoot">
        <button className="kd-btn kd-btn--primary kd-btn--md">ذخیره تغییرات</button>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, multiline, prefix, mono, hint, maxLength }) {
  return (
    <label className={`kd-settings__field ${multiline ? "is-multi" : ""}`}>
      <span className="kd-settings__field-lbl">{label}</span>
      <div className="kd-settings__field-input">
        {prefix && <span className="kd-settings__field-prefix">{prefix}</span>}
        {multiline ? (
          <textarea value={value} onChange={e => onChange(e.target.value)} maxLength={maxLength} className={mono ? "kd-mono" : ""} />
        ) : (
          <input value={value} onChange={e => onChange(e.target.value)} maxLength={maxLength} className={mono ? "kd-mono" : ""} />
        )}
      </div>
      {hint && <span className="kd-settings__field-hint">{hint}{maxLength ? ` (${fmtFa(value.length)} / ${fmtFa(maxLength)})` : ""}</span>}
    </label>
  );
}

function ChangePhone({ onDone }) {
  const [step, setStep] = useState(0); // 0 verify current, 1 new phone, 2 verify new, 3 done
  const [code, setCode] = useState("");
  const [newPhone, setNewPhone] = useState("");
  const [newCode, setNewCode] = useState("");

  return (
    <section className="kd-settings__card">
      {step === 0 && (
        <React.Fragment>
          <h2 className="kd-settings__h2">تأیید شماره فعلی</h2>
          <p className="kd-settings__p">
            یه کد ۵ رقمی به شماره <b>۰۹۱۲ ۳۴۵ ۶۷۸۹</b> فرستادیم. وارد کن.
          </p>
          <input className="kd-settings__bigcode" value={code} onChange={e => setCode(e.target.value.replace(/\D/g,"").slice(0,5))} dir="ltr" placeholder="—————" maxLength={5} inputMode="numeric" />
          <button className="kd-btn kd-btn--primary kd-btn--lg" disabled={code.length < 5} onClick={() => setStep(1)}>تأیید و ادامه</button>
        </React.Fragment>
      )}
      {step === 1 && (
        <React.Fragment>
          <h2 className="kd-settings__h2">شماره جدید</h2>
          <p className="kd-settings__p">شماره موبایلی که از این به بعد باهاش وارد میشی.</p>
          <input className="kd-settings__bigphone" value={newPhone} onChange={e => setNewPhone(e.target.value.replace(/\D/g,"").slice(0,11))} dir="ltr" placeholder="0912 345 6789" inputMode="tel" />
          <button className="kd-btn kd-btn--primary kd-btn--lg" disabled={newPhone.length < 11} onClick={() => setStep(2)}>ارسال کد به شماره جدید</button>
        </React.Fragment>
      )}
      {step === 2 && (
        <React.Fragment>
          <h2 className="kd-settings__h2">تأیید شماره جدید</h2>
          <p className="kd-settings__p">کد ۵ رقمی به شماره <b style={{ direction: "ltr", display: "inline-block" }}>{newPhone}</b> فرستاده شد.</p>
          <input className="kd-settings__bigcode" value={newCode} onChange={e => setNewCode(e.target.value.replace(/\D/g,"").slice(0,5))} dir="ltr" placeholder="—————" maxLength={5} inputMode="numeric" />
          <button className="kd-btn kd-btn--primary kd-btn--lg" disabled={newCode.length < 5} onClick={() => setStep(3)}>تأیید نهایی</button>
        </React.Fragment>
      )}
      {step === 3 && (
        <React.Fragment>
          <div className="kd-login__success-ring"><Icon name="check" size={36} stroke={3} /></div>
          <h2 className="kd-settings__h2" style={{ textAlign: "center" }}>شماره عوض شد</h2>
          <p className="kd-settings__p" style={{ textAlign: "center" }}>از این به بعد با <b style={{ direction: "ltr", display: "inline-block" }}>{newPhone}</b> وارد می‌شی.</p>
          <button className="kd-btn kd-btn--primary kd-btn--md" onClick={onDone}>برگرد به تنظیمات</button>
        </React.Fragment>
      )}
    </section>
  );
}

function Toggle({ on, onChange }) {
  return (
    <button className={`kd-settings__toggle ${on ? "is-on" : ""}`} role="switch" aria-checked={on} onClick={() => onChange(!on)}>
      <span className="kd-settings__toggle-knob" />
    </button>
  );
}

function PrivacyForm({ value, onChange }) {
  const set = (k, v) => onChange({ ...value, [k]: v });
  return (
    <section className="kd-settings__card">
      <ToggleRow label="پروفایل خصوصی" sub="فقط دنبال‌کننده‌های تأییدشده پست‌هاتو می‌بینن"
        on={value.private_profile} onChange={v => set("private_profile", v)} />
      <ToggleRow label="نمایش وضعیت آنلاین" sub="بقیه می‌بینن کی آنلاینی"
        on={value.show_online} onChange={v => set("show_online", v)} />
      <ToggleRow label="نمایش آخرین بازدید" sub="«۲ ساعت پیش» زیر اسمت"
        on={value.show_last_seen} onChange={v => set("show_last_seen", v)} />
      <ToggleRow label="اجازه‌ی ریمیکس" sub="بقیه می‌تونن روی پست‌هات ریمیکس بسازن"
        on={value.allow_remix} onChange={v => set("allow_remix", v)} />

      <div className="kd-settings__rowtitle">پیام مستقیم از طرف</div>
      <div className="kd-settings__radioset">
        {[
          { v: "everyone",  l: "هر کسی" },
          { v: "following", l: "فقط کسایی که دنبال می‌کنم" },
          { v: "off",       l: "هیچ کس" },
        ].map(o => (
          <button key={o.v}
            className={`kd-settings__radio ${value.allow_dm === o.v ? "is-on" : ""}`}
            onClick={() => set("allow_dm", o.v)}>
            <span className="kd-settings__radio-dot" />
            {o.l}
          </button>
        ))}
      </div>
    </section>
  );
}

function NotificationsForm({ value, onChange }) {
  const set = (k, v) => onChange({ ...value, [k]: v });
  return (
    <section className="kd-settings__card">
      <h3 className="kd-settings__rowtitle">پوش روی این دستگاه</h3>
      <ToggleRow label="امتیازهای جدید روی پست‌هام" on={value.push_ratings} onChange={v => set("push_ratings", v)} />
      <ToggleRow label="کسی منو دنبال کرد"           on={value.push_follows} onChange={v => set("push_follows", v)} />
      <ToggleRow label="کامنت یا منشن"                on={value.push_comments} onChange={v => set("push_comments", v)} />
      <ToggleRow label="چالش‌های جدید روز"            on={value.push_challenges} onChange={v => set("push_challenges", v)} />

      <h3 className="kd-settings__rowtitle">دیگه چی برات بفرستیم</h3>
      <ToggleRow label="خلاصه‌ی هفتگی با ایمیل"       on={value.email_weekly} onChange={v => set("email_weekly", v)} />
      <ToggleRow label="پیامک — وقتی برنده شدی"      sub="فقط برای رویدادهای مهم" on={value.sms_winners} onChange={v => set("sms_winners", v)} />
    </section>
  );
}

function ToggleRow({ label, sub, on, onChange }) {
  return (
    <div className="kd-settings__togglerow">
      <div className="kd-settings__togglerow-text">
        <strong>{label}</strong>
        {sub && <span>{sub}</span>}
      </div>
      <Toggle on={on} onChange={onChange} />
    </div>
  );
}

function BlockedList({ items }) {
  if (items.length === 0) {
    return (
      <section className="kd-settings__empty">
        <p>کسی رو بلاک نکردی. 🌱</p>
      </section>
    );
  }
  return (
    <section className="kd-settings__card">
      {items.map(u => (
        <div key={u.id} className="kd-settings__blockrow">
          <Avatar name={u.name} size={40} />
          <div className="kd-settings__blockrow-text">
            <strong>{u.name}</strong>
            <span>@{u.handle} · {u.reason}</span>
          </div>
          <button className="kd-btn kd-btn--secondary kd-btn--sm">رفع بلاک</button>
        </div>
      ))}
    </section>
  );
}

/* ===== Appearance & Accessibility (P2-03) ===== */
function AppearanceForm() {
  const [theme, setTheme] = useState("dark");     // dark | midnight | system
  const [accent, setAccent] = useState("rose");   // rose | violet | cyan | gold
  const [textScale, setTextScale] = useState(100);
  const [reduceMotion, setReduceMotion] = useState(false);
  const [highContrast, setHighContrast] = useState(false);
  const [largeHit, setLargeHit] = useState(false);

  // live preview on the actual document
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--kd-text-scale", (textScale / 100).toFixed(2));
    return () => r.style.removeProperty("--kd-text-scale");
  }, [textScale]);

  const ACCENTS = [
    { id: "rose",   color: "#ff4ea8", label: "سرخابی" },
    { id: "violet", color: "#9a6cff", label: "بنفش" },
    { id: "cyan",   color: "#4be3ff", label: "فیروزه" },
    { id: "gold",   color: "#f5d589", label: "طلایی" },
  ];

  return (
    <section className="kd-settings__card">
      <h3 className="kd-settings__rowtitle">تم</h3>
      <div className="kd-appear__themes">
        {[
          { id: "dark",     label: "تیره",        bg: "linear-gradient(135deg,#0a1018,#141a24)" },
          { id: "midnight", label: "نیمه‌شب",     bg: "linear-gradient(135deg,#06080d,#0a0a14)" },
          { id: "system",   label: "سیستم",       bg: "linear-gradient(135deg,#0a1018 50%,#e8e3d6 50%)" },
        ].map(t => (
          <button key={t.id} className={`kd-appear__theme ${theme === t.id ? "is-on" : ""}`} onClick={() => setTheme(t.id)}>
            <span className="kd-appear__theme-swatch" style={{ background: t.bg }} />
            <span>{t.label}</span>
            {theme === t.id && <span className="kd-appear__theme-check"><Icon name="check" size={12} stroke={3} /></span>}
          </button>
        ))}
      </div>

      <h3 className="kd-settings__rowtitle">رنگ تأکید</h3>
      <div className="kd-appear__accents">
        {ACCENTS.map(a => (
          <button key={a.id} className={`kd-appear__accent ${accent === a.id ? "is-on" : ""}`} onClick={() => setAccent(a.id)} title={a.label}>
            <span style={{ background: a.color }} />
            {accent === a.id && <Icon name="check" size={14} stroke={3} />}
          </button>
        ))}
      </div>

      <h3 className="kd-settings__rowtitle">اندازه متن — {fmtFa(textScale)}٪</h3>
      <div className="kd-appear__slider">
        <span className="kd-appear__slider-a">ا</span>
        <input type="range" min="85" max="140" step="5" value={textScale}
          onChange={e => setTextScale(parseInt(e.target.value, 10))} />
        <span className="kd-appear__slider-b">ا</span>
      </div>
      <p className="kd-appear__preview" style={{ fontSize: `${textScale / 100 * 15}px` }}>
        نمونه: «هر کوچه‌ای صبحانه‌ی خودش رو داره.»
      </p>

      <h3 className="kd-settings__rowtitle">دسترس‌پذیری</h3>
      <ToggleRow label="کاهش حرکت" sub="انیمیشن‌ها و گذارها رو کم می‌کنه" on={reduceMotion} onChange={setReduceMotion} />
      <ToggleRow label="کنتراست بالا" sub="متن و مرزها رو واضح‌تر می‌کنه" on={highContrast} onChange={setHighContrast} />
      <ToggleRow label="دکمه‌های بزرگ‌تر" sub="ناحیه‌ی لمس حداقل ۴۸ پیکسل" on={largeHit} onChange={setLargeHit} />

      <div className="kd-settings__formfoot">
        <button className="kd-btn kd-btn--primary kd-btn--md">اعمال کن</button>
      </div>
    </section>
  );
}

/* ===== Sessions & devices (P2-01) ===== */
function SessionsList() {
  const [sessions, setSessions] = useState([
    { id: "s1", device: "آیفون ۱۳", os: "iOS 17 · Safari", city: "تهران", last: "همین حالا فعاله", current: true,  icon: "profile" },
    { id: "s2", device: "لپ‌تاپ کار", os: "Windows · Chrome", city: "تهران", last: "۲ ساعت پیش", current: false, icon: "image" },
    { id: "s3", device: "تبلت خونه", os: "Android · کشوردوست", city: "کرج", last: "دیروز", current: false, icon: "image" },
    { id: "s4", device: "دستگاه ناشناس", os: "Linux · Firefox", city: "اصفهان", last: "۳ روز پیش", current: false, suspicious: true, icon: "close" },
  ]);
  const revoke = (id) => setSessions(s => s.filter(x => x.id !== id));
  const revokeAll = () => setSessions(s => s.filter(x => x.current));

  return (
    <section className="kd-settings__card">
      <p className="kd-settings__p">این لیست همه‌ی جاهاییه که الان واردی. هرکدوم رو نشناختی، خارجش کن.</p>

      <div className="kd-sessions">
        {sessions.map(s => (
          <div key={s.id} className={`kd-session ${s.current ? "is-current" : ""} ${s.suspicious ? "is-sus" : ""}`}>
            <span className="kd-session__icon"><Icon name={s.icon} size={20} stroke={1.8} /></span>
            <div className="kd-session__text">
              <strong>
                {s.device}
                {s.current && <span className="kd-session__badge">این دستگاه</span>}
                {s.suspicious && <span className="kd-session__badge kd-session__badge--sus">مشکوک</span>}
              </strong>
              <span>{s.os} · {s.city}</span>
              <span className="kd-session__last">{s.last}</span>
            </div>
            {!s.current && (
              <button className="kd-session__revoke" onClick={() => revoke(s.id)}>خروج</button>
            )}
          </div>
        ))}
      </div>

      <button className="kd-btn kd-btn--danger kd-btn--md" style={{ width: "100%", marginTop: 16 }} onClick={revokeAll}>
        خروج از همه‌ی دستگاه‌های دیگه
      </button>
    </section>
  );
}

/* ===== Help center (P1-13) ===== */
function HelpCenter() {
  const [open, setOpen] = useState(null);
  const FAQ = [
    { q: "چطوری محتوا بفرستم؟", a: "از دکمه‌ی «+» وسط نوار پایین، نوع محتوا (متن/عکس/ویدیو/صوت) رو انتخاب کن، فایلت رو بذار و یه توضیح کوتاه بنویس. تمام!" },
    { q: "امتیازها چطور کار می‌کنن؟", a: "هر کاربر می‌تونه به هر اثر ۱ تا ۵ ستاره بده. میانگین امتیازها تعیین‌کننده‌ی رتبه‌ی ماهانه‌ست." },
    { q: "جایزه‌ها رو چطور می‌گیرم؟", a: "۵ اثر برتر هر ماه انتخاب می‌شن. بعد از انتخاب، تیم ما برای هماهنگی جایزه (بیلبورد، تله‌فیلم و…) باهات تماس می‌گیره." },
    { q: "می‌تونم اثرمو حذف کنم؟", a: "بله، از صفحه‌ی هر پست، منوی سه‌نقطه → حذف. حذف نهایی و بدون بازگشته." },
    { q: "چرا اثرم رد شد؟", a: "آثار با کیفیت پایین، محتوای کپی‌شده، یا نقض قوانین جامعه رد می‌شن. دلیل دقیق توی بخش «در حال بررسی» پروفایلت نوشته می‌شه." },
    { q: "چطور حسابمو امن نگه دارم؟", a: "شماره‌ت تنها راه ورودته. دستگاه‌های ناشناس رو از بخش «دستگاه‌ها و نشست‌ها» خارج کن." },
  ];
  return (
    <section className="kd-settings__card">
      <div className="kd-help__search">
        <Icon name="search" size={16} stroke={2.2} />
        <input placeholder="دنبال چی می‌گردی؟" />
      </div>

      <h3 className="kd-settings__rowtitle">سوال‌های پرتکرار</h3>
      <div className="kd-help__faq">
        {FAQ.map((f, i) => (
          <div key={i} className={`kd-help__item ${open === i ? "is-open" : ""}`}>
            <button className="kd-help__q" onClick={() => setOpen(open === i ? null : i)}>
              <span>{f.q}</span>
              <Icon name="chevron" size={16} stroke={2.4} style={{ transform: open === i ? "rotate(-90deg)" : "rotate(90deg)" }} />
            </button>
            {open === i && <p className="kd-help__a">{f.a}</p>}
          </div>
        ))}
      </div>

      <h3 className="kd-settings__rowtitle">هنوز کمک می‌خوای؟</h3>
      <div className="kd-help__contact">
        <button className="kd-help__contact-btn"><Icon name="comment" size={18} stroke={2} /> چت با پشتیبانی</button>
        <button className="kd-help__contact-btn"><Icon name="send" size={18} stroke={2} /> ایمیل به ما</button>
      </div>
    </section>
  );
}

/* ===== About (P1-13) ===== */
function AboutPage() {
  return (
    <section className="kd-settings__card kd-about">
      <div className="kd-about__logo">
        <img src="../../assets/logo-festival.png" alt="کشوردوست" />
      </div>
      <h2 className="kd-about__name">کشوردوست</h2>
      <p className="kd-about__ver">نسخه ۱٫۲٫۰ · ساخت تیم تهران</p>
      <p className="kd-about__mission">
        کشوردوست یه جشنواره‌ی همیشگیه برای روایت ایران امروز — با متن، عکس، ویدیو و صوت.
        ما به یه فضای امن، خلاق و گرم برای صدای مردم اعتقاد داریم؛ جایی که هر کوچه و هر آدم،
        داستان خودش رو داره.
      </p>
      <div className="kd-about__links">
        <button><Icon name="trending" size={16} stroke={2} /> وب‌سایت</button>
        <button><Icon name="send" size={16} stroke={2} /> کانال خبری</button>
        <button><Icon name="profile" size={16} stroke={2} /> تیم ما</button>
      </div>
      <p className="kd-about__copy">© ۱۴۰۵ کشوردوست — همه‌ی حقوق محفوظه.</p>
    </section>
  );
}

/* ===== Legal (P1-13) ===== */
function LegalPage() {
  const [tab, setTab] = useState("terms");
  return (
    <section className="kd-settings__card">
      <div className="kd-legal__tabs">
        <button className={tab === "terms" ? "is-on" : ""} onClick={() => setTab("terms")}>شرایط استفاده</button>
        <button className={tab === "privacy" ? "is-on" : ""} onClick={() => setTab("privacy")}>حریم خصوصی</button>
        <button className={tab === "rules" ? "is-on" : ""} onClick={() => setTab("rules")}>قوانین جامعه</button>
      </div>
      <div className="kd-legal__body">
        {tab === "terms" && (
          <React.Fragment>
            <p>با استفاده از کشوردوست، می‌پذیری که محتوای ارسالی‌ت متعلق به خودته و حق نمایش اون رو به ما می‌دی.</p>
            <p>تو مسئول محتوایی هستی که می‌فرستی. محتوای غیرقانونی، کپی‌شده یا ناقض حقوق دیگران مجاز نیست.</p>
            <p>ما می‌تونیم برای حفظ سلامت جامعه، محتوای ناقض قوانین رو حذف یا حساب رو محدود کنیم.</p>
          </React.Fragment>
        )}
        {tab === "privacy" && (
          <React.Fragment>
            <p>ما فقط شماره‌ی موبایلت رو برای ورود نگه می‌داریم. هیچ‌وقت بدون اجازه‌ت اون رو به کسی نمی‌دیم.</p>
            <p>موقعیت دقیقت ذخیره نمی‌شه — فقط استانت برای پیشنهاد محتوای منطقه‌ای استفاده می‌شه.</p>
            <p>هر وقت بخوای می‌تونی داده‌هات رو صادر کنی یا حسابت رو کاملاً حذف کنی.</p>
          </React.Fragment>
        )}
        {tab === "rules" && (
          <React.Fragment>
            <p>با احترام رفتار کن. آزار، نفرت‌پراکنی و تهدید جایی توی کشوردوست نداره.</p>
            <p>محتوای واقعی و اصیل بفرست. کپی‌برداری و اطلاعات نادرست به جامعه آسیب می‌زنه.</p>
            <p>به حریم خصوصی دیگران احترام بذار — بدون اجازه، عکس یا اطلاعات کسی رو منتشر نکن.</p>
          </React.Fragment>
        )}
      </div>
      <p className="kd-legal__updated">آخرین به‌روزرسانی: فروردین ۱۴۰۵</p>
    </section>
  );
}
})();