/* global React, ReactDOM, Header, Footer, CTA, Reveal, Icon, YT, useChrome, ChromeTweaks, PageHero, TweaksPanel */
// media.jsx — Выступления и медиа

const MSTATS = [
  ["200+", "публичных выступлений"],
  ["250", "онлайн-мероприятий в 2020–2021"],
  ["20–2000", "человек в зале"],
  ["2001–2016", "годы активной сцены"],
];

function MediaStats() {
  return (
    <section className="page-section bg-soft">
      <div className="container">
        <Reveal><span className="eyebrow">Сцена и признание</span></Reveal>
        <div className="stats-band" style={{ marginTop: 36 }}>
          {MSTATS.map(([n, l], i) => (
            <Reveal className="stat" key={l} style={{ transitionDelay: i * 70 + "ms" }}>
              <div className="num">{n}</div>
              <div className="lbl">{l}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const AWARDS = [
  ["mic", "200+ выступлений", "С 2001 по 2016 год — сотни публичных выступлений перед залами от 20 до 2000 человек."],
  ["film", "250 онлайн-эфиров", "В пандемию 2020–2021 провёл 250 онлайн-мероприятий для предпринимателей Израиля о продвижении и маркетинге."],
  ["people", "Ротари клуб", "Президент-основатель (1999) и президент (2001–2002) Ротари клуба «Ростов-на-Дону» — служение обществу и развитие сообщества.", "assets/rotary.png", "white"],
  ["target", "Медаль Пола Харриса", "Высшая награда Ротари (Paul Harris Fellow) за вклад и служение — признание заслуг на международном уровне.", "assets/phf.png", "bare"],
];

function Awards() {
  return (
    <section className="page-section">
      <div className="container">
        <div className="section-head">
          <Reveal><span className="eyebrow">Награды и признание</span></Reveal>
          <Reveal><h2>За что меня знают</h2></Reveal>
        </div>
        <div className="award-grid">
          {AWARDS.map(([ic, t, d, logo, mode], i) => (
            <Reveal className="card award-card" key={t} style={{ transitionDelay: (i % 4) * 70 + "ms" }}>
              <div className={logo ? (mode === "bare" ? "ic ic-bare" : "ic ic-logo") : "ic"}>
                {logo ? <img src={logo} alt={t} /> : Icon[ic]({})}
              </div>
              <h3>{t}</h3>
              <p>{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const TESTI = [
  ["После выступления Олега я впервые увидел свой бизнес в цифрах, а не в ощущениях. Это полностью изменило то, как я принимаю решения.", "Владелец производства", "Израиль"],
  ["Спокойно, без давления и «дожима» — и при этом по делу. Редкий случай, когда после доклада хочется не мотивации, а работы.", "Предприниматель", "участница выступления"],
];

function Testimonials() {
  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="testi-grid">
          {TESTI.map(([q, a, r], i) => (
            <Reveal key={i} style={{ transitionDelay: (i % 2) * 80 + "ms" }}>
              <div className="quote">
                <p className="quote-text">«{q}»</p>
                <div className="quote-author">{a}</div>
                <div className="quote-role">{r}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function LiveBand() {
  return (
    <section className="page-section">
      <div className="container">
        <Reveal className="live-band">
          <div className="live-time">
            <div className="d">ЧТ</div>
            <div className="t">20:00</div>
          </div>
          <div className="live-body">
            <span className="eyebrow">Сейчас · каждую неделю</span>
            <h2>Живые эфиры по четвергам</h2>
            <p>С 2021 года еженедельно провожу мастер-классы и подкасты с предпринимателями: разбираем продвижение, маркетинг и управление бизнесом — вживую и по делу.</p>
            <a className="btn btn-gold" href={YT} target="_blank" rel="noopener">{Icon.play({ style: { width: 18, height: 18 } })} Смотреть на YouTube</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Philosophy() {
  return (
    <section className="page-section">
      <div className="container">
        <Reveal className="big-quote">
          <span className="bq-mark">«</span>
          <p className="bq-text">Бизнес — это игра с понятными правилами, в которой выигрывает тот, кто знает правила и играет по ним.</p>
          <p className="bq-sub">Моя особенность в том, что я смотрю на любую часть бизнеса — продажи, маркетинг, финансы, людей — не как обычный человек, а через призму владельца бизнеса. В этом моя уникальность.</p>
          <div className="bq-author">Олег Гурари</div>
        </Reveal>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useChrome();
  return (
    <React.Fragment>
      <Header />
      <main>
        <PageHero
          eyebrow="Выступления и медиа"
          title="Более 200 выступлений и залы до 2000 человек"
          lead="С 2001 по 2016 год я выступал публично сотни раз. Здесь — о сцене, наградах и признании, и о том, что говорят те, кто меня слушал.">
          <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>
        <MediaStats />
        <Philosophy />
        <Awards />
        <LiveBand />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
      <TweaksPanel><ChromeTweaks t={t} setTweak={setTweak} /></TweaksPanel>
    </React.Fragment>
  );
}

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