/* global React, ReactDOM, Header, Footer, CTA, Reveal, Icon, YT, useChrome, ChromeTweaks, PageHero, TweaksPanel */
// about.jsx — Обо мне

function AboutIntro() {
  return (
    <section className="page-section">
      <div className="container about-intro">
        <Reveal className="about-lead">
          <span className="eyebrow">Кто я</span>
          <h2 style={{ marginTop: 14, marginBottom: 22 }}>Предприниматель, а не наёмный управленец</h2>
          <p>Меня зовут Олег Гурари. С 1988 года я занимаюсь только своим делом — никогда не работал по найму. За эти годы я создавал и развивал компании, ошибался, считал и пересчитывал, и постепенно собрал систему, которая работает.</p>
          <p>Самый показательный проект — колл-центр, который вырос с 28 до 450 сотрудников, а оборот увеличился в пятьдесят раз. Это случилось не благодаря удаче, а благодаря простым управленческим инструментам и решениям на основе данных.</p>
          <p>С 2016 года я живу в Израиле. В 2019-м основал компанию GURARI Marketing, а в 2020-м запустил YouTube-канал, где спокойно и по делу рассказываю владельцам, как управлять бизнесом и оставаться счастливым в своём деле.</p>
        </Reveal>
        <Reveal className="about-portrait" delay={120}>
          <img src="assets/portrait-chair.jpg" alt="Олег Гурари" className="parallax" data-speed="0.08" />
        </Reveal>
      </div>
    </section>
  );
}

const VALUES = [
  ["target", "Владелец — это профессия", "Управлять бизнесом можно научиться. Это набор навыков и инструментов, а не врождённый талант."],
  ["chart", "Данные, а не мнения", "Решения принимаются по цифрам и фактам. Управленческий учёт важнее интуиции и споров."],
  ["people", "Созидательное предпринимательство", "Бизнес создаёт ценность для людей. Моя цель — сообщество предпринимателей, которые строят, а не выживают."],
];

function Values() {
  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>
        <div className="grid-3">
          {VALUES.map(([ic, t, d], i) => (
            <Reveal className="card value-card" key={t} style={{ transitionDelay: (i % 3) * 80 + "ms" }}>
              <div className="ic">{Icon[ic]({})}</div>
              <h3>{t}</h3>
              <p className="text-2">{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const TIMELINE = [
  ["1988", "Начало пути", "Открываю первое дело в 22 года. С этого момента — только собственный бизнес, ни одного дня по найму."],
  ["1995", "Импорт итальянской мебели", "Основываю компанию по импорту итальянской мебели — первый бизнес-миллионник."],
  ["1997", "Неоновые вывески", "Основываю компанию по производству неоновых вывесок."],
  ["Ротари", "Президент-основатель клуба", "Президент-основатель Ротари клуба «Ростов-на-Дону». Награждён медалью Пола Харриса."],
  ["2001–2016", "Более 200 выступлений", "Выступаю публично перед аудиториями от 20 до 2000 человек — о предпринимательстве и управлении."],
  ["2006", "Крупнейший колл-центр в России", "Развиваю крупнейший в России колл-центр: с 28 до 450 сотрудников в смену, доход вырос в 50 раз."],
  ["2016", "Переезд в Израиль", "Начинаю новый этап жизни и работы в Израиле — в 50 лет."],
  ["2019", "GURARI Marketing", "Основываю компанию GURARI Marketing — со стартовым капиталом 200 $."],
  ["2020", "YouTube-канал", "Запускаю канал, чтобы помочь 1000 предпринимателям управлять делом и быть счастливыми."],
];

function TimelineSection() {
  return (
    <section className="page-section">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="eyebrow">Путь</span></Reveal>
          <Reveal><h2>От первого дела до GURARI Marketing</h2></Reveal>
        </div>
        <div className="timeline">
          {TIMELINE.map(([y, t, d], i) => (
            <Reveal className="tl-item" key={t} style={{ transitionDelay: Math.min(i, 4) * 60 + "ms" }}>
              <div className="tl-year">{y}</div>
              <div className="tl-title">{t}</div>
              <div className="tl-text">{d}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function TrustQuote() {
  return (
    <section className="page-section bg-soft">
      <div className="container">
        <Reveal className="big-quote">
          <span className="bq-mark">«</span>
          <p className="bq-text">Доверие — это когда ты ожидаешь, что человек что-то сделает, и он это делает. А когда ожидаешь, что он чего-то делать не станет, — он этого не делает.</p>
          <div className="bq-author">Олег Гурари</div>
        </Reveal>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useChrome();
  return (
    <React.Fragment>
      <Header />
      <main>
        <PageHero
          eyebrow="Обо мне · GURARI Marketing"
          title="38 лет в деле — и ни дня по найму"
          lead="Я предприниматель с 1988 года. Прошёл путь от первого небольшого дела до компании в сотни сотрудников — и убедился: владелец бизнеса это профессия, которой можно овладеть.">
          <div className="hero-btns">
            <a className="btn btn-gold" href={YT} target="_blank" rel="noopener">{Icon.play({ style: { width: 18, height: 18 } })} Смотреть на YouTube</a>
            <a className="btn btn-ghost" href={WA} target="_blank" rel="noopener">{Icon.whatsapp({ style: { width: 18, height: 18 } })} Написать мне</a>
          </div>
        </PageHero>
        <AboutIntro />
        <Values />
        <TimelineSection />
        <TrustQuote />
        <FAQ title="Частые вопросы об Олеге Гурари" items={[{q:"Кто такой Олег Гурари?",a:"Предприниматель с 1988 года и основатель маркетингового агентства GURARI Marketing в Тель-Авиве. Эксперт по управлению бизнесом с более чем 38-летним опытом."}, {q:"Какой опыт у Олега Гурари?",a:"Более 38 лет в предпринимательстве: строил и восстанавливал компании в России и Израиле, прошёл кризисы 1998 и 2008 годов, вырастил бизнес с 28 до 450 сотрудников."}, {q:"На каком языке и где работает Олег Гурари?",a:"Олег работает на русском языке и живёт в Тель-Авиве; его аудитория — русскоязычные предприниматели в Израиле."}]} />
        <CTA />
      </main>
      <Footer />
      <TweaksPanel><ChromeTweaks t={t} setTweak={setTweak} /></TweaksPanel>
    </React.Fragment>
  );
}

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