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

// ============== WATER (hero background, v2) ==============
const WATER_VERT = `attribute vec2 aPos; varying vec2 vUv;
void main(){ vUv = aPos*0.5+0.5; gl_Position = vec4(aPos,0.0,1.0); }`;
const WATER_FRAG = `precision highp float;
varying vec2 vUv;
uniform vec2 uRes; uniform float uTime;
uniform vec3 uRipples[10];
float hash(vec2 p){ p=fract(p*vec2(123.34,345.45)); p+=dot(p,p+34.345); return fract(p.x*p.y); }
float noise(vec2 p){ vec2 i=floor(p),f=fract(p);
  float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.));
  vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }
float fbm(vec2 p){ float v=0.,a=0.5; for(int i=0;i<3;i++){ v+=a*noise(p); p*=2.0; a*=0.5; } return v; }
void main(){
  vec2 uv=vUv; float aspect=uRes.x/uRes.y; vec2 p=vec2(uv.x*aspect,uv.y);
  vec2 disp=vec2(0.0); float glow=0.0;
  for(int i=0;i<10;i++){ vec3 r=uRipples[i]; if(r.z<0.0) continue;
    float age=uTime-r.z; if(age>1.6) continue;
    vec2 rc=vec2(r.x*aspect,r.y); float d=distance(p,rc);
    float front=0.03+age*0.40;
    float band=exp(-pow((d-front)*14.0,2.0));
    float amp=smoothstep(0.0,0.12,age)*exp(-age*2.4);
    disp+=normalize(p-rc+1e-4)*band*amp*0.014;
    glow+=band*amp; }
  float t=uTime*0.06;
  vec2 q=vec2(fbm(p*3.0+t),fbm(p*3.0+vec2(5.2,1.3)-t));
  vec2 warp=p*3.0+3.0*q+disp*6.0;
  float n=fbm(warp+t*0.7);
  float caustic=pow(max(0.0,1.0-abs(0.5-n)*2.3),3.0);
  float depth=clamp((1.0-uv.y)*0.55,0.0,1.0);
  // очень тёмный приглушённый неон-градиент: пинк -> лиловый -> циан
  vec3 cPink=vec3(0.19,0.03,0.11), cLilac=vec3(0.09,0.04,0.18), cCyan=vec3(0.02,0.10,0.16);
  vec3 grad=mix(mix(cPink,cLilac,smoothstep(0.0,0.5,uv.x)),cCyan,smoothstep(0.45,1.0,uv.x));
  vec3 col=grad*mix(1.0,0.16,depth);
  float causticAmt=(1.0-depth)*0.7+0.10;
  col+=caustic*causticAmt*vec3(0.30,0.85,1.0)*0.30;
  float rays=pow(max(0.0,0.5+0.5*sin(uv.x*7.0+t*5.0)+0.32*sin(uv.x*13.0-t*3.0)),4.0)*(1.0-uv.y)*0.6;
  col+=rays*vec3(0.75,0.55,1.0)*0.10;
  // курсор: только искажение воды (disp), без свечения
  float vig=smoothstep(1.30,0.30,length(uv-0.5)); col*=mix(0.78,1.0,vig);
  gl_FragColor=vec4(col,1.0);
}`;

