// Advantages — alternating full-bleed bands, image + text side by side.
// Content + structure mirrored from mobile MAdvantages, scaled for desktop.

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

function AdvantagesSplit() {
  const D = D_A;

  const items = [
    {
      num: '01',
      tag: 'Гарантия качества',
      body: 'Каждый инфлюенсер проходит проверку по 40 параметрам — накрутка, вовлечённость, качество аудитории.',
      img: 'assets/feature-quality.png',
    },
    {
      num: '02',
      tag: 'Гибкий подбор',
      body: 'Выбирайте категорию, пол и количество инфлюенсеров. Задавайте стиль и формат контента под ваш бренд.',
      img: 'assets/feature-flexible.png',
    },
    {
      num: '03',
      tag: 'Удобная коммуникация',
      body: 'Автоматизированный сервис берёт коммуникацию с инфлюенсерами на себя — контролируйте весь процесс через мобильное приложение.',
      img: 'assets/feature-easy.png',
    },
  ];

  const [active, setActive] = React.useState(0);
  const it = items[active];

  return (
    <section id="advantages" style={{ padding: '120px 48px', background: D.bg, position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        {/* Section header */}
        <div style={{
          marginBottom: 48, display: 'flex', alignItems: 'flex-end',
          justifyContent: 'space-between', gap: 40, flexWrap: 'wrap',
        }}>
          <h2 style={{
            fontSize: 'clamp(40px, 4.6vw, 60px)', fontWeight: 800,
            letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0,
            textWrap: 'balance', maxWidth: 880,
          }}>
            Три причины <span style={{ color: D.green }}>выбрать SWAPP</span>
          </h2>
          <p style={{
            fontSize: 15, color: D.mute, maxWidth: 380, lineHeight: 1.55,
            margin: 0, textWrap: 'pretty',
          }}>
            Качество аудитории, гибкость формата и автоматизация процесса — три принципа, из которых построена платформа.
          </p>
        </div>

        {/* Selector strip — 3 buttons in a row, only one is active */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          borderTop: `1px solid ${D.line}`,
          borderBottom: `1px solid ${D.line}`,
        }}>
          {items.map((p, i) => {
            const isActive = i === active;
            return (
              <button key={p.num} onClick={() => setActive(i)} style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                fontFamily: 'inherit', textAlign: 'left',
                padding: '22px 28px',
                borderLeft: i === 0 ? 'none' : `1px solid ${D.line}`,
                position: 'relative',
                color: isActive ? D.ink : D.mute,
                transition: 'color .18s',
              }}>
                {/* Active top accent bar */}
                {isActive && (
                  <div aria-hidden style={{
                    position: 'absolute', top: -1, left: 0, right: 0, height: 2,
                    background: D.green, boxShadow: `0 0 12px ${D.green}66`,
                  }}/>
                )}
                <div style={{
                  fontSize: 13, fontWeight: 800, color: isActive ? D.green : D.mute2,
                  fontVariantNumeric: 'tabular-nums', letterSpacing: '0.08em',
                  marginBottom: 6,
                }}>{p.num}</div>
                <div style={{
                  fontSize: 18, fontWeight: 800, letterSpacing: '-0.015em',
                  textTransform: 'uppercase', lineHeight: 1.2,
                }}>{p.tag}</div>
              </button>
            );
          })}
        </div>

        {/* Active panel — big 3D image on left, body text on right */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
          alignItems: 'center', paddingTop: 56, minHeight: 420,
        }}>
          <div style={{
            position: 'relative', height: 380,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div aria-hidden style={{
              position: 'absolute', inset: 0,
              background: `radial-gradient(ellipse at 50% 60%, ${D.greenGlowStrong} 0%, ${D.greenGlow} 30%, transparent 65%)`,
              pointerEvents: 'none',
            }}/>
            <img key={it.img} src={it.img} alt="" style={{
              position: 'relative',
              maxHeight: 360, maxWidth: '85%', objectFit: 'contain',
              filter: 'drop-shadow(0 36px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 70px rgba(34,238,94,0.32))',
              animation: 'advFadeIn .4s ease-out',
            }}/>
          </div>

          <div>
            <div style={{
              fontSize: 14, fontWeight: 800, color: D.green,
              fontVariantNumeric: 'tabular-nums', letterSpacing: '0.16em',
              marginBottom: 18,
            }}>
              ПРИЧИНА · {it.num}
            </div>
            <h3 style={{
              fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 800,
              letterSpacing: '-0.025em', textTransform: 'uppercase',
              lineHeight: 1.08, margin: 0, marginBottom: 22,
              textWrap: 'balance', maxWidth: 520,
            }}>{it.tag}</h3>
            <p style={{
              fontSize: 18, color: D.ink2, lineHeight: 1.55,
              margin: 0, textWrap: 'pretty', maxWidth: 540,
            }}>{it.body}</p>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes advFadeIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { AdvantagesSplit });