function Coach() {
  const examples = [
    {
      label: 'Питание',
      user: 'Что съесть на ужин, чтобы добрать омега-3?',
      response: (
        <>Сегодня ты добрал <b style={{ color: 'var(--violet)' }}>736 мг омега-3</b> из 1100. Чтобы закрыть норму — 100 г лосося или 30 г грецких орехов. Лосось ещё подтянет витамин D, а его у тебя на 21% ниже нормы.</>
      ),
      suggestions: ['🐟 Запечённый лосось', '🥗 Салат с тунцом', '🌰 Грецкие орехи'],
    },
    {
      label: 'Цикл',
      user: 'Сил нет, хочу только лежать и шоколадку…',
      response: 'Понимаю, сегодня 24-й день цикла, прогестерон диктует свои правила. Шоколад — ок, но давай возьмём тёмный и добавим горстку миндаля. Это поддержит магний и спасёт от резкого скачка сахара, чтобы вечером не накрыла апатия.',
      suggestions: [],
    },
    {
      label: 'Срыв',
      user: 'Сорвалась сегодня, съела лишнего',
      response: 'Бывает, не страшно. Смотрю на завтрак и обед — в них не было белка + за весь день сильный недостаток воды. Один срыв не ломает спринт, но давай плавно вернёмся в ритм через ужин.',
      suggestions: ['Предложи варианты', 'Подумаю'],
    },
  ];

  const [active, setActive] = React.useState(0);
  const ex = examples[active];

  return (
    <section id="coach" className="pad-y-lg" style={{ position: 'relative' }}>
      <div className="wrap">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center',
        }} className="coach-grid">
          <Reveal>
            <SectionLabel n={3}>AI-специалист</SectionLabel>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 76px)', margin: '0 0 20px' }}>
              Задавай вопросы <span style={{
                background: 'linear-gradient(120deg, var(--violet) 30%, var(--pink) 100%)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
              }}>про себя.</span>
            </h2>
            <p className="lede">
              Миникорн знает твой контекст и отвечает именно тебе.
            </p>
          </Reveal>

          <Reveal delay={100}>
            <div style={{ position: 'relative' }}>
              <div aria-hidden style={{
                position: 'absolute', inset: '-10%',
                background: 'radial-gradient(50% 50% at 30% 50%, rgba(236,72,153,0.3), transparent 70%), radial-gradient(50% 50% at 70% 50%, rgba(167,139,250,0.4), transparent 70%)',
                filter: 'blur(40px)', zIndex: -1,
              }}/>

              {/* Example switcher */}
              <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
                {examples.map((e, i) => {
                  const isActive = active === i;
                  return (
                    <button key={i} onClick={() => setActive(i)} style={{
                      appearance: 'none', cursor: 'pointer',
                      padding: '0 16px', borderRadius: 999,
                      fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
                      minHeight: 36,
                      transition: 'all .2s',
                      background: isActive
                        ? 'linear-gradient(135deg, rgba(167,139,250,0.85), rgba(167,139,250,0.55))'
                        : 'rgba(167,139,250,0.10)',
                      border: `1px solid ${isActive ? 'rgba(167,139,250,0.7)' : 'rgba(167,139,250,0.30)'}`,
                      color: isActive ? '#fff' : 'var(--violet)',
                      boxShadow: isActive ? '0 6px 18px -6px rgba(167,139,250,0.55)' : 'none',
                      whiteSpace: 'nowrap',
                    }}>{`Пример ${i + 1}`}</button>
                  );
                })}
              </div>

              <div className="glass-strong" style={{ padding: 28, position: 'relative', minHeight: 480, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                  <img src="assets/minicorn-front.png" alt="Миникорн" style={{
                    width: 44, height: 44, borderRadius: '50%',
                    objectFit: 'cover', objectPosition: '40% 18%',
                    background: '#fff',
                    boxShadow: '0 0 16px rgba(167,139,250,0.6)',
                  }}/>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15 }}>Миникорн</div>
                  </div>
                </div>

                {/* User question bubble */}
                <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
                  <div style={{
                    background: 'var(--violet-2)', color: 'white',
                    padding: '12px 16px', borderRadius: '18px 18px 4px 18px',
                    maxWidth: '80%', fontSize: 14, lineHeight: 1.5,
                    boxShadow: '0 8px 20px -8px rgba(139,92,246,0.6)',
                  }}>
                    {ex.user}
                  </div>
                </div>

                {/* Minicorn response */}
                <div key={active} style={{ display: 'flex', marginBottom: 16, animation: 'coachFade .25s ease' }}>
                  <div style={{
                    background: 'rgba(255,255,255,0.06)', border: '1px solid var(--line)',
                    padding: '14px 18px', borderRadius: '18px 18px 18px 4px',
                    maxWidth: '85%', fontSize: 14, lineHeight: 1.6,
                  }}>
                    {ex.response}
                  </div>
                </div>

                {/* Suggested options (always reserve space) */}
                <div key={`s-${active}`} style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20, minHeight: 44, animation: 'coachFade .3s ease' }}>
                  {ex.suggestions.map((s, i) => (
                    <button key={i} style={{
                      appearance: 'none', cursor: 'pointer',
                      background: 'rgba(167,139,250,0.12)',
                      border: '1px solid rgba(167,139,250,0.3)',
                      color: 'var(--violet)', borderRadius: 999,
                      padding: '0 14px', fontSize: 12, fontFamily: 'var(--sans)',
                      minHeight: 44, display: 'inline-flex', alignItems: 'center',
                    }}>{s}</button>
                  ))}
                </div>

                {/* Input */}
                <div style={{
                  marginTop: 'auto',
                  display: 'flex', gap: 8, alignItems: 'center',
                  padding: '8px 8px 8px 16px', borderRadius: 999,
                  background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line-2)',
                }}>
                  <span style={{ flex: 1, color: 'var(--ink-3)', fontSize: 14 }}>Спроси что-нибудь…</span>
                  <button style={{
                    width: 36, height: 36, borderRadius: '50%', cursor: 'pointer',
                    background: 'var(--violet-2)', border: 0, color: 'white',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    boxShadow: '0 4px 12px -2px rgba(139,92,246,0.6)',
                  }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                </div>
              </div>

            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @keyframes coachFade {
          from { opacity: 0; transform: translateY(4px); }
          to   { opacity: 1; transform: none; }
        }
        @media (max-width: 880px){
          .coach-grid{ grid-template-columns: 1fr !important; gap: 40px !important; }
          .coach-mascot{ display: none; }
        }
      `}</style>
    </section>
  );
}
window.Coach = Coach;