// Глубина · анимированный прототип
// Эстетика «погружения»: текст всплывает из глубины, аватар пускает сонар-волну,
// секции проявляются на скролле, фон живёт медленными течениями.

const GA_CSS = `
@keyframes ga-current-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  50%      { transform: translate(8%, -4%) scale(1.08); opacity: 0.5; }
}
@keyframes ga-current-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
  50%      { transform: translate(-6%, 5%) scale(1.12); opacity: 0.4; }
}
@keyframes ga-current-3 {
  0%, 100% { transform: translate(0, 0) scale(1.05); opacity: 0.18; }
  50%      { transform: translate(4%, -8%) scale(1.18); opacity: 0.28; }
}
@keyframes ga-particle {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120vh) translateX(var(--drift, 8px)); opacity: 0; }
}
@keyframes ga-sonar {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes ga-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--ga-accent-glow), 0 14px 38px -10px var(--ga-accent-strong); }
  50%      { box-shadow: 0 0 0 18px transparent, 0 14px 50px -8px var(--ga-accent-strong); }
}
@keyframes ga-rise {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); letter-spacing: 0.04em; }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: 0; }
}
@keyframes ga-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ga-fade-slide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ga-rule-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ga-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes ga-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* Reveal — controlled by JS adding .ga-in to .ga-reveal */
.ga-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ga-reveal.ga-in {
  opacity: 1;
  transform: translateY(0);
}
.ga-reveal-slow {
  transition-duration: 1.2s;
}

.ga-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ga-stagger.ga-in > * {
  opacity: 1;
  transform: translateY(0);
}
.ga-stagger.ga-in > *:nth-child(1) { transition-delay: 0.05s; }
.ga-stagger.ga-in > *:nth-child(2) { transition-delay: 0.15s; }
.ga-stagger.ga-in > *:nth-child(3) { transition-delay: 0.25s; }
.ga-stagger.ga-in > *:nth-child(4) { transition-delay: 0.35s; }
.ga-stagger.ga-in > *:nth-child(5) { transition-delay: 0.45s; }
.ga-stagger.ga-in > *:nth-child(6) { transition-delay: 0.55s; }
.ga-stagger.ga-in > *:nth-child(7) { transition-delay: 0.65s; }

@media (prefers-reduced-motion: reduce) {
  .ga-reveal, .ga-stagger > * { opacity: 1; transform: none; transition: none; }
  *[style*="animation"] { animation: none !important; }
}
`;

// ───────────────────────────────────── Reveal hook (scroll-triggered)
function useReveal(rootRef) {
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const items = root.querySelectorAll('.ga-reveal, .ga-stagger');
    if (!('IntersectionObserver' in window)) {
      items.forEach(el => el.classList.add('ga-in'));
      return;
    }
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('ga-in');
          io.unobserve(e.target);
        }
      });
    }, { root, rootMargin: '0px 0px -10% 0px', threshold: 0.05 });
    items.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [rootRef]);
}

