// Tariff tiers — mirror /opt/vpn-bot/plan_catalog.py (Europe / Mobile / Family)

const GL_PLANS = [
  {
    id: 'europe',
    emoji: '🌍',
    name: 'Europe',
    descriptor: 'универсальный',
    tagline: 'Стабильный доступ для дома и путешествий',
    fromPrice: 100,
    promoPrice: 80,
    deviceLabel: 'до 3 экранов',
    bullets: [
      'Дом, Wi‑Fi и поездки',
      'Базовый тариф GhostLink',
    ],
  },
  {
    id: 'mobile_squad',
    emoji: '🚀',
    name: 'Mobile',
    descriptor: 'мобильная стабильность',
    tagline: 'Стабильность в мобильных сетях',
    fromPrice: 149,
    deviceLabel: 'до 3 экранов',
    bullets: [
      'LTE / 5G и дорога',
      'Адаптивная маршрутизация',
    ],
    popular: true,
  },
  {
    id: 'family',
    emoji: '👨‍👩‍👧',
    name: 'Family',
    descriptor: 'весь дом',
    tagline: 'Один доступ на весь дом',
    fromPrice: 199,
    deviceLabel: 'до 5 экранов',
    bullets: [
      'Smart TV и приставки',
      'Телефоны семьи — один счёт',
    ],
  },
];

const EXTRA_SLOT_PRICE = 49;

function planBotUrl(planId) {
  return GL.BOT;
}

function planCabinetUrl(planId, shortUuid) {
  const q = new URLSearchParams({ plan: planId, tab: 'subscription' });
  if (shortUuid) q.set('uuid', shortUuid);
  return `${GL.CABINET}/pay?${q.toString()}`;
}

function PlanTierCard({ plan, href, compact, featured }) {
  const isFeatured = featured ?? plan.popular;
  return (
    <div style={{
      background: isFeatured
        ? 'linear-gradient(180deg, rgba(0,255,136,0.10), rgba(0,200,102,0.02))'
        : GL.card,
      border: `1.5px solid ${isFeatured ? GL.borderStrong : GL.border}`,
      borderRadius: compact ? 12 : 16,
      padding: compact ? '14px 12px' : '18px 16px',
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      boxShadow: isFeatured ? '0 0 30px rgba(0,255,136,0.18)' : 'none',
      height: '100%',
    }}>
      {isFeatured && (
        <div style={{
          position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
          background: GL.green, color: '#0a0f13',
          padding: '4px 12px', borderRadius: 6,
          fontSize: 10, fontWeight: 800, letterSpacing: 0.6, whiteSpace: 'nowrap',
          boxShadow: '0 0 16px rgba(0,255,136,0.45)',
        }}>
          🔥 ПОПУЛЯРНЫЙ
        </div>
      )}
      <div style={{
        fontSize: compact ? 14 : 15, color: '#fff', fontWeight: 700,
        marginTop: isFeatured ? 6 : 0, marginBottom: 4,
      }}>
        {plan.emoji} {plan.name}
        <span style={{ color: GL.textMute, fontWeight: 600 }}> · {plan.descriptor}</span>
      </div>
      <div style={{ fontSize: compact ? 11 : 12, color: GL.textMute, marginBottom: 10, lineHeight: 1.45 }}>
        {plan.tagline}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 4 }}>
        <span style={{ fontSize: compact ? 11 : 12, color: GL.textMute }}>от</span>
        <span style={{
          fontSize: compact ? 34 : 40, fontWeight: 800,
          color: isFeatured ? GL.green : '#fff', lineHeight: 1,
        }}>
          {plan.fromPrice}
        </span>
        <span style={{ fontSize: compact ? 14 : 16, color: GL.textMute }}>₽/мес</span>
      </div>
      <div style={{ fontSize: 11, color: GL.textDim, marginBottom: 10 }}>{plan.deviceLabel}</div>
      <ul style={{
        listStyle: 'none', padding: 0, margin: '0 0 14px',
        display: 'flex', flexDirection: 'column', gap: 6, flex: 1,
      }}>
        {plan.bullets.map((b) => (
          <li key={b} style={{
            display: 'flex', gap: 8, fontSize: compact ? 11 : 12,
            color: GL.textMute, lineHeight: 1.35, alignItems: 'flex-start',
          }}>
            <span style={{ color: GL.green, flexShrink: 0, marginTop: 1 }}>
              <Icon name="check" size={12} color={GL.green} />
            </span>
            {b}
          </li>
        ))}
      </ul>
      <a href={href || planBotUrl(plan.id)} target="_blank" style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: isFeatured ? GL.green : 'transparent',
        color: isFeatured ? '#0a0f13' : GL.green,
        textDecoration: 'none',
        border: isFeatured ? 'none' : `1px solid ${GL.borderStrong}`,
        padding: compact ? '10px' : '11px',
        borderRadius: 8, fontSize: 12, fontWeight: 700,
        boxShadow: isFeatured ? '0 0 18px rgba(0,255,136,0.35)' : 'none',
        marginTop: 'auto',
      }}>
        Выбрать тариф
      </a>
    </div>
  );
}

