// Тарифы — Variant A: контраст + premium (огромный водяной номер, фиолетовое свечение у PRO, золото у VIP)

const TIERS = [
{
  id: 'vibe',
  num: '01',
  name: 'ВАЙБ',
  tagline: 'старт в автоматизациях',
  priceTg: '450 000 ₸',
  priceRu: '≈ 75 000 ₽',
  priceUsd: '970 $',
  priceOld: null,
  installment: 'или 37 500 ₸ × 12 мес',
  modules: 'M01 — M11',
  hotkey: 'F1',
  variant: 'base',
  bullets: [
  '11 модулей основы вайбкодинга',
  'Доступ 12 месяцев',
  'Общий чат участников',
  'Проверка практического задания'],

  cta: 'Начать обучение'
},
{
  id: 'pro',
  num: '02',
  name: 'ВАЙБ ПРО',
  tagline: 'сразу в профи — основной выбор',
  priceTg: '650 000 ₸',
  priceRu: '≈ 105 000 ₽',
  priceUsd: '1 400 $',
  priceOld: null,
  installment: 'или 54 200 ₸ × 12 мес',
  modules: 'M01 — M17',
  hotkey: 'F2',
  variant: 'featured',
  badge: 'выбирают 9 из 10',
  bullets: [
  'Всё из тарифа «ВАЙБ»',
  '+ 6 модулей по AI-ботам',
  '3 групповых созвона',
  'Обратная связь лично от Алексея',
  'Проверка заданий от куратора'],

  cta: 'Забрать PRO'
},
{
  id: 'vip',
  num: '03',
  name: 'VIP РАБОТА',
  tagline: 'важна личная работа',
  priceTg: '1 250 000 ₸',
  priceRu: '≈ 200 000 ₽',
  priceUsd: '2 700 $',
  priceOld: null,
  installment: 'или 104 200 ₸ × 12 мес',
  modules: 'ALL + 1:1',
  hotkey: 'F3',
  variant: 'vip',
  bullets: [
  'Все 17 модулей обучения',
  'Программа под твои амбиции',
  'Личная обратная связь',
  'Стратегия масштабирования',
  'Построение своей команды'],

  cta: 'Обсудить VIP'
}];

function PricingPillowButton({ children, bg, color, glow, shadow, hi, innerBot, weight }) {
  const [h, sH] = React.useState(false);
  const [p, sP] = React.useState(false);
  const height = 56;
  const radius = 16;
  const translate = p ? 3 : h ? -2 : 0;
  return (
    <div
      onMouseEnter={() => sH(true)}
      onMouseLeave={() => { sH(false); sP(false); }}
      onMouseDown={() => sP(true)}
      onMouseUp={() => sP(false)}
      onClick={() => { window.open(window.CTA_LINK || 'https://t.me/intgrtr_bot', '_blank'); }}
      style={{ position: 'relative', display: 'block', width: '100%', height, cursor: 'pointer', userSelect: 'none', zIndex: 2 }}>
      {/* shadow */}
      <div style={{
        position: 'absolute', left: height * 0.06, right: height * 0.06, top: height * 0.55, bottom: -height * 0.22,
        borderRadius: radius,
        background: `radial-gradient(50% 60% at 50% 40%, ${shadow} 0%, transparent 70%)`,
        filter: h && !p ? 'blur(12px)' : 'blur(8px)',
        opacity: p ? 0.4 : h ? 1 : 0.85,
        transform: h && !p ? 'translateY(3px) scale(1.04)' : p ? 'translateY(-2px) scale(0.94)' : 'none',
        transition: 'opacity .15s, transform .15s, filter .15s', zIndex: 0, pointerEvents: 'none'
      }} />
      {/* glow */}
      <div style={{
        position: 'absolute', inset: -8, borderRadius: radius + 10,
        boxShadow: `0 10px 40px ${glow}`,
        opacity: h || p ? 1 : 0.5, pointerEvents: 'none', zIndex: 0, transition: 'opacity .25s'
      }} />
      {/* face */}
      <div style={{
        position: 'relative', height, width: '100%', borderRadius: radius,
        background: bg,
        boxShadow: `inset 0 1.5px 0 ${hi}, inset 0 -3px 0 ${innerBot}, inset 0 -10px 14px -6px ${innerBot}, 0 1px 0 rgba(255,255,255,0.18)`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        fontFamily: 'Manrope, sans-serif', fontWeight: weight, fontSize: 20, color,
        letterSpacing: '0.01em', transform: `translateY(${translate}px)`, transition: 'transform .12s', zIndex: 2, whiteSpace: 'nowrap'
      }}>
        {children}
      </div>
    </div>
  );
}

