/* eslint-disable */
/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio */
const { useEffect } = React;

// ============== DATA ==============
const BENEFITS = [
  { t: "Общаться без барьеров", b: "С любым человеком на планете — на английском, французском или китайском. Без «э-э-э» и без Google Translate.", span: 2 },
  { t: "Уверенность везде", b: "В путешествиях, на работе, в учёбе. От заказа кофе до презентации на иностранном.", span: 2 },
  { t: "Сдать экзамен", b: "Cambridge (KET/PET/FCE/CAE до C2), DELF до B2, HSK 1–3 и ЕГЭ по английскому. Разбираем формат и тренируем каждую часть.", span: 2 },
  { t: "Игровой формат", b: "Интерактивные квесты и мини-викторины под твои интересы — не скучные диалоги из учебника.", span: 3 },
  { t: "Свой темп", b: "Гибкий график, занятия 45 или 60 минут, удобная платформа ProgressMe.", span: 3 },
];

const APPROACH = [
  { n: "01", h: "Персональная программа", p: "Уроки под твои цели, уровень и интересы — сериалы, работа, путешествия, экзамен. Один учебник на всех — не мой подход." },
  { n: "02", h: "Платформа ProgressMe", p: "Личный кабинет, история уроков, домашние задания и доступ к коллекции интерактивных игр — всё в одном месте." },
  { n: "03", h: "Авторские квесты", p: "Создаю уроки-игры под конкретные темы: от детектива на английском до виртуальной поездки в Париж. Учиться так — правда весело." },
  { n: "04", h: "Честный прогресс", p: "Раз в несколько недель сверяемся: что получается, что пока нет. Корректируем план, празднуем победы." },
];

const REVIEWS = [
  { q: "За пару месяцев с Таней разговорилась настолько, что обсуждаю сериалы и работу без подсказок. Английский стал частью кофе-брейка — жду урок, как новую серию любимого шоу.", n: "Мария Мамонова", r: "Консультант, блогер", img: "img/review1.jpeg", init: "ММ" },
  { q: "Всегда хотела болтать по-английски без запинок — и наконец нашла своего учителя. Уроки пролетают, будто дружеский созвон, а знания оседают крепко.", n: "Виолетта Кондратюк", r: "Студентка", img: "img/review2.jpeg", init: "ВК" },
  { q: "Думал, в аэропорту потеряюсь в трёх вывесках. За пару месяцев Таня превратила страх в «Hello, can you help me…?». Прошёл контроль, заказал такси, поболтал с баристой — всё без переводчика.", n: "Александр Воронцов", r: "Юрист", img: "img/review3.jpg", init: "АВ" },
  { q: "Учимся год. Перешла от «э-э-э» к свободным диалогам на митингах. Атмосфера дружеская, задания чёткие, прогресс измеримый. Нужно быстро вывести язык в поле — Татьяна тот самый вариант.", n: "Марианна Никитушина", r: "Предприниматель", img: "img/review4.jpeg", init: "МН" },
];

const TIERS = [
  { kicker: "Стандарт", title: "45 минут", price: "1 500", unit: "₽", note: "за урок", feat: false,
    inc: ["Персональная программа под уровень и цели", "Личный кабинет в ProgressMe", "Доступ к коллекции интерактивных игр", "Интерактивная художественная книга"] },
  { kicker: "Полный формат", title: "60 минут", price: "1 700", unit: "₽", note: "за урок", feat: true, badge: "Рекомендую",
    inc: ["Всё из стандартного тарифа", "Расширенная практика разговора", "Модули на Quizlet", "Больше времени на разбор материала"] },
];

// ============== UI ==============
function Arrow({ s = 14 }) {
  return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
}

