// Direction 1 — «Глубина»
// Premium dark editorial in the style of Илья's own analytical PDFs.
// Now palette-driven via THEME context — supports 4 variants: gold,
// copper, ivory, azure.

const GLUBINA_THEMES = {
  gold: {
    name: 'Gold',
    deep:    '#070d1a',
    bg:      '#0b1628',
    panel:   '#142238',
    lift:    '#1d3050',
    accent:  '#c9a96e',
    accentDim:'#8a7649',
    ink:     '#f0e8d6',
    mist:    'rgba(240,232,214,0.62)',
    faint:   'rgba(240,232,214,0.42)',
    rule:    'rgba(201,169,110,0.18)',
    alarm:   'rgba(190,90,90,0.30)',
    alarmInk:'#e0a08a',
  },
  copper: {
    name: 'Copper',
    deep:    '#0e0907',
    bg:      '#1a100b',
    panel:   '#241712',
    lift:    '#321f17',
    accent:  '#d68a5c',
    accentDim:'#92563a',
    ink:     '#f1e4d8',
    mist:    'rgba(241,228,216,0.58)',
    faint:   'rgba(241,228,216,0.36)',
    rule:    'rgba(214,138,92,0.20)',
    alarm:   'rgba(190,90,90,0.30)',
    alarmInk:'#e8a78c',
  },
  ivory: {
    name: 'Ivory',
    deep:    '#0a0a0a',
    bg:      '#111111',
    panel:   '#1a1a1a',
    lift:    '#242424',
    accent:  '#e8dec3',     // soft ivory acts as accent (no gold)
    accentDim:'#9a9081',
    ink:     '#efe9d7',
    mist:    'rgba(239,233,215,0.60)',
    faint:   'rgba(239,233,215,0.38)',
    rule:    'rgba(239,233,215,0.16)',
    alarm:   'rgba(170,80,80,0.30)',
    alarmInk:'#d99a8a',
  },
  azure: {
    name: 'Azure',
    deep:    '#03060f',
    bg:      '#070d1f',
    panel:   '#0d1830',
    lift:    '#172a4b',
    accent:  '#7fb6d9',
    accentDim:'#4a7493',
    ink:     '#e6eef7',
    mist:    'rgba(230,238,247,0.62)',
    faint:   'rgba(230,238,247,0.40)',
    rule:    'rgba(127,182,217,0.20)',
    alarm:   'rgba(190,90,90,0.30)',
    alarmInk:'#e0a08a',
  },
};

const THEME_FONTS = {
  serif: '"Cormorant Garamond", "Times New Roman", serif',
  sans:  '"Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
};

const ThemeCtx = React.createContext(GLUBINA_THEMES.gold);
const useTheme = () => React.useContext(ThemeCtx);

// ───────────────────────────────────── Backdrop
function GlubinaBackdrop() {
  const t = useTheme();
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 80% 50% at 50% 0%, ${t.lift} 0%, transparent 60%),
                     linear-gradient(180deg, ${t.bg} 0%, ${t.deep} 60%, ${t.deep} 100%)`,
      }} />
      <svg width="100%" height="100%" viewBox="0 0 400 800" preserveAspectRatio="none"
           style={{ position: 'absolute', inset: 0, opacity: 0.16, mixBlendMode: 'screen' }}>
        <defs>
          <linearGradient id={`gl-line-${t.name}`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor={t.accent} stopOpacity="0" />
            <stop offset="50%" stopColor={t.accent} stopOpacity="0.9" />
            <stop offset="100%" stopColor={t.accent} stopOpacity="0" />
          </linearGradient>
        </defs>
        {[100, 160, 230, 320, 420, 540, 660, 780].map((y, i) => (
          <path key={i}
                d={`M0 ${y} Q 100 ${y - 6 - i} 200 ${y} T 400 ${y}`}
                stroke={`url(#gl-line-${t.name})`} strokeWidth="0.6" fill="none" />
        ))}
      </svg>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5,
        backgroundImage: `radial-gradient(circle at 23% 12%, ${t.accent}22 0 1px, transparent 2px),
                          radial-gradient(circle at 78% 28%, ${t.ink}33 0 1px, transparent 2px),
                          radial-gradient(circle at 12% 60%, ${t.accent}22 0 1px, transparent 2px),
                          radial-gradient(circle at 88% 78%, ${t.ink}22 0 1px, transparent 2px)`,
      }} />
    </div>
  );
}

