// INTOgroup Commercial Proposal — App
const { useState, useEffect, useMemo, useRef } = React;

const fmt = (n) => n.toLocaleString('ru-RU') + ' ₽';

const TARIFFS = {
  std: {
    id: 'std',
    name: 'Стандартный',
    sub: 'Для отделов продаж до 50 человек',
    monthly: 6990,
    yearly: 58716,
    yearlyOriginal: 83880,
    features: [
      'CRM, лиды и сделки без ограничений',
      'Бизнес-процессы и автоматизация',
      'Облачное хранилище и совместные диски',
      'Аналитические отчёты по воронкам',
      'Контакт-центр и омниканальные чаты',
    ],
  },
  pro: {
    id: 'pro',
    name: 'Профессиональный',
    sub: 'Для растущих команд от 50 человек',
    monthly: 13990,
    yearly: 117516,
    yearlyOriginal: 167880,
    features: [
      'Всё из «Стандартного» + расширенные права',
      'KPI, отчёты руководителя и сквозная аналитика',
      'Учёт рабочего времени и отсутствий',
      'Воронка для маркетинга и автоворонки',
      'Поддержка 2-х компаний и более 100 пользователей',
      'Резервная копия и расширенные интеграции',
    ],
  },
};
const MP = {
  std: { monthly: 3660, yearly: 35136 },
  pro: { monthly: 7320, yearly: 70272 },
};

const Brand = () => (
  <a href="#top" className="brand">
    <img className="brand-mark" src="_лой_1-2.png" alt="INTOgroup" />
    <span className="brand-name">INTO<span>group</span></span>
  </a>
);

const Check = (p) => (
  <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
);
const Icon = ({ d, ...p }) => (
  <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);

function Topbar() {
  return (
    <header className="topbar" id="top">
      <div className="shell topbar-inner">
        <Brand />
        <nav className="nav">
          <a href="#pricing">Тарифы</a>
          <a href="#support">Техподдержка</a>
          <a href="#widgets">Виджеты</a>
          <a href="#about">О нас</a>
          <a href="#order">Как оформить</a>
        </nav>
        <a className="btn btn-primary" href="licenzbitrix-kp.pdf" download>
          Скачать PDF <span>↓</span>
        </a>
      </div>
    </header>
  );
}

function Hero({ onCta }) {
  return (
    <section className="hero">
      <div className="shell">
        <div className="hero-grid">
          <div>
            <span className="eyebrow"><b><span className="dot"></span>Скидка 30%</b> на годовые тарифы Битрикс24</span>
            <h1 className="hero-title">
              Лицензии Битрикс24 <br/>с <em>технической поддержкой</em> команды.
            </h1>
            <p className="hero-lede">
              Официальный партнёр Битрикс24. Оформляем лицензии по ценам вендора и добавляем то,
              что превращает покупку в результат: техподдержку, виджеты и инструменты роста.
            </p>
            <div className="hero-cta">
              <button className="btn btn-blue" onClick={onCta}>Подобрать тариф <span>→</span></button>
              <a className="btn btn-ghost" href="#widgets">Что входит в пакет</a>
            </div>
            <div className="hero-meta">
              <div><b>2021</b>год основания</div>
              <div><b>500+</b>внедрений CRM</div>
              <div><b>30 мин</b>SLA по ответу</div>
              <div><b>1,5 ч/мес</b>инженера в подарок</div>
            </div>
          </div>

          <div className="heroCard">
            <div className="hc-grad"></div>
            <div className="hc-noise"></div>
            <div className="hc-rings spin-slow"></div>
            <div className="hc-content">
              <div className="hc-top">
                <span className="hc-tag">Годовая экономия</span>
                <span className="hc-arrow">↗</span>
              </div>
              <div className="hc-mid">
                <s>167 880 ₽</s>
                117 516 ₽
              </div>
              <div className="hc-foot">
                <span>Профессиональный · 12 мес</span>
                <b>−30%</b>
              </div>
            </div>
          </div>
        </div>

        <div className="stats">
          <div><b>5 лет</b><span>в нише CRM-внедрений</span></div>
          <div><b><em>100%</em></b><span>аккредитованная IT-компания</span></div>
          <div><b>2 системы</b><span>Битрикс24 и amoCRM</span></div>
          <div><b>12+</b><span>виджетов в подарок</span></div>
        </div>
      </div>
    </section>
  );
}

