// Калькулятор подбора услуг + философия. Светлая тема.
// Слоганы на выбор и философию выводит SiteFull.

const SLOGANS = [
{ ru: 'СММ, что работает.', en: 'smm, that works' },
{ ru: 'Реклама без наценки за бренд.', en: 'no brand-tax marketing' },
{ ru: 'Маркетинг — как чистая вода.', en: 'marketing as utility' },
{ ru: 'Делаем громко. Считаем точно.', en: 'loud. precise.' }];


// Калькулятор: выбираешь услуги, объём, длительность — считает цену + рекомендации
function Calculator({ onOrder, onCall, minH }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const services = [
  { id: 'sm', t: 'Ведение соцсетей', base: 80, unit: 'мес', desc: 'контент-план, тексты, дизайн, публикации, отчёты' },
  { id: 'rl', t: 'Reels & Shorts', base: 120, unit: 'мес', desc: '8–12 роликов / мес: идея, съёмка, монтаж' },
  { id: 'st', t: 'Стратегия и аудит', base: 80, unit: 'разово', desc: 'распаковка, конкуренты, KPI, рубрики' },
  { id: 'tg', t: 'Таргет / посевы', base: 50, unit: 'мес', desc: 'настройка, креативы, оптимизация' },
  { id: 'pr', t: 'Продакшн', base: 60, unit: 'день', desc: 'съёмочный день: фото / видео' }];

  const [picked, setPicked] = React.useState(['sm']);
  const [months, setMonths] = React.useState(3);
  const [scale, setScale] = React.useState(1); // 0.7 small, 1 std, 1.4 wide

  const toggle = (id) => setPicked((p) => p.includes(id) ? p.filter((x) => x !== id) : [...p, id]);

  const monthly = picked.reduce((sum, id) => {
    const s = services.find((x) => x.id === id);
    if (s.unit === 'мес') return sum + s.base * scale;
    return sum;
  }, 0);
  const onceFee = picked.reduce((sum, id) => {
    const s = services.find((x) => x.id === id);
    if (s.unit === 'разово') return sum + s.base * scale;
    if (s.unit === 'день') return sum + s.base * scale * 2; // считаем 2 дня
    return sum;
  }, 0);
  const total = monthly * months + onceFee;
  const market = Math.round(total * 1.85); // «средний рынок»
  const saved = market - total;

  const tier = picked.length === 0 ? 'выбери услуги' :
  total < 300 ? 'старт' :
  total < 800 ? 'рост' : 'премиум';

  return (
    <section style={{ padding: isMobile ? '32px 18px' : '32px 32px', borderBottom: '2px solid var(--ink)',
      minHeight: isMobile ? 'auto' : minH, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
        <h2 style={{ fontWeight: 900, fontSize: 'clamp(36px, 4.5vw, 64px)', letterSpacing: '-0.03em', lineHeight: 0.98,
          textTransform: 'uppercase', margin: 0, paddingBottom: '0.05em' }}>
          Подбери&nbsp; под&nbsp; <span style={{ fontFamily: 'Georgia,serif', fontStyle: 'italic', fontWeight: 400,
            textTransform: 'none', color: 'var(--accent)' }}>себя</span>
        </h2>
        <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 11, fontWeight: 700,
          letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6 }}>
          интерактивный калькулятор · ₽×1000
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 20 : 32 }}>
        {/* ВЫБОР */}
        <div style={{ border: '2px solid var(--ink)' }}>
          {services.map((s, i) => {
            const on = picked.includes(s.id);
            return (
              <div key={s.id} onClick={() => toggle(s.id)} data-cursor={on ? 'убрать' : 'добавить'}
              style={{ padding: '14px 20px', cursor: 'pointer',
                borderTop: i > 0 ? '1px solid var(--ink)' : 'none',
                background: on ? 'var(--accent)' : 'transparent',
                color: on ? 'var(--bg)' : 'var(--ink)',
                transition: 'background .2s, color .2s',
                display: 'grid', gridTemplateColumns: '32px 1fr auto auto', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 22, height: 22, border: `2px solid ${on ? 'var(--bg)' : 'var(--ink)'}`,
                  background: on ? 'var(--bg)' : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: on ? 'var(--accent)' : 'transparent', fontWeight: 900, fontSize: 13 }}>×</div>
                <div>
                  <div style={{ fontWeight: 900, fontSize: 18, letterSpacing: '-0.03em',
                    textTransform: 'uppercase', lineHeight: 1 }}>{s.t}</div>
                  <div style={{ marginTop: 4, fontSize: 11, opacity: 0.85,
                    fontFamily: 'JetBrains Mono,monospace', letterSpacing: '0.04em' }}>{s.desc}</div>
                </div>
                <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 9, fontWeight: 700,
                  letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.7 }}>{s.unit}</div>
                <div style={{ fontWeight: 900, fontSize: 20, letterSpacing: '-0.03em' }}>
                  {Math.round(s.base * scale)}
                </div>
              </div>);

          })}

          {/* Слайдер: длительность */}
          <div style={{ borderTop: '2px solid var(--ink)', padding: '14px 20px',
            background: 'var(--sub)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: 10 }}>
              <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 10, fontWeight: 700,
                letterSpacing: '0.22em', textTransform: 'uppercase' }}>длительность</div>
              <div style={{ fontWeight: 900, fontSize: 18 }}>{months} мес</div>
            </div>
            <input type="range" min={1} max={12} value={months}
            onChange={(e) => setMonths(+e.target.value)} data-cursor="двигай"
            style={{ width: '100%', accentColor: 'var(--accent)' }} />
          </div>

          {/* Объём */}
          <div style={{ borderTop: '1px solid var(--ink)', padding: '14px 20px',
            background: 'var(--sub)' }}>
            <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 10, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 10 }}>объём</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {[
              { v: 0.7, l: 'микро · до 5к подп.' },
              { v: 1, l: 'стандарт' },
              { v: 1.4, l: 'плотный · ежедневно' }].
              map((o, i) =>
              <button key={i} onClick={() => setScale(o.v)} data-cursor="выбрать"
              style={{ flex: 1, padding: '10px 10px', border: '2px solid var(--ink)',
                background: scale === o.v ? 'var(--ink)' : 'transparent',
                color: scale === o.v ? 'var(--bg)' : 'var(--ink)',
                fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 9,
                letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer',
                transition: 'background .2s, color .2s' }}>
                  {o.l}
                </button>
              )}
            </div>
          </div>
        </div>

        {/* ИТОГ */}
        <div style={{ border: '2px solid var(--ink)', padding: 20,
          display: 'flex', flexDirection: 'column', gap: 10, background: 'var(--bg)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between',
            fontFamily: 'JetBrains Mono,monospace', fontSize: 9, fontWeight: 700,
            letterSpacing: '0.25em', textTransform: 'uppercase', opacity: 0.6 }}>
            <span>твой пакет</span>
            <span>{tier}</span>
          </div>
          <div style={{ fontWeight: 900, fontSize: 'clamp(48px, 5vw, 76px)', letterSpacing: '-0.04em', lineHeight: 0.95, paddingBottom: '0.05em' }}>
            {total > 0 ? total.toLocaleString('ru-RU') : '0'}
            <span style={{ fontSize: 26, color: 'var(--accent)' }}> т ₽</span>
          </div>
          <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 10, fontWeight: 700,
            letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.7 }}>
            за {months} мес · {picked.length} {picked.length === 1 ? 'услуга' : 'услуг'}
          </div>

          <div style={{ marginTop: 4, padding: 12, background: 'var(--sub)' }}>
            <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 9, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6 }}>
              в среднем на рынке
            </div>
            <div style={{ fontWeight: 900, fontSize: 22, letterSpacing: '-0.03em',
              textDecoration: 'line-through', opacity: 0.5 }}>
              {market.toLocaleString('ru-RU')} т ₽
            </div>
            <div style={{ marginTop: 4, fontFamily: 'JetBrains Mono,monospace', fontSize: 10,
              fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent)' }}>
              экономия · {saved.toLocaleString('ru-RU')} т ₽
            </div>
          </div>

          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button data-cursor="отправить" onClick={onOrder}
            style={{ padding: '13px 20px', background: 'var(--accent)', color: 'var(--bg)',
              border: 'none', fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 11,
              letterSpacing: '0.22em', textTransform: 'uppercase', cursor: 'pointer' }}>
              получить расчёт →
            </button>
            <button data-cursor="звонок" onClick={onCall}
            style={{ padding: '11px 18px', background: 'transparent', color: 'var(--ink)',
              border: '2px solid var(--ink)', fontFamily: 'JetBrains Mono,monospace', fontWeight: 700,
              fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', cursor: 'pointer' }}>
              созвон 15 мин
            </button>
          </div>
        </div>
      </div>
    </section>);

}

// Философия бренда — для предпринимателей
function Philosophy({ minH }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const values = [
  { n: '01', t: 'Команда без штата',
    d: 'Стратеги, копирайтеры, аналитики — теперь это AI-агенты. Команда, которая никогда не уйдёт в отпуск.' },
  { n: '02', t: 'Цена как у стриминга',
    d: 'Подписка вместо контракта с агентством на месяцы вперёд. Та же команда, тот же результат — кратно дешевле.' },
  { n: '03', t: 'Вы видите всё',
    d: 'Каждый пост приходит на одобрение — отклонить, поправить, опубликовать. Или включите автопостинг и забудьте.' },
  { n: '04', t: 'Запуск за вечер',
    d: 'Один раз отвечаете на 20 вопросов — про продукт, аудиторию, тон. Дальше команда работает. Без подрядчиков, без долгих переговоров, без ожидания две недели.' }];


  return (
    <section style={{ padding: isMobile ? '40px 18px' : '40px 32px', borderBottom: '2px solid var(--ink)',
      background: 'var(--sub)', position: 'relative',
      minHeight: isMobile ? 'auto' : minH, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>

      {/* Маркер раздела */}
      <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 22 }}>
        # о нас
      </div>

      {/* Главная мысль — без переноса */}
      <div style={{ fontFamily: 'Georgia,serif', fontStyle: 'italic', fontWeight: 400,
        fontSize: 'clamp(28px, 3.6vw, 56px)', lineHeight: 1.1, letterSpacing: '-0.02em',
        marginBottom: 40, color: 'rgb(26, 26, 30)' }}>
        Вы делаете дело. <span style={{ color: 'var(--accent)' }}>Маркетинг делаем мы.</span>
      </div>

      {/* Подводка */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 48, alignItems: 'flex-start',
        paddingBottom: 32, borderBottom: '1.5px solid var(--ink)', marginBottom: 32 }}>
        <div style={{ fontSize: 'clamp(15px, 1.15vw, 19px)', lineHeight: 1.55 }}>
          Семейная пекарня с лучшим хлебом в районе проигрывает сетевику. Мастер с 10 годами
          опыта сидит без заказов, пока новичок с бюджетом на таргет забивает календарь.
          Судьбу продукта решает не его качество — а&nbsp;<b>рекламный бюджет</b>.
        </div>
        <div style={{ fontSize: 'clamp(15px, 1.15vw, 19px)', lineHeight: 1.55 }}>
          Даже фрилансер на ведение соцсетей — это от 25 тысяч в месяц. Агентство — от 70.
          Для малого бизнеса это серьёзная статья расходов. Мы заменили команду людей на команду
          AI-агентов: стратеги, копирайтеры, аналитики работают круглосуточно. То же качество,&nbsp;<b>за подписку</b>.
        </div>
      </div>

      {/* Подводка к карточкам */}
      <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 18 }}>
        ↓ что это значит на практике
      </div>

      {/* Что это значит на практике — карточки-билеты */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: isMobile ? 12 : 18 }}>
        {values.map((p, i) => (
          <div key={p.n} className="philo-ticket"
            style={{
              position: 'relative',
              padding: '24px 22px 22px',
              background: 'var(--bg)',
              border: '1.5px solid var(--ink)',
              display: 'flex', flexDirection: 'column', gap: 14,
              minHeight: 230,
              transition: 'transform .28s, box-shadow .28s',
              cursor: 'default',
            }}>
            {/* перфорация-уголок справа сверху */}
            <div aria-hidden="true" style={{
              position: 'absolute', top: 0, right: 0, width: 28, height: 28,
              background: 'var(--sub)',
              clipPath: 'polygon(0 0, 100% 0, 100% 100%)',
              borderLeft: '1.5px solid var(--ink)',
            }}/>
            {/* большая цифра */}
            <div style={{
              fontWeight: 900, fontSize: 56, letterSpacing: '-0.06em', lineHeight: 0.85,
              color: 'var(--accent)', fontFeatureSettings: '"tnum"',
            }}>
              {p.n}
            </div>
            {/* разделитель */}
            <div style={{ height: 1.5, background: 'var(--ink)', opacity: 0.85 }}/>
            {/* заголовок */}
            <div style={{
              fontWeight: 900, fontSize: 'clamp(16px, 1.3vw, 21px)', letterSpacing: '-0.02em',
              lineHeight: 1.1, textTransform: 'uppercase', paddingBottom: '0.05em',
            }}>
              {p.t}
            </div>
            {/* описание */}
            <div style={{ fontSize: 13.5, lineHeight: 1.5, opacity: 0.85, marginTop: 'auto' }}>
              {p.d}
            </div>
          </div>
        ))}
      </div>

      <style>{`
        .philo-ticket:hover{ transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--accent); }
      `}</style>
    </section>);

}

// Селектор слоганов: выбираешь — меняется hero
function SloganPicker({ idx, setIdx }) {
  return (
    <div style={{ display: 'flex', gap: 10, marginTop: 30 }}>
      {SLOGANS.map((s, i) =>
      <button key={i} onClick={() => setIdx(i)} data-cursor="выбрать"
      style={{ padding: '8px 14px', border: '1.5px solid var(--ink)',
        background: i === idx ? 'var(--ink)' : 'transparent',
        color: i === idx ? 'var(--bg)' : 'var(--ink)',
        fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 10,
        letterSpacing: '0.2em', textTransform: 'uppercase', cursor: 'pointer',
        transition: 'background .2s, color .2s' }}>
          0{i + 1} · {s.en}
        </button>
      )}
    </div>);

}

Object.assign(window, { Calculator, Philosophy, SloganPicker, SLOGANS });