function Pricing() {
  const [annual, setAnnual] = React.useState(true);
  const tiers = [
    { name: 'Старт', sub: 'Попробовать', price: { m: 0, y: 0 },
      feats: ['Миникорн 24/7','Полноценный спринт','AI-консилиум','Функционал без ограничений'] },
    { name: 'Личный', sub: 'Для тех, кто всерьёз', price: { m: 19.99, y: 119.99 }, featured: true,
      feats: ['Миникорн 24/7','Спринты по целям','AI-консилиум','Аналитика нутриентов','Аналитика динамики','История без ограничений'] },
    { name: 'Семья', sub: 'Для тех, кто в паре', price: { m: 29.99, y: 179.99 },
      feats: ['Всё из Личный','До 2 аккаунтов','История не пересекается'] },
  ];

  const fmt = (p) => p === 0 ? '$0' : `$${p.toFixed(2)}`;

  return (
    <section id="pricing" className="pad-y-lg">
      <div className="wrap">
        <Reveal>
          <SectionLabel n={7}>Тарифы</SectionLabel>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 40, marginBottom: 56, flexWrap: 'wrap' }}>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', margin: 0, maxWidth: '18ch', lineHeight: 1 }}>
              Цена меньше<br/><span style={{ color: 'var(--violet)' }}>одного визита</span><br/>к специалисту.
            </h2>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ fontSize: 13, color: annual ? 'var(--ink-3)' : 'var(--ink)' }}>Месяц</span>
              <button onClick={() => setAnnual(a => !a)} role="switch" aria-checked={annual} style={{
                appearance: 'none', cursor: 'pointer', padding: 0, border: 0,
                width: 48, height: 26, borderRadius: 999,
                background: annual ? 'var(--violet-2)' : 'var(--line-2)',
                position: 'relative', transition: 'background .2s',
              }}>
                <span style={{
                  position: 'absolute', top: 3, left: annual ? 25 : 3,
                  width: 20, height: 20, borderRadius: '50%', background: 'white',
                  transition: 'left .2s',
                }}/>
              </button>
              <span style={{ fontSize: 13, color: annual ? 'var(--ink)' : 'var(--ink-3)' }}>
                Год <span style={{
                  display: 'inline-block', padding: '4px 12px', fontSize: 12, fontWeight: 800,
                  marginLeft: 8, borderRadius: 999,
                  background: 'linear-gradient(135deg, #FACC15, #F59E0B)',
                  color: '#1a0e2e', letterSpacing: '0.04em',
                  boxShadow: '0 6px 18px -4px rgba(250,204,21,0.55)',
                }}>−50%</span>
              </span>
            </div>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="p-grid">
          {tiers.map((t, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className={t.featured ? 'glass-strong' : 'glass'} style={{
                padding: 32, height: '100%', display: 'flex', flexDirection: 'column',
                position: 'relative', overflow: 'hidden',
                ...(t.featured ? {
                  border: '1px solid rgba(167,139,250,0.4)',
                  background: 'linear-gradient(180deg, rgba(167,139,250,0.12), rgba(167,139,250,0.02))',
                } : {}),
              }}>
                <h3 className="display" style={{ margin: 0, fontSize: 36 }}>{t.name}</h3>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 24 }}>{t.sub}</div>

                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                  <span className="display" style={{ fontSize: 56, lineHeight: 1 }}>
                    {fmt(annual ? t.price.y : t.price.m)}
                  </span>
                  {t.price.m > 0 && <span style={{ fontSize: 13, color: 'var(--ink-3)' }}>/ {annual ? 'год' : 'мес'}</span>}
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--mono)', marginBottom: 24, minHeight: 16 }}>
                  {t.price.m > 0 && annual ? `≈ ${fmt(t.price.y / 12)} / мес` : ''}
                </div>

                <ul className="clean" style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 'auto' }}>
                  {t.feats.map((f, j) => (
                    <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14 }}>
                      <svg width="16" height="16" viewBox="0 0 16 16" style={{ marginTop: 4, flexShrink: 0 }}>
                        <circle cx="8" cy="8" r="8" fill={t.featured ? 'rgba(167,139,250,0.25)' : 'rgba(255,255,255,0.06)'}/>
                        <path d="M5 8l2 2 4-4" stroke="var(--violet)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                      <span style={{ color: 'var(--ink-2)' }}>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={240}>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
            <a href="#cta" className="btn" style={{
              height: 60, padding: '0 36px', fontSize: 16, fontWeight: 600,
              background: 'linear-gradient(135deg, var(--violet-2), var(--pink))',
              boxShadow: '0 16px 36px -10px rgba(139,92,246,0.6)',
            }}>
              Хочу в ранний доступ <Arrow/>
            </a>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px){ .p-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}
window.Pricing = Pricing;