// Обучающий контент по ИИ — гайды по ИИ-инструментам для юристов.
// Первая карточка — «Claude Cowork для юристов» в статусе «Скоро» (locked).
// Фото кладется в assets/claude-cowork.png; пока файла нет — показывается
// аккуратный фолбэк «Introducing Claude Cowork».
(function () {
  const Lock = () => (
    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
  );

  const ITEMS = [
    {
      img: "../../assets/claude_cowork_logo-scaled.png",
      area: "ai",
      title: "Claude Cowork для юристов: полный гайд",
      excerpt: "Пошаговый разбор, как применять Claude Cowork в юридической работе — от подготовки документов и анализа практики до автоматизации рутины.",
    },
  ];

  function AiContent() {
    return (
      <section className="w-band w-band--dark" id="ai-content">
        <div className="w-inner">
          <h2 className="w-section-title">Обучающий контент по ИИ</h2>
          <p className="w-lead w-muted-dark" style={{ marginTop: 12 }}>
            Практические гайды по ИИ-инструментам для юристов.
          </p>

          <div className="w-cards" style={{ marginTop: 28 }}>
            {ITEMS.map((it, i) => (
              <article className="w-card w-card--soon" key={i} aria-disabled="true">
                <div className="w-card__cover">
                  <div className="w-cowork" aria-hidden="true">
                    <span className="w-cowork__intro">Introducing</span>
                    <span className="w-cowork__name">Claude Cowork</span>
                  </div>
                  <img src={it.img} alt="Claude Cowork"
                       onError={(e) => { e.currentTarget.style.display = "none"; }} />
                  <span className="w-soon"><Lock/> Скоро</span>
                </div>
                <div className="w-card__title">{it.title}</div>
                <p className="w-card__excerpt w-card__excerpt--locked">{it.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    );
  }
  window.AiContent = AiContent;
})();