// ───────────────────────────────────── Avatar
function GlubinaAvatar({ size = 120, slotId }) {
  const t = useTheme();
  return (
    <div style={{
      width: size, height: size, position: 'relative',
      borderRadius: '50%', padding: 2,
      background: `conic-gradient(from 220deg, ${t.accent}, ${t.accentDim} 30%, ${t.ink} 50%, ${t.accentDim} 70%, ${t.accent})`,
      boxShadow: `0 0 0 1px ${t.deep}, 0 18px 40px -10px ${t.accent}40, 0 4px 24px ${t.deep}`,
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: '50%', overflow: 'hidden',
        background: `linear-gradient(160deg, ${t.lift}, ${t.bg})`,
        position: 'relative',
      }}>
        <image-slot id={slotId} shape="circle" placeholder="Перетащи фото"
                    style={{ width: '100%', height: '100%' }} />
        <div style={{
          position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: THEME_FONTS.serif, fontSize: size * 0.46, color: t.accent, fontStyle: 'italic',
          pointerEvents: 'none', textShadow: `0 2px 16px ${t.deep}`,
        }}>и</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────── Button
function GlubinaButton({ icon, label, sub, variant = 'ghost', onClick, badge }) {
  const t = useTheme();
  const isPrimary = variant === 'primary';
  return (
    <button onClick={onClick} className="gb-btn" style={{
      width: '100%', display: 'flex', alignItems: 'center', gap: 14,
      padding: '15px 18px', borderRadius: 14,
      border: `1px solid ${isPrimary ? t.accent : t.rule}`,
      background: isPrimary
        ? `linear-gradient(180deg, ${t.accent}, ${t.accentDim})`
        : `linear-gradient(180deg, ${t.panel}aa, ${t.deep}aa)`,
      backdropFilter: 'blur(8px)',
      color: isPrimary ? t.deep : t.ink,
      fontFamily: THEME_FONTS.sans, cursor: 'pointer',
      boxShadow: isPrimary
        ? `0 12px 30px -10px ${t.accent}80, inset 0 1px 0 ${t.ink}66`
        : `0 1px 0 ${t.rule} inset, 0 6px 20px rgba(0,0,0,0.3)`,
      textAlign: 'left', transition: 'transform .18s ease, box-shadow .18s ease',
    }}>
      {icon && (
        <div style={{
          width: 34, height: 34, borderRadius: 10, flexShrink: 0,
          background: isPrimary ? `${t.deep}30` : `${t.accent}22`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: isPrimary ? t.deep : t.accent,
        }}>
          <Icon name={icon} size={19} strokeWidth={1.5} />
        </div>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14.5, fontWeight: 600, letterSpacing: '0.01em', lineHeight: 1.2 }}>{label}</div>
        {sub && <div style={{
          fontSize: 11, marginTop: 3,
          color: isPrimary ? `${t.deep}99` : t.mist,
          fontWeight: 400, letterSpacing: '0.05em', textTransform: 'uppercase',
        }}>{sub}</div>}
      </div>
      {badge && <span style={{
        fontSize: 10, padding: '3px 8px', borderRadius: 99,
        background: isPrimary ? `${t.deep}30` : `${t.accent}22`,
        color: isPrimary ? t.deep : t.accent,
        letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 600,
      }}>{badge}</span>}
      <Icon name="arrow" size={16} color={isPrimary ? t.deep : t.accent} strokeWidth={1.6} />
    </button>
  );
}

// ───────────────────────────────────── Formula
function GlubinaFormula() {
  const t = useTheme();
  const Row = ({ label, items, note, wrong }) => (
    <div style={{
      padding: '18px 20px',
      borderRadius: 14,
      background: wrong
        ? t.alarm
        : `linear-gradient(135deg, ${t.accent}24, ${t.accent}08)`,
      border: `1px solid ${wrong ? t.alarm : t.rule}`,
      position: 'relative',
    }}>
      <div style={{
        fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
        color: wrong ? t.alarmInk : t.accent, marginBottom: 8,
      }}>{label}</div>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap',
        fontFamily: THEME_FONTS.serif, fontSize: 22, color: t.ink,
        fontWeight: 500, letterSpacing: '-0.005em', lineHeight: 1,
      }}>
        {items.map((w, i) => (
          <React.Fragment key={i}>
            <span style={{
              fontStyle: i === items.length - 1 && !wrong ? 'italic' : 'normal',
              color: i === items.length - 1 ? (wrong ? t.ink : t.accent) : t.ink,
            }}>{w}</span>
            {i < items.length - 1 && <span style={{ color: t.accentDim, fontSize: 16 }}>→</span>}
          </React.Fragment>
        ))}
      </div>
      <div style={{
        marginTop: 8, fontSize: 12, color: wrong ? t.alarmInk : t.mist,
        fontFamily: THEME_FONTS.sans, lineHeight: 1.4,
      }}>{note}</div>
    </div>
  );
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Row wrong label={CONTENT.formula.wrongLabel} items={CONTENT.formula.wrong} note={CONTENT.formula.wrongNote} />
      <Row label={CONTENT.formula.rightLabel} items={CONTENT.formula.right} note={CONTENT.formula.rightNote} />
      <div style={{
        textAlign: 'center', fontFamily: THEME_FONTS.serif, fontStyle: 'italic',
        fontSize: 15, color: t.accent, marginTop: 4,
      }}>{CONTENT.formula.caption}</div>
    </div>
  );
}

