const SAMPLE_QUESTIONS = [
  "我想研究中国 40-60 岁人群肥胖与睡眠时长的关系",
  "Is there a link between PM2.5 exposure and asthma hospitalization in children?",
  "老年人群的多重用药（polypharmacy）与跌倒风险",
  "COVID-19 后长新冠患者的长期心血管事件",
];

const Hero = ({ question, onQuestionChange, onGenerate, loading, statusNote, error }) => {
  return (
    <section className="mr-hero">
      <div className="mr-hero__kicker">MEDICAL DATA DISCOVERY</div>
      <h1 className="mr-hero__h1">
        同样是公开数据，<br />为什么你一直在原地绕？
      </h1>
      <p className="mr-hero__lead">
        MedRoute 不先让你逛数据目录，而是先接住你的研究问题。<br />
        输入真实问题 —— 我们给你 route、shortlist、feasibility 和 next action。
      </p>

      <div className="mr-composer">
        <div className="mr-composer__label">RESEARCH QUESTION</div>
        <textarea
          className="mr-composer__ta"
          value={question}
          onChange={(e) => onQuestionChange(e.target.value)}
          placeholder="输入你的研究问题 …"
          onKeyDown={(e) => {
            if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) onGenerate(question);
          }}
        />
        <div className="mr-composer__row">
          <span className="mr-composer__hint">
            Ctrl + Enter 提交 · 支持中英文混输 · 服务端经 MiniMax CodingPlan 代理
          </span>
          <button
            className="mr-btn mr-btn--accent"
            onClick={() => onGenerate(question)}
            disabled={loading}
          >
            {loading ? "Routing with MiniMax…" : "▷ Generate Route"}
          </button>
        </div>
        <div className="mr-composer__status">{statusNote}</div>
        {error ? <div className="mr-composer__error">{error}</div> : null}
      </div>

      <div className="mr-samples">
        <div className="mr-samples__label">TRY A SAMPLE</div>
        <div className="mr-samples__list">
          {SAMPLE_QUESTIONS.map((s, i) => (
            <button
              key={i}
              className="mr-btn mr-btn--sample"
              onClick={() => onQuestionChange(s)}
            >
              {s}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;