// ───────────────────────────────────── Living backdrop
function GAAnimatedBackdrop({ t }) {
  // Generate stable particle positions
  const particles = React.useMemo(() => {
    return Array.from({ length: 14 }).map((_, i) => ({
      left: (i * 7.3 + 3) % 100,
      size: 1 + ((i * 37) % 3),
      delay: (i * 1.7) % 16,
      duration: 16 + ((i * 5) % 14),
      drift: ((i * 11) % 24) - 12,
      opacity: 0.3 + ((i * 13) % 60) / 100,
    }));
  }, []);

  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      background: `radial-gradient(ellipse at top, ${t.lift}88, ${t.deep} 60%, #000 120%)`,
    }}>
      {/* Slow drifting currents */}
      <div style={{
        position: 'absolute', top: '-20%', left: '-20%', width: '80%', height: '80%',
        background: `radial-gradient(circle, ${t.accent}28, transparent 60%)`,
        filter: 'blur(60px)',
        animation: 'ga-current-1 22s ease-in-out infinite',
      }} />
      <div style={{
        position: 'absolute', bottom: '-30%', right: '-25%', width: '90%', height: '90%',
        background: `radial-gradient(circle, ${t.accent}1a, transparent 65%)`,
        filter: 'blur(80px)',
        animation: 'ga-current-2 28s ease-in-out infinite',
      }} />
      <div style={{
        position: 'absolute', top: '40%', left: '30%', width: '60%', height: '60%',
        background: `radial-gradient(circle, ${t.accent}14, transparent 70%)`,
        filter: 'blur(70px)',
        animation: 'ga-current-3 34s ease-in-out infinite',
      }} />

      {/* Vertical depth lines */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.06 }}>
        <defs>
          <pattern id="ga-depth" x="0" y="0" width="42" height="42" patternUnits="userSpaceOnUse">
            <path d="M0 0V42M21 0V42" stroke={t.accent} strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#ga-depth)" />
      </svg>

      {/* Rising particles */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {particles.map((p, i) => (
          <div key={i} style={{
            position: 'absolute',
            bottom: '-10%',
            left: `${p.left}%`,
            width: p.size, height: p.size,
            borderRadius: '50%',
            background: t.accent,
            opacity: p.opacity,
            boxShadow: `0 0 ${p.size * 3}px ${t.accent}`,
            animation: `ga-particle ${p.duration}s linear infinite`,
            animationDelay: `${p.delay}s`,
            '--drift': `${p.drift}px`,
          }} />
        ))}
      </div>

      {/* Vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at center, transparent 40%, ${t.deep}aa 90%, ${t.deep} 100%)`,
        pointerEvents: 'none',
      }} />
    </div>
  );
}

// ───────────────────────────────────── Animated hero name (letter rise)
function GAHeroName({ first, last, t, wide }) {
  const letters = (text) => [...text].map((ch, i) => (
    <span key={i} style={{
      display: 'inline-block',
      opacity: 0,
      filter: 'blur(8px)',
      transform: 'translateY(20px)',
      animation: `ga-rise 0.9s cubic-bezier(0.2,0.7,0.2,1) forwards`,
      animationDelay: `${0.4 + i * 0.06}s`,
    }}>{ch === ' ' ? '\u00A0' : ch}</span>
  ));
  return (
    <h1 style={{
      margin: '12px 0 0', fontFamily: THEME_FONTS.serif,
      fontSize: wide ? 64 : 48, fontWeight: 500,
      letterSpacing: '-0.02em', lineHeight: 0.95, color: t.ink,
    }}>
      <span style={{ display: 'block' }}>{letters(first)}</span>
      <em style={{ color: t.accent, fontStyle: 'italic', display: 'block' }}>{letters(last)}</em>
    </h1>
  );
}

// ───────────────────────────────────── Animated avatar (sonar pulse + mandala)
function GAAvatar({ size = 120, t }) {
  return (
    <div style={{
      position: 'relative', width: size, height: size,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* Mandala behind */}
      <div style={{
        position: 'absolute', inset: -size * 0.7,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none',
      }}>
        <GlubinaMandala variant="compass" size={size * 2.4} opacity={0.22} spin spinDuration={120} strokeWidth={0.5} />
      </div>
      <div style={{
        position: 'absolute', inset: -size * 0.35,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none',
      }}>
        <GlubinaMandala variant="lotus" size={size * 1.7} opacity={0.32} spin spinDuration={90} strokeWidth={0.6} />
      </div>

      {/* Sonar rings */}
      {[0, 1.2, 2.4].map((delay, i) => (
        <div key={i} style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          border: `1px solid ${t.accent}`,
          animation: 'ga-sonar 3.6s ease-out infinite',
          animationDelay: `${delay}s`,
        }} />
      ))}
      {/* Static rings */}
      <div style={{
        position: 'absolute', inset: -6, borderRadius: '50%',
        border: `1px solid ${t.accent}30`,
      }} />
      <div style={{
        position: 'absolute', inset: -14, borderRadius: '50%',
        border: `1px solid ${t.accent}18`,
      }} />
      {/* Disc */}
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: `linear-gradient(160deg, ${t.lift}, ${t.deep})`,
        border: `1px solid ${t.accent}55`,
        boxShadow: `inset 0 0 30px ${t.accent}22, 0 12px 40px -10px ${t.accent}55`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative', overflow: 'hidden', zIndex: 2,
      }}>
        {/* Initials */}
        <div style={{
          fontFamily: THEME_FONTS.serif, fontSize: size * 0.4,
          fontStyle: 'italic', color: t.accent,
          letterSpacing: '-0.04em',
        }}>и<span style={{ color: t.ink, fontStyle: 'normal', fontSize: size * 0.18, verticalAlign: 'top', marginLeft: 2 }}>•</span>о</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────── Animated CTA (lighthouse pulse)