function TierCard({ t }) {
  const isFeatured = t.variant === 'featured';
  const isVip = t.variant === 'vip';

  // палитра
  const violet = '#7c5cff';
  const violetSoft = '#a08bff';
  const gold = '#e9c97a';

  const accent = isFeatured ? violetSoft : isVip ? gold : 'rgba(255,255,255,0.55)';
  const accentSolid = isFeatured ? violet : isVip ? gold : 'rgba(255,255,255,0.85)';

  const cardBg = isFeatured ?
  'radial-gradient(120% 80% at 50% 105%, rgba(124,92,255,0.32) 0%, rgba(124,92,255,0.08) 35%, transparent 70%), linear-gradient(180deg,#0d0a1c 0%,#070514 100%)' :
  isVip ?
  'radial-gradient(110% 70% at 50% 110%, rgba(233,201,122,0.10) 0%, transparent 60%), linear-gradient(180deg,#0b0a08 0%,#070605 100%)' :
  'linear-gradient(180deg,#0d0d10 0%,#070708 100%)';

  const cardBorder = isFeatured ?
  '1px solid rgba(124,92,255,0.55)' :
  isVip ?
  '1px solid rgba(233,201,122,0.22)' :
  '1px solid rgba(255,255,255,0.06)';

  const cardShadow = isFeatured ?
  '0 0 0 1px rgba(124,92,255,0.25) inset, 0 30px 80px -20px rgba(124,92,255,0.5), 0 0 60px rgba(124,92,255,0.18)' :
  'none';

  const numColor = isFeatured ?
  'rgba(124,92,255,0.07)' :
  isVip ?
  'rgba(233,201,122,0.05)' :
  'rgba(255,255,255,0.03)';

  const checkBg = isFeatured ?
  'rgba(124,92,255,0.32)' :
  isVip ?
  'rgba(233,201,122,0.16)' :
  'rgba(124,92,255,0.18)';
  const checkColor = isFeatured ? '#fff' : isVip ? gold : violetSoft;

  const ctaBg = isFeatured ?
  'linear-gradient(180deg,#9b7eff 0%,#7c5cff 100%)' :
  isVip ?
  'linear-gradient(180deg,#f0d488,#d4b566)' :
  'rgba(255,255,255,0.04)';
  const ctaColor = isFeatured ? '#fff' : isVip ? '#1a1308' : '#fff';
  const ctaBorder = isFeatured ?
  '1px solid rgba(255,255,255,0.18)' :
  isVip ?
  '1px solid rgba(233,201,122,0.6)' :
  '1px solid rgba(255,255,255,0.1)';
  const ctaShadow = isFeatured ?
  '0 8px 24px -6px rgba(124,92,255,0.6), inset 0 1px 0 rgba(255,255,255,0.25)' :
  isVip ?
  '0 6px 18px -6px rgba(233,201,122,0.4)' :
  'none';

  return (
    <div style={{
      position: 'relative',
      background: cardBg,
      border: cardBorder,
      borderRadius: 24,
      padding: '36px 32px 32px',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      minHeight: 600,
      transform: isFeatured ? 'translateY(-12px)' : 'none',
      zIndex: isFeatured ? 2 : 1,
      boxShadow: cardShadow,
      transition: 'transform .25s, box-shadow .25s'
    }}>
      {/* Гигантский водяной номер */}
      <div aria-hidden style={{
        position: 'absolute', right: -20, top: -40,
        fontSize: 280, fontWeight: 800,
        fontFamily: 'Manrope, sans-serif',
        lineHeight: 1, letterSpacing: '-0.06em',
        color: numColor,
        pointerEvents: 'none', userSelect: 'none', zIndex: 0
      }}>{t.num}</div>

      {/* Бейдж featured */}
      {t.badge &&
      <div style={{
        position: 'absolute', top: 18, right: 18, zIndex: 3,
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '7px 13px', borderRadius: 999,
        background: 'linear-gradient(180deg,#9b7eff,#7c5cff)',
        color: '#0a0612', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.04em', textTransform: 'uppercase',
        boxShadow: '0 8px 24px -6px rgba(124,92,255,0.6)',
        fontFamily: 'Manrope, sans-serif'
      }}>{t.badge}</div>
      }

      {/* Лейбл сверху */}
      <div className="mono" style={{
        position: 'relative', zIndex: 2,
        fontSize: 11, color: isFeatured ? violetSoft : isVip ? gold : 'rgba(255,255,255,0.42)',
        letterSpacing: '0.12em', marginBottom: 22,
        textTransform: 'uppercase'
      }}>
        {t.id}.plan · {t.modules}
      </div>

      {/* Название тарифа */}
      <h3 className="display" style={{
        position: 'relative', zIndex: 2,
        margin: 0,
        fontSize: 44, fontWeight: 800, lineHeight: 1.02,
        letterSpacing: '-0.025em',
        color: '#fff',
        marginBottom: 10
      }}>{t.name}</h3>

      {/* Тэглайн */}
      <div style={{
        position: 'relative', zIndex: 2,
        fontSize: 16, color: 'rgba(255,255,255,0.65)',
        marginBottom: 28, lineHeight: 1.4
      }}>{t.tagline}</div>

      {/* Цена */}
      <div style={{ position: 'relative', zIndex: 2, marginBottom: 8 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
          <span className="display" style={{
            fontSize: 44, fontWeight: 800,
            letterSpacing: '-0.02em', color: '#fff'
          }}>{t.priceTg}</span>
          {t.priceOld &&
          <span style={{
            fontSize: 18, color: 'rgba(255,255,255,0.42)',
            textDecoration: 'line-through'
          }}>{t.priceOld}</span>
          }
        </div>
      </div>

      <div className="mono" style={{
        position: 'relative', zIndex: 2,
        fontSize: 13, color: 'rgba(255,255,255,0.5)',
        marginBottom: 12, display: 'flex', gap: 10, flexWrap: 'wrap'
      }}>
        <span>{t.priceRu}</span>
        <span style={{ color: 'rgba(255,255,255,0.3)' }}>·</span>
        <span style={{ color: accent }}>{t.priceUsd}</span>
      </div>

      {t.installment &&
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '7px 12px', borderRadius: 8,
        background: 'rgba(255,255,255,0.04)',
        border: '1px solid rgba(255,255,255,0.08)',
        fontFamily: 'Manrope, sans-serif', fontSize: 13,
        color: 'rgba(255,255,255,0.78)',
        alignSelf: 'flex-start',
        marginBottom: 28
      }}>
          <span style={{ color: accent, fontWeight: 700 }}>0%</span>
          <span>{t.installment}</span>
        </div>
      }

      {/* Bullets */}
      <ul style={{
        position: 'relative', zIndex: 2,
        listStyle: 'none', padding: 0, margin: '0 0 28px',
        display: 'flex', flexDirection: 'column', gap: 13, flex: 1
      }}>
        {t.bullets.map((b, i) =>
        <li key={i} style={{
          display: 'flex', gap: 12,
          fontSize: 15, lineHeight: 1.4,
          color: 'rgba(255,255,255,0.85)'
        }}>
            <span style={{
            flex: '0 0 20px', width: 20, height: 20, borderRadius: '50%',
            background: checkBg, color: checkColor,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 11, fontWeight: 700, marginTop: 1
          }}>✓</span>
            <span style={{ textWrap: 'pretty' }}>{b}</span>
          </li>
        )}
      </ul>

      {/* CTA — pillow keycap (same as hero "Начать обучение"), цвет по тарифу */}
      <PricingPillowButton
        bg={ctaBg}
        color={ctaColor}
        glow={isFeatured ? 'rgba(124,92,255,0.55)' : isVip ? 'rgba(233,201,122,0.45)' : 'rgba(124,92,255,0.2)'}
        shadow={isFeatured ? 'rgba(40,24,110,0.6)' : isVip ? 'rgba(100,70,10,0.45)' : 'rgba(0,0,0,0.55)'}
        hi={isVip ? 'rgba(255,240,200,0.7)' : 'rgba(220,210,255,0.6)'}
        innerBot={isFeatured ? 'rgba(40,24,110,0.35)' : isVip ? 'rgba(110,75,15,0.45)' : 'rgba(0,0,0,0.4)'}
        weight={isVip ? 800 : 700}
      >
        {t.cta} →
      </PricingPillowButton>
    </div>);

}

