// Helm — 法說會怎麼讀(教材)。方法論改編自 Anthropic 開源 financial-services 的 Earnings Reviewer(Apache-2.0),
//   已在地化:台股沒有逐字稿文化/市場共識難取得 → 誠實改用「跟公司自己的財測比」;月營收是台股獨有先行指標。
//   靜態教材、純前端。非投資建議。
(function () {
  function Item({ n, title, children }) {
    return (
      <div style={{ display: "flex", gap: 10, marginBottom: 12 }}>
        <span className="t-num" style={{ flexShrink: 0, width: 22, height: 22, borderRadius: 11, background: "var(--surface-sunken)", color: "var(--text-secondary)", fontSize: 12.5, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }}>{n}</span>
        <div style={{ fontSize: 13.5, lineHeight: 1.65 }}>
          <b>{title}</b>
          <div style={{ color: "var(--text-secondary)", marginTop: 2 }}>{children}</div>
        </div>
      </div>
    );
  }

  function EarningsScreen({ onClose }) {
    return (
      <div className="fpage" role="dialog" aria-modal="true" aria-label="法說會怎麼讀">
        <div className="fpage__panel">
          <header className="fpage__bar">
            <button className="fpage__cancel" onClick={onClose}><i className="ph ph-arrow-left" aria-hidden="true" />返回</button>
            <span className="fpage__title">法說會怎麼讀</span>
            <span aria-hidden="true" />
          </header>
          <div className="fpage__scroll">
            <div className="fpage__body">

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">30 秒版</span></div>
                <div className="fire-desc">
                  <p>法說會是你每季「重新面試」持股的機會。重點永遠不是「賺多少」,而是三個問題:<b>①跟公司自己說過的話比,做到了沒?②為什麼?③我當初買它的理由,還成立嗎?</b></p>
                  <p style={{ color: "var(--text-tertiary)" }}>方法論改編自 Anthropic 開源的機構級分析流程,已照台股現實在地化。</p>
                </div>
              </section>

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">第 0 步 · 先防呆</span></div>
                <Item n="1" title="確認是最新一季">搜尋引擎常撈到舊法說會。先寫下今天日期,對財報/法說日期——超過 3 個月就是舊聞,別當新料讀。</Item>
                <Item n="2" title="台股獨有優勢:月營收">台股每月 10 日前公布上月營收(美股沒有)。法說會之間的空窗,月營收就是你的先行指標——連兩三個月偏離管理層說法,就是提早的警訊。</Item>
              </section>

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">看數字 · 四件事</span></div>
                <Item n="3" title="跟「公司自己的財測」比,量化寫下來">美股有分析師共識可比,台股中小型股沒有——誠實的替代:跟公司上季說過的目標比。差多少寫成「金額+百分比」,不准只寫「不錯」。</Item>
                <Item n="4" title="拆解「為什麼」">達標或沒達標,原因是哪個產品線/地區/客戶?合併報表附註本來就有分部揭露。停在「達標了」三個字,等於沒讀。</Item>
                <Item n="5" title="毛利率、營益率的趨勢與原因">是漲價、產品組合變好、成本下降,還是規模攤提?「賺更多」和「賺得更健康」是兩回事。</Item>
                <Item n="6" title="財測「舊 → 新」並排">公司調整展望時,把舊說法和新說法並排寫,再寫「為什麼變」。只抄新數字會忘記它曾經說過什麼。</Item>
              </section>

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">讀人 · 三件事</span></div>
                <Item n="7" title="這家公司的財測「前科」">它歷來是「保守說、然後超標」還是「喊很大、常跳票」?財測的可信度要用歷史驗,不是用口氣猜。</Item>
                <Item n="8" title="Q&A 裡被打太極的問題">分析師追問、管理層閃躲的那幾題,常常就是最該注意的地方。台股常只有影音回放沒有逐字稿(公開資訊觀測站可看),費工但值得。</Item>
                <Item n="9" title="沒給財測就明講「沒給」">台股很多公司常年不開財測。沒說不等於沒事,但也不准自己腦補一個——寫「公司未提供」就好。</Item>
              </section>

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">該不該續抱 · 收尾四步(核心)</span></div>
                <Item n="10" title="修正幅度門檻:5%">這季新資訊讓你對它的獲利估計變動超過 5%,就值得認真重想一次;5% 以內多半是雜訊,別自己嚇自己。</Item>
                <Item n="11" title="三角驗證">基本面方向(轉好/轉壞)× 股價已經反應了多少 × 風險報酬還划不划算——三個一起看。基本面變好但股價漲更多,不一定該加碼。</Item>
                <Item n="12" title="論點逐條覆核(最防自欺的一條)">把你當初買進的每個理由攤開,逐條標「強化/不變/減弱」並寫證據。鐵則:<b>找反面證據要跟找正面證據一樣認真</b>。</Item>
                <Item n="13" title="風險清單更新">有沒有新風險浮現?舊風險惡化還是緩解了?每季更新,而不是出事才想起來。</Item>
              </section>

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">三條誠實原則</span></div>
                <div className="fire-desc">
                  <p><b>1. 查無來源就標「未查證」</b>——每個數字要能說出從哪來;查不到就標明,不拿猜的冒充查過的。</p>
                  <p><b>2. 公司口徑是公關語言</b>——新聞稿和法說會簡報是公司「想讓你看到的樣子」,帶著懷疑心讀,去附註和數字裡找它沒強調的事。</p>
                  <p><b>3. 不用搶快</b>——搶 24 小時內做判斷是券商文化,不是你的。法說會後找個週末安靜讀完再想,比當天跟著盤面情緒做決定好得多。</p>
                </div>
              </section>

              <section className="fpage__card">
                <div className="fpage__card-head"><span className="t-overline">去哪看</span></div>
                <div className="fire-desc">
                  <p><b>台股</b>:公開資訊觀測站 → 法人說明會專區(簡報 PDF + 影音回放);月營收同站「營運概況」。</p>
                  <p><b>美股</b>:公司 IR 網站(新聞稿+逐字稿)、SEC EDGAR(正式申報)。逐字稿文化完整,比台股好讀。</p>
                  <p style={{ color: "var(--text-tertiary)" }}>搭配本 App:個股健檢看體質數字、「記下來」讓側寫隔天自動補上業務與護城河。</p>
                </div>
                <p className="t-caption" style={{ marginTop: 8 }}>教材、非投資建議;引用之方法論源自 Apache-2.0 開源專案,經在地化改編,與 Anthropic 官方無關。</p>
              </section>

            </div>
          </div>
        </div>
      </div>
    );
  }

  window.EarningsScreen = EarningsScreen;
})();