function NewBaseline() {
  const [active, setActive] = React.useState(0);

  const outcomes = [
    {
      color: 'var(--violet)',
      colorRaw: '#A78BFA',
      icon: (c) => (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/>
          <polyline points="16 17 22 17 22 11"/>
        </svg>
      ),
      tag: 'Снижение веса',
      title: 'Вес больше не поле битвы',
      lead: 'Результат без жёстких диет и ограничений.',
      points: [
        { icon: '🌿', text: 'Миникорн анализирует рацион, находит причины дефицитов и помогает восполнить их питанием. Когда клетки получают нужное — тело отдаёт лишнее. Это путь к здоровью через осознанное наблюдение и понимание себя. С поддержкой 24/7.' },
      ],
      stat: { k: '−5 кг', v: 'за первые 2 месяца у 68% пользователей *', note: '* — участники закрытого бета-теста' },
    },
    {
      color: '#FACC15',
      colorRaw: '#FACC15',
      icon: (c) => (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
        </svg>
      ),
      tag: 'Высокая энергия',
      title: 'Забудь про усталость',
      lead: 'Энергия без «ям» и литров кофе.',
      points: [
        { icon: '⚡', text: 'Энергия — это синергия витаминов, минералов, сна, водного баланса, движения, дня цикла и многого другого. Миникорн мониторит факторы 24/7, видит системные сбои и даёт точные подсказки для изменений. Не гадать. Знать.' },
      ],
      stat: { k: '91%', v: 'отметили рост энергии на 3-й неделе *', note: '* — участники закрытого бета-теста' },
    },
    {
      color: '#60A5FA',
      colorRaw: '#60A5FA',
      icon: (c) => (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      ),
      tag: 'Глубокий сон',
      title: 'Сон, который восстанавливает',
      lead: 'Не только голову, но и тело.',
      points: [
        { icon: '🌙', text: 'Ночь — это время глобальной «чистки» и настройки всех систем: от вымывания нейротоксинов из мозга до калибровки метаболизма щитовидной железой. Миникорн следит за достатком нутриентов в рационе и помогает поддерживать биохимию глубокого восстановления.' },
      ],
      stat: { k: '+40 мин', v: 'глубокого сна после 4 недель *', note: '* — участники закрытого бета-теста' },
    },
    {
      color: '#F97316',
      colorRaw: '#F97316',
      icon: (c) => (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9.663 17h4.673M12 3v1M3.34 7l.866.5M20.66 7l-.866.5M3 12H2M22 12h-1M5.63 19.37l-.707-.707M19.07 5.93l-.707-.707M18.37 19.37l.707-.707M5.63 5.93l.707-.707"/>
          <circle cx="12" cy="12" r="4"/>
        </svg>
      ),
      tag: 'Ясность ума',
      title: 'Ясность ума не фокус',
      lead: 'Иммунитет к эмоциональным перегрузкам и «туману» в голове.',
      points: [
        { icon: '🧬', text: 'Нервная система — это биохимия, которой можно управлять. Миникорн следит за балансом нутриентов и помогает убрать тревогу, туман в голове и эмоциональные перегрузки.' },
      ],
      stat: { k: '−38%', v: 'уровень тревожности по самооценке *', note: '* — участники закрытого бета-теста' },
    },
    {
      color: 'var(--green)',
      colorRaw: '#34D399',
      icon: (c) => (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M6 4v6a6 6 0 0 0 12 0V4"/>
          <path d="M4 20h16"/>
        </svg>
      ),
      tag: 'Набор массы',
      title: 'Мышцы как результат расчёта',
      lead: 'Инженерия тела на основе комплекса данных.',
      points: [
        { icon: '💪', text: 'Рост — это не только тренировки, но и синтез белка при участии критических кофакторов. Миникорн ведёт точный учёт нутриентов, сопоставляет их с образом жизни и превращает работу над формой в предсказуемый процесс. Забудь о случайных результатах.' },
      ],
      stat: { k: '+2.1 кг', v: 'мышечной массы за 8 недель в среднем *', note: '* — участники закрытого бета-теста' },
    },
    {
      color: 'var(--pink)',
      colorRaw: '#EC4899',
      icon: (c) => (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
      ),
      tag: 'Стабильное настроение',
      title: 'Настроение — тоже биохимия',
      lead: 'Миникорн следит за всем, что может на него влиять.',
      points: [
        { icon: '🧬', text: 'Серотонин синтезируется в кишечнике, дофамин зависит от еды и кофакторов, скачки сахара вызывают раздражительность и тревогу, воспаление из-за неправильного рациона влияет на мозг. До 60% того, что мы называем «настроением» — поддаётся коррекции питанием.' },
      ],
      stat: { k: '−42%', v: 'жалоб на тревожность после нормализации нутриентов *', note: '* — участники закрытого бета-теста' },
    },
  ];

  const current = outcomes[active];

  return (
    <section id="newbaseline" style={{ position: 'relative', overflow: 'hidden' }}>

      {/* ── Top part ── */}
      <div style={{ padding: '64px 0 48px' }}>
        <div className="wrap">

          {/* Header */}
          <Reveal>
            <div style={{ marginBottom: 36 }}>
              <SectionLabel n={1}>Результат</SectionLabel>
              <h2 className="display" style={{
                fontSize: 'clamp(38px, 6vw, 82px)',
                margin: '0 0 20px', lineHeight: 0.95,
              }}>
                Твоё новое<br/>
                <span style={{
                  background: 'linear-gradient(120deg, #ffffff 10%, var(--violet) 50%, var(--pink) 100%)',
                  WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                }}>базовое состояние.</span>
              </h2>
              <p className="lede">
                Через биохимию, образ жизни и научный подход —<br/>чтобы здоровье стало главной суперсилой.
              </p>
            </div>
          </Reveal>

          {/* Tabs (pills) + curved dashed connector + content card */}
          <Reveal delay={60}>
            <div className="nb-split" style={{
              display: 'grid',
              gridTemplateColumns: 'auto 0.5fr 2fr',
              gridTemplateRows: `repeat(${outcomes.length}, auto)`,
              columnGap: 12,
              rowGap: 0,
              alignItems: 'center',
            }}>
              {outcomes.map((o, i) => {
                const isActive = active === i;
                return (
                  <button key={i} onClick={() => setActive(i)} style={{
                    appearance: 'none', cursor: 'pointer',
                    padding: '0 18px', borderRadius: 999,
                    fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600,
                    minHeight: 30,
                    margin: '2px 0',
                    transition: 'all .2s',
                    background: isActive
                      ? `linear-gradient(135deg, ${o.colorRaw}cc, ${o.colorRaw}88)`
                      : `linear-gradient(135deg, ${o.colorRaw}22, ${o.colorRaw}0d)`,
                    border: `1.5px solid ${isActive ? o.colorRaw + 'cc' : o.colorRaw + '40'}`,
                    color: isActive ? '#fff' : o.colorRaw,
                    boxShadow: isActive ? `0 8px 24px -6px ${o.colorRaw}77` : 'none',
                    textShadow: isActive ? '0 1px 3px rgba(0,0,0,0.3)' : 'none',
                    whiteSpace: 'nowrap',
                    gridColumn: 1,
                    gridRow: i + 1,
                    justifySelf: 'start',
                  }}>{o.tag}</button>
                );
              })}

              {/* Curved dashed connector for active pill only */}
              <svg aria-hidden
                preserveAspectRatio="none"
                viewBox="0 0 100 100"
                className="nb-dash-svg"
                style={{
                  gridColumn: 2,
                  gridRow: `1 / ${outcomes.length + 1}`,
                  width: '100%', height: '100%',
                  pointerEvents: 'none',
                  alignSelf: 'stretch',
                }}>
                <path
                  d={`M 0 ${(active + 0.5) * (100 / outcomes.length)} C 50 ${(active + 0.5) * (100 / outcomes.length)}, 50 50, 100 50`}
                  stroke={current.colorRaw}
                  strokeWidth="1.5"
                  fill="none"
                  strokeDasharray="6 10"
                  strokeLinecap="round"
                  vectorEffect="non-scaling-stroke"
                  style={{ transition: 'd .15s ease, stroke .15s ease' }}
                />
              </svg>

              {/* Right: active content card */}
              <div className="nb-content" style={{
                gridColumn: 3,
                gridRow: `1 / ${outcomes.length + 1}`,
                alignSelf: 'start',
              }}>
                <div key={active} style={{
                  animation: 'nbFadeIn .15s ease', minWidth: 0,
                  display: 'flex', flexDirection: 'column',
                  padding: '28px 32px', borderRadius: 22,
                  border: `1px solid ${current.colorRaw}40`,
                  background: `linear-gradient(160deg, ${current.colorRaw}10, rgba(255,255,255,0.02))`,
                  position: 'relative', overflow: 'hidden',
                  transition: 'border-color .15s ease, background .15s ease',
                }}>
                  {/* Ambient glow */}
                  <div aria-hidden style={{
                    position: 'absolute', top: -80, right: -80, width: 280, height: 280, borderRadius: '50%',
                    background: `radial-gradient(circle, ${current.colorRaw}1f, transparent 70%)`,
                    filter: 'blur(40px)', pointerEvents: 'none',
                  }}/>

                  <div style={{
                    position: 'absolute', top: 24, right: 24, zIndex: 1,
                    width: 48, height: 48, borderRadius: 12,
                    background: `linear-gradient(135deg, ${current.colorRaw}28, ${current.colorRaw}0d)`,
                    border: `1px solid ${current.colorRaw}40`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {current.icon(current.colorRaw)}
                  </div>

                  <h3 className="display" style={{
                    fontSize: 'clamp(26px, 3vw, 38px)', margin: '0 0 12px', paddingRight: 64,
                    lineHeight: 1.0, letterSpacing: '-0.025em',
                  }}>{current.title}</h3>

                  <p style={{ fontSize: 16, color: current.colorRaw, fontWeight: 600, margin: '0 0 22px' }}>
                    {current.lead}
                  </p>

                  <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 20, minHeight: 110 }}>
                    {current.points.map((pt, i) => (
                      <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                        <span style={{ fontSize: 18, flexShrink: 0, marginTop: 2 }}>{pt.icon}</span>
                        <p style={{ margin: 0, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65 }}>{pt.text}</p>
                      </div>
                    ))}
                  </div>

                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <div style={{
                      padding: '20px 24px', borderRadius: 18,
                      background: `linear-gradient(135deg, ${current.colorRaw}18, ${current.colorRaw}06)`,
                      border: `1px solid ${current.colorRaw}30`,
                      textAlign: 'right',
                    }}>
                      <div className="display" style={{ fontSize: 48, lineHeight: 1, color: current.colorRaw, marginBottom: 6 }}>
                        {current.stat.k}
                      </div>
                      <div style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.5 }}>{current.stat.v}</div>
                      {current.stat.note && (
                        <div style={{ fontSize: 12, color: 'var(--ink-3)', opacity: 0.7, marginTop: 6, lineHeight: 1.5 }}>
                          {current.stat.note}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

        </div>
      </div>

<style>{`
        @keyframes nbFadeIn {
          from { opacity: 0; transform: translateY(4px); }
          to   { opacity: 1; transform: none; }
        }
        @media (max-width: 880px) {
          .nb-split { grid-template-columns: 1fr 1fr !important; column-gap: 8px !important; }
          .nb-split .nb-dash-svg { display: none !important; }
          .nb-split .nb-content { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 20px; order: 99; }
          .nb-split > button { grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; text-align: center !important; padding: 0 12px !important; font-size: 13px !important; }
          /* Reorder pills on mobile: Глубокий сон first, Снижение веса second */
          .nb-split > button:nth-child(1) { order: 2; }
          .nb-split > button:nth-child(2) { order: 3; }
          .nb-split > button:nth-child(3) { order: 1; }
          .nb-split > button:nth-child(4) { order: 4; }
          .nb-split > button:nth-child(5) { order: 5; }
          .nb-split > button:nth-child(6) { order: 6; }
        }
      `}</style>
    </section>
  );
}
window.NewBaseline = NewBaseline;
