// Rules / 活動辦法 tabbed section
const { useState: useStateR } = React;

function Rules() {
  const [tab, setTab] = useStateR(0);
  const tabs = [
    {
      label: '活動辦法',
      title: '競賽機制',
      body: (
        <>
          <p>2026 慈善期貨交易王大賽以「期貨報酬率」作為排名依據，參賽者於活動期間內使用本人 Tellustek 證券期貨帳戶進行交易，系統將每日結算並計算累計損益報酬率。</p>
          <p>本次競賽不分組別，所有參賽者於同一排行榜競爭，力求最公平、最純粹的交易實力檢驗。</p>
          <ul className="rule-list">
            <li><span className="rn">01</span><div><strong>參賽方式：</strong>開立或已擁有 Tellustek 期貨帳戶，線上報名即可自動取得參賽資格。</div></li>
            <li><span className="rn">02</span><div><strong>計算基準：</strong>以活動期間內期貨交易損益 ÷ 期初權益數，計算累計報酬率。</div></li>
            <li><span className="rn">03</span><div><strong>期初權益：</strong>2026/04/30 收盤時的期貨保證金帳戶總權益數。未達門檻者不列入排名。</div></li>
            <li><span className="rn">04</span><div><strong>排名更新：</strong>每日 T+0 結算後更新，即時排行榜每 5 分鐘重新整理一次。</div></li>
          </ul>
        </>
      ),
      side: (
        <>
          <h4>關鍵時程</h4>
          <div className="kv"><span className="k">報名開始</span><span className="v">2026/04/01</span></div>
          <div className="kv"><span className="k">報名截止</span><span className="v">2026/04/30</span></div>
          <div className="kv"><span className="k">賽事開始</span><span className="v">2026/05/01</span></div>
          <div className="kv"><span className="k">賽事結束</span><span className="v">2026/07/31</span></div>
          <div className="kv"><span className="k">頒獎典禮</span><span className="v">2026/08/15</span></div>
          <div className="kv"><span className="k">公益捐贈公告</span><span className="v">2026/08/31</span></div>
        </>
      ),
    },
    {
      label: '參賽規則',
      title: '規則與條款',
      body: (
        <>
          <p>本競賽為公益性質，所有參賽者需遵循以下規則。任何違反規則之行為，本公司保留取消參賽資格與獎項之權利。</p>
          <ul className="rule-list">
            <li><span className="rn">01</span><div>參賽者須年滿 20 歲，並為本國納稅義務人。外籍人士須持有中華民國居留證。</div></li>
            <li><span className="rn">02</span><div>活動期間內禁止多帳號參賽、對敲交易、人頭戶等不當行為。</div></li>
            <li><span className="rn">03</span><div>僅計算國內外期貨、選擇權部位損益。股票、權證、ETF 等不列入計算。</div></li>
            <li><span className="rn">04</span><div>期初權益需達新台幣 10 萬元以上，方可進入正式排行榜。</div></li>
            <li><span className="rn">05</span><div>最終排名以主辦單位結算結果為準，參賽者不得提出異議。</div></li>
            <li><span className="rn">06</span><div>獎金將於得獎公告後 30 日內匯入得獎者指定帳戶，需依法扣繳所得稅。</div></li>
          </ul>
        </>
      ),
      side: (
        <>
          <h4>參賽資格</h4>
          <div className="kv"><span className="k">最低年齡</span><span className="v">20 歲</span></div>
          <div className="kv"><span className="k">帳戶類型</span><span className="v">期貨帳戶</span></div>
          <div className="kv"><span className="k">期初權益</span><span className="v">NT$ 100,000</span></div>
          <div className="kv"><span className="k">報名費用</span><span className="v up">免費</span></div>
          <div className="kv"><span className="k">可交易商品</span><span className="v">國內外期貨</span></div>
          <div className="kv"><span className="k">身分限制</span><span className="v">一般散戶</span></div>
        </>
      ),
    },
    {
      label: '獎項與計算',
      title: '獎金結構',
      body: (
        <>
          <p>總獎金池新台幣 300 萬元，共設 50 個得獎名額，涵蓋冠亞季軍、週冠軍、月度黑馬、以及多項特別獎，讓不同策略風格的交易者都有機會獲得肯定。</p>
          <p>除正式獎項外，本賽事另設慈善機制：活動期間產生之 <strong style={{color:'var(--gold)'}}>淨期貨手續費收入將 100% 捐贈</strong> 予合作之社福機構，與參賽者共同為社會盡一份心力。</p>
          <ul className="rule-list">
            <li><span className="rn">01</span><div><strong>冠軍獎金：</strong>新台幣 100 萬元（稅前），頒發交易王獎盃。</div></li>
            <li><span className="rn">02</span><div><strong>亞軍 / 季軍：</strong>50 萬元 / 30 萬元，獎盃乙座。</div></li>
            <li><span className="rn">03</span><div><strong>第 4–10 名：</strong>各 10 萬元現金獎金。</div></li>
            <li><span className="rn">04</span><div><strong>第 11–50 名：</strong>各 5,000 元交易手續費回饋金。</div></li>
            <li><span className="rn">05</span><div><strong>週冠軍獎：</strong>每週報酬率第一名，頒發 5,000 元。</div></li>
            <li><span className="rn">06</span><div><strong>新秀獎：</strong>首次開戶且單月報酬率前三名，各 20,000 元。</div></li>
          </ul>
        </>
      ),
      side: (
        <>
          <h4>獎金分配</h4>
          <div className="kv"><span className="k">冠軍</span><span className="v">1,000,000</span></div>
          <div className="kv"><span className="k">亞軍</span><span className="v">500,000</span></div>
          <div className="kv"><span className="k">季軍</span><span className="v">300,000</span></div>
          <div className="kv"><span className="k">4–10 名</span><span className="v">700,000</span></div>
          <div className="kv"><span className="k">11–50 名</span><span className="v">200,000</span></div>
          <div className="kv"><span className="k">週冠軍 × 13 週</span><span className="v">65,000</span></div>
          <div className="kv"><span className="k">新秀獎</span><span className="v">60,000</span></div>
          <div className="kv"><span className="k"><strong>總獎金池</strong></span><span className="v"><strong>3,000,000</strong></span></div>
        </>
      ),
    },
  ];

  return (
    <section className="rules" id="rules">
      <div className="deco">
        <div className="deco-grid-lg"></div>
        <div className="deco-orb-gold"></div>
        <div className="deco-orb-blue"></div>
        <div className="deco-glyph g1">RULES</div>
        <div className="deco-glyph g2">$</div>
      </div>
      <div className="money-layer">
        <MoneyBill size="lg" className="money-bill-1 money-float-a" />
        <MoneyBag size="lg" className="money-bag-1 money-float-c" />
        <MoneyGoldCoin size="md" className="money-coin-a money-float-b" />
      </div>
      <div className="shell">
        <div className="s-head">
          <div>
            <div className="s-label">HOW IT WORKS · 活動辦法</div>
            <h2 className="s-title">三分鐘看懂<span className="accent">大賽制度</span></h2>
          </div>
          <p className="s-sub">從競賽機制、參賽規則到獎金分配，所有資訊公開透明。您的每一筆交易都可能改寫排行榜，也能讓世界更好一些。</p>
        </div>

        <div className="tabs">
          {tabs.map((t, i) => (
            <button key={i} className={`tab ${i === tab ? 'active' : ''}`} onClick={() => setTab(i)}>
              <span className="idx">0{i+1}</span>{t.label}
            </button>
          ))}
        </div>

        <div className="tab-panel" key={tab}>
          <div className="tp-body fade-in">
            <h3>{tabs[tab].title}</h3>
            {tabs[tab].body}
          </div>
          <div className="tp-side fade-in">{tabs[tab].side}</div>
        </div>
      </div>
    </section>
  );
}