function Nav() {
  return (
    <header className="nav">
      <div className="wrap nav__inner">
        <a href="#top" className="nav__logo">
          <span className="mark"></span>
          <span><b>SMAGLO</b></span>
        </a>
        <nav className="nav__links">
          <a href="#about">/ about</a>
          <a href="#benefits">/ lessons</a>
          <a href="#approach">/ method</a>
          <a href="#reviews">/ reviews</a>
          <a href="#pricing">/ pricing</a>
        </nav>
        <a href="https://t.me/tatiana_smaglo" target="_blank" rel="noopener" className="nav__cta">
          <span className="ring"></span>
          Trial · free
        </a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero__meta-row">
          <span className="sys">System online · индивидуальные онлайн-занятия</span>
          <span>EN · FR · ZH · v2026</span>
        </div>

        <div className="hero__grid">
          <div>
            <h1 className="hero__title">
              <span className="row">Английский,</span>
              <span className="row">французский,</span>
              <span className="row">китайский —</span>
              <span className="row"><span className="outline">под</span> <span className="gradient">твою цель.</span></span>
            </h1>
            <p className="hero__lead">
              Привет! Меня зовут Татьяна. Помогаю взрослым и подросткам заговорить на английском, французском или китайском — от нулевого уровня до Cambridge C2, DELF и HSK3.
            </p>
            <div className="hero__cta-row">
              <a href="https://t.me/tatiana_smaglo" target="_blank" rel="noopener" className="btn btn--primary">
                Записаться бесплатно <Arrow />
              </a>
              <a href="#approach" className="btn btn--ghost">Как я учу</a>
            </div>
          </div>

          <div className="hero__photo-wrap">
            <div className="hero__photo">
              <img src="img/tatiana-hero.jpg" alt="Татьяна Смагло" />
              <div className="hero__photo-overlay"></div>
              <div className="hero__photo-badge"><span className="rec"></span>LIVE · ONLINE</div>
              <div className="hero__photo-id">
                <div>
                  <div className="name">Tatiana Smaglo</div>
                  <div className="line">репетитор · переводчик</div>
                </div>
                <div>ID / 001</div>
              </div>
            </div>
            <div className="hero__stats">
              <div className="stat"><div className="v">15+</div><div className="l">Лет с языками</div></div>
              <div className="stat"><div className="v">C2</div><div className="l">Cambridge CAE</div></div>
              <div className="stat"><div className="v">3</div><div className="l">Языка · EN·FR·ZH</div></div>
            </div>
          </div>
        </div>

        <div className="ticker">
          <div className="ticker__track">
            {[0,1].map(k => (
              <span className="ticker__item" key={k}>
                <span>Hello</span><span className="dot"></span>
                <span className="hilite">English</span><span className="dot"></span>
                <span>Bonjour</span><span className="dot"></span>
                <span className="hilite">Français</span><span className="dot"></span>
                <span>你好</span><span className="dot"></span>
                <span className="hilite">中文</span><span className="dot"></span>
                <span>Cambridge · DELF · HSK</span><span className="dot"></span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHead({ id, title, aside }) {
  return (
    <div className="section-head">
      <div className="section-head__id">SEC / <b>{id}</b></div>
      <h2 className="section-head__title" dangerouslySetInnerHTML={{__html: title}} />
      <div className="section-head__aside">{aside}</div>
    </div>
  );
}

function About() {
  return (
    <section className="section" id="about">
      <div className="wrap">
        <SectionHead id="01" title="Репетитор, переводчик и просто <em>фанат</em> языков."
          aside="15+ лет с языками. Уверена: универсального метода нет — но под каждого ученика можно подобрать свой." />

        <div className="about__grid">
          <div>
            <p className="about__lead">Моя цель — чтобы ты не «учил язык», а начал на нём <em>жить.</em></p>
            <div className="about__body">
              <p>На занятиях мы говорим, играем, спорим, разбираем тексты, которые тебе правда интересны. Грамматика — только та, что нужна здесь и сейчас; лексика — под твой контекст, а не «темы про хобби и погоду из учебника».</p>
              <p>Готовлю с нуля и до продвинутого уровня, вывожу в разговор, а если нужно — доводим до сертификата. Делать это в своём темпе и в удобное время — нормально.</p>
            </div>
          </div>

          <div className="creds">
            <div className="cred"><span className="k">Cambridge</span><span className="v"><span className="tag">C2 · CAE</span>Сертификат продвинутого уровня английского</span></div>
            <div className="cred"><span className="k">DELF</span><span className="v"><span className="tag">B2</span>Сертификат по французскому языку</span></div>
            <div className="cred"><span className="k">Образование</span><span className="v">Университет Бордо-Монтень (Франция), «Филология»</span></div>
            <div className="cred"><span className="k">Готовлю к</span><span className="v">Cambridge (KET, PET, FCE, CAE), DELF, HSK 1–3, ЕГЭ по английскому</span></div>
            <div className="cred"><span className="k">Формат</span><span className="v">Индивидуальные онлайн-занятия на ProgressMe</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  return (
    <section className="section" id="benefits">
      <div className="wrap">
        <SectionHead id="02" title="Что ты получаешь, <em>занимаясь со мной.</em>"
          aside="Шесть вещей, которые обычно важны моим ученикам — и о которых они говорят уже через несколько месяцев." />

        <div className="bento">
          <div className="card card--span-3 card--live">
            <div className="card__id">— 01</div>
            <div>
              <h3 className="card__title">Общаться <em>без барьеров.</em></h3>
              <p className="card__body">С любым человеком на планете — на английском, французском или китайском. Без «э-э-э» и без Google Translate.</p>
            </div>
          </div>
          <div className="card card--span-3 card--session">
            <div className="session__chrome">
              <span className="dot r"></span><span className="dot y"></span><span className="dot g"></span>
              <span className="session__url">progressme · live-session</span>
            </div>
            <div className="session__body">
              <div className="session__wave"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
              <div className="session__lines">
                <div className="ln"><span className="sp">T:</span> How was your weekend?</div>
                <div className="ln me"><span className="sp">S:</span> I went hiking with friends!</div>
                <div className="ln"><span className="sp">T:</span> Nice! Tell me more...</div>
              </div>
              <div className="session__pill">· live · 45 min</div>
            </div>
          </div>

          <div className="card card--span-2">
            <div className="card__id">— 02</div>
            <div><h3 className="card__title">Уверенность везде</h3><p className="card__body">В путешествиях, работе, учёбе. От заказа кофе до презентации на иностранном.</p></div>
          </div>
          <div className="card card--span-2">
            <div className="card__id">— 03</div>
            <div><h3 className="card__title">Сдать <em>экзамен</em></h3><p className="card__body">Cambridge (KET/PET/FCE/CAE до C2), DELF до B2, HSK 1–3 и ЕГЭ по английскому.</p></div>
          </div>
          <div className="card card--span-2">
            <div className="card__id">— 04</div>
            <div><h3 className="card__title">Игровой формат</h3><p className="card__body">Интерактивные квесты и мини-викторины под твои интересы. Не диалоги из учебника.</p></div>
          </div>

          <div className="card card--span-3">
            <div className="card__id">— 05</div>
            <div><h3 className="card__title">Свой <em>темп.</em></h3><p className="card__body">Гибкий график, занятия 45 или 60 минут, удобная платформа ProgressMe.</p></div>
          </div>
          <div className="card card--span-3 card--feature">
            <div className="card__id">— 06</div>
            <div><h3 className="card__title">Измеримый <em>прогресс.</em></h3><p className="card__body">Понятные цели, честная обратная связь. Никакой воды и зубрёжки «на всякий случай».</p></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Approach() {
  return (
    <section className="section" id="approach">
      <div className="wrap">
        <SectionHead id="03" title="Как устроены <em>мои занятия.</em>"
          aside="Структура, без которой не обходится ни один мой ученик — и которая делает прогресс предсказуемым." />

        <div className="approach">
          {APPROACH.map(a => (
            <div className="step" key={a.n}>
              <div className="step__num">{a.n}</div>
              <div className="step__title">{a.h}</div>
              <div className="step__body">{a.p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quiz() {
  return (
    <section className="section section--tight">
      <div className="wrap">
        <div className="quiz">
          <div>
            <h3>Проверь свой <em>словарный запас</em> за 2 минуты.</h3>
            <p>Мини-викторина на английском, французском и китайском. Выбери язык и уровень — и узнай, где ты сейчас. Бесплатно, без регистрации.</p>
            <a href="https://smaglo.space/test" target="_blank" rel="noopener" className="btn btn--primary">Пройти викторину <Arrow /></a>
          </div>
          <div className="quiz__preview">
            <div className="top"><span>LEVEL · A2</span><span>03 / 10</span></div>
            <div className="bar"><span></span></div>
            <div className="word">umbrella</div>
            <div className="options">
              <div className="opt">чемодан</div>
              <div className="opt ok">зонт</div>
              <div className="opt">облако</div>
              <div className="opt">гора</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  return (
    <section className="section" id="reviews">
      <div className="wrap">
        <SectionHead id="04" title="Что говорят <em>мои ученики.</em>"
          aside="Честные отзывы — без студийных съёмок и наигранных восторгов." />
        <div className="reviews">
          {REVIEWS.map((r, i) => (
            <div className="review" key={i}>
              <div className="review__quote">{r.q}</div>
              <div className="review__author">
                <div className="review__avatar"><div>{r.init}</div></div>
                <div>
                  <div className="review__name">{r.n}</div>
                  <div className="review__role">{r.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <SectionHead id="05" title="Простые и прозрачные <em>тарифы.</em>"
          aside="Первый урок — бесплатный. Познакомимся, определим уровень, соберём план. Без обязательств." />

        <div className="pricing">
          {TIERS.map((t, i) => (
            <div className={`tier ${t.feat ? "tier--feat" : ""}`} key={i}>
              {t.badge && <div className="tier__badge">{t.badge}</div>}
              <div className="tier__kicker">{t.kicker}</div>
              <h3 className="tier__name">Занятие · <em>{t.title}</em></h3>
              <div className="tier__price">{t.price}<small>{t.unit}</small></div>
              <div className="tier__price-note">{t.note}</div>
              <ul className="tier__incl">
                {t.inc.map((x, j) => <li key={j}>{x}</li>)}
              </ul>
              <a href="https://t.me/tatiana_smaglo" target="_blank" rel="noopener" className={`btn ${t.feat ? "btn--primary" : "btn--ghost"}`}>
                Записаться <Arrow />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Final() {
  return (
    <section className="final">
      <div className="wrap">
        <h2>Заговорим <em>вместе?</em></h2>
        <p>Первый урок — бесплатный. Напиши мне в Телеграм, и мы договоримся о времени, которое подойдёт именно тебе.</p>
        <a href="https://t.me/tatiana_smaglo" target="_blank" rel="noopener" className="btn btn--primary">
          Написать в Телеграм <Arrow />
        </a>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="wrap">
      <div className="foot">
        <div>SMAGLO · 2026</div>
        <div className="foot__links">
          <a href="https://t.me/tatiana_smaglo" target="_blank" rel="noopener">Telegram</a>
          <a href="quiz.html">Quiz</a>
          <a href="#top">↑ Up</a>
        </div>
      </div>
    </footer>
  );
}

function Tweaks() {
  const [t, set] = useTweaks({ palette: "neon", mode: "dark" });
  useEffect(() => {
    if (t.palette && t.palette !== "neon") document.documentElement.setAttribute("data-palette", t.palette);
    else document.documentElement.removeAttribute("data-palette");
    if (t.mode === "light") document.documentElement.setAttribute("data-mode", "light");
    else document.documentElement.removeAttribute("data-mode");
  }, [t.palette, t.mode]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Палитра">
        <TweakRadio value={t.palette} onChange={v => set({ palette: v })} options={[
          { value: "neon", label: "Neon (пинк/циан)" },
          { value: "cyber", label: "Cyber (зелёный/пинк)" },
          { value: "sunset", label: "Sunset (оранж/жёлтый)" },
          { value: "ice", label: "Ice (бирюза/лаванда)" },
          { value: "mono", label: "Mono (ч/б)" },
        ]} />
      </TweakSection>
      <TweakSection title="Режим">
        <TweakRadio value={t.mode} onChange={v => set({ mode: v })} options={[
          { value: "dark", label: "Тёмный" },
          { value: "light", label: "Светлый" },
        ]} />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  useEffect(() => {
    const els = document.querySelectorAll(".section, .hero, .quiz, .review, .tier, .card, .step");
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.05 });
    els.forEach(el => { el.classList.add("reveal"); io.observe(el); });

    // Subtle motion trail — only appears when actually moving
    const trailLayer = document.getElementById("cursorTrail");
    let lastX = 0, lastY = 0, lastT = 0;
    const onMove = (e) => {
      const now = performance.now();
      const dx = e.clientX - lastX, dy = e.clientY - lastY;
      const dist = Math.hypot(dx, dy);
      if (now - lastT < 28 || dist < 14) return;
      lastX = e.clientX; lastY = e.clientY; lastT = now;
      if (!trailLayer) return;
      const p = document.createElement("span");
      p.className = "trail-dot";
      p.style.left = e.clientX + "px";
      p.style.top = e.clientY + "px";
      trailLayer.appendChild(p);
      setTimeout(() => p.remove(), 900);
    };
    window.addEventListener("mousemove", onMove);
    return () => {
      window.removeEventListener("mousemove", onMove);
    };
  }, []);
  return (
    <>
      <div className="cursor-trail" id="cursorTrail"></div>
      <div className="bg-mesh"></div>
      <div className="bg-grid"></div>
      <div className="bg-scan"></div>
      <Nav />
      <main>
        <Hero />
        <About />
        <Benefits />
        <Approach />
        <Quiz />
        <Reviews />
        <Pricing />
        <Final />
      </main>
      <Foot />
      <Tweaks />
    </>
  );
}

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