// "How it works" — horizontal connected timeline.
// 4 numbered nodes on a line; UI screenshot above each, copy below.

const D_H = (typeof window !== 'undefined' && window.__SwappTokens) || {};

function HowItWorksTimeline() {
  const D = D_H;
  const steps = [
    {
      n: '01',
      title: 'Регистрация компании',
      body: 'Скачайте приложение и создайте профиль компании.',
      time: '1 мин',
      img: 'assets/step-01.png',
    },
    {
      n: '02',
      title: 'Создание объявления',
      body: 'Опубликуйте предложение на ваших условиях.',
      time: '5 мин',
      img: 'assets/step-02.png',
    },
    {
      n: '03',
      title: 'Сервисный сбор',
      body: 'Внесите фиксированную комиссию платформы.',
      time: '1 мин',
      img: 'assets/step-03.png',
    },
    {
      n: '04',
      title: 'Запуск и трафик',
      body: 'Инфлюенсеры откликаются — вы получаете контент.',
      img: 'assets/step-04.png',
    },
  ];

  return (
    <section id="how" style={{ padding: '120px 48px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>

        {/* Header */}
        <div style={{ marginBottom: 80, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 4.6vw, 60px)', fontWeight: 800, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.02, textWrap: 'balance', maxWidth: 720 }}>Как это работает</h2>
          </div>
          <div style={{ fontSize: 14, color: D.mute, maxWidth: 360, lineHeight: 1.55 }}>
            Запустите рекламную кампанию с инфлюенсерами за 10 минут
          </div>
        </div>

        {/* Timeline */}
        <div style={{ position: 'relative' }}>
          {/* connecting line — runs through the centre of the dot row */}
          <div style={{
            position: 'absolute',
            left: '6.25%', right: '6.25%',  // center of first to center of last column (1/8 from each side)
            top: 'calc(280px + 38px)',       // image height (280) + half of dot (76/2=38)
            height: 2,
            background: `linear-gradient(90deg, transparent 0%, ${D.green}88 8%, ${D.green}88 92%, transparent 100%)`,
            zIndex: 0,
          }} />

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative', zIndex: 1 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>

                {/* UI screenshot frame */}
                <div style={{
                  position: 'relative', height: 280, marginBottom: 0,
                  background: `radial-gradient(ellipse at 50% 70%, ${D.greenGlowStrong}, transparent 65%), ${D.card}`,
                  border: `1px solid ${D.line}`,
                  borderRadius: 22,
                  overflow: 'hidden',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {/* subtle grid */}
                  <div style={{
                    position: 'absolute', inset: 0, opacity: 0.35,
                    backgroundImage: `linear-gradient(${D.line} 1px, transparent 1px), linear-gradient(90deg, ${D.line} 1px, transparent 1px)`,
                    backgroundSize: '32px 32px',
                    maskImage: 'radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%)',
                    WebkitMaskImage: 'radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%)',
                  }} />
                  <img src={s.img} alt="" style={{
                    position: 'relative', maxHeight: 220, maxWidth: '78%', objectFit: 'contain',
                    filter: 'drop-shadow(0 18px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 40px rgba(34,238,94,0.2))',
                  }} />
                  {/* time pill, top-right */}
                  {s.time && <div style={{
                    position: 'absolute', top: 14, right: 14,
                    fontSize: 11, fontWeight: 700, color: D.ink2,
                    padding: '5px 10px', background: 'rgba(0,0,0,0.55)',
                    border: `1px solid ${D.line}`, borderRadius: 999,
                    backdropFilter: 'blur(8px)', letterSpacing: '0.02em',
                    fontVariantNumeric: 'tabular-nums',
                  }}>{s.time}</div>}
                </div>

                {/* Numbered dot */}
                <div style={{ display: 'flex', justifyContent: 'center', marginTop: 22, marginBottom: 22 }}>
                  <div style={{
                    width: 76, height: 76, borderRadius: 38,
                    background: D.bg,
                    border: `2px solid ${D.green}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 22, fontWeight: 800, color: D.green,
                    fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
                    boxShadow: `0 0 0 6px ${D.bg}, 0 0 30px ${D.green}55`,
                    position: 'relative', zIndex: 2,
                  }}>
                    {s.n}
                  </div>
                </div>

                {/* Copy */}
                <div style={{ textAlign: 'center', padding: '0 8px' }}>
                  <h3 style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.02em', margin: 0, marginBottom: 10, lineHeight: 1.2, textWrap: 'balance' }}>{s.title}</h3>
                  <p style={{ fontSize: 13, color: D.mute, lineHeight: 1.55, margin: 0, textWrap: 'pretty' }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Footer total time */}
        <div style={{
          marginTop: 64,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
          padding: '14px 24px', maxWidth: 'fit-content', margin: '64px auto 0',
          background: D.card, border: `1px solid ${D.line}`, borderRadius: 999,
        }}>
          <div style={{ width: 8, height: 8, borderRadius: 4, background: D.green, boxShadow: `0 0 12px ${D.green}` }} />
          <div style={{ fontSize: 13, color: D.ink2, fontWeight: 600 }}>
            <span style={{ color: D.mute, fontWeight: 500 }}>Запуск кампании от</span> 10 минут
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { HowItWorksTimeline });