// FAQ accordion + footer
const { useState: useStateF } = React;

function FAQ() {
  const [open, setOpen] = useStateF(0);
  const qs = [
    { q: '報名需要費用嗎？', a: '完全免費。所有持有 Tellustek 證券期貨帳戶且符合資格的投資人皆可免費報名參加，無任何隱藏費用。' },
    { q: '尚未開戶也可以參加嗎？', a: '可以。尚未開戶者可於報名頁面直接線上開立期貨帳戶，開戶完成後系統將自動將您加入參賽名單。線上開戶約 15 分鐘完成，最快當日核准。' },
    { q: '什麼是「期初權益」？門檻如何計算？', a: '期初權益指 2026/04/30 收盤時，您期貨保證金帳戶的總權益數（含現金與有價證券抵繳）。參賽門檻為新台幣 10 萬元以上，未達門檻者將不列入正式排行榜。' },
    { q: '計算基準的「累計報酬率」如何計算？', a: '累計報酬率 = 活動期間內期貨交易損益 ÷ 期初權益數 × 100%。損益計算包含已平倉部位與活動結束日之未平倉浮動損益。' },
    { q: '可以交易所有期貨商品嗎？', a: '支援國內所有期貨交易所掛牌商品，以及已開通複委託服務之海外期貨與選擇權。股票、ETF、權證不列入損益計算。' },
    { q: '如果中途退出會被取消資格嗎？', a: '參賽過程中，您可自由掌控交易節奏，不交易亦可。但若於活動期間內關閉期貨帳戶，將視為自動棄賽。' },
    { q: '獎金是否需要課稅？', a: '依中華民國稅法規定，獎金超過 NT$ 20,010 之部分須扣繳 10% 所得稅（非居住者 20%）。主辦單位將代為扣繳，並開立扣繳憑單。' },
    { q: '公益捐贈如何運作？', a: '活動期間所有參賽者產生之「淨期貨手續費收入」（手續費總額扣除交易所規費後）將 100% 捐贈予指定社福機構，並於賽後公告捐贈證明與明細。' },
  ];

  return (
    <section className="faq" id="faq">
      <div className="deco">
        <div className="deco-dots"></div>
        <div className="deco-q">?</div>
      </div>
      <div className="money-layer">
        <MoneyBag size="lg" className="money-bag-faq money-float-a" />
        <MoneyGoldCoin size="md" className="money-coin-faq money-float-b" />
      </div>
      <div className="shell">
        <div className="s-head">
          <div>
            <div className="s-label">FREQUENTLY ASKED · 常見問題</div>
            <h2 className="s-title">關於大賽，<span className="accent">您可能想知道</span></h2>
          </div>
          <p className="s-sub">以下整理最常被詢問的 8 個問題。若仍有其他疑問，歡迎撥打客服專線 0800-555-888，或透過官方 LINE 客服即時諮詢。</p>
        </div>

        <div className="faq-grid">
          {qs.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span><span className="num">Q.{String(i+1).padStart(2,'0')}</span> {item.q}</span>
                <span className="faq-toggle">＋</span>
              </div>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="foot-cta">
          <h3>準備好成為<span className="accent">2026 期貨交易王</span>了嗎？</h3>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <button className="btn btn-gold btn-lg">立即報名 →</button>
            <button className="btn btn-ghost btn-lg">下載賽事手冊 (PDF)</button>
          </div>
        </div>

        <div className="foot-links">
          <div className="fl-col">
            <div className="brand" style={{marginBottom:12}}>
              <div className="brand-mark">T</div>
              <div className="brand-name">Tellustek 證券<small>SECURITIES</small></div>
            </div>
            <div className="fl-about">
              致力於提供專業、透明、有溫度的金融服務。本次慈善交易大賽為本公司第六屆主辦之全國性期貨競賽，歷屆累計募得公益捐款超過新台幣 8,000 萬元。
            </div>
          </div>
          <div className="fl-col">
            <h5>活動資訊</h5>
            <a>活動辦法</a>
            <a>參賽規則</a>
            <a>獎項設置</a>
            <a>排行榜</a>
          </div>
          <div className="fl-col">
            <h5>客戶服務</h5>
            <a>客服專線</a>
            <a>LINE 客服</a>
            <a>開戶諮詢</a>
            <a>FAQ</a>
          </div>
          <div className="fl-col">
            <h5>法律資訊</h5>
            <a>活動條款</a>
            <a>隱私權政策</a>
            <a>風險預告書</a>
            <a>免責聲明</a>
          </div>
        </div>

        <div className="foot-bottom">
          <div className="disc">
            © 2026 Tellustek Securities. 本活動所使用之範例資料、排行榜人名均為示意，並非真實交易紀錄。期貨交易具有高風險，投資人應自行評估風險承受能力後始進行交易。本網頁所載任何資訊均不構成投資建議或要約。
          </div>
          <div style={{display:'flex',gap:16}}>
            <span>金管證期字第1110000000號</span>
          </div>
        </div>
      </div>
    </footer>
  );
}