// Helpful — 3 formats + «Не пишу про» block.
function Helpful({ onNav }) {
  const cards = [
    {
      num: "01",
      title: "Партнёрство Yoolip AI",
      desc: "B2B-каналы, интеграции с маркетплейс-сервисами, совместные продукты для селлеров.",
    },
    {
      num: "02",
      title: "Спикерство и медиа",
      desc: "Конференции, подкасты, журналистские запросы. Темы — про AI-продукты, соло-стартапы, YouTube.",
    },
    {
      num: "03",
      title: "Корпоративное AI-обучение",
      desc: "Точечно. Для команд, которые хотят переходить на AI-стек, а не смотреть обзоры нейросетей.",
    },
  ];

  return (
    <section id="helpful" className="section" data-screen-label="helpful">
      <div className="container">
        <div className="section__head">
          <h2 className="section__title">Чем могу быть полезен</h2>
          <div className="section__num">02 / Форматы</div>
        </div>

        <div className="helpful__grid">
          {cards.map((c) => (
            <button key={c.num} className="helpful-card"
                    onClick={()=>onNav("contact")}>
              <div className="helpful-card__num">{c.num}</div>
              <div className="helpful-card__title">{c.title}</div>
              <div className="helpful-card__desc">{c.desc}</div>
              <span className="helpful-card__cta">
                <Icon name="arrow" size={16}/> Написать
              </span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Helpful = Helpful;