// BusinessProgram.jsx
const bpIcons = {
  anchor: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="5" r="2" /><line x1="12" y1="22" x2="12" y2="7" /><path d="M5 12H2a10 10 0 0 0 20 0h-3" />
    </svg>
  ),
  table: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M8 21h8M12 15v6M3 3h18v6a9 9 0 0 1-18 0z" /><path d="M3 9h18" />
    </svg>
  ),
  mic: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="2" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8" />
    </svg>
  ),
  flag: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 22V4M4 4h12l-2 4 2 4H4" />
    </svg>
  ),
};
function BusinessProgram() {
  const { t } = window.useI18n();
  return (
    <section className="section section--cream-2" id="program">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.bp.eyebrow}</span>
            <h2 className="section-title">{t.bp.title}</h2>
          </div>
          <p className="section-sub">{t.bp.sub}</p>
        </div>
        <div className="bp-grid">
          {t.bp.cards.map((c, i) => (
            <div className="bp-card" key={i}>
              <div className="bp-card__icon">{bpIcons[c.icon]}</div>
              <h3>{c.title}</h3>
              <p>{c.text}</p>
              {c.tag && <div className="bp-card__tag">{c.tag}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.BusinessProgram = BusinessProgram;