const { Button: HowButton } = window.OctanexDesignSystem_0e3b75;

const STEPS = [
  { k: '01', title: 'пополни баланс', desc: 'сбп, карта или usdt trc-20. страна снг / европа / сша — платёжка сама подберёт метод.', log: 'баланс +2 000 ₽ · сбп [OK]' },
  { k: '02', title: 'выбери услугу', desc: 'накрутка, ставка на юзернейм, покупка канала или генерация в ии-студии — с одного счёта.', log: 'заказ #8412 · подписчики 5 000 [OK]' },
  { k: '03', title: 'система выполняет', desc: 'прогресс и статусы в реальном времени, уведомления о ставках и заказах.', log: 'выполнение 62% ▮' },
];

function HowItWorks({ onStart }) {
  return (
    <section id="how" 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 40px' }}>
          три шага до результата
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
        {STEPS.map((s, i) => (
          <Reveal key={s.k} delay={i * 90}>
            <div style={{
              position: 'relative', height: '100%', padding: '28px 24px',
              border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)',
              background: 'var(--surface-card)', display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 44, fontWeight: 700, color: 'var(--accent-dim-2)', lineHeight: 1, WebkitTextStroke: '1px var(--border-accent)', marginBottom: 20 }}>{s.k}</div>
              <div style={{ fontSize: 19, fontWeight: 600, marginBottom: 8 }}>{s.title}</div>
              <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.55, marginBottom: 20 }}>{s.desc}</p>
              <div style={{
                marginTop: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-secondary)',
                background: 'var(--surface-1)', border: '1px solid var(--border-hairline)', borderRadius: 8, padding: '9px 12px',
              }}>
                <span style={{ color: 'var(--green-500)' }}>➜</span> {s.log.replace(' ▮', '')}
                {s.log.includes('▮') && <span className="ox-caret"></span>}
                {s.log.includes('[OK]') && <span style={{ color: 'var(--green-400)' }}></span>}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <Reveal delay={120}>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 40 }}>
          <HowButton size="lg" onClick={onStart}>создать аккаунт</HowButton>
        </div>
      </Reveal>
    </section>
  );
}

Object.assign(window, { HowItWorks });