function GlubinaMPItem({ text, num }) {
  const t = useTheme();
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
      <div style={{
        flexShrink: 0,
        width: 28, height: 28, borderRadius: '50%',
        border: `1px solid ${t.accent}55`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: THEME_FONTS.serif, fontSize: 13, color: t.accent,
        fontStyle: 'italic',
      }}>{num}</div>
      <div style={{
        flex: 1, fontFamily: THEME_FONTS.sans, fontSize: 13.5,
        color: t.ink, lineHeight: 1.5,
      }}>{text}</div>
    </div>
  );
}

function GlubinaFitItem({ item, i }) {
  const t = useTheme();
  return (
    <div style={{
      display: 'flex', gap: 14, padding: '14px 0',
      borderTop: i === 0 ? 'none' : `1px solid ${t.rule}`,
    }}>
      <div style={{ flexShrink: 0, paddingTop: 2 }}>
        <div style={{
          width: 26, height: 26, borderRadius: '50%',
          border: `1px solid ${t.accent}55`,
          background: `radial-gradient(circle, ${t.accent}22, transparent 70%)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: t.accent,
        }}>
          <Icon name="check" size={13} strokeWidth={2} />
        </div>
      </div>
      <div>
        <div style={{
          fontFamily: THEME_FONTS.serif, fontSize: 19, color: t.ink,
          letterSpacing: '0.005em', fontWeight: 500, lineHeight: 1.15,
        }}>{item.title}</div>
        <div style={{
          fontFamily: THEME_FONTS.sans, fontSize: 13, color: t.mist,
          marginTop: 4, lineHeight: 1.5,
        }}>{item.desc}</div>
      </div>
    </div>
  );
}

function SectionLabel({ children, num }) {
  const t = useTheme();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
      {num && (
        <span style={{
          fontFamily: THEME_FONTS.serif, fontStyle: 'italic',
          fontSize: 16, color: t.accent, opacity: 0.85,
        }}>{num}</span>
      )}
      <div style={{ width: 16, height: 1, background: t.accent }} />
      <span style={{
        fontSize: 10, letterSpacing: '0.35em', textTransform: 'uppercase',
        color: t.accent, fontWeight: 600,
      }}>{children}</span>
    </div>
  );
}

// ───────────────────────────────────── Stat strip (PDF-style)
function StatStrip() {
  const t = useTheme();
  const stats = [
    { v: '5', l: 'Мета-программ' },
    { v: '1.5\u2009ч', l: 'Сессия' },
    { v: '12+', l: 'лет практики' },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
      borderTop: `1px solid ${t.rule}`, borderBottom: `1px solid ${t.rule}`,
      padding: '14px 0',
    }}>
      {stats.map((s, i) => (
        <div key={i} style={{
          textAlign: 'center',
          borderLeft: i === 0 ? 'none' : `1px solid ${t.rule}`,
        }}>
          <div style={{
            fontFamily: THEME_FONTS.serif, fontSize: 26, color: t.accent,
            fontWeight: 500, lineHeight: 1, letterSpacing: '-0.01em',
          }}>{s.v}</div>
          <div style={{
            fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: t.mist, marginTop: 4, fontWeight: 500,
          }}>{s.l}</div>
        </div>
      ))}
    </div>
  );
}

// ───────────────────────────────────── Page body
function GlubinaPageBody({ wide = false, onCTA }) {
  const t = useTheme();
  return (
    <div style={{
      position: 'relative', minHeight: '100%',
      fontFamily: THEME_FONTS.sans, color: t.ink,
      padding: wide ? '48px 64px 72px' : '20px 22px 40px',
      maxWidth: wide ? 560 : 'none', margin: '0 auto',
    }}>
      {/* Top brand strip */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 10, color: t.mist, letterSpacing: '0.22em', textTransform: 'uppercase',
        marginBottom: 28,
      }}>
        <span>iliaocean</span>
        <span style={{ color: t.accent }}>est. 2013</span>
      </div>

      {/* Hero */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <GlubinaAvatar size={wide ? 130 : 112} slotId="glubina-avatar" />
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 10, color: t.accent }}>
          <span style={{ width: 22, height: 1, background: t.accent, opacity: 0.6 }} />
          <span style={{ fontSize: 10, letterSpacing: '0.4em', textTransform: 'uppercase', fontWeight: 600 }}>
            {CONTENT.role}
          </span>
          <span style={{ width: 22, height: 1, background: t.accent, opacity: 0.6 }} />
        </div>
        <h1 style={{
          margin: '12px 0 0', fontFamily: THEME_FONTS.serif,
          fontSize: wide ? 58 : 44, fontWeight: 500,
          letterSpacing: '-0.015em', lineHeight: 1, color: t.ink,
        }}>
          {CONTENT.firstName}<br/>
          <em style={{ color: t.accent, fontStyle: 'italic' }}>{CONTENT.lastName}</em>
        </h1>
        <div style={{
          marginTop: 14, fontFamily: THEME_FONTS.serif, fontSize: wide ? 22 : 18,
          fontStyle: 'italic', color: t.accent, letterSpacing: '0.01em',
        }}>«{CONTENT.promise}»</div>
        <p style={{
          margin: '14px 0 0', maxWidth: 340,
          fontSize: 13.5, lineHeight: 1.55, color: t.mist,
        }}>{CONTENT.intro}</p>
        {/* chips */}
        <div style={{ display: 'flex', gap: 6, marginTop: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
          {CONTENT.chips.map((c, i) => (
            <span key={i} style={{
              fontSize: 10, padding: '4px 10px', borderRadius: 99,
              border: `1px solid ${t.rule}`, color: t.mist,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>{c}</span>
          ))}
        </div>
      </div>

      {/* Primary CTA */}
      <div style={{ marginTop: 26 }}>
        <GlubinaButton variant="primary" icon="compass"
                       label={CONTENT.primary.label} sub={CONTENT.primary.sub}
                       onClick={() => onCTA && onCTA('diagnostic')} />
      </div>

      {/* Stat strip */}
      <div style={{ marginTop: 28 }}>
        <StatStrip />
      </div>

      {/* Philosophy intro */}
      <div style={{ marginTop: 36 }}>
        <SectionLabel num="01">Подход</SectionLabel>
        <p style={{
          fontFamily: THEME_FONTS.serif, fontSize: wide ? 24 : 21,
          lineHeight: 1.35, color: t.ink, fontWeight: 500,
          letterSpacing: '-0.005em', margin: 0,
        }}>
          {CONTENT.philosophy}
        </p>
      </div>

      {/* Formula */}
      <div style={{ marginTop: 24 }}>
        <SectionLabel num="02">Формула</SectionLabel>
        <GlubinaFormula />
      </div>

      {/* Meta-Programs */}
      <div style={{ marginTop: 36 }}>
        <SectionLabel num="03">Концепт</SectionLabel>
        <h2 style={{
          margin: 0, fontFamily: THEME_FONTS.serif,
          fontSize: wide ? 30 : 26, fontWeight: 500,
          letterSpacing: '-0.01em', color: t.ink, lineHeight: 1.05,
        }}>
          {CONTENT.metaPrograms.title}
        </h2>
        <div style={{
          marginTop: 4, fontSize: 12, color: t.mist,
          letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>{CONTENT.metaPrograms.subtitle}</div>
        <div style={{
          marginTop: 18, display: 'flex', flexDirection: 'column', gap: 14,
          padding: '20px 0', borderTop: `1px solid ${t.rule}`, borderBottom: `1px solid ${t.rule}`,
        }}>
          {CONTENT.metaPrograms.items.map((txt, i) => (
            <GlubinaMPItem key={i} text={txt} num={i + 1} />
          ))}
        </div>
      </div>

      {/* Who for */}
      <div style={{ marginTop: 36 }}>
        <SectionLabel num="04">Для кого</SectionLabel>
        <h2 style={{
          margin: 0, fontFamily: THEME_FONTS.serif, fontSize: wide ? 30 : 26, fontWeight: 500,
          letterSpacing: '-0.01em', color: t.ink, lineHeight: 1.05,
        }}>
          Для кого <em style={{ color: t.accent, fontStyle: 'italic' }}>работа со мной</em>
        </h2>
        <div style={{ marginTop: 14 }}>
          {CONTENT.fitFor.map((it, i) => <GlubinaFitItem key={i} item={it} i={i} />)}
        </div>
      </div>

      {/* Advantage block */}
      <div style={{
        marginTop: 36, padding: '24px 22px',
        borderRadius: 18,
        background: `linear-gradient(180deg, ${t.lift}73, ${t.deep}73)`,
        border: `1px solid ${t.rule}`, position: 'relative',
      }}>
        <SectionLabel num="05">Преимущество</SectionLabel>
        <p style={{
          margin: 0, fontFamily: THEME_FONTS.serif, fontStyle: 'italic',
          fontSize: 17, lineHeight: 1.4, color: t.ink,
        }}>
          {CONTENT.advantageLead}
        </p>
        <ul style={{ margin: '18px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {CONTENT.advantagePoints.map((p, i) => (
            <li key={i} style={{
              display: 'flex', gap: 10, alignItems: 'flex-start',
              fontSize: 13, color: t.mist, lineHeight: 1.45,
            }}>
              <span style={{
                flexShrink: 0, marginTop: 6, width: 6, height: 6, borderRadius: '50%',
                background: t.accent, boxShadow: `0 0 0 3px ${t.accent}22`,
              }} />
              <span>{p}</span>
            </li>
          ))}
        </ul>
        <div style={{
          marginTop: 18, paddingTop: 14, borderTop: `1px solid ${t.rule}`,
          fontFamily: THEME_FONTS.serif, fontSize: 22, color: t.accent,
          fontStyle: 'italic', letterSpacing: '0.01em', textAlign: 'center',
        }}>{CONTENT.advantageOutro}</div>
      </div>

      {/* МКП-карта teaser */}
      <div style={{ marginTop: 36 }}>
        <SectionLabel num="06">Результат</SectionLabel>
        <button onClick={() => onCTA && onCTA('mkp')} style={{
          width: '100%', textAlign: 'left', cursor: 'pointer',
          padding: '20px 22px', borderRadius: 16,
          background: `linear-gradient(135deg, ${t.accent}18, ${t.accent}04)`,
          border: `1px solid ${t.rule}`,
          color: t.ink, fontFamily: THEME_FONTS.sans,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 44, height: 56, flexShrink: 0,
            background: `linear-gradient(180deg, ${t.lift}, ${t.deep})`,
            border: `1px solid ${t.accent}55`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: THEME_FONTS.serif, fontSize: 22, color: t.accent,
            fontStyle: 'italic',
          }}>и</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: THEME_FONTS.serif, fontSize: 18, color: t.ink, fontWeight: 500 }}>
              Персональная МКП-карта
            </div>
            <div style={{ fontSize: 11, color: t.mist, marginTop: 2, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              Аналитический отчёт · посмотреть пример
            </div>
          </div>
          <Icon name="arrow" size={18} color={t.accent} />
        </button>
      </div>

      {/* Links */}
      <div style={{ marginTop: 36 }}>
        <SectionLabel num="07">Связаться</SectionLabel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {CONTENT.links.map((l, i) => (
            <GlubinaButton key={i} icon={l.icon} label={l.label} sub={l.sub} />
          ))}
        </div>
      </div>

      {/* Footer */}
      <div style={{
        marginTop: 44, textAlign: 'center',
        fontSize: 10, color: t.faint, letterSpacing: '0.3em', textTransform: 'uppercase',
      }}>
        <Icon name="wave" size={20} color={t.accentDim} strokeWidth={1} />
        <div style={{ marginTop: 8 }}>iliaocean · 2026</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────── Wrappers
function GlubinaMobile({ theme = 'gold', onCTA }) {
  const t = GLUBINA_THEMES[theme] || GLUBINA_THEMES.gold;
  return (
    <ThemeCtx.Provider value={t}>
      <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'auto', background: t.deep }}>
        <GlubinaBackdrop />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <GlubinaPageBody wide={false} onCTA={onCTA} />
        </div>
      </div>
    </ThemeCtx.Provider>
  );
}

function GlubinaDesktop({ theme = 'gold', onCTA }) {
  const t = GLUBINA_THEMES[theme] || GLUBINA_THEMES.gold;
  return (
    <ThemeCtx.Provider value={t}>
      <div style={{
        position: 'relative', width: '100%', height: '100%',
        overflow: 'auto', background: t.deep, display: 'flex',
      }}>
        <GlubinaBackdrop />
        <div style={{
          position: 'relative', zIndex: 1, width: 220, flexShrink: 0,
          borderRight: `1px solid ${t.rule}`, padding: '48px 24px',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div style={{ fontFamily: THEME_FONTS.serif, fontSize: 22, color: t.ink, fontStyle: 'italic' }}>
            i<span style={{ color: t.accent }}>•</span>o
          </div>
          <div style={{
            writingMode: 'vertical-rl', transform: 'rotate(180deg)',
            fontSize: 10, letterSpacing: '0.5em', textTransform: 'uppercase',
            color: t.mist, alignSelf: 'flex-start',
          }}>Coaching · Mentorship · Skill for life</div>
          <div style={{ fontSize: 10, color: t.accent, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
            <div>RU · EN</div>
            <div style={{ marginTop: 6, color: t.mist }}>iliaocean.com</div>
          </div>
        </div>
        <div style={{ position: 'relative', zIndex: 1, flex: 1, overflowY: 'auto' }}>
          <GlubinaPageBody wide={true} onCTA={onCTA} />
        </div>
      </div>
    </ThemeCtx.Provider>
  );
}

Object.assign(window, {
  GlubinaMobile, GlubinaDesktop,
  GLUBINA_THEMES, ThemeCtx, useTheme,
  THEME_FONTS,
  GlubinaBackdrop, GlubinaAvatar, GlubinaButton, SectionLabel,
});