/* global React, ReactDOM */
const { useState, useEffect } = React;

/* ============================================================
   Shared bits
============================================================ */

const Logo = ({ size = 26 }) => (
  <a className="logo" href="#top" aria-label="Планёрка">
    <span className="dot" aria-hidden="true"></span>
    <span className="word" style={{ fontSize: size }}>
      <span className="underline">План</span><em>ё</em>рка
    </span>
  </a>
);

const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;

/* ============================================================
   Top bar
============================================================ */

function TopBar() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const close = () => setMobileOpen(false);

  return (
    <>
      <header className={"topbar" + (scrolled ? " scrolled" : "")}>
        <div className="topbar-inner">
          <Logo />
          <nav className="nav">
            <a className="link" href="#format">Формат</a>
            <a className="link" href="#hour">Как проходит</a>
            <a className="link" href="#schedule">Расписание</a>
            <a className="link" href="#faq">Вопросы</a>
            <a className="join" href="#schedule">
              <span className="pulse" aria-hidden="true"></span>
              Присоединиться
            </a>
            <button
              className="nav-toggle"
              aria-label="Меню"
              aria-expanded={mobileOpen}
              onClick={() => setMobileOpen(v => !v)}
              style={{ display: "none" }}
            >
              <svg width="20" height="14" viewBox="0 0 20 14" fill="none" aria-hidden="true">
                <path d={mobileOpen ? "M2 2 L18 12 M2 12 L18 2" : "M0 1 H20 M0 7 H20 M0 13 H14"} stroke="currentColor" strokeWidth="1.4" />
              </svg>
            </button>
          </nav>
        </div>
      </header>
      <div className={"mobile-nav" + (mobileOpen ? " open" : "")} aria-hidden={!mobileOpen}>
        <a href="#format" onClick={close}>Формат</a>
        <a href="#hour" onClick={close}>Как проходит <em>час</em></a>
        <a href="#schedule" onClick={close}>Расписание</a>
        <a href="#faq" onClick={close}>Часто <em>спрашивают</em></a>
        <a href="#signup" onClick={close}>Вступить в <em>Telegram</em></a>
      </div>
    </>
  );
}

/* ============================================================
   Hero
============================================================ */

function Hero({ tweaks }) {
  return (
    <section className="hero" id="top">
      {tweaks.bloom && (
        <div className="ambient" aria-hidden="true">
          <div className="bloom"></div>
          <div className="bloom b2"></div>
        </div>
      )}
      <div className="wrap hero-grid">
        <div>
          <Eyebrow>Минск · офлайн и онлайн · группы 4–6 человек</Eyebrow>
          <h1>
            Твои проекты<br />
            заслуживают трёх<br />
            <em>задач в неделю.</em>
          </h1>
          <p className="hero-sub">
            Планёрка — небольшая группа, которая собирается раз в неделю: каждый участник за 20 минут
            разбирает свой проект и уходит с тремя конкретными задачами. Строишь дом, меняешь работу
            или учишься плавать — не важно. Группа — твоя внешняя совесть.
          </p>
          <div className="hero-actions">
            <a className="btn" href="https://t.me/+32TGm0tgoYQwYzIy" target="_blank" rel="noopener noreferrer">
              <span className="dot" aria-hidden="true"></span>
              Вступить в Telegram
            </a>
            <a className="link-quiet" href="#format">
              Как это устроено
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                <path d="M1 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.2" fill="none" />
              </svg>
            </a>
          </div>
          <div className="presence">
            <span className="stack" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
            <span>Группы по&nbsp;<b style={{ color: "var(--ink)", fontWeight: 500 }}>4–6&nbsp;человек</b> · каждый со своим проектом</span>
          </div>
        </div>

        <aside className="next-card" aria-labelledby="next-title">
          <div className="head">
            <span className="label" id="next-title">Ближайшая встреча</span>
          </div>
          <div className="date">
            Дата и время<br />
            <em>в Telegram-группе</em>
          </div>
          <div className="meta">
            <span>Минск</span>
            <span>офлайн / онлайн</span>
            <span>до 6 человек</span>
          </div>
          <a className="btn join" href="https://t.me/+32TGm0tgoYQwYzIy" target="_blank" rel="noopener noreferrer">
            <span className="dot" aria-hidden="true"></span>
            Вступить в Telegram
          </a>
        </aside>
      </div>
    </section>
  );
}

