const QuickActionCard = ({ skill, onClick }) => (
  <div className="qc" style={{ color: skill.color }} onClick={() => onClick(skill.id)}>
    <div className="qc-icon" style={{ background: skill.bg, color: skill.color }}>
      <Icon name={skill.icon} size={20} strokeWidth={1.75} />
    </div>
    <div className="qc-title-en">{skill.titleEn}</div>
    <h3 className="qc-title">{skill.title}</h3>
    <p className="qc-desc">{skill.desc}</p>
    <div className="qc-cta">
      开始
      <Icon name="arrow-right" size={12} strokeWidth={2} />
    </div>
    <div className="qc-accent" />
  </div>
);

const Home = ({ onOpenSkill, variant = 'hero' }) => {
  const { SKILLS } = window.BB_DATA;
  const skills = ['quantity','quote','combined','compare'].map(k => SKILLS[k]);

  if (variant === 'split') {
    return (
      <div className="home-wrap" data-variant="split">
        <div className="split-layout">
          <div className="home-hero">
            <div className="home-eyebrow">
              <Icon name="sparkles" size={12} />
              工程决策 AI 助手
            </div>
            <h1 className="home-title">你好，今天需要处理<br/>什么工程项目？</h1>
            <p className="home-subtitle">
              上传图纸或报价单，BitBuild 会自动识别任务类型、生成工程量、审核报价，并给出专业建议。
            </p>
            <div className="home-footer-hint" style={{ justifyContent: 'flex-start', marginTop: 28 }}>
              <span><Icon name="file-text" size={12} /> 支持 PDF / Excel / 图片</span>
              <span><Icon name="shield-check" size={12} /> 数据不外传</span>
            </div>
          </div>
          <div className="card-grid">
            {skills.map(s => <QuickActionCard key={s.id} skill={s} onClick={onOpenSkill} />)}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="home-wrap">
      <div className="home-hero">
        <div className="home-eyebrow">
          <Icon name="sparkles" size={12} />
          工程决策 AI 助手
        </div>
        <h1 className="home-title">你好，今天需要处理什么工程项目？</h1>
        <p className="home-subtitle">上传文件或点击下方快捷动作卡片开始</p>
      </div>
      <div className="card-grid">
        {skills.map(s => <QuickActionCard key={s.id} skill={s} onClick={onOpenSkill} />)}
      </div>
      <div className="home-footer-hint">
        <span><Icon name="file-text" size={12} /> 支持 PDF / Excel / 图片</span>
        <span><Icon name="shield-check" size={12} /> 数据加密传输</span>
        <span><Icon name="zap" size={12} /> 平均 30 秒出结果</span>
      </div>
    </div>
  );
};

window.Home = Home;
window.QuickActionCard = QuickActionCard;