function Rewards() {
  const { t } = useLang();
  const tiers = t.rewards.tiers;
  const [pts, setPts] = useState(520);

  // figure current tier
  const currentIdx = useMemo(() => {
    let idx = 0;
    for (let i = 0; i < tiers.length; i++) if (pts >= tiers[i].pt) idx = i;
    return idx;
  }, [pts, tiers]);

  const nextTier = tiers[currentIdx + 1];
  const prevPt = tiers[currentIdx].pt;
  const progress = nextTier
    ? ((pts - prevPt) / (nextTier.pt - prevPt)) * 100
    : 100;

  return (
    <Section id="rewards" toneNav="03 Rewards"
             eyebrow={t.rewards.eyebrow}
             title={t.rewards.title}
             sub={t.rewards.sub}>

      <div className="grid lg:grid-cols-12 gap-6">
        {/* Left — tier ladder */}
        <Card className="lg:col-span-7 p-6 md:p-8 bg-gradient-to-br from-white to-hanyang-50/40">
          <div className="flex items-center justify-between mb-8">
            <div>
              <div className="text-[11px] font-bold uppercase tracking-[0.16em] text-ink-400">{t.rewards.current}</div>
              <div className="flex items-baseline gap-2 mt-1">
                <div className="text-[28px] font-extrabold text-ink-900">{tiers[currentIdx].name}</div>
                <div className="text-[13px] font-semibold text-ink-500">· {tiers[currentIdx].en} · {tiers[currentIdx].zh}</div>
              </div>
            </div>
            <div className="text-right">
              <div className="text-[11px] font-bold uppercase tracking-[0.16em] text-ink-400">{t.rewards.point_label}</div>
              <div className="text-[28px] font-extrabold text-hanyang-700 tabular-nums">
                {pts}<span className="text-[16px] text-ink-400 ml-1">{t.rewards.point_unit}</span>
              </div>
            </div>
          </div>

          {/* Tier track */}
          <div className="relative">
            <div className="absolute top-7 left-7 right-7 h-1 bg-ink-100 rounded-full"/>
            <div
              className="absolute top-7 left-7 h-1 bg-gradient-to-r from-hanyang-600 to-gold-500 rounded-full transition-all duration-500"
              style={{ width: `calc(${(currentIdx + Math.min(1, progress/100)) / (tiers.length-1) * 100}% * (100% - 3.5rem) / 100%)` }}
            />
            <div className="grid grid-cols-4 relative">
              {tiers.map((tier, i) => {
                const reached = i <= currentIdx;
                const active = i === currentIdx;
                return (
                  <div key={i} className="flex flex-col items-center gap-2 min-w-0">
                    <TierMedal color={tier.color} size={56} glow={active}/>
                    <div className={cx('text-[12px] md:text-[13px] font-bold tracking-tight whitespace-nowrap',
                      reached ? 'text-ink-900' : 'text-ink-400')}>
                      {tier.name}
                    </div>
                    <div className="text-[10.5px] font-semibold text-ink-400 tabular-nums whitespace-nowrap">{tier.pt} {t.rewards.point_unit}</div>
                    <div className={cx('hidden md:block text-[11px] text-center leading-snug px-1',
                      reached ? 'text-ink-600' : 'text-ink-400')}>
                      {tier.perk}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {nextTier && (
            <div className="mt-8 pt-6 border-t border-ink-100">
              <div className="flex items-center justify-between text-[12px] font-semibold text-ink-500 mb-2">
                <span>{t.rewards.next} <span className="text-ink-800">{nextTier.name}</span></span>
                <span className="tabular-nums">{Math.max(0, nextTier.pt - pts)} {t.rewards.point_unit}</span>
              </div>
              <Progress value={progress}/>
            </div>
          )}

          {/* quick earn demo */}
          <div className="mt-6 flex flex-wrap gap-2">
            {t.rewards.earn.map((e, i) => (
              <button key={i}
                onClick={() => setPts(p => Math.min(2500, p + parseInt(e.pt.replace('+',''))))}
                className="group inline-flex items-center gap-2 px-3 h-9 rounded-full border border-ink-200 bg-white hover:border-gold-300 hover:bg-gold-50 transition">
                <span className="text-[12px] font-semibold text-ink-700 group-hover:text-gold-800">{e.act}</span>
                <span className="text-[11px] font-bold text-gold-600 tabular-nums">{e.pt}</span>
              </button>
            ))}
            <button onClick={() => setPts(520)}
              className="inline-flex items-center gap-1.5 px-3 h-9 rounded-full text-[12px] font-semibold text-ink-400 hover:text-ink-700">
              <IconLoop size={13}/> reset
            </button>
          </div>
        </Card>

        {/* Right — unlocked badge */}
        <Card className="lg:col-span-5 p-6 md:p-8 bg-ink-900 text-white relative overflow-hidden">
          <div aria-hidden className="absolute -right-20 -top-20 w-80 h-80 rounded-full blur-3xl opacity-40"
               style={{background:'radial-gradient(circle, rgba(207,148,23,0.6), transparent 65%)'}}/>

          <div className="relative">
            <Badge tone="gold" className="shimmer relative overflow-hidden">UNLOCKED</Badge>
            <div className="mt-6 flex items-center gap-5">
              <TierMedal color={tiers[currentIdx].color} size={76} glow/>
              <div>
                <div className="text-[24px] font-extrabold tracking-tight">{tiers[currentIdx].name}</div>
                <div className="text-[13px] text-ink-300 font-medium">
                  {tiers[currentIdx].en} · {tiers[currentIdx].zh}
                </div>
              </div>
            </div>
            <p className="mt-5 text-[14px] text-ink-200 leading-relaxed">
              {tiers[currentIdx].perk}
            </p>

            <div className="mt-6 grid grid-cols-3 gap-3">
              {tiers.map((tier, i) => {
                const reached = i <= currentIdx;
                return (
                  <div key={i} className={cx('rounded-lg p-3 border text-center',
                    reached ? 'border-gold-500/40 bg-white/5' : 'border-white/10 bg-white/[0.02] opacity-50')}>
                    <div className="mx-auto mb-1.5"><TierMedal color={tier.color} size={28}/></div>
                    <div className="text-[10.5px] font-semibold tracking-tight">{tier.name}</div>
                  </div>
                );
              }).slice(0, 3).concat(
                <div key="plat" className={cx('rounded-lg p-3 border text-center',
                  currentIdx >= 3 ? 'border-gold-500/40 bg-white/5' : 'border-white/10 bg-white/[0.02] opacity-50')}>
                  <div className="mx-auto mb-1.5"><TierMedal color="platinum" size={28}/></div>
                  <div className="text-[10.5px] font-semibold tracking-tight">{tiers[3].name}</div>
                </div>
              ).slice(0, 4)}
            </div>

            <div className="mt-6 flex items-center gap-2 text-[11.5px] text-ink-300">
              <IconShield size={14} className="text-gold-400"/>
              Earned through real contributions, verified by peers.
            </div>
          </div>
        </Card>
      </div>
    </Section>
  );
}

Object.assign(window, { Rewards });