// Pricing — Project tiers (4) or Subscription tiers (2 + SEO addon)

function Pricing(){
  const [mode, setMode] = React.useState('project');

  const tiers = [
    { id:'lite', name:'Лайт', price:29990, popular:false,
      desc:'Базовый запуск нейропродвижения на 3 месяца.',
      features:[
        'Подключение нейропродвижения на 3 месяца в Яндексе',
        'Настройка кабинета Яндекс Бизнес',
        'Анализ выдачи: чекер позиций, конкуренты, ЯБ, Метрика',
        'Перепрошивка прайса под SEO-ключи — до 50 шт.',
      ] },
    { id:'std', name:'Стандарт', price:49990, popular:false,
      desc:'Запуск + дизайн и контент для историй.',
      features:[
        'Всё из «Лайт»',
        'SEO-ключи — до 100 шт.',
        'Индивидуальный дизайн главного фото — 1 шт.',
        'SEO-новости / акции — до 2 шт.',
        'Индивидуальный дизайн историй — до 5 шт.',
        'Контент для историй — до 15 шт.',
        'Дублирование прайса и фото в 2ГИС',
      ] },
    { id:'prem', name:'Премиум', price:79990, popular:true,
      desc:'Полный цикл с ведением площадки.',
      features:[
        'Всё из «Стандарт»',
        'SEO-ключи — до 200 шт.',
        'SEO-новости — до 3 шт.',
        'Индивидуальный дизайн историй — 8 шт.',
        'Контент для историй — до 40 шт.',
        'Ведение площадки Яндекс — 3 месяца',
        'Индивидуальный дизайн витрины — 10 шт.',
        'Дизайн обложек новостей — 3 шт.',
      ] },
    { id:'plus', name:'Премиум+', price:99990, popular:false,
      desc:'Максимум + аудит продаж и упаковка.',
      features:[
        'Всё из «Премиум»',
        'SEO-ключи — до 300 шт.',
        'SEO-новости — до 4 шт.',
        'Индивидуальный дизайн историй — до 12 шт.',
        'Контент для историй — до 84 шт.',
        'Дизайн обложек новостей — 4 шт.',
        'Аудит отдела продаж',
        'Смысловая упаковка',
      ] },
  ];

  // Subscription mode
  const subs = [
    { id:'neuro', name:'Нейро', price:11999, popular:false,
      desc:'Базовое нейропродвижение карточки.',
      features:[
        'Нейропродвижение',
        'Настройка Яндекс Бизнес',
        'Анализ позиций',
      ] },
    { id:'neuro-plus', name:'Нейро + Ведение', price:19990, popular:true,
      desc:'Продвижение + контент и работа с отзывами.',
      features:[
        'Всё из «Нейро»',
        '4 новости / мес',
        'Ответы на отзывы',
        '2 истории / мес',
      ] },
  ];

  // SEO add-on (one-time) — sold alongside subscription
  const seoAddons = [
    { keys: 50,  price: 5000  },
    { keys: 100, price: 10000 },
    { keys: 200, price: 15000 },
    { keys: 300, price: 20000 },
  ];

  const fmt = (n) => n.toLocaleString('ru-RU') + " ₽";
  const list = mode === 'sub' ? subs : tiers;

  return (
    <section id="pricing" className="sec pricing">
      <div className="wrap">
        <div className="pri-head reveal">
          <span className="eyebrow">Тарифы</span>
          <h2 style={{marginTop:18}}>Один платёж — или подписка.<br/>
            <span className="em-mute">Выбор за вами.</span>
          </h2>
          <div className="pri-toggle" role="tablist">
            <button role="tab" aria-selected={mode==='project'} className={mode==='project'?'on':''} onClick={() => setMode('project')}>
              Пакеты «Под ключ»
            </button>
            <button role="tab" aria-selected={mode==='sub'} className={mode==='sub'?'on':''} onClick={() => setMode('sub')}>
              Ежемесячная подписка
            </button>
            <span className="pri-slider" style={{left: mode==='project' ? '4px' : 'calc(50% + 0px)'}}/>
          </div>
        </div>

        <div className={`pri-grid ${mode==='sub' ? 'pri-grid-sub' : ''}`}>
          {list.map(t => (
            <div key={t.id} className={`tier ${t.popular?'popular':''}`}>
              {t.popular && <span className="tier-pop">{mode==='sub' ? 'Рекомендуем' : 'Чаще всего выбирают'}</span>}
              <div className="tier-head">
                <h3 className="tier-name">{t.name}</h3>
                <p className="tier-desc">{t.desc}</p>
              </div>
              <div className="tier-price">
                <div className="tier-amount mono">{fmt(t.price)}</div>
                <div className="tier-period">
                  {mode==='project' ? 'единоразово · 3 мес. работы' : 'в месяц'}
                </div>
              </div>
              <a href="#cta" className={`btn ${t.popular?'primary':'dark'} tier-cta`}>
                {mode==='sub' ? 'Оставить заявку' : `Выбрать ${t.name}`} <Arrow/>
              </a>
              <ul className="tier-feat">
                {t.features.map((f, i) => (
                  <li key={i}>
                    <span className="check" aria-hidden="true">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                        <path d="m2.5 6.5 2.5 2.5 4.5-5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* SEO add-on — only shown in subscription mode */}
        {mode === 'sub' && (
          <div className="seo-addon">
            <div className="sa-head">
              <div>
                <span className="eyebrow muted" style={{fontSize:10}}>Дополнительно · разово</span>
                <h3 className="sa-title">SEO прайс-листа</h3>
                <p className="sa-desc">Перепрошивка прайса под SEO-ключи. Оплачивается отдельно к подписке.</p>
              </div>
            </div>
            <div className="sa-grid">
              {seoAddons.map((a, i) => (
                <div key={a.keys} className={`sa-card ${i===0?'on':''}`}>
                  <div className="sa-keys">до {a.keys}</div>
                  <div className="sa-units">ключей</div>
                  <div className="sa-price mono">{fmt(a.price)}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="pri-note reveal">
          <span className="pn-ic" aria-hidden="true">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M9 16c4 0 7-3 7-7s-3-7-7-7-7 3-7 7 3 7 7 7Z" stroke="currentColor" strokeWidth="1.5"/>
              <path d="M9 5v4l2 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            </svg>
          </span>
          <div>
            <b style={{color:'var(--fg)'}}>Не уверены, какой тариф нужен?</b> Оставьте заявку — соберём индивидуальное предложение
            за 24 часа на основе ниши и конкуренции в вашем районе.
          </div>
        </div>
      </div>

      <style>{`
        .pricing{background:var(--surface-2)}
        .pri-toggle{
          position:relative;display:inline-flex;margin-top:32px;
          background:#fff;border:1px solid var(--line);
          border-radius:999px;padding:4px;
          box-shadow:0 2px 6px -2px rgba(0,0,0,.04);
        }
        .pri-toggle button{
          position:relative;z-index:2;background:transparent;border:0;cursor:pointer;
          padding:11px 22px;border-radius:999px;color:var(--mute);font-size:14px;font-weight:500;
          transition:color .2s ease;display:inline-flex;align-items:center;gap:8px;
          font-family:inherit;
        }
        .pri-toggle button.on{color:#fff}
        .pri-slider{
          position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);
          background:var(--ink);border-radius:999px;z-index:1;
          transition:left .3s cubic-bezier(.4,.7,.2,1);
        }

        .pri-grid{display:grid;gap:16px;margin-top:48px}
        @media (min-width:780px){.pri-grid{grid-template-columns:repeat(4,1fr)}}
        /* Subscription mode: 2 wider cards, centered */
        .pri-grid-sub{max-width:780px;margin-left:auto;margin-right:auto;gap:20px}
        @media (min-width:780px){.pri-grid-sub{grid-template-columns:repeat(2,1fr)}}

        .tier{
          background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;
          display:flex;flex-direction:column;gap:24px;position:relative;
          transition:transform .2s ease, box-shadow .2s ease;
        }
        .tier:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(0,0,0,.12)}
        .tier.popular{
          background:var(--ink);color:#fff;border-color:var(--ink);
          box-shadow:0 24px 60px -20px rgba(0,0,0,.4);
          transform:translateY(-8px);
        }
        .tier.popular:hover{transform:translateY(-10px)}
        .tier-pop{
          position:absolute;top:-1px;right:24px;transform:translateY(-50%);
          background:var(--accent);color:#fff;
          font-size:11px;font-weight:700;letter-spacing:.02em;
          padding:6px 12px;border-radius:6px;
          box-shadow:0 6px 16px -6px color-mix(in srgb, var(--accent) 50%, transparent);
        }
        .tier-name{font-size:22px;letter-spacing:-.02em;margin-bottom:8px;font-weight:700}
        .tier.popular .tier-name{color:#fff}
        .tier-desc{font-size:13px;color:var(--mute);line-height:1.45}
        .tier.popular .tier-desc{color:rgba(255,255,255,.7)}
        .tier-price{padding-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-bottom:20px}
        .tier.popular .tier-price{border-color:rgba(255,255,255,.12)}
        .tier-amount{font-size:36px;font-weight:700;letter-spacing:-.035em;color:var(--fg);line-height:1}
        .tier.popular .tier-amount{color:#fff}
        .tier-period{font-size:12px;color:var(--mute);margin-top:8px}
        .tier.popular .tier-period{color:rgba(255,255,255,.55)}
        .tier-cta{justify-content:space-between;width:100%}
        .tier:not(.popular) .tier-cta.dark{--bgc:var(--ink);--fgc:#fff}
        .tier-feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
        .tier-feat li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--fg-2);line-height:1.4}
        .tier.popular .tier-feat li{color:rgba(255,255,255,.85)}
        .check{
          flex-shrink:0;display:inline-grid;place-items:center;width:18px;height:18px;
          border-radius:50%;background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);
          margin-top:1px;
        }
        .tier.popular .check{background:var(--accent);color:#fff}

        /* SEO add-on block */
        .seo-addon{
          margin-top:32px;background:#fff;border:1px solid var(--line);border-radius:20px;
          padding:28px;
        }
        .sa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
        .sa-title{font-size:22px;letter-spacing:-.02em;margin:8px 0 6px;font-weight:700}
        .sa-desc{font-size:14px;color:var(--mute);max-width:48ch}
        .sa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
        @media (max-width:780px){.sa-grid{grid-template-columns:repeat(2,1fr)}}
        .sa-card{
          background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
          padding:18px 20px;display:flex;flex-direction:column;gap:2px;
          transition:border-color .15s ease, background .15s ease;cursor:pointer;
        }
        .sa-card:hover{border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
        .sa-card.on{
          background:color-mix(in srgb, var(--accent) 5%, transparent);
          border-color:color-mix(in srgb, var(--accent) 40%, transparent);
        }
        .sa-keys{font-size:24px;font-weight:700;letter-spacing:-.025em;color:var(--fg)}
        .sa-units{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
        .sa-price{font-size:16px;color:var(--accent);font-weight:600}

        .pri-note{
          margin-top:32px;display:flex;gap:16px;align-items:flex-start;
          background:#fff;border:1px dashed var(--line-2);
          border-radius:14px;padding:20px 22px;color:var(--fg-2);font-size:14px;line-height:1.5;
        }
        .pn-ic{flex-shrink:0;color:var(--accent);margin-top:1px}
      `}</style>
    </section>
  );
}

window.Pricing = Pricing;