function Pricing() {
  return (
    <section id="pricing" style={{ padding: '40px 40px 80px' }}>
      <SectionLabel id="04_PRICING" title="Тарифы" right={
      <span className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)' }}>
          выбери свой уровень → нажми F1/F2/F3
        </span>
      } />

      <div style={{ maxWidth: 1360, margin: '0 auto' }}>
        <div className="pricing-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.08fr 1fr', gap: 20,
          alignItems: 'stretch',
          padding: '20px 0 10px'
        }}>
          {TIERS.map((t) => <TierCard key={t.id} t={t} />)}
        </div>

        {/* Payment / installment block — expanded */}
        <div className="pricing-installment" style={{
          marginTop: 36,
          border: '1px solid var(--line)',
          borderRadius: 18,
          background: 'linear-gradient(180deg, rgba(141,255,187,0.04) 0%, var(--bg-1) 60%)',
          overflow: 'hidden'
        }}>
          {/* Header / terminal line */}
          <div style={{
            padding: '18px 24px',
            borderBottom: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
            fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 13,
            background: 'rgba(0,0,0,0.25)'
          }}>
            <span style={{ color: 'var(--green)', fontWeight: 600 }}>$</span>
            <span style={{ color: 'var(--fg-dim)' }}>vibe install --payment=split</span>
            <span style={{ color: 'var(--fg-mute)' }}>→</span>
            <span style={{ color: '#8dffbb', fontWeight: 600, letterSpacing: '.02em' }}>
              РАССРОЧКА 0% / 12 / 24 МЕС
            </span>
            <span style={{ flex: 1 }} />
            <span className="mono" style={{
              fontSize: 11, color: 'var(--fg-mute)',
              padding: '4px 10px', border: '1px solid var(--line)', borderRadius: 999
            }}>
              для всех стран
            </span>
          </div>

          {/* Two-column geo split */}
          <div className="installment-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr'
          }}>
            {/* RU / KZ / BY */}
            <div style={{
              padding: '28px 28px 32px',
              borderRight: '1px solid var(--line)',
              display: 'flex', flexDirection: 'column', gap: 14
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <span className="mono" style={{
                  fontSize: 10, color: 'var(--green)',
                  padding: '3px 8px', border: '1px solid rgba(141,255,187,0.4)',
                  borderRadius: 4, letterSpacing: '.08em'
                }}>OPTION_01</span>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  color: 'var(--fg-mute)', letterSpacing: '.05em'
                }}>// официально, через банк</span>
              </div>

              <h3 style={{
                fontFamily: 'Manrope, sans-serif',
                fontSize: 28, fontWeight: 700, lineHeight: 1.15, margin: 0,
                color: 'var(--fg)'
              }}>
                Рассрочка от банков-партнёров
              </h3>

              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {[
                ['🇷🇺', 'Россия'],
                ['🇰🇿', 'Казахстан'],
                ['🇧🇾', 'Беларусь']].
                map(([flag, name]) =>
                <span key={name} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '8px 16px',
                  background: 'var(--bg-2)', border: '1px solid var(--line)',
                  borderRadius: 999, color: 'var(--fg-dim)',
                  fontFamily: 'Manrope, sans-serif', fontSize: 16
                }}>
                    <span style={{ fontSize: 18 }}>{flag}</span>{name}
                  </span>
                )}
              </div>

              <div style={{
                display: 'flex', gap: 24, marginTop: 6,
                paddingTop: 14, borderTop: '1px dashed var(--line)'
              }}>
                <div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    color: 'var(--fg-mute)', letterSpacing: '.08em', marginBottom: 6, fontSize: "11px"
                  }}>СРОК</div>
                  <div style={{
                    fontFamily: 'Manrope, sans-serif', fontSize: 20, fontWeight: 700,
                    color: 'var(--fg)'
                  }}>12 / 24 мес</div>
                </div>
                <div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    color: 'var(--fg-mute)', letterSpacing: '.08em', marginBottom: 6, fontSize: "11px"
                  }}>СТАВКА</div>
                  <div style={{
                    fontFamily: 'Manrope, sans-serif', fontSize: 20, fontWeight: 700,
                    color: '#8dffbb'
                  }}>0%</div>
                </div>
                <div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    color: 'var(--fg-mute)', letterSpacing: '.08em', marginBottom: 6, fontSize: "11px"
                  }}>ПЕРЕПЛАТА</div>
                  <div style={{
                    fontFamily: 'Manrope, sans-serif', fontSize: 20, fontWeight: 700,
                    color: 'var(--fg)'
                  }}>нет</div>
                </div>
              </div>

              <div style={{
                fontFamily: 'Manrope, sans-serif', fontWeight: 500,
                color: 'var(--fg-dim)', lineHeight: 1.4, marginTop: 4, fontSize: "15px"
              }}>заявка занимает ~5 минут — оформляется онлайн при оплате</div>
            </div>

            {/* Rest of the world */}
            <div style={{
              padding: '28px 28px 32px',
              display: 'flex', flexDirection: 'column', gap: 14
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <span className="mono" style={{
                  fontSize: 10, color: 'var(--orange,#ff9f4a)',
                  padding: '3px 8px', border: '1px solid rgba(255,159,74,0.4)',
                  borderRadius: 4, letterSpacing: '.08em'
                }}>OPTION_02</span>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  color: 'var(--fg-mute)', letterSpacing: '.05em'
                }}>// напрямую от команды</span>
              </div>

              <h3 style={{
                fontFamily: 'Manrope, sans-serif',
                fontSize: 28, fontWeight: 700, lineHeight: 1.15, margin: 0,
                color: 'var(--fg)'
              }}>внутренняя рассрочка</h3>

              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '8px 16px',
                  background: 'var(--bg-2)', border: '1px solid var(--line)',
                  borderRadius: 999, color: 'var(--fg-dim)',
                  fontFamily: 'Manrope, sans-serif', fontSize: "16px"
                }}>
                  <span style={{ fontSize: 20 }}>🌍</span>остальной мир
                </span>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
                  color: 'var(--fg-mute)'
                }}>сша · ес · оаэ · узбекистан · украина · кыргызстан · грузия · армения</span>
              </div>

              <div style={{
                display: 'flex', gap: 24, marginTop: 6,
                paddingTop: 14, borderTop: '1px dashed var(--line)'
              }}>
                <div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                    color: 'var(--fg-mute)', letterSpacing: '.08em', marginBottom: 6
                  }}>СРОК</div>
                  <div style={{
                    fontFamily: 'Manrope, sans-serif', fontSize: 20, fontWeight: 700,
                    color: 'var(--fg)'
                  }}>до 3 мес</div>
                </div>
                <div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                    color: 'var(--fg-mute)', letterSpacing: '.08em', marginBottom: 6
                  }}>СТАВКА</div>
                  <div style={{
                    fontFamily: 'Manrope, sans-serif', fontSize: 20, fontWeight: 700,
                    color: '#8dffbb'
                  }}>0%</div>
                </div>
                <div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                    color: 'var(--fg-mute)', letterSpacing: '.08em', marginBottom: 6
                  }}>ВАЛЮТА</div>
                  <div style={{
                    fontFamily: 'Manrope, sans-serif', fontSize: 20, fontWeight: 700,
                    color: 'var(--fg)'
                  }}>USD / EUR</div>
                </div>
              </div>

              <div style={{
                fontFamily: 'Manrope, sans-serif', fontWeight: 500,
                color: 'var(--fg-dim)', lineHeight: 1.4, marginTop: 4, fontSize: "15px"
              }}>платишь равными частями напрямую — без банков и скоринга</div>
            </div>
          </div>

          {/* Footer note */}
          <div style={{
            padding: '14px 24px',
            borderTop: '1px solid var(--line)',
            background: 'rgba(0,0,0,0.2)',
            display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: 'var(--fg-mute)', letterSpacing: '.03em'
          }}>
            <span style={{ color: 'var(--green)' }}>›</span>
            <span>обе опции доступны для всех тарифов · ВАЙБ / ВАЙБ ПРО / ВАЙБ MAX</span>
            <span style={{ flex: 1 }} />
            <span>уточнить условия → @ai_mng</span>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Pricing });