const { Card: PrCard, Button: PrButton, Badge: PrBadge } = window.OctanexDesignSystem_0e3b75;
const PrIcon = window.OxIcon;

const PLANS = [
  {
    path: 'smm', title: 'накрутка', unit: 'от 0.74 ₽', unitNote: 'за единицу',
    feats: ['подписчики, просмотры, реакции', 'буст каналов', 'прогресс в реальном времени', 'api-доступ по ключу'],
    cta: 'к услуге',
  },
  {
    path: 'market', title: 'маркет', unit: '4%', unitNote: 'комиссия с выкупа',
    feats: ['юзернеймы с fragment', 'каналы с lolzteam', 'аукционы в TON', '0.1% при проигрыше'],
    cta: 'открыть маркет', featured: true,
  },
  {
    path: 'ai', title: 'ии-студия', unit: 'от 49 ₽', unitNote: 'после 3 бесплатных',
    feats: ['чат с ботом-бизнесом', 'брендинг и сайты', 'реклама 9:16', 'ии-враппер на sonnet'],
    cta: 'попробовать демо',
  },
];

function Pricing({ onStart }) {
  return (
    <section id="pricing" style={{ padding: '88px 32px', maxWidth: 1200, margin: '0 auto' }}>
      <Reveal>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--green-400)', marginBottom: 16 }}>// цены</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.01em', margin: '0 0 12px' }}>
          честно и цифрами
        </h2>
        <p style={{ fontSize: 16, color: 'var(--text-secondary)', maxWidth: 560, margin: '0 0 40px' }}>
          без скрытых комиссий и абонплаты — платишь только за то, что заказал.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16, alignItems: 'stretch' }}>
        {PLANS.map((p, i) => (
          <Reveal key={p.path} delay={i * 90} style={{ display: 'flex' }}>
            <PrCard glow={p.featured} style={{ width: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
              {p.featured && (
                <span style={{ position: 'absolute', top: 16, right: 16 }}><PrBadge tone="green" dot>популярно</PrBadge></span>
              )}
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', marginBottom: 8 }}>o/{p.path}</div>
              <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 18 }}>{p.title}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 34, fontWeight: 700, color: 'var(--text-primary)' }}>{p.unit}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', marginBottom: 22 }}>{p.unitNote}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11, marginBottom: 24 }}>
                {p.feats.map((f) => (
                  <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'baseline', fontSize: 13.5, color: 'var(--text-secondary)' }}>
                    <span style={{ color: 'var(--green-400)', display: 'flex', flex: 'none' }}><PrIcon name="check" size={14} /></span> {f}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 'auto' }}>
                <PrButton variant={p.featured ? 'primary' : 'secondary'} onClick={onStart} style={{ width: '100%' }}>{p.cta}</PrButton>
              </div>
            </PrCard>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });