/* global React, Icon, NAV, YT, WA, Reveal */
// sections.jsx — секции главной страницы (Reveal берётся из heroes.jsx)

// ---------- полоса метрик ----------
const STATS = [
  ["38", "лет в предпринимательстве", "с 1988 года, никогда по найму"],
  ["200+", "публичных выступлений", "залы от 20 до 2000 человек"],
  ["×50", "рост оборота компании", "колл-центр с 28 до 450 человек"],
  ["1000", "предпринимателей — цель", "управлять делом и быть счастливым"],
];

function StatsBand() {
  return (
    <section className="bg-soft">
      <div className="container">
        <Reveal><span className="eyebrow">Цифры, которым доверяют</span></Reveal>
        <div className="stats-band" style={{ marginTop: 40 }}>
          {STATS.map(([n, l, s], i) => (
            <Reveal className="stat" key={l} style={{ transitionDelay: i * 80 + "ms" }}>
              <div className="num"><span className="accent-num">{n}</span></div>
              <div className="lbl">{l}</div>
              <div className="lbl sub">{s}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- тезис / манифест-тизер ----------
function Thesis() {
  return (
    <section>
      <div className="container thesis">
        <Reveal as="div" className="thesis-copy">
          <span className="eyebrow">Главная мысль</span>
          <h2>Управление на основе данных,<br />а не мнений.</h2>
          <p className="lead">
            Предпринимательство — это не дар и не удача. Это профессия с простыми
            инструментами: цели, стратегия, управленческий учёт и работа с базой
            клиентов. Я показываю, как этими инструментами пользоваться — спокойно,
            системно и без «дожима».
          </p>
          <a className="text-link" href="manifesto.html">Читать манифест {Icon.arrow({ style: { width: 18, height: 18 } })}</a>
        </Reveal>
        <Reveal as="div" className="thesis-quote">
          <div className="quote">
            <p className="quote-text">«Моя цель — помочь 1000 предпринимателям управлять бизнесом и чувствовать себя счастливыми в своём деле.»</p>
            <div className="quote-author">Олег Гурари</div>
            <div className="quote-role">Основатель GURARI Marketing</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- инструменты владельца ----------
const TOOLS = [
  ["target", "Цели", "Ясная картина, к чему идёт компания и зачем."],
  ["compass", "Стратегия", "Маршрут от точки А к точке Б без иллюзий."],
  ["chart", "Управленческий учёт", "Решения по цифрам, а не по ощущениям."],
  ["people", "Работа с базой", "Системная работа с клиентами и репутацией."],
];

function Tools() {
  return (
    <section className="bg-soft">
      <div className="container">
        <Reveal><span className="eyebrow">Инструменты владельца</span></Reveal>
        <Reveal><h2 style={{ marginTop: 16, maxWidth: 760 }}>Четыре простых инструмента, которые меняют бизнес</h2></Reveal>
        <div className="grid-2 tools-grid" style={{ marginTop: 48 }}>
          {TOOLS.map(([ic, t, d], i) => (
            <Reveal className="card tool-card" key={t} style={{ transitionDelay: (i % 2) * 90 + "ms" }}>
              <div className="ic">{Icon[ic]({})}</div>
              <h3>{t}</h3>
              <p className="text-2">{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- разделы сайта (постеры) ----------
function PosterBig({ img, eyebrow, title, desc, href, play }) {
  return (
    <Reveal as="a" className="poster poster-big" href={href}>
      <img src={img} alt="" className="poster-img" />
      <div className="poster-scrim"></div>
      {play && <div className="play-badge">{Icon.play({ style: { width: 26, height: 26 } })}</div>}
      <div className="poster-body">
        <span className="eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        <p className="text-2">{desc}</p>
        <span className="poster-go">{Icon.arrow({ style: { width: 20, height: 20 } })}</span>
      </div>
    </Reveal>
  );
}

function PosterGlass({ icon, eyebrow, title, desc, href }) {
  return (
    <Reveal as="a" className="poster poster-glass" href={href}>
      <div className="ic">{Icon[icon]({})}</div>
      <span className="eyebrow">{eyebrow}</span>
      <h3>{title}</h3>
      <p className="text-2">{desc}</p>
      <span className="poster-go">{Icon.arrow({ style: { width: 20, height: 20 } })}</span>
    </Reveal>
  );
}

function Sections() {
  return (
    <section>
      <div className="container">
        <div className="sec-head">
          <Reveal><span className="eyebrow">Разделы</span></Reveal>
          <Reveal><h2 style={{ marginTop: 14 }}>С чего начать знакомство</h2></Reveal>
        </div>
        <div className="poster-feature" style={{ marginTop: 48 }}>
          <PosterBig
            img="assets/portrait-chair2.jpg"
            eyebrow="Обо мне"
            title="Путь длиною в 38 лет"
            desc="От первого дела в 1988-м до GURARI Marketing в Израиле. Ценности, принципы, биография."
            href="about.html"
          />
          <PosterBig
            img="assets/portrait-smoke.jpg"
            eyebrow="Видео"
            title="YouTube-канал"
            desc="Шесть тем об управлении бизнесом. Без воды и продаж — только по делу."
            href="videos.html"
            play
          />
        </div>
        <div className="grid-2 poster-row" style={{ marginTop: 26 }}>
          <PosterGlass icon="flag" eyebrow="Манифест" title="Во что я верю" desc="Что меня злит, что я меняю и какой мир созидательных предпринимателей строю." href="manifesto.html" />
          <PosterGlass icon="doc" eyebrow="Статьи" title="Три ключевых текста" desc="Профессия владельца, данные вместо мнений, почему узнаваемость ≠ доход." href="blog.html" />
          <PosterGlass icon="mic" eyebrow="Выступления и медиа" title="200+ выступлений" desc="Залы до 2000 человек, награды и признание. Медаль Пола Харриса, Ротари." href="media.html" />
          <PosterGlass icon="mail" eyebrow="Контакты" title="Написать мне" desc="Подпишитесь на YouTube или напишите напрямую — отвечаю лично." href="contact.html" />
        </div>
      </div>
    </section>
  );
}

// ---------- CTA-блок ----------
function CTA() {
  return (
    <section>
      <div className="container">
        <Reveal as="div" className="cta-band">
          <span className="eyebrow">Присоединяйтесь</span>
          <h2 style={{ marginTop: 16, maxWidth: 720, marginInline: "auto" }}>
            Управляйте бизнесом как профессионал
          </h2>
          <p className="lead" style={{ maxWidth: 600, margin: "20px auto 0" }}>
            Смотрите разборы на YouTube или напишите мне — обсудим вашу ситуацию спокойно и по делу.
          </p>
          <div className="cta-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-dark" href={WA} target="_blank" rel="noopener">
              {Icon.whatsapp({ style: { width: 18, height: 18 } })} Написать мне
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- футер ----------
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div>
          <div className="footer-brand">
            <span className="logo-badge sm"><img src="assets/lion.png" alt="" /></span>
            <span className="logo-word">OLEG&nbsp;GUR<b>ARI</b></span>
          </div>
          <p className="text-2" style={{ marginTop: 18, maxWidth: 320 }}>
            Профессиональный владелец бизнеса. Эксперт и лидер мнений в управлении компанией.
          </p>
        </div>
        <div>
          <div className="footer-h">Разделы</div>
          <ul className="footer-links">
            {NAV.map(([t, h]) => (<li key={t}><a href={h}>{t}</a></li>))}
          </ul>
        </div>
        <div>
          <div className="footer-h">Следите за мной</div>
          <ul className="footer-links">
            <li><a href={YT} target="_blank" rel="noopener">YouTube-канал</a></li>
            <li><a href={WA} target="_blank" rel="noopener">Написать мне</a></li>
          </ul>
        </div>
        <div>
          <div className="footer-h">Контакты</div>
          <ul className="footer-links">
            <li>Тель-Авив – Яффо, Израиль</li>
            <li><a href="mailto:oleg@oleggurari.co.il">oleg@oleggurari.co.il</a></li>
            <li><a href={WA} target="_blank" rel="noopener" dir="ltr">+972 55-923-5215</a></li>
          </ul>
        </div>
      </div>
      <div className="container footer-bottom">
        <span className="muted">© {new Date().getFullYear()} Олег Гурари, основатель GURARI Marketing</span>
        <span className="muted">Израиль</span>
      </div>
    </footer>
  );
}

Object.assign(window, { StatsBand, Thesis, Tools, Sections, CTA, Footer });