function Pricing({ period, setPeriod, selected, setSelected }) {
  const sliderRef = useRef(null);
  useEffect(() => {
    const el = sliderRef.current;
    if (!el) return;
    const idx = period === 'month' ? 0 : 1;
    const btn = el.parentElement.children[idx + 1];
    el.style.left = btn.offsetLeft + 'px';
    el.style.width = btn.offsetWidth + 'px';
  }, [period]);

  return (
    <section id="pricing" className="scroll-mt bg-paper">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-tag">Тарифы Битрикс24</div>
            <h2>Официальные цены вендора. <em>Скидка 30%</em> на годовые тарифы.</h2>
          </div>
          <p className="sec-lede">
            Покупаете лицензию через INTOgroup — получаете её по той же цене,
            что напрямую у Битрикс24, плюс наша техподдержка и виджеты бесплатно.
          </p>
        </div>

        <div className="toggleWrap">
          <div className="toggle">
            <div className="slider" ref={sliderRef}></div>
            <button className={period === 'month' ? 'on' : ''} onClick={() => setPeriod('month')}>Помесячно</button>
            <button className={period === 'year' ? 'on' : ''} onClick={() => setPeriod('year')}>
              Годовая <span className="badge">−30%</span>
            </button>
          </div>
        </div>

        <div className="priceGrid">
          {Object.values(TARIFFS).map((t, i) => (
            <article
              key={t.id}
              className={'priceCard' + (selected === t.id ? ' featured' : '')}
              onClick={() => setSelected(t.id)}
            >
              <div className="pc-top">
                <div className="pc-name">{t.name}<small>{t.sub}</small></div>
                <span className="pc-pill">{selected === t.id ? '✓ выбран' : i === 0 ? 'Базовый' : 'Чаще выбирают'}</span>
              </div>
              <div className="pc-price">
                {period === 'month' ? fmt(t.monthly) : fmt(t.yearly)}
                <small>/ {period === 'month' ? 'мес' : 'год'}</small>
              </div>
              {period === 'year' && <div className="pc-was">без акции — {fmt(t.yearlyOriginal)}</div>}
              <div className="pc-meta">Цена с учётом НДС. Активация в день оплаты.</div>
              <div className="pc-divider"></div>
              <ul className="pc-feat">
                {t.features.map((f, j) => (
                  <li key={j}><Check/><span>{f}</span></li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        <div className="mp">
          <div className="mp-head">
            <div>
              <h3>Подписка на Маркетплейс 1С-Битрикс24</h3>
              <p>Расширения, шаблоны, готовые сценарии — на ваш тариф</p>
            </div>
            <span className="badge" style={{padding:'4px 12px',fontSize:'12px'}}>опционально</span>
          </div>
          <div className="mp-rows">
            <div className="mp-row"><div><span>Стандартный · 1 месяц</span><em>с учётом НДС</em></div><b>{fmt(MP.std.monthly)}</b></div>
            <div className="mp-row"><div><span>Стандартный · 12 месяцев</span><em>выгоднее на ~20%</em></div><b>{fmt(MP.std.yearly)}</b></div>
            <div className="mp-row"><div><span>Профессиональный · 1 месяц</span><em>с учётом НДС</em></div><b>{fmt(MP.pro.monthly)}</b></div>
            <div className="mp-row"><div><span>Профессиональный · 12 месяцев</span><em>выгоднее на ~20%</em></div><b>{fmt(MP.pro.yearly)}</b></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Configurator({ selected, setSelected, period, setPeriod, mp, setMp, onCta }) {
  const t = TARIFFS[selected];
  const licensePrice = period === 'month' ? t.monthly : t.yearly;
  const mpPrice = mp ? MP[selected][period === 'month' ? 'monthly' : 'yearly'] : 0;
  const total = licensePrice + mpPrice;
  const saved = period === 'year' ? t.yearlyOriginal - t.yearly : 0;

  return (
    <div className="configurator" id="order-cfg">
      <div className="cfg-grid">
        <div>
          <div className="cfg-h">Конфигуратор</div>
          <h3 className="cfg-title">Собираем ваш пакет за 30 секунд</h3>
          <p className="cfg-sub">Выберите тариф, срок и нужен ли Маркетплейс — увидите итоговую цену со всеми скидками.</p>

          <div className="cfg-options">
            <div className="cfg-h" style={{marginBottom:'4px',marginTop:'8px'}}>Тариф</div>
            {Object.values(TARIFFS).map(x => (
              <div key={x.id} className={'cfg-opt' + (selected === x.id ? ' sel' : '')} onClick={() => setSelected(x.id)}>
                <span className="cfg-radio"></span>
                <b>{x.name}</b>
                <span>{fmt(period === 'month' ? x.monthly : x.yearly)}</span>
              </div>
            ))}
            <div className="cfg-h" style={{marginBottom:'4px',marginTop:'16px'}}>Срок</div>
            <div className="cfg-opt" onClick={() => setPeriod('month')} style={{cursor:'pointer'}}>
              <span className={'cfg-radio' + (period === 'month' ? '' : '')} style={{borderColor: period==='month' ? 'var(--blue-bright)' : '',background: period==='month' ? 'var(--blue-bright)' : ''}}>
                {period === 'month' && <span style={{width:8,height:8,borderRadius:'50%',background:'var(--ink)'}}></span>}
              </span>
              <b>Помесячно</b>
              <span>гибко</span>
            </div>
            <div className="cfg-opt" onClick={() => setPeriod('year')}>
              <span className="cfg-radio" style={{borderColor: period==='year' ? 'var(--blue-bright)' : '',background: period==='year' ? 'var(--blue-bright)' : ''}}>
                {period === 'year' && <span style={{width:8,height:8,borderRadius:'50%',background:'var(--ink)'}}></span>}
              </span>
              <b>Годовая · −30%</b>
              <span style={{color:'#5DF2BD'}}>экономия {fmt(t.yearlyOriginal - t.yearly)}</span>
            </div>
            <div className="cfg-h" style={{marginBottom:'4px',marginTop:'16px'}}>Маркетплейс</div>
            <div className={'cfg-opt' + (mp ? ' sel' : '')} onClick={() => setMp(!mp)}>
              <span className="cfg-radio"></span>
              <b>Добавить подписку</b>
              <span>{fmt(MP[selected][period === 'month' ? 'monthly' : 'yearly'])}</span>
            </div>
          </div>
        </div>

        <div className="cfg-total">
          <div className="cfg-h">Итог</div>
          <div className="cfg-line"><span style={{color:'rgba(255,255,255,.6)'}}>Тариф «{t.name}»</span><span>{fmt(licensePrice)}</span></div>
          <div className="cfg-line"><span style={{color:'rgba(255,255,255,.6)'}}>Срок</span><span>{period === 'month' ? '1 месяц' : '12 месяцев'}</span></div>
          {mp && <div className="cfg-line"><span style={{color:'rgba(255,255,255,.6)'}}>Маркетплейс 1С-Битрикс24</span><span>{fmt(mpPrice)}</span></div>}
          <div className="cfg-line"><span style={{color:'rgba(255,255,255,.6)'}}>Техподдержка INTOgroup</span><span style={{color:'#5DF2BD'}}>в подарок</span></div>
          <div className="cfg-line"><span style={{color:'rgba(255,255,255,.6)'}}>Пакет из 12 виджетов</span><span style={{color:'#5DF2BD'}}>в подарок</span></div>

          <div className="cfg-final">
            <div>
              <span>К оплате с учётом НДС</span>
              <b>{fmt(total)}</b>
              {saved > 0 && <div className="cfg-save">Вы экономите {fmt(saved)} на лицензии</div>}
            </div>
          </div>

          <div className="cfg-cta">
            <button className="btn btn-blue" onClick={onCta}>Запросить счёт</button>
            <a className="btn btn-ghost" href="#order" style={{background:'rgba(255,255,255,.08)',color:'#fff'}}>Все условия</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function Support() {
  return (
    <section id="support" className="scroll-mt">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-tag">Техническая поддержка INTOgroup</div>
            <h2>Что вы получаете <em>сверх лицензии</em>.</h2>
          </div>
          <p className="sec-lede">
            Покупка через нас — это не только сама лицензия. В пакет входит инженер,
            закреплённый менеджер и набор готовых инструментов, которые экономят часы работы каждую неделю.
          </p>
        </div>

        <div className="pillars">
          <div className="pillar">
            <div className="pillar-num">01</div>
            <div className="pillar-icon"><Icon d={<><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4Z"/></>}/></div>
            <h3>Техническая поддержка</h3>
            <p>Готовый инженер в команде — без оформления, договоров и оплаты по часам.</p>
            <ul>
              <li>1,5 часа работы технического специалиста в месяц</li>
              <li>Любые задачи: настройка, БП, права, интеграции, воронки</li>
              <li>Закреплённый менеджер, знакомый с вашим порталом</li>
            </ul>
          </div>
          <div className="pillar">
            <div className="pillar-num">02</div>
            <div className="pillar-icon"><Icon d={<><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>}/></div>
            <h3>SLA в чате — 30 минут</h3>
            <p>Не теряете часы на ожидание ответа от вендора. Пишете в чат — отвечаем в рабочее время быстрее, чем закипает чайник.</p>
            <ul>
              <li>Реакция до 30 минут в рабочее время</li>
              <li>Один чат — вся команда поддержки в курсе</li>
              <li>Прозрачная история обращений и решений</li>
            </ul>
          </div>
          <div className="pillar">
            <div className="pillar-num">03</div>
            <div className="pillar-icon"><Icon d={<><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>}/></div>
            <h3>12 виджетов в подарок</h3>
            <p>Авторская сборка наших разработчиков — то, что обычно покупают отдельно на Маркетплейсе.</p>
            <ul>
              <li>Расширения для CRM и карточки клиента</li>
              <li>Бизнес-инструменты: платежи, теги, пароли</li>
              <li>Бесплатно при покупке или продлении лицензии</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

const WIDGETS = [
  { tag: 'CRM', title: 'Активные сделки клиента', desc: 'В карточке клиента видны все открытые сделки — менеджер сразу понимает контекст работы.' },
  { tag: 'CRM', title: 'Менеджер полей', desc: 'Состав и порядок полей в карточках CRM под разные роли — без правки конфигурации.' },
  { tag: 'Финансы', title: 'График платежей', desc: 'Плановые и фактические платежи прямо в Битрикс24, без выгрузок в Excel.' },
  { tag: 'Автоматизация', title: 'Массовый запуск БП', desc: 'Запуск бизнес-процессов одновременно по выбранной группе сделок или лидов.' },
  { tag: 'Безопасность', title: 'Менеджер паролей', desc: 'Централизованное хранение служебных паролей внутри портала.' },
  { tag: 'Задачи', title: 'Массовые теги в задачах', desc: 'Установка тегов сразу на множество задач для сегментации и фильтрации.' },
  { tag: 'Мотивация', title: 'Гонг', desc: 'Оповещает команду об успешных событиях — закрытых сделках, оплатах, целях.' },
  { tag: 'CRM', title: 'Распределение сделок', desc: 'Автоматическое назначение лидов и сделок по заданным правилам.' },
  { tag: 'Продажи', title: 'Шаблоны примечаний', desc: 'Типовые шаблоны для комментариев в сделках — единый стиль и скорость.' },
  { tag: 'Финансы+', title: 'Контроль оплат', desc: 'Расширенный учёт платёжной дисциплины внутри CRM.' },
  { tag: 'HR', title: 'Тестирование сотрудников', desc: 'Модуль проверки знаний команды по корпоративной базе знаний.' },
  { tag: 'UX', title: 'Группировка полей', desc: 'Визуальное разделение полей в карточке CRM на смысловые блоки.' },
];

function Widgets() {
  return (
    <section id="widgets" className="bg-cream scroll-mt">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-tag">Виджеты — 12 шт.</div>
            <h2>Готовые инструменты, <em>которые экономят часы.</em></h2>
          </div>
          <p className="sec-lede">
            Каждый виджет решает конкретную задачу — то, что иначе делается руками или
            покупается отдельно. Наши разработчики поддерживают и обновляют их сами.
          </p>
        </div>

        <div className="wgrid">
          {WIDGETS.map((w, i) => (
            <article className="widget" key={i}>
              <div className="w-top">
                <span className="w-icon">{String(i + 1).padStart(2, '0')}</span>
                <span className="w-arr">→</span>
              </div>
              <h4>{w.title}</h4>
              <p>{w.desc}</p>
              <span className="w-tag">{w.tag}</span>
            </article>
          ))}
        </div>

        <div className="wfree">
          <Icon d={<><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 2"/></>} style={{width:22,height:22,color:'var(--blue)',flexShrink:0}}/>
          <div>
            Все 12 виджетов — <b>бесплатно</b> при покупке или продлении лицензии через INTOgroup.
            Без скрытых платежей и подписки.
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  const directions = [
    ['01', 'Внедрение и настройка CRM', 'Битрикс24, amoCRM'],
    ['02', 'Интеграция CRM с 1С', 'заказы, договоры, остатки, отгрузки'],
    ['03', 'Корпоративные сайты и B2B-приложения', 'индивидуальная разработка'],
    ['04', 'Интеграции с маркетплейсами и мессенджерами', 'кастомные сценарии'],
  ];
  const team = [
    ['CRM-аналитики', 'Настраивают систему под бизнес-процессы заказчика. Проводят аудит, проектируют воронки, права, автоматизацию.'],
    ['Разработчики', 'Создают виджеты, приложения и API-интеграции. Авторы пакета виджетов, который мы дарим клиентам.'],
    ['Служба поддержки', 'Закреплённый менеджер и инженер. SLA по ответу в чате — до 30 минут в рабочее время.'],
  ];
  return (
    <section id="about" className="scroll-mt bg-paper">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-tag">О компании</div>
            <h2>INTOgroup — российская <em>аккредитованная</em> IT-компания.</h2>
          </div>
          <p className="sec-lede">
            Работаем с 2021 года. Главный офис — Нижний Новгород, проекты ведём по всей России.
            Полный цикл от аудита до запуска и поддержки.
          </p>
        </div>

        <div className="aboutGrid">
          <div className="aboutText">
            <p>
              Мы официальные партнёры 1С-Битрикс, Битрикс24 и amoCRM. Работаем полным циклом —
              от аудита бизнес-процессов и проектирования решения до внедрения, обучения команды
              и технической поддержки после запуска.
            </p>
            <p style={{fontSize:15,color:'var(--muted)'}}>
              Не пропадаем после оплаты счёта: каждый клиент закреплён за менеджером, который
              знает конфигурацию его портала и держит контекст по всем задачам.
            </p>
            <div className="aboutPartners">
              <span className="partner">Партнёр 1С-Битрикс</span>
              <span className="partner">Партнёр Битрикс24</span>
              <span className="partner">Партнёр amoCRM</span>
              <span className="partner">Аккредитация Минцифры</span>
            </div>
          </div>

          <div className="dirCard">
            {directions.map(([n, name, desc]) => (
              <div key={n} className="dirRow">
                <div className="dirNum">{n}</div>
                <b>{name}</b>
                <span>{desc}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{marginTop:40}}>
          <div className="sec-tag">Команда на вашем проекте</div>
          <div className="team" style={{marginTop:24}}>
            {team.map(([t, d], i) => (
              <div key={i} className="tcard" data-num={'0' + (i + 1)}>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Order({ onCta }) {
  const steps = [
    ['Согласуем тариф', 'Помогаем выбрать «Стандартный» или «Профессиональный», срок и нужен ли Маркетплейс.'],
    ['Выставляем счёт', 'Договор и счёт — в день обращения. Безналичная оплата от юр. лица или ИП.'],
    ['Активируем лицензию', 'Активация в день поступления оплаты. Параллельно подключаем техподдержку.'],
    ['Запускаем работу', 'Закрепляем менеджера и инженера, передаём пакет виджетов, согласуем первые задачи.'],
  ];
  return (
    <section id="order" className="scroll-mt">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-tag">Как оформить</div>
            <h2>Четыре шага <em>от вопроса до запуска.</em></h2>
          </div>
          <p className="sec-lede">
            Без бюрократии: счёт и договор — в день обращения, активация лицензии — в день оплаты.
          </p>
        </div>

        <div className="steps">
          {steps.map(([t, d], i) => (
            <div className="step" key={i}>
              <div className="step-n">0{i + 1}</div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ onCta }) {
  return (
    <section style={{paddingTop:0}}>
      <div className="shell">
        <div className="ctaBlock">
          <div>
            <div className="sec-tag" style={{color:'var(--blue-bright)'}}>Готовы начать</div>
            <h2>Подберём тариф и оформим <em>сегодня</em>.</h2>
            <p>
              Расскажите про задачи команды — поможем выбрать тариф, рассчитаем экономию
              и пришлём счёт на согласование в течение часа.
            </p>
            <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
              <button className="btn btn-blue" onClick={onCta}>Запросить счёт <span>→</span></button>
              <a className="btn btn-ghost" href="https://intogroup.pro" target="_blank" rel="noopener" style={{background:'rgba(255,255,255,.08)',color:'#fff'}}>intogroup.pro</a>
            </div>
          </div>
          <Signature compact onCta={onCta}/>
        </div>
      </div>
    </section>
  );
}

function Signature({ compact }) {
  return (
    <div className="sig" style={compact ? {background:'rgba(255,255,255,.06)',border:'1px solid rgba(255,255,255,.12)',color:'#fff'} : {}}>
      <div className="avatar">АС</div>
      <div>
        <h4 style={compact ? {color:'#fff'} : {}}>Альберт Сабитов</h4>
        <p className="sig-role" style={compact ? {color:'rgba(255,255,255,.55)'} : {}}>
          Business Development Manager · INTOgroup
        </p>
        <div className="sig-contacts">
          <a className="sig-contact" href="mailto:sales@intogroup.pro" style={compact ? {color:'rgba(255,255,255,.85)'} : {}}>
            <Icon d={<><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>}/>
            sales@intogroup.pro
          </a>
          <a className="sig-contact" href="tel:+79202999800" style={compact ? {color:'rgba(255,255,255,.85)'} : {}}>
            <Icon d={<><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></>}/>
            +7 920 299-98-00
          </a>
          <a className="sig-contact" href="https://t.me/alsab95" target="_blank" rel="noopener" style={compact ? {color:'rgba(255,255,255,.85)'} : {}}>
            <Icon d={<><path d="m22 2-7 20-4-9-9-4 20-7Z"/></>}/>
            t.me/alsab95
          </a>
          <a className="sig-contact" href="https://intogroup.pro" target="_blank" rel="noopener" style={compact ? {color:'rgba(255,255,255,.85)'} : {}}>
            <Icon d={<><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20"/></>}/>
            intogroup.pro
          </a>
        </div>
      </div>
    </div>
  );
}

function Modal({ open, onClose, payload }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(11,21,48,.55)',backdropFilter:'blur(6px)',zIndex:100,display:'grid',placeItems:'center',padding:'24px'}}>
      <div onClick={e => e.stopPropagation()} className="fadeIn" style={{background:'#fff',borderRadius:22,maxWidth:520,width:'100%',padding:36,position:'relative'}}>
        <button onClick={onClose} style={{position:'absolute',right:18,top:18,width:32,height:32,borderRadius:'50%',background:'var(--cream)',fontSize:18}}>×</button>
        <div className="sec-tag">Заявка на счёт</div>
        <h3 style={{fontSize:28,fontWeight:700,letterSpacing:'-0.02em',margin:'8px 0 8px'}}>Пришлём счёт в течение часа</h3>
        <p style={{color:'var(--muted)',fontSize:15,margin:'0 0 24px'}}>
          Оставьте контакт — закреплённый менеджер свяжется, уточнит реквизиты и
          оформит лицензию <b style={{color:'var(--ink)'}}>{TARIFFS[payload.tariff].name}</b> на {payload.period === 'month' ? '1 месяц' : '12 месяцев'}{payload.mp ? ' + Маркетплейс' : ''}.
        </p>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <input placeholder="Имя" style={inputStyle}/>
          <input placeholder="Телефон или e-mail" style={inputStyle}/>
          <input placeholder="Компания (необязательно)" style={inputStyle}/>
        </div>
        <button className="btn btn-blue" style={{marginTop:18,width:'100%',justifyContent:'center',padding:'14px 18px'}} onClick={onClose}>
          Отправить заявку
        </button>
        <p style={{fontSize:12,color:'var(--muted)',marginTop:14,textAlign:'center'}}>
          Нажимая «Отправить», вы соглашаетесь с обработкой персональных данных.
        </p>
      </div>
    </div>
  );
}
const inputStyle = {
  padding:'14px 16px', border:'1px solid var(--line)', borderRadius:12, fontSize:15, fontFamily:'inherit', outline:'none', transition:'.2s', background:'var(--cream)'
};

function App() {
  const [period, setPeriod] = useState('year');
  const [selected, setSelected] = useState('pro');
  const [mp, setMp] = useState(false);
  const [modal, setModal] = useState(false);

  const openModal = () => setModal(true);

  return (
    <>
      <Topbar/>
      <Hero onCta={openModal}/>
      <Pricing period={period} setPeriod={setPeriod} selected={selected} setSelected={setSelected}/>
      <div className="shell">
        <Configurator
          selected={selected} setSelected={setSelected}
          period={period} setPeriod={setPeriod}
          mp={mp} setMp={setMp}
          onCta={openModal}
        />
      </div>
      <Support/>
      <Widgets/>
      <About/>
      <Order onCta={openModal}/>
      <CTA onCta={openModal}/>

      <div className="shell">
        <div id="signature" style={{paddingTop:8}}>
          <Signature/>
        </div>
      </div>

      <footer className="shell">
        <div>© {new Date().getFullYear()} ООО «INTOgroup» · Аккредитованная IT-компания · Все цены с учётом НДС</div>
        <div>intogroup.pro · sales@intogroup.pro</div>
      </footer>

      <Modal open={modal} onClose={() => setModal(false)} payload={{ tariff: selected, period, mp }}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);