/* global React, ReactDOM, Header, Footer, CTA, Reveal, Icon, YT, useChrome, ChromeTweaks, PageHero, TweaksPanel */
// manifesto.jsx — Манифест

const BLOCKS = [
  ["01", "Что меня злит",
    ["Предпринимателей повсюду учат продавать, но почти никто не учит управлять. Владельцев заставляют верить, что успех — это удача, харизма или бесконечный «дожим».",
     "В итоге люди годами работают на износ, путают выручку с прибылью и принимают решения на эмоциях. Бизнес становится не источником свободы, а ловушкой."]],
  ["02", "Что я меняю",
    ["Я возвращаю предпринимательству статус профессии. Показываю, что у владельца есть конкретные инструменты — цели, стратегия, управленческий учёт и работа с базой.",
     "Управлять можно спокойно и системно, на основе данных, а не мнений. Без агрессивных продаж и без вечной гонки."]],
  ["03", "Во что я верю",
    ["Владелец бизнеса — это профессия, которой может овладеть каждый. Счастье в деле возможно не вопреки бизнесу, а благодаря грамотному управлению.",
     "Цифры честнее эмоций. А ясная цель и понятная стратегия стоят больше, чем любой мотивационный лозунг."]],
  ["04", "Какой мир я создаю",
    ["Сообщество созидательных предпринимателей: людей, которые строят компании, создают ценность и рабочие места — и при этом живут полной жизнью.",
     "Моя цель — помочь 1000 владельцам бизнеса управлять своим делом профессионально и чувствовать себя счастливыми."]],
];

function OriginStory() {
  return (
    <section className="page-section bg-soft">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="eyebrow">Точка отсчёта</span></Reveal>
          <Reveal><h2>Осознание, которое всё изменило</h2></Reveal>
        </div>
        <Reveal className="story">
          <p className="story-narr">В первый же день в Израиле меня позвали на завод — к станку. Я спросил: «А это обязательно?»</p>
          <div className="story-dialog">
            <div className="dlg-line">
              <span className="dlg-who">На заводе</span>
              <span className="dlg-q">— А зачем ты вообще приехал? Кем ты работал?</span>
            </div>
            <div className="dlg-line dlg-me">
              <span className="dlg-who">Олег</span>
              <span className="dlg-q">— Всю жизнь был предпринимателем, владел бизнесом…</span>
            </div>
            <div className="dlg-line dlg-key">
              <span className="dlg-who">На заводе</span>
              <span className="dlg-q">— Это понятно. А какая у тебя профессия?</span>
            </div>
          </div>
          <p className="story-concl">Тот вопрос стал переломным: владеть бизнесом — это и есть профессия. Не везение и не хобби, а ремесло, которому учатся.</p>
        </Reveal>
      </div>
    </section>
  );
}

function ManifestoBlocks() {
  return (
    <section className="page-section">
      <div className="container">
        {BLOCKS.map(([m, h, ps]) => (
          <Reveal className="manifesto-block" key={m}>
            <div className="mf-mark">{m}</div>
            <div className="mf-body">
              <h2>{h}</h2>
              {ps.map((p, i) => (<p key={i}>{p}</p>))}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function ManifestoQuote() {
  return (
    <section className="page-section bg-soft">
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal>
          <div className="quote" style={{ borderRadius: "0 22px 22px 0", padding: "40px 44px" }}>
            <p className="quote-text" style={{ fontSize: "1.6rem", lineHeight: 1.4 }}>
              «Владелец бизнеса — это профессия. И как любой профессии, ей можно научиться.»
            </p>
            <div className="quote-author">Олег Гурари</div>
            <div className="quote-role">Основатель GURARI Marketing</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useChrome();
  return (
    <React.Fragment>
      <Header />
      <main>
        <PageHero
          align="center"
          eyebrow="Манифест"
          title="«Ацмаи» — это профессия, а не лотерея"
          lead="Я хочу изменить то, как люди видят бизнес: не игра в удачу и не вечная гонка, а ремесло с понятными инструментами. Вот во что я верю и что меняю." />
        <OriginStory />
        <ManifestoBlocks />
        <ManifestoQuote />
        <CTA />
      </main>
      <Footer />
      <TweaksPanel><ChromeTweaks t={t} setTweak={setTweak} /></TweaksPanel>
    </React.Fragment>
  );
}

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