/* global React, ReactDOM, Header, Footer, CTA, Reveal, Icon, useChrome, ChromeTweaks, PageHero, TweaksPanel */
// blog.jsx — Статьи (список)

const ARTICLES = [
  ["01", "Владелец бизнеса — это профессия", "Почему управление компанией — это набор навыков, а не врождённый талант, и с чего начать им овладевать.", "6 мин", "vladelec-biznesa-professiya.html"],
  ["02", "Данные, а не мнения", "Как управленческий учёт помогает принимать решения по фактам и перестать спорить на эмоциях.", "5 мин", "dannye-ne-mneniya.html"],
  ["03", "Почему узнаваемость не приносит доход", "Разбираем, почему известность и охваты сами по себе не делают бизнес прибыльным.", "5 мин", "uznavaemost-ne-prinosit-dohod.html"],
  ["04", "Управленческий учёт: почему цифры успокаивают", "Чем управленческий учёт отличается от бухгалтерии, почему без цифр бизнес превращается в ад и с чего начать вести деньги.", "9 мин", "upravlencheskiy-uchet.html"],
  ["05", "Цель против мечты: с чего начинается стратегия", "Чем цель отличается от мечты, почему без неё не работает стратегия и как разбить большую цель на конкретные шаги.", "10 мин", "cel-i-strategiya.html"],
  ["06", "Клиенты — это актив: почему заявок мало не из-за рекламы", "Почему нехватка заявок — это симптом, а не болезнь: база как актив, скорость ответа, ИИ-ассистент и повторные продажи.", "10 мин", "baza-klientov.html"],
  ["07", "Найм и команда: как перестать быть узким горлышком", "Как вырасти с 28 до 450 человек, отдать операционку без страха и когда бизнесу нужны регламенты.", "10 мин", "naym-i-komanda.html"],
  ["08", "Кризис не убивает бизнес — владелец душит его сам", "Почему в кризис бизнесы закрываются не из-за обстоятельств, а из-за самих владельцев: контроль, законы денег и окружение.", "9 мин", "biznes-v-krizis.html"],
  ["09", "Счастье в бизнесе: если это пытка — значит, это не бизнес", "Почему предприниматель обязан быть счастлив в своём деле — и простая формула счастья, которая работает и в жизни.", "7 мин", "schaste-v-biznese.html"],
  ["10", "Мышление владельца: три роли и главная болезнь предпринимателя", "Владелец, руководитель и производитель — разные роли. Чем опасно игнорировать своё дело и что скрывается за словом «дорого».", "9 мин", "myshlenie-vladelca.html"],
  ["11", "Бизнес — это игра: почему счастье приходит до результата", "Почему бизнес должен быть игрой, счастье — это ощущение до результата, а деньги сами по себе не делают счастливым.", "8 мин", "biznes-eto-igra.html"],
];

function ArticleList() {
  return (
    <section className="page-section">
      <div className="container">
        <div className="article-list">
          {ARTICLES.map(([n, t, d, m, href]) => (
            <Reveal as="a" className="article-row" href={href} key={n}>
              <div className="ar-num">{n}</div>
              <div className="ar-main">
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
                <span className="ar-meta">{m} чтения</span>
                <span className="ar-go">{Icon.arrow({ style: { width: 20, height: 20 } })}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useChrome();
  return (
    <React.Fragment>
      <Header />
      <main>
        <PageHero
          eyebrow="Статьи"
          title="Тексты, с которых стоит начать"
          lead="Короткие, по делу. О том, как смотреть на бизнес как на профессию и принимать решения на основе данных." />
        <ArticleList />
        <CTA />
      </main>
      <Footer />
      <TweaksPanel><ChromeTweaks t={t} setTweak={setTweak} /></TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);