function GAPrimaryCTA({ label, sub, t, onClick }) {
  return (
    <button onClick={onClick} style={{
      '--ga-accent-glow': `${t.accent}55`,
      '--ga-accent-strong': `${t.accent}aa`,
      width: '100%', maxWidth: 420, padding: '18px 18px', borderRadius: 16,
      border: `1px solid ${t.accent}`,
      background: `linear-gradient(180deg, ${t.accent}, ${t.accentDim})`,
      color: t.deep, fontFamily: THEME_FONTS.sans, fontWeight: 600,
      fontSize: 15.5, letterSpacing: '0.01em',
      cursor: 'pointer', position: 'relative', overflow: 'hidden',
      animation: 'ga-pulse-glow 3.4s ease-in-out infinite',
    }}>
      {/* Shimmer */}
      <span style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%)`,
        backgroundSize: '200% 100%',
        animation: 'ga-shimmer 5s ease-in-out infinite',
        mixBlendMode: 'overlay',
      }} />
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {label}
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14"/><path d="m13 6 6 6-6 6"/>
          </svg>
        </div>
        {sub && <div style={{ fontSize: 10.5, opacity: 0.75, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>{sub}</div>}
      </div>
    </button>
  );
}

// ───────────────────────────────────── Depth indicator (scroll meter)
function GADepthMeter({ scrollRef, t }) {
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      const max = el.scrollHeight - el.clientHeight;
      setPct(max <= 0 ? 0 : Math.min(1, el.scrollTop / max));
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => el.removeEventListener('scroll', onScroll);
  }, [scrollRef]);

  const depth = Math.round(pct * 100);
  return (
    <div style={{
      position: 'absolute', top: '50%', right: 12, transform: 'translateY(-50%)',
      zIndex: 5, pointerEvents: 'none',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        fontSize: 9, letterSpacing: '0.3em', color: t.accent,
        fontFamily: THEME_FONTS.sans, fontWeight: 600,
        writingMode: 'vertical-rl', transform: 'rotate(180deg)',
      }}>ГЛУБИНА</div>
      <div style={{
        width: 2, height: 90, borderRadius: 2,
        background: `${t.accent}22`, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0,
          height: `${pct * 100}%`,
          background: `linear-gradient(180deg, ${t.accent}, ${t.accentDim})`,
          transition: 'height 0.2s linear',
          boxShadow: `0 0 8px ${t.accent}`,
        }} />
      </div>
      <div style={{
        fontFamily: THEME_FONTS.serif, fontSize: 13,
        color: t.accent, fontStyle: 'italic',
        minWidth: 26, textAlign: 'center',
      }}>{depth}%</div>
    </div>
  );
}

// ───────────────────────────────────── Pillar card (offering)
function GAPillar({ num, title, sub, t, accent }) {
  return (
    <div className="ga-reveal" style={{
      padding: '20px 18px', borderRadius: 14,
      border: `1px solid ${accent ? t.accent : t.rule}`,
      background: accent
        ? `linear-gradient(135deg, ${t.accent}20, ${t.deep}99)`
        : `linear-gradient(180deg, ${t.lift}88, ${t.deep}88)`,
      display: 'flex', gap: 14, alignItems: 'flex-start',
      position: 'relative', overflow: 'hidden',
      transition: 'transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s, background 0.3s',
      cursor: 'pointer',
    }}
    onMouseEnter={e => {
      e.currentTarget.style.transform = 'translateX(4px)';
      e.currentTarget.style.borderColor = t.accent;
    }}
    onMouseLeave={e => {
      e.currentTarget.style.transform = 'none';
      e.currentTarget.style.borderColor = accent ? t.accent : t.rule;
    }}>
      <div style={{
        fontFamily: THEME_FONTS.serif, fontSize: 32, fontStyle: 'italic',
        color: t.accent, fontWeight: 500, lineHeight: 0.9,
        letterSpacing: '-0.03em', flexShrink: 0, opacity: 0.6,
      }}>{num}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: THEME_FONTS.serif, fontSize: 18, fontWeight: 500,
          color: t.ink, lineHeight: 1.2, letterSpacing: '-0.005em',
        }}>{title}</div>
        <div style={{ fontSize: 12.5, color: t.mist, marginTop: 5, lineHeight: 1.5 }}>{sub}</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────── Main animated landing
function GlubinaAnimated({ theme = 'gold', onCTA }) {
  const t = GLUBINA_THEMES[theme] || GLUBINA_THEMES.gold;
  const scrollRef = React.useRef(null);
  useReveal(scrollRef);

  return (
    <ThemeCtx.Provider value={t}>
      <style>{GA_CSS}</style>
      <div ref={scrollRef} style={{
        position: 'relative', width: '100%', height: '100%',
        overflow: 'auto', background: t.deep,
        fontFamily: THEME_FONTS.sans, color: t.ink,
        scrollBehavior: 'smooth',
      }}>
        <GAAnimatedBackdrop t={t} />
        <GADepthMeter scrollRef={scrollRef} t={t} />

        <div style={{ position: 'relative', zIndex: 1, padding: '20px 22px 60px', maxWidth: 560, margin: '0 auto' }}>

          {/* Top brand strip */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            fontSize: 10, color: t.mist, letterSpacing: '0.3em', textTransform: 'uppercase',
            marginBottom: 36,
            opacity: 0, animation: 'ga-fade-up 0.7s ease forwards', animationDelay: '0.15s',
          }}>
            <span>iliaocean</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%', background: '#7ec089',
                animation: 'ga-blink 2s ease-in-out infinite',
                boxShadow: '0 0 6px #7ec089',
              }} />
              <span style={{ color: t.accent }}>в эфире</span>
            </span>
          </div>

          {/* Hero */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
            <div style={{ opacity: 0, animation: 'ga-fade-up 0.9s ease forwards', animationDelay: '0.2s' }}>
              <GAAvatar size={116} t={t} />
            </div>

            <div style={{
              marginTop: 22, display: 'flex', alignItems: 'center', gap: 10, color: t.accent,
              opacity: 0, animation: 'ga-fade-up 0.7s ease forwards', animationDelay: '0.35s',
            }}>
              <span style={{
                width: 22, height: 1, background: t.accent, opacity: 0.6,
                transformOrigin: 'right',
                animation: 'ga-rule-grow 0.7s ease forwards', animationDelay: '0.4s',
              }} />
              <span style={{ fontSize: 10, letterSpacing: '0.4em', textTransform: 'uppercase', fontWeight: 600 }}>
                Коуч · мастер мышления · профайлер
              </span>
              <span style={{
                width: 22, height: 1, background: t.accent, opacity: 0.6,
                transformOrigin: 'left',
                animation: 'ga-rule-grow 0.7s ease forwards', animationDelay: '0.4s',
              }} />
            </div>

            <GAHeroName first="Илья" last="Бельченко" t={t} wide={false} />

            <div style={{
              marginTop: 18, fontFamily: THEME_FONTS.serif, fontSize: 19,
              fontStyle: 'italic', color: t.accent, letterSpacing: '0.01em',
              maxWidth: 280, lineHeight: 1.35,
              opacity: 0, animation: 'ga-fade-up 0.9s ease forwards', animationDelay: '1.4s',
            }}>«Помогаю собрать себя — не по чужим лекалам»</div>

            <div style={{
              marginTop: 14, fontSize: 12.5, color: t.mist, lineHeight: 1.55, maxWidth: 280,
              opacity: 0, animation: 'ga-fade-up 0.9s ease forwards', animationDelay: '1.6s',
            }}>
              5 лет в коучинге, сотни часов разборов.<br/>Авторский метод · КЭТ.
            </div>
          </div>

          {/* Primary + Secondary CTA — visible right under hero */}
          <div style={{
            marginTop: 36,
            opacity: 0, animation: 'ga-fade-up 0.9s ease forwards', animationDelay: '1.85s',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
          }}>
            <GAPrimaryCTA
              label="Записаться на диагностику"
              sub="50 минут · бесплатно"
              t={t}
              onClick={() => onCTA && onCTA('diagnostic')}
            />
            <div style={{
              marginTop: 10, display: 'flex', alignItems: 'center', gap: 10,
              fontSize: 9, color: t.mist, letterSpacing: '0.3em', textTransform: 'uppercase', fontWeight: 600,
            }}>
              <span style={{ flex: 1, height: 1, background: `${t.rule}` }} />
              <span>или платный продукт</span>
              <span style={{ flex: 1, height: 1, background: `${t.rule}` }} />
            </div>
            <button onClick={() => onCTA && onCTA('analytical')} style={{
              marginTop: 10, width: '100%', maxWidth: 420, padding: '14px 16px', borderRadius: 14,
              border: `1px solid ${t.accent}55`,
              background: `linear-gradient(180deg, ${t.lift}88, ${t.deep}88)`,
              color: t.ink, fontFamily: THEME_FONTS.sans, cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
              transition: 'all .25s ease',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = t.accent;
              e.currentTarget.style.background = `linear-gradient(180deg, ${t.accent}1a, ${t.deep}88)`;
              e.currentTarget.style.transform = 'translateY(-1px)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = `${t.accent}55`;
              e.currentTarget.style.background = `linear-gradient(180deg, ${t.lift}88, ${t.deep}88)`;
              e.currentTarget.style.transform = 'none';
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                background: `${t.accent}1a`, color: t.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="9" />
                  <path d="m9 9 6 6M15 9l-6 6" opacity="0.4"/>
                  <path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
                </svg>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: THEME_FONTS.serif, fontSize: 16, fontWeight: 500,
                  color: t.ink, lineHeight: 1.15, letterSpacing: '-0.005em',
                }}>Аналитическая сессия</div>
                <div style={{ fontSize: 11, color: t.mist, marginTop: 3, letterSpacing: '0.04em' }}>
                  1 ч 30 мин · с МКП-картой
                </div>
              </div>
              <div style={{ textAlign: 'right', flexShrink: 0 }}>
                <div style={{
                  fontFamily: THEME_FONTS.serif, fontSize: 20, fontStyle: 'italic',
                  color: t.accent, fontWeight: 500, lineHeight: 1, letterSpacing: '-0.01em',
                }}>80 $</div>
                <div style={{
                  fontSize: 9, color: t.mist, letterSpacing: '0.2em', textTransform: 'uppercase',
                  marginTop: 4, fontWeight: 600,
                }}>→ открыть</div>
              </div>
            </button>
          </div>

          {/* Section: pillars */}
          <div style={{ marginTop: 56 }}>
            <div className="ga-reveal" style={{
              fontSize: 10, letterSpacing: '0.4em', textTransform: 'uppercase',
              color: t.accent, fontWeight: 600, marginBottom: 14,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{ fontFamily: THEME_FONTS.serif, fontStyle: 'italic', fontSize: 16, letterSpacing: 0 }}>01</span>
              <span style={{ width: 18, height: 1, background: t.accent }} />
              Что мы делаем
            </div>
            <div className="ga-stagger" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <GAPillar
                num="i"
                title="Снять внутренний шум"
                sub="Понять, что внутри происходит на самом деле — без чужих интерпретаций и шаблонов."
                t={t} accent
              />
              <GAPillar
                num="ii"
                title="Увидеть себя со стороны"
                sub="OCEAN, метапрограммы, схемы — карта характера, которая работает, а не красиво лежит."
                t={t}
              />
              <GAPillar
                num="iii"
                title="Найти точку опоры"
                sub="Не «исправить себя», а опереться на то, что уже есть — и двинуться дальше."
                t={t}
              />
              <GAPillar
                num="iv"
                title="Перевести в действие"
                sub="План на 30/60/90 дней с измеримыми шагами и регулярной обратной связью."
                t={t}
              />
            </div>
          </div>

          {/* Section: numbers */}
          <div className="ga-reveal ga-reveal-slow" style={{
            marginTop: 56, padding: '24px 20px', borderRadius: 16,
            border: `1px solid ${t.rule}`,
            background: `linear-gradient(135deg, ${t.accent}10, ${t.deep}99)`,
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
          }}>
            {[
              { v: '5',    l: 'лет\u00A0в\u00A0коучинге' },
              { v: '100+', l: 'часов\u00A0разборов' },
              { v: 'КЭТ',  l: 'авторский\u00A0метод' },
            ].map((s, i) => (
              <div key={i} style={{ textAlign: 'center' }}>
                <div style={{
                  fontFamily: THEME_FONTS.serif, fontSize: 30, fontStyle: 'italic',
                  color: t.accent, fontWeight: 500, lineHeight: 1, letterSpacing: '-0.02em',
                }}>{s.v}</div>
                <div style={{
                  fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
                  color: t.mist, marginTop: 8, fontWeight: 600,
                }}>{s.l}</div>
              </div>
            ))}
          </div>

          {/* Section: quote */}
          <div className="ga-reveal" style={{
            marginTop: 56, padding: '28px 22px', borderRadius: 18,
            border: `1px solid ${t.accent}33`,
            background: `linear-gradient(180deg, ${t.lift}66, ${t.deep}88)`,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 10, left: 18,
              fontFamily: THEME_FONTS.serif, fontSize: 64, fontStyle: 'italic',
              color: t.accent, opacity: 0.4, lineHeight: 1,
            }}>"</div>
            <p style={{
              margin: '14px 0 0', fontFamily: THEME_FONTS.serif, fontSize: 18,
              fontStyle: 'italic', color: t.ink, lineHeight: 1.45,
            }}>
              Я не «чиню людей». Я помогаю им увидеть свою систему координат —
              и решить, куда они хотят дальше.
            </p>
            <div style={{
              marginTop: 16, paddingTop: 14, borderTop: `1px solid ${t.rule}`,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: `${t.accent}22`, border: `1px solid ${t.accent}44`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: THEME_FONTS.serif, fontSize: 13, color: t.accent, fontStyle: 'italic',
              }}>и</div>
              <div>
                <div style={{ fontSize: 11.5, color: t.ink, fontWeight: 500 }}>Илья Бельченко</div>
                <div style={{ fontSize: 9, color: t.mist, letterSpacing: '0.18em', textTransform: 'uppercase' }}>о своей работе</div>
              </div>
            </div>
          </div>

          {/* Section: process */}
          <div style={{ marginTop: 56 }}>
            <div className="ga-reveal" style={{
              fontSize: 10, letterSpacing: '0.4em', textTransform: 'uppercase',
              color: t.accent, fontWeight: 600, marginBottom: 14,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{ fontFamily: THEME_FONTS.serif, fontStyle: 'italic', fontSize: 16, letterSpacing: 0 }}>02</span>
              <span style={{ width: 18, height: 1, background: t.accent }} />
              Как мы работаем
            </div>
            <div className="ga-stagger" style={{ display: 'flex', flexDirection: 'column' }}>
              {[
                { step: '01', title: 'Диагностика', sub: 'Бесплатная встреча 50 мин · знакомство, разбор запроса.' },
                { step: '02', title: '5 тестов',     sub: 'OCEAN, YSQ, BAI, BDI, WHOQOL — ~30 мин.' },
                { step: '03', title: 'МКП-карта',    sub: 'Аналитическая сессия 1,5 ч + персональная карта.' },
                { step: '04', title: 'Сопровождение', sub: 'План 30/60/90 · регулярные встречи · обратная связь.' },
              ].map((s, i, arr) => (
                <div key={i} style={{
                  display: 'flex', gap: 16,
                  paddingBottom: i === arr.length - 1 ? 0 : 18,
                  marginBottom: i === arr.length - 1 ? 0 : 6,
                  position: 'relative',
                }}>
                  <div style={{ position: 'relative', flexShrink: 0 }}>
                    <div style={{
                      width: 34, height: 34, borderRadius: '50%',
                      background: `${t.accent}1a`, border: `1px solid ${t.accent}55`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: THEME_FONTS.serif, fontSize: 13, fontStyle: 'italic',
                      color: t.accent, fontWeight: 500,
                    }}>{s.step}</div>
                    {i !== arr.length - 1 && (
                      <div style={{
                        position: 'absolute', top: 36, left: '50%', transform: 'translateX(-50%)',
                        width: 1, height: 32,
                        background: `linear-gradient(180deg, ${t.accent}55, transparent)`,
                      }} />
                    )}
                  </div>
                  <div style={{ flex: 1, paddingTop: 4 }}>
                    <div style={{
                      fontFamily: THEME_FONTS.serif, fontSize: 17, color: t.ink,
                      fontWeight: 500, lineHeight: 1.2,
                    }}>{s.title}</div>
                    <div style={{ fontSize: 12, color: t.mist, marginTop: 4, lineHeight: 1.45 }}>{s.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Final CTA */}
          <div className="ga-reveal" style={{ marginTop: 56, textAlign: 'center' }}>
            <div style={{
              fontFamily: THEME_FONTS.serif, fontSize: 26, color: t.ink,
              fontStyle: 'italic', lineHeight: 1.2, letterSpacing: '-0.01em',
            }}>
              Готов(а)<br/>
              <em style={{ color: t.accent }}>погрузиться</em>?
            </div>
            <p style={{
              margin: '12px auto 0', maxWidth: 260, fontSize: 12.5,
              color: t.mist, lineHeight: 1.55,
            }}>
              Начни с бесплатной диагностики — 50 минут, без обязательств.
            </p>
            <div style={{ marginTop: 22 }}>
              <GAPrimaryCTA
                label="Записаться сейчас"
                sub="ответ в течение часа"
                t={t}
                onClick={() => onCTA && onCTA('diagnostic')}
              />
            </div>
          </div>

          {/* Footer */}
          <div className="ga-reveal" style={{
            marginTop: 48, paddingTop: 22, borderTop: `1px solid ${t.rule}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontSize: 10, color: t.mist, letterSpacing: '0.2em', textTransform: 'uppercase',
          }}>
            <span>iliaocean · est. 2013</span>
            <span style={{ color: t.accent }}>RU · EN</span>
          </div>
        </div>
      </div>
    </ThemeCtx.Provider>
  );
}

Object.assign(window, {
  GlubinaAnimated,
});