/* ============================================================
   What — principles
============================================================ */

const PRINCIPLES = [
  { n: "01", h: <>Твои <em>20 минут</em></>, p: "Каждый участник получает своё время. Можно думать вслух, задавать вопросы, создавать прямо во время встречи — это твоё пространство, ты управляешь им сам." },
  { n: "02", h: <>Три <em>задачи</em></>, p: "Обязательный результат каждой встречи — три задачи на неделю по одному или нескольким проектам. Помогаем разложить по СМАРТ, если нужно." },
  { n: "03", h: <>Группа <em>с разрешения</em></>, p: "Участники могут предложить помощь — но только спросив. Ты вправе остановить любого в любой момент: это твоё время и твоё право." },
  { n: "04", h: <>Для тех, кто <em>готов двигаться</em></>, p: "Планёрка даёт больше тем, кто приходит делать, а не смотреть. Чем честнее ты с собой — тем ценнее твои 20 минут для всей группы." },
];

function WhatItIs() {
  return (
    <section className="block" id="format">
      <div className="wrap">
        <div className="block-head">
          <div className="section-no">§ 01 — Формат</div>
          <div>
            <h2 className="editorial">Это не коучинг, не курс, не&nbsp;мастермайнд. <em>Это&nbsp;планёрка.</em></h2>
            <p className="lede">
              Раз в неделю небольшая группа собирается, чтобы каждый разобрал свои проекты
              и ушёл с тремя конкретными задачами. Ничего лишнего.
            </p>
          </div>
        </div>

        <div className="principles">
          {PRINCIPLES.map(pr => (
            <div className="principle" key={pr.n}>
              <div className="n">{pr.n}</div>
              <h3>{pr.h}</h3>
              <p>{pr.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Hour timeline
============================================================ */

const STAGES = [
  { t: "Старт", h: <><em>Короткий</em> сбор</>, p: "Собираемся, коротко здороваемся. Без разминок и ледоколов." },
  { t: "×4–5", h: <><em>Твои</em> 20 минут</>, p: "Каждый участник говорит о своих проектах: что двигается, что стоит, что хочется разобрать. Можно думать вслух, задавать вопросы, создавать прямо сейчас — это твоё время." },
  { t: "→", h: <>Три <em>задачи</em></>, p: "В конце своих 20 минут — формулируем три задачи на неделю. Помогаем разложить по СМАРТ." },
  { t: "⊕", h: <><em>Группа</em> по запросу</>, p: "Участники могут предложить помощь — но только спросив. Ты вправе остановить в любой момент." },
  { t: "~1:30", h: <>Конец <em>встречи</em></>, p: "Коротко закрываем. Никого не задерживаем." },
];

function Hour() {
  return (
    <section className="block" id="hour" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="block-head">
          <div className="section-no">§ 02 — Час</div>
          <div>
            <h2 className="editorial">Как проходит <em>встреча</em></h2>
            <p className="lede">
              Один и тот же ритм каждый раз. Встреча длится около 1,5 часа — по 20 минут на каждого участника.
            </p>
          </div>
        </div>

        <div className="timeline">
          <div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mute)" }}>Минск · офлайн и онлайн</div>
            <div style={{ marginTop: 16, fontFamily: "var(--serif)", fontSize: 32, lineHeight: 1.1, letterSpacing: "-0.015em" }}>~1,5 часа</div>
            <div style={{ marginTop: 14, color: "var(--ink-soft)", fontSize: 14, maxWidth: "22ch" }}>
              Из них 20 минут на участника. Остальное — старт и завершение.
            </div>
          </div>
          <div className="stages">
            {STAGES.map((s, i) => (
              <article className="stage" key={i}>
                <div className="time">{s.t}</div>
                <div className="body">
                  <h4>{s.h}</h4>
                  <p>{s.p}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Schedule
============================================================ */

function Schedule() {
  return (
    <section className="block" id="schedule" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="block-head">
          <div className="section-no">§ 03 — Расписание</div>
          <div>
            <h2 className="editorial">Ближайшие <em>встречи</em></h2>
            <p className="lede">
              Встречи проходят в Минске — офлайн в кафе или пространстве «А я Говорила»,
              иногда онлайн в Google Meet. Дата и время каждый раз согласовываются в Telegram-группе.
            </p>
          </div>
        </div>

        <div className="next-card" style={{ maxWidth: 480 }}>
          <div className="head">
            <span className="label">Хочешь попасть на следующую встречу?</span>
          </div>
          <p style={{ color: "var(--ink-soft)", fontSize: 15, marginTop: 16, marginBottom: 24 }}>
            Вступай в Telegram-группу — там анонсы, обсуждение и запись.
          </p>
          <a className="btn join" href="https://t.me/+32TGm0tgoYQwYzIy" target="_blank" rel="noopener noreferrer">
            <span className="dot" aria-hidden="true"></span>
            Вступить в Telegram
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Voices
============================================================ */

const VOICES = [
  { q: <>Это <em>первое</em> место в интернете за долгое время, где от меня ничего не хотят. Просто работаешь час, а вокруг тихо.</>, who: "Маша · приходит с осени" },
  { q: <>Я долго думал, что мне нужен «продуктивный коучинг». Оказалось, мне нужен был <em>один час тишины</em> с людьми, которым не надо ничего доказывать.</>, who: "Андрей · приходит 4 месяца" },
  { q: <>Удобно тем, что после встречи в голове остаётся не «надо ещё», а &laquo;<em>уже&nbsp;немного</em>&raquo;. Маленькая разница, но важная.</>, who: "Лена · приходит с весны" },
];

function Voices() {
  return (
    <section className="block" id="voices" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="block-head">
          <div className="section-no">§ 04 — Голоса</div>
          <div>
            <h2 className="editorial">Кто <em>приходит</em></h2>
            <p className="lede">
              Люди с самыми разными проектами и профессиями. Объединяет одно:
              есть что двигать и хочется делать это вместе с другими.
            </p>
          </div>
        </div>

        <div className="voices">
          {VOICES.map((v, i) => (
            <figure className="voice" key={i}>
              <blockquote className="quote">{v.q}</blockquote>
              <figcaption className="who">{v.who}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
============================================================ */

const FAQ = [
  { q: "Для кого это?", a: "Для всех, у кого есть проект — личный, рабочий или бизнесовый — и кто хочет двигаться по нему каждую неделю. Ограничений по профессии или сфере нет." },
  { q: <>Что считается <em>проектом?</em></>, a: "Всё, где есть внутренняя прокрастинация из-за отсутствия ясности. Научиться плавать, сменить работу, запустить сайт, устроить ребёнка в лагерь, построить дом — любой масштаб." },
  { q: "Что если я не знаю своих задач?", a: "Для этого и нужна встреча. За 20 минут разберёмся вместе и поможем сформулировать три конкретные задачи по СМАРТ." },
  { q: <>Это <em>бесплатно?</em></>, a: "Сейчас — да. В будущем появится небольшая оплата на покрытие локации. Об изменениях сообщим в Telegram-группе." },
  { q: "Встречи офлайн или онлайн?", a: "В первую очередь офлайн — в Минске, в кафе или пространстве «А я Говорила». Если не получается собраться — переходим в Google Meet." },
  { q: "Как узнать о следующей встрече?", a: "Вступить в Telegram-группу — там все анонсы и запись." },
];

function FaqItem({ q, a, n, open, onToggle }) {
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span className="n">{n}</span>
        <span>{q}</span>
        <span className="plus" aria-hidden="true"></span>
      </button>
      <div className="faq-a">
        <div>
          <p>{a}</p>
        </div>
      </div>
    </div>
  );
}

function Faq() {
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <section className="block" id="faq" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="block-head">
          <div className="section-no">§ 05 — Вопросы</div>
          <div>
            <h2 className="editorial">Часто <em>спрашивают</em></h2>
            <p className="lede">
              Короткие ответы на то, что обычно приходит в голову в первый раз.
              Если чего-то не хватает — напиши, спокойно ответим.
            </p>
          </div>
        </div>

        <div className="faq-list">
          {FAQ.map((f, i) => (
            <FaqItem
              key={i}
              n={String(i + 1).padStart(2, "0")}
              q={f.q}
              a={f.a}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Sign up
============================================================ */

function SignUp({ tweaks }) {
  return (
    <section className="block" id="signup" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="signup-block">
          {tweaks.bloom && <div className="ambient" aria-hidden="true"><div className="bloom"></div></div>}
          <div className="inner">
            <Eyebrow>Вступить в сообщество</Eyebrow>
            <h2>
              Приходи на&nbsp;<em>ближайшую встречу</em>.<br />
              Посмотришь, как тебе.
            </h2>
            <p>
              Вступай в Telegram-группу — там анонсы встреч и запись. Одно сообщение, никакого спама.
            </p>
            <a
              className="btn"
              href="https://t.me/+32TGm0tgoYQwYzIy"
              target="_blank"
              rel="noopener noreferrer"
            >
              <span className="dot" aria-hidden="true"></span>
              Вступить в Telegram
            </a>
            <div className="signup-note">никаких рассылок · никаких напоминалок · никаких продаж</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
============================================================ */

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div>
          <Logo />
          <p style={{ marginTop: 18 }}>
            Небольшая группа в Минске, где каждый раз в неделю разбирает свои проекты
            и уходит с тремя задачами.
          </p>
        </div>
        <div>
          <h5>Раздел</h5>
          <ul>
            <li><a href="#format">Формат</a></li>
            <li><a href="#hour">Как проходит</a></li>
            <li><a href="#schedule">Расписание</a></li>
            <li><a href="#faq">Вопросы</a></li>
          </ul>
        </div>
        <div>
          <h5>Контакт</h5>
          <ul>
            <li><a href="https://t.me/+32TGm0tgoYQwYzIy" target="_blank" rel="noopener noreferrer">Telegram-группа</a></li>
            <li><a href="mailto:YOUR_EMAIL">Обратная связь</a></li>
          </ul>
        </div>
        <div>
          <h5>Ведут</h5>
          <ul>
            <li>Виталий Лазута</li>
            <li>Алина Демичева</li>
          </ul>
        </div>
      </div>
      <div className="wrap">
        <div className="legal">
          <span>© Планёрка · 2026</span>
          <span>Минск</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   Tweaks
============================================================ */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper",
  "density": "spacious",
  "bloom": true,
  "lineUnderLogo": true
}/*EDITMODE-END*/;

function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Палитра">
        <TweakRadio
          label="Тон"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "paper", label: "Paper" },
            { value: "fog", label: "Fog" },
            { value: "dusk", label: "Dusk" },
            { value: "ink", label: "Ink" },
          ]}
        />
      </TweakSection>
      <TweakSection label="Композиция">
        <TweakRadio
          label="Плотность"
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "spacious", label: "Просторно" },
            { value: "compact", label: "Плотнее" },
          ]}
        />
      </TweakSection>
      <TweakSection label="Атмосфера">
        <TweakToggle
          label="Ambient bloom"
          value={tweaks.bloom}
          onChange={(v) => setTweak("bloom", v)}
        />
        <TweakToggle
          label="Линия под «План»"
          value={tweaks.lineUnderLogo}
          onChange={(v) => setTweak("lineUnderLogo", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ============================================================
   App
============================================================ */

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    document.documentElement.dataset.palette = tweaks.palette;
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.style.setProperty(
      "--logo-underline-opacity",
      tweaks.lineUnderLogo ? "0.55" : "0"
    );
  }, [tweaks]);

  return (
    <>
      <style>{`
        .logo .word .underline::after { opacity: var(--logo-underline-opacity, 0.55) !important; }
      `}</style>
      <TopBar />
      <main className="page">
        <Hero tweaks={tweaks} />
        <WhatItIs />
        <Hour />
        <Schedule />
        <Faq />
        <SignUp tweaks={tweaks} />
      </main>
      <Footer />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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