// Helm — 理財工具 hub。v1:換匯(可用)+ 股票分析/保險/房產/債券(即將推出,個人自用工具)。
(function () {
  const NS = window.HelmDesignSystem_9613a7;

  function r2(n) { return Number(n).toLocaleString("en-US", { maximumFractionDigits: 2 }); }

  function Tools({ onOpenFx, onOpenTool }) {
    const H = window.HELM;
    const soon = [
      { icon: "ph-scales", name: "債券", desc: "殖利率 · 配置" },
    ];

    return (
      <div className="screen">
        <span className="t-overline goal-intro">理財工具</span>

        {/* AI 財務教練 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("chat"); }}>
          <i className="ph ph-sparkle" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">AI 財務教練</span>
            <span className="tool-card__desc">看得到你全部財務、陪你想決定 · 教育非投資建議</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 換匯參考(可用)*/}
        <button type="button" className="tool-card" onClick={onOpenFx}>
          <i className="ph ph-currency-circle-dollar" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">換匯參考 · USD/TWD</span>
            <span className="tool-card__desc">現在換美金划不划算、便宜時多換一點 · USD + 日圓走勢與時機(點進看,非投資建議)</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 黃金價格參考 · 便宜提醒 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("gold"); }}>
          <i className="ph ph-coins" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">黃金價格 · 便宜提醒</span>
            <span className="tool-card__desc">國際金價現在偏低還偏高 · 跌到偏低區才分批撿一點(配角、非投資建議)</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 個股健檢(台股)*/}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("stock"); }}>
          <i className="ph ph-chart-line-up" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">個股健檢 · 台股</span>
            <span className="tool-card__desc">輸入代號看體質 · 紅黃綠燈 + 白話教學(非投資建議)</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 個股健檢(美股)*/}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("usstock"); }}>
          <i className="ph ph-globe-hemisphere-west" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">個股健檢 · 美股</span>
            <span className="tool-card__desc">AAPL 或「蘋果」都行 · 官方財報紅黃綠燈,刻意不慫恿交易(非投資建議)</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 流派觀察名單(美股)*/}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("usstyles"); }}>
          <i className="ph ph-list-magnifying-glass" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">流派觀察 · 美股</span>
            <span className="tool-card__desc">品質/成長/穩健/配息各挑幾檔 · 依官方財報分類(觀察學習、非推薦)</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 流派觀察名單(台股)*/}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("styles"); }}>
          <i className="ph ph-list-magnifying-glass" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">流派觀察名單 · 台股</span>
            <span className="tool-card__desc">品質/成長/價值/存股各派值得觀察的股 · 學流派、找方向</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 我的觀察清單 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("watch"); }}>
          <i className="ph ph-binoculars" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">我的觀察清單</span>
            <span className="tool-card__desc">追蹤你關注的股 · 隨時看體質變化 · 跨裝置同步</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 技術面入門(教學) */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("technical"); }}>
          <i className="ph ph-gauge" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">技術面入門</span>
            <span className="tool-card__desc">均線/KD/RSI/MACD/量能白話講解 + 風險與部位管理 · 教材非建議</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 退休 / FIRE 試算 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("fire"); }}>
          <i className="ph ph-island" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">退休 / FIRE 試算</span>
            <span className="tool-card__desc">幾歲能財務自由 · 用你的淨值與儲蓄力推算</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 報稅 / 節稅試算 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("tax"); }}>
          <i className="ph ph-receipt" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">報稅 / 節稅試算</span>
            <span className="tool-card__desc">估綜所稅 · 比標準/列舉 · 抓漏掉的扣除</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 保障規劃:時間軸 + 缺口 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("protection"); }}>
          <i className="ph ph-umbrella" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">保障規劃</span>
            <span className="tool-card__desc">保障時間軸 · 缺口試算 · 看每項保障到你幾歲</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 提前還款試算 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("prepay"); }}>
          <i className="ph ph-house-line" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">提前還款試算</span>
            <span className="tool-card__desc">多還能省多少利息 · 早幾年還完</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 核心衛星部位追蹤 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("satellite"); }}>
          <i className="ph ph-circles-three" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">核心 · 衛星部位</span>
            <span className="tool-card__desc">你的持股分核心/衛星 · 看衛星佔比與集中度提醒</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 定期定額成本 · 管道比較 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("cost"); }}>
          <i className="ph ph-coins" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">定期定額成本 · 管道比較</span>
            <span className="tool-card__desc">富邦複委託 vs 富途電匯 · 小額買美股哪個省</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 複利 / 通膨試算 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("grow"); }}>
          <i className="ph ph-trend-up" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">複利 / 通膨試算</span>
            <span className="tool-card__desc">定期定額會長多少 · 現金放著縮多少</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 房地產 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("property"); }}>
          <i className="ph ph-buildings" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">房地產</span>
            <span className="tool-card__desc">自住:淨值·負擔率·集中度 / 投資:收租划不划算</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 文件金庫 */}
        <button type="button" className="tool-card" onClick={function () { onOpenTool("docs"); }}>
          <i className="ph ph-folders" aria-hidden="true" />
          <span className="tool-card__l">
            <span className="tool-card__name">文件金庫</span>
            <span className="tool-card__desc">保單/繳費單列管 · 保額到期一目了然 · AI 也看得到</span>
          </span>
          <i className="ph ph-caret-right tool-card__chev" aria-hidden="true" />
        </button>

        {/* 即將推出 */}
        <div className="tool-soon-list">
          {soon.map(function (s) {
            return (
              <div key={s.name} className="tool-soon">
                <i className={"ph " + s.icon} aria-hidden="true" />
                <span className="tool-soon__l">
                  <span className="tool-soon__name">{s.name}</span>
                  <span className="tool-soon__desc">{s.desc}</span>
                </span>
                <span className="tool-soon__tag">即將推出</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  window.Tools = Tools;
})();