/* global React */
(function(){

/* =============================================================
   Reward.jsx — narrative landing "حالا فرستادم چی میشه؟"
   ============================================================= */

const TIERS = [
  { num: "۱", icon: "city",      title: "تسخیر شهر",            body: "تصویرت روی ۱۰ بیلبورد شهر برای ۳ روز پشت سر هم اکران می‌شه — با اسم خودت. قهرمان شهرت می‌شی.", color: "#ff8a3d", for: "تصاویر، پوسترها، گرافیک" },
  { num: "۲", icon: "tv",        title: "ستاره رسانه ملی",     body: "برنده ماه به یه گفتگوی حرفه‌ای دعوت می‌شه — هم تو شبکه استانی، هم سراسری.",                color: "#ff4ea8", for: "ویدیو و برندگان ماهانه" },
  { num: "۳", icon: "film",      title: "تبدیل رویا به تصویر",  body: "اگه «داستانکت» امتیاز بالایی بگیره، با کمک هوش مصنوعی به یه تله‌فیلم تبدیل می‌شه.",         color: "#9a6cff", for: "داستانک" },
  { num: "۴", icon: "megaphone", title: "صدای شما شنیده می‌شه", body: "انتقادت رو مستقیم به مسئول مربوطه می‌فرستیم. پاسخش رو با انتقاد تو میکس می‌کنیم و منتشر می‌کنیم.", color: "#4be3ff", for: "انتقاد" },
  { num: "۵", icon: "carnival",  title: "جشنواره سالانه",        body: "بقیه آثار برتر هم تو نمایشگاه‌های فیزیکی و رویدادهای هنری به نمایش گذاشته می‌شن.",          color: "#44e3b8", for: "همه آثار برتر" },
];

window.Reward = function Reward() {
  return (
    <div className="kd-reward-page">
      <header className="kd-reward-page__hero">
        <span className="kd-reward-page__eyebrow">حالا فرستادم چی میشه؟</span>
        <h1 className="kd-reward-page__h">پنج راه برای دیده‌شدن</h1>
        <p className="kd-reward-page__lead">
          محتوای تو این‌جا گم نمی‌شه. کشوردوست پلی‌ست بین فضای مجازی، رسانه ملی و سطح شهر.
        </p>
      </header>

      <div className="kd-reward-tiers">
        {TIERS.map(t => (
          <article key={t.num} className="kd-reward-tier">
            <div className="kd-reward-tier__num" style={{ background: t.color }}>{t.num}</div>
            <div className="kd-reward-tier__body">
              <div className="kd-reward-tier__head">
                <span className="kd-reward-tier__icon" style={{ color: t.color }}><Icon name={t.icon} size={26} stroke={1.6} /></span>
                <h2 className="kd-reward-tier__title">{t.title}</h2>
                <Badge tone="gold" style={{ marginInlineStart: "auto" }}>{t.for}</Badge>
              </div>
              <p className="kd-reward-tier__text">{t.body}</p>
            </div>
          </article>
        ))}
      </div>

      <footer className="kd-reward-page__cta">
        <h3>آماده‌ای محتوات رو بفرستی؟</h3>
        <button className="kd-btn kd-btn--primary kd-btn--lg" onClick={() => window.dispatchEvent(new CustomEvent("kd-open-upload"))}>«چی آوردی برامون؟»</button>
      </footer>
    </div>
  );
};
})();