const { Card: SvcCard, Button: SvcButton } = window.OctanexDesignSystem_0e3b75;
const SvcIcon = window.OxIcon;

const SERVICES = [
  {
    path: 'smm', icon: 'megaphone', title: 'накрутка тг',
    desc: 'подписчики, просмотры, реакции и буст каналов — от 0.74 ₽ за единицу.',
    feats: ['старт за минуту', 'прогресс в реальном времени', 'api-доступ по ключу'],
  },
  {
    path: 'market', icon: 'at-sign', title: 'маркет активов',
    desc: 'юзернеймы с парса fragment и готовые каналы с lolzteam. аукционы в TON.',
    feats: ['ставки с крипто-баланса', 'комиссия 4% с выкупа', '0.1% при проигрыше'],
  },
  {
    path: 'ai', icon: 'sparkles', title: 'ии-студия',
    desc: 'чат с ботом-бизнесом и генерация: брендинг, сайты, вертикальная реклама 9:16.',
    feats: ['ии-враппер на sonnet', '3 генерации бесплатно', 'дальше от 49 ₽'],
  },
];

function Services({ onStart }) {
  return (
    <section id="services" 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' }}>
          всё продвижение в одном окне — переключаешься путями <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-primary)' }}>o/раздел</span>, платишь с общего счёта.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 16 }}>
        {SERVICES.map((s, i) => (
          <Reveal key={s.path} delay={i * 90}>
            <SvcCard interactive path={s.path} onClick={onStart} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <span style={{
                  width: 44, height: 44, borderRadius: 12, display: 'grid', placeItems: 'center',
                  background: 'var(--accent-dim)', border: '1px solid var(--border-accent-dim)', color: 'var(--green-400)',
                }}><SvcIcon name={s.icon} size={20} /></span>
                <span style={{ color: 'var(--text-muted)', display: 'flex' }}><SvcIcon name="arrow-up-right" size={16} /></span>
              </div>
              <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 8 }}>{s.title}</div>
              <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.55, marginBottom: 18 }}>{s.desc}</p>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9, marginTop: 'auto' }}>
                {s.feats.map((f) => (
                  <li key={f} style={{ display: 'flex', gap: 9, alignItems: 'baseline', fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-secondary)' }}>
                    <span style={{ color: 'var(--green-500)' }}>➜</span> {f}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 20 }}>
                <SvcButton variant="secondary" size="sm">открыть o/{s.path} <SvcIcon name="arrow-right" size={14} /></SvcButton>
              </div>
            </SvcCard>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Services });