const QuickActionCard = ({ skill, onClick }) => {
  const { t } = window.BB_I18N.useLocale();
  return (
  <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">
      {t('home.start')}
      <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 { t, skill } = window.BB_I18N.useLocale();
  const skills = ['quantity','quote','combined','compare'].map(k => ({ ...SKILLS[k], ...skill(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} />
              {t('home.eyebrow')}
            </div>
            <h1 className="home-title">
              {t('home.splitTitle').split('\n').map((line, index) => <React.Fragment key={line}>{index > 0 && <br />}{line}</React.Fragment>)}
            </h1>
            <p className="home-subtitle">
              {t('home.splitSubtitle')}
            </p>
            <div className="home-footer-hint" style={{ justifyContent: 'flex-start', marginTop: 28 }}>
              <span><Icon name="file-text" size={12} /> {t('home.formats')}</span>
              <span><Icon name="shield-check" size={12} /> {t('home.private')}</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} />
          {t('home.eyebrow')}
        </div>
        <h1 className="home-title">{t('home.title')}</h1>
        <p className="home-subtitle">{t('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} /> {t('home.formats')}</span>
        <span><Icon name="shield-check" size={12} /> {t('home.encrypted')}</span>
        <span><Icon name="zap" size={12} /> {t('home.speed')}</span>
      </div>
    </div>
  );
};

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