function EuropePromoStrip({ compact }) {
  return (
    <div style={{
      background: 'linear-gradient(100deg, rgba(255,88,88,0.14), rgba(20,10,10,0.5))',
      border: '1.5px solid rgba(255,88,88,0.45)',
      borderRadius: compact ? 12 : 14,
      padding: compact ? '12px 14px' : '14px 18px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12, flexWrap: 'wrap',
    }}>
      <div>
        <div style={{
          display: 'inline-block', background: GL.red, color: '#fff',
          padding: '3px 8px', borderRadius: 5,
          fontSize: 10, fontWeight: 800, letterSpacing: 0.5, marginBottom: 6,
        }}>
          🔥 АКЦИЯ · Europe
        </div>
        <div style={{ fontSize: compact ? 13 : 14, color: '#fff', fontWeight: 700 }}>
          Первый месяц — <span style={{ color: '#ff8a8a' }}>80₽</span>
          <span style={{ color: GL.textDim, fontWeight: 500 }}> вместо 100₽</span>
        </div>
        <div style={{ fontSize: 11, color: GL.textMute, marginTop: 4 }}>
          Только для новых пользователей · в боте или личном кабинете
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        {!compact && (
          <div style={{ fontSize: 11, color: '#ff8a8a', fontWeight: 600 }}>
            Действует:
          </div>
        )}
        <Countdown compact={compact} />
        <a href={GL.BOT} target="_blank" style={{
          ...primaryBtnLg,
          background: GL.red, color: '#fff',
          boxShadow: '0 0 18px rgba(255,88,88,0.4)',
          padding: compact ? '10px 14px' : '11px 16px',
          fontSize: 12,
        }}>
          Забрать 80₽
        </a>
      </div>
    </div>
  );
}

function PaymentsMethodsCard({ compact }) {
  return (
    <div style={{
      background: GL.card, border: `1px solid ${GL.border}`,
      borderRadius: compact ? 12 : 16,
      padding: compact ? 14 : 16,
      display: 'flex', flexDirection: 'column', gap: 10, height: '100%',
    }}>
      <div style={{ fontSize: compact ? 12 : 13, color: '#fff', fontWeight: 700, marginBottom: 2 }}>
        Способы оплаты
      </div>
      {[
        { icon: 'lightning', title: 'СБП / карта', desc: 'Оплата в пару кликов' },
        { icon: 'star', title: 'Telegram Stars', desc: 'Прямо из чата с ботом' },
        { icon: 'coin', title: 'USDT', desc: 'Криптовалюта' },
      ].map((m) => (
        <div key={m.title} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: compact ? 28 : 30, height: compact ? 28 : 30, borderRadius: 8,
            background: GL.greenSoft, border: `1px solid ${GL.border}`,
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <Icon name={m.icon} size={compact ? 12 : 14} color={GL.green} />
          </div>
          <div>
            <div style={{ fontSize: compact ? 10 : 11, color: '#fff', fontWeight: 600 }}>{m.title}</div>
            <div style={{ fontSize: 10, color: GL.textMute }}>{m.desc}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function PricingTrustRow({ compact }) {
  return (
    <div style={{
      display: 'flex', gap: compact ? 12 : 18, flexWrap: 'wrap',
      justifyContent: compact ? 'flex-start' : 'center',
      marginTop: compact ? 12 : 16, color: GL.textMute, fontSize: compact ? 10 : 11,
    }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <Icon name="check" size={12} color={GL.green} />Без скрытых платежей
      </span>
      <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <Icon name="check" size={12} color={GL.green} />Подключение за 30 секунд
      </span>
      <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <Icon name="check" size={12} color={GL.green} />Доп. устройство — {EXTRA_SLOT_PRICE}₽/мес
      </span>
    </div>
  );
}

function GhostLinkPricingDesktop() {
  return (
    <section id="pricing" style={{ padding: '10px 48px 30px' }}>
      <SectionHead
        eyebrow={null}
        title="Тарифы GhostLink"
        sub="Выберите сценарий — как вы реально пользуетесь интернетом, а не «скорость на бумаге»."
        center={false}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr) 0.95fr',
        gap: 14,
        alignItems: 'stretch',
        marginBottom: 14,
      }}>
        {GL_PLANS.map((plan) => (
          <PlanTierCard key={plan.id} plan={plan} href={planBotUrl(plan.id)} />
        ))}
        <PaymentsMethodsCard />
      </div>
      <EuropePromoStrip />
      <PricingTrustRow />
    </section>
  );
}

function GhostLinkPricingMobile() {
  return (
    <section id="pricing" style={{ padding: '12px 18px 20px' }}>
      <h3 style={{ fontSize: 18, fontWeight: 800, color: '#fff', marginBottom: 6 }}>
        Тарифы GhostLink
      </h3>
      <p style={{ fontSize: 12, color: GL.textMute, lineHeight: 1.5, marginBottom: 12 }}>
        Выберите сценарий — дом, мобильная сеть или весь дом с TV.
      </p>
      <div style={{ display: 'grid', gap: 10, marginBottom: 12 }}>
        {GL_PLANS.map((plan) => (
          <PlanTierCard key={plan.id} plan={plan} href={planBotUrl(plan.id)} compact />
        ))}
      </div>
      <EuropePromoStrip compact />
      <div style={{
        marginTop: 12, display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'space-between',
        background: GL.card, border: `1px solid ${GL.border}`, borderRadius: 10, padding: '10px 12px',
      }}>
        <div style={{ fontSize: 12, color: '#fff', fontWeight: 600 }}>Все способы оплаты</div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['lightning', 'star', 'coin'].map((icon) => (
            <span key={icon} style={{
              width: 24, height: 24, borderRadius: 6, background: GL.greenSoft,
              display: 'grid', placeItems: 'center',
            }}>
              <Icon name={icon} size={12} color={GL.green} />
            </span>
          ))}
        </div>
      </div>
      <PricingTrustRow compact />
    </section>
  );
}

Object.assign(window, {
  GL_PLANS,
  EXTRA_SLOT_PRICE,
  planBotUrl,
  planCabinetUrl,
  PlanTierCard,
  GhostLinkPricingDesktop,
  GhostLinkPricingMobile,
});