/* global React, ReactDOM, Header, Footer, CTA, Reveal, Icon, YT, useChrome, ChromeTweaks, PageHero, TweaksPanel */
// videos.jsx — Видео (YouTube-хаб)

// У темы может быть прямая ссылка на конкретное видео (4-й элемент);
// без неё карточка ведёт на канал целиком.
const TOPICS = [
  ["Тема 01", "Цели и стратегия", "Куда ведёт компания и как туда дойти без иллюзий.", "https://youtu.be/oBDOLQtJI-Q"],
  ["Тема 02", "Управленческий учёт", "Деньги, прибыль и решения по цифрам, а не по ощущениям.", "https://youtu.be/jHI0HMMW1Kg"],
  ["Тема 03", "Работа с базой клиентов", "Системная работа с теми, кто уже вам доверился.", "https://youtu.be/LohaHt3HVl0"],
  ["Тема 04", "Команда и найм", "Как вырастить структуру с 28 до 450 человек.", "https://youtu.be/ONc7BjHUJjE"],
  ["Тема 05", "Мышление владельца", "Профессия, а не роль: как думать как собственник.", "https://youtu.be/O4jzcUy-uN4"],
  ["Тема 06", "Счастье в деле", "Как управлять бизнесом и при этом не выгорать.", "https://youtu.be/O4jzcUy-uN4"],
];

function VideoGrid() {
  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="video-grid">
          {TOPICS.map(([n, t, d, href], i) => (
            <Reveal as="a" className="video-card" href={href || YT} target="_blank" rel="noopener" key={t} style={{ transitionDelay: (i % 3) * 70 + "ms" }}>
              <span className="video-play">{Icon.play({ style: { width: 18, height: 18 } })}</span>
              <div className="video-num">{n}</div>
              <h3>{t}</h3>
              <p>{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useChrome();
  return (
    <React.Fragment>
      <Header />
      <main>
        <PageHero
          eyebrow="Видео · YouTube"
          title="Разборы об управлении бизнесом"
          lead="С 2020 года я веду YouTube-канал: спокойно и по делу разбираю, как управлять компанией на основе данных. Без воды и без продаж.">
          <div className="hero-btns">
            <a className="btn btn-gold" href={YT} target="_blank" rel="noopener">{Icon.yt({ style: { width: 18, height: 18 } })} Перейти на канал</a>
            <a className="btn btn-ghost" href={WA} target="_blank" rel="noopener">{Icon.whatsapp({ style: { width: 18, height: 18 } })} Написать мне</a>
          </div>
        </PageHero>
        <VideoGrid />
        <CTA />
      </main>
      <Footer />
      <TweaksPanel><ChromeTweaks t={t} setTweak={setTweak} /></TweaksPanel>
    </React.Fragment>
  );
}

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