const TOOLS = [
  { name: 'get_current_datetime', desc: '获取指定时区当前时间' },
  { name: 'calculate', desc: '精确数学计算' },
  { name: 'get_weather', desc: 'Open-Meteo 实时天气' },
  { name: 'get_exchange_rate', desc: 'Frankfurter 实时汇率' },
]

export function ConceptPanel() {
  return (
    <section className="concept-panel">
      <h2>什么是 ReAct？</h2>
      <p className="concept-lead">
        <strong>ReAct</strong> = <strong>Re</strong>asoning（推理）+ <strong>Act</strong>ing（行动）。
        大模型不再一次性猜答案，而是交替进行「思考 → 调用工具 → 观察结果 → 再思考」，直到得出可靠结论。
      </p>

      <div className="react-flow">
        <div className="flow-step">
          <span className="flow-num">1</span>
          <div>
            <strong>Thought 思考</strong>
            <p>分析问题，判断是否需要外部数据</p>
          </div>
        </div>
        <div className="flow-arrow">↓</div>
        <div className="flow-step">
          <span className="flow-num">2</span>
          <div>
            <strong>Action 行动</strong>
            <p>选择工具并传入参数（Function Calling）</p>
          </div>
        </div>
        <div className="flow-arrow">↓</div>
        <div className="flow-step">
          <span className="flow-num">3</span>
          <div>
            <strong>Observation 观察</strong>
            <p>读取工具返回的真实结果</p>
          </div>
        </div>
        <div className="flow-arrow">↓</div>
        <div className="flow-step">
          <span className="flow-num">4</span>
          <div>
            <strong>Answer 回答</strong>
            <p>综合推理链，生成最终回复</p>
          </div>
        </div>
      </div>

      <h3>本项目接入的真实工具</h3>
      <ul className="tool-list">
        {TOOLS.map((t) => (
          <li key={t.name}>
            <code>{t.name}</code>
            <span>{t.desc}</span>
          </li>
        ))}
      </ul>
    </section>
  )
}