function WaterCanvas() {
  const ref = useRef(null);
  useEffect(() => {
    const cv = ref.current;
    if (!cv) return;
    const gl = cv.getContext("webgl") || cv.getContext("experimental-webgl");
    if (!gl) return;
    const coarse = matchMedia("(pointer:coarse)").matches || window.innerWidth < 700;
    const SCALE = coarse ? 0.5 : 0.7;
    const FT = coarse ? 42 : 33;
    const compile = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
    const prog = gl.createProgram();
    gl.attachShader(prog, compile(gl.VERTEX_SHADER, WATER_VERT));
    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, WATER_FRAG));
    gl.linkProgram(prog);
    gl.useProgram(prog);
    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
    const aPos = gl.getAttribLocation(prog, "aPos");
    gl.enableVertexAttribArray(aPos);
    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
    const uRes = gl.getUniformLocation(prog, "uRes");
    const uTime = gl.getUniformLocation(prog, "uTime");
    const uRip = gl.getUniformLocation(prog, "uRipples");
    const ripples = new Float32Array(30);
    for (let i = 0; i < 10; i++) ripples[i*3+2] = -1;
    let ri = 0;
    const addRipple = (x, y) => { ripples[ri*3]=x; ripples[ri*3+1]=y; ripples[ri*3+2]=performance.now()/1000; ri=(ri+1)%10; };
    const resize = () => {
      const w = Math.max(2, Math.floor(cv.clientWidth * SCALE));
      const h = Math.max(2, Math.floor(cv.clientHeight * SCALE));
      if (cv.width !== w || cv.height !== h) { cv.width = w; cv.height = h; gl.viewport(0,0,w,h); }
    };
    const ro = new ResizeObserver(resize); ro.observe(cv); resize();
    let lx = -1, ly = -1; const STEP = 0.03;
    const onMove = (e) => {
      const r = cv.getBoundingClientRect();
      const nx = (e.clientX - r.left) / r.width;
      const ny = 1 - (e.clientY - r.top) / r.height;
      if (nx < 0 || nx > 1 || ny < 0 || ny > 1) return;
      if (lx < 0) { lx = nx; ly = ny; return; }
      const dx = nx - lx, dy = ny - ly, dist = Math.sqrt(dx*dx + dy*dy);
      if (dist < STEP) return;
      const n = Math.min(4, Math.floor(dist / STEP));
      for (let k = 1; k <= n; k++) { const f = (k*STEP)/dist; addRipple(lx + dx*f, ly + dy*f); }
      lx += (dx*(n*STEP))/dist; ly += (dy*(n*STEP))/dist;
    };
    const onDown = (e) => {
      const r = cv.getBoundingClientRect();
      const nx = (e.clientX - r.left) / r.width;
      const ny = 1 - (e.clientY - r.top) / r.height;
      if (nx < 0 || nx > 1 || ny < 0 || ny > 1) return;
      lx = nx; ly = ny; addRipple(nx, ny);
    };
    window.addEventListener("pointermove", onMove, { passive: true });
    window.addEventListener("pointerdown", onDown, { passive: true });
    let visible = true;
    const io = new IntersectionObserver((es) => { visible = es[0].isIntersecting; }, { threshold: 0 });
    io.observe(cv);
    let raf = 0, lastDraw = 0;
    const frame = (ts) => {
      raf = requestAnimationFrame(frame);
      if (document.hidden || !visible) return;
      if (ts - lastDraw < FT) return;
      lastDraw = ts;
      gl.uniform2f(uRes, cv.width, cv.height);
      gl.uniform1f(uTime, performance.now()/1000);
      gl.uniform3fv(uRip, ripples);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    };
    raf = requestAnimationFrame(frame);
    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect(); io.disconnect();
      window.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerdown", onDown);
      const lose = gl.getExtension("WEBGL_lose_context");
      if (lose) lose.loseContext();
    };
  }, []);
  return <canvas ref={ref} aria-hidden className="hero-water" />;
}

// ============== 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 900", unit: "₽", note: "за урок", feat: false,
    inc: ["Персональная программа под уровень и цели", "Личный кабинет в ProgressMe", "Доступ к коллекции интерактивных игр", "Интерактивная художественная книга"] },
  { kicker: "Полный формат", title: "60 минут", price: "2 400", 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>Татьяна Смагло</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">
      <WaterCanvas />
      <div className="hero__veil" aria-hidden></div>
      <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 B2 и 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>

      <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>
    </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="https://smaglo.space/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); });
  }, []);
  return (
    <>
      <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 />);