/* global React, TileIcon, MiniPhone, ChatPhone, AppLogo, TeamPhone, PalettePhone, ROLES, PALETTES */
const { useState } = React;

const CheckIcon = ({ s = 14 }) =>
<svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m4 12 5 5L20 6" /></svg>;

const ArrowIcon = ({ s = 18 }) =>
<svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>;


/* ============================================================
 * NAV
 * ============================================================ */
const Nav = () =>
<div className="lp-nav">
    <div className="lp-nav__inner">
      <div className="lp-logo">
        <div className="lp-logo__mark" />
        <span><span className="mini">Mini</span>MoneyMo</span>
      </div>
      <div className="lp-nav__links">
        <a className="lp-nav__link" href="#how">Как это работает</a>
        <a className="lp-nav__link" href="#what">Что внутри</a>
        <a className="lp-nav__link" href="#team">Команда</a>
        <a className="lp-nav__link" href="#look">Внешний вид</a>
        <a className="lp-nav__link" href="#price">Тарифы</a>
      </div>
      <div className="lp-nav__cta">
        <button className="lp-btn lp-btn--ghost">Войти</button>
        <button className="lp-btn lp-btn--primary">Начать бесплатно</button>
      </div>
    </div>
  </div>;


/* ============================================================
 * HERO
 * ============================================================ */
const Hero = () =>
<section className="lp-hero">
    <div className="lp__container">
      <div className="lp-hero__grid">
        <div>
          <div className="lp-eyebrow">
            <span className="dot" />
            MiniMoneyMo · Бета · открытая регистрация
          </div>
          <h1 className="lp-h1">
            Скажи&nbsp;— <span className="grad">и&nbsp;сделано.</span><br />
            Бизнес в&nbsp;<span className="marigold">кармане</span>.
          </h1>
          <p className="lp-sub">
            Скажите голосом или напишите в&nbsp;чат&nbsp;— ассистент сам создаст заказ,
            спишет&nbsp;со склада, добавит клиента и&nbsp;напомнит, что сделать сегодня.
            Один тёплый кабинет вместо десяти&nbsp;табличек.
          </p>
          <div className="lp-hero__ctas">
            <button className="lp-btn lp-btn--primary lp-btn--big">
              Начать бесплатно
              <ArrowIcon />
            </button>
            <button className="lp-btn lp-btn--secondary lp-btn--big">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4" /></svg>
              Посмотреть 90&nbsp;секунд
            </button>
          </div>
          <div className="lp-hero__meta">
            <div className="lp-hero__meta-item"><CheckIcon />Без карты на&nbsp;старте</div>
            <div className="lp-hero__meta-item"><CheckIcon />До 15&nbsp;клиентов&nbsp;— бесплатно</div>
            <div className="lp-hero__meta-item"><CheckIcon />Заберёте все данные одной кнопкой</div>
          </div>
        </div>
        <div className="lp-hero__mock">
          <div className="lp-hero__phone">
            <div className="lp-hero__phone-glow" />
            <MiniPhone vertical="candles" height={520} />
            <div className="lp-hero__ai-bubble">
              <div className="mic-chip"><TileIcon name="mic" size={16} /></div>
              <div className="text">
                <span className="label">Голос · 0:08</span>
                «Сварил партию 50&nbsp;свечей лаванда‑мята»
              </div>
            </div>
            <div className="lp-hero__done-bubble">
              <div className="tick"><CheckIcon /></div>
              <div className="text">
                <strong>Партия #129 готова</strong><br />
                списано: воск 2кг + масло 30мл
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ============================================================
 * VERTICALS STRIP — wide range of micro-businesses
 * ============================================================ */
const VerticalsStrip = () => {
  const items = [
  { icon: 'batches', color: 'marigold', label: 'Свечи · мыло · handmade' },
  { icon: 'recipes', color: 'peach', label: 'Пекарни · кондитеры' },
  { icon: 'orders', color: 'rose', label: 'Цветы · букеты' },
  { icon: 'customers', color: 'lavender', label: 'Бьюти · барбер · студии' },
  { icon: 'inventory', color: 'periwinkle', label: 'Одежда · перепродажа' },
  { icon: 'materials', color: 'mint', label: 'Ателье · производство' },
  { icon: 'tasks', color: 'olive', label: 'Мастерские · услуги' },
  { icon: 'shipping', color: 'sky', label: 'Маркетплейсы и&nbsp;доставки' }];

  return (
    <section className="lp-verticals">
      <div className="lp__container">
        <div className="lp-verticals__label">Подойдёт, если у&nbsp;вас:</div>
        <div className="lp-verticals__grid">
          {items.map((p) =>
          <div className="lp-vertical-pill" key={p.label}>
              <span className={`tile ${p.color}`}><TileIcon name={p.icon} size={20} /></span>
              <span dangerouslySetInnerHTML={{ __html: p.label }} />
            </div>
          )}
        </div>
      </div>
    </section>);

};

/* ============================================================
 * HOW IT WORKS — 3 steps
 * ============================================================ */
const HowItWorks = () =>
<section className="lp-section" id="how">
    <div className="lp__container">
      <div className="lp-section__head">
        <div className="lp-section__num">Как это работает</div>
        <h2 className="lp-h2">Не&nbsp;заполняйте формы&nbsp;— просто расскажите.</h2>
        <p className="lp-section__sub">
          MMMo понимает обычную человеческую речь: «продала», «сварил», «привезли»,
          «записать Машу». Сам разносит по&nbsp;нужным разделам.
        </p>
      </div>
      <div className="lp-how__grid">
        <div className="lp-how__card" data-num="01">
          <div className="lp-how__icon ai"><TileIcon name="mic" size={26} /></div>
          <h3 className="lp-how__title">Скажите своими словами</h3>
          <p className="lp-how__text">
            Голосом, текстом в&nbsp;чате, фото чека&nbsp;— как удобно. Не&nbsp;нужно
            помнить названия полей и&nbsp;кнопок.
          </p>
        </div>
        <div className="lp-how__card" data-num="02">
          <div className="lp-how__icon marigold"><TileIcon name="recipes" size={28} /></div>
          <h3 className="lp-how__title">Посмотрите план</h3>
          <p className="lp-how__text">
            Ассистент показывает&nbsp;что собирается сделать: создать заказ, списать
            со&nbsp;склада, добавить клиента. Ничего не&nbsp;применится без «ОК».
          </p>
        </div>
        <div className="lp-how__card" data-num="03">
          <div className="lp-how__icon mint"><TileIcon name="analytics" size={28} /></div>
          <h3 className="lp-how__title">Всё на&nbsp;своих местах</h3>
          <p className="lp-how__text">Деньги, склад, клиент — в карточки. Аналитика собирается сама, без таблиц.


        </p>
        </div>
      </div>
    </div>
  </section>;


/* ============================================================
 * AI / VOICE MEGA SECTION — chat phone + sample commands
 * ============================================================ */
const AISection = () => {
  const samples = [
  { icon: 'batches', text: '«Сварил 30&nbsp;свечей лимон‑кедр, по&nbsp;800»' },
  { icon: 'orders', text: '«Маша забрала букет №&nbsp;5, оплатила СБП»' },
  { icon: 'materials', text: '«Привезли 5&nbsp;кг муки за&nbsp;1200»' },
  { icon: 'customers', text: '«Запиши Олю на&nbsp;стрижку в&nbsp;среду в&nbsp;15:00»' },
  { icon: 'inventory', text: '«Сколько у&nbsp;меня платьев&nbsp;XL?»' },
  { icon: 'analytics', text: '«Сколько заработала на&nbsp;этой неделе?»' }];

  return (
    <section className="lp-section lp-section--dark" id="ai">
      <div className="lp__container">
        <div className="lp-ai">
          <div className="lp-ai__left">
            <div className="lp-section__num" style={{ color: 'var(--ai-1)' }}>Голос · Чат · AI</div>
            <h2 className="lp-h2" style={{ textAlign: 'left', maxWidth: 520, marginInline: 0 }}>
              Один <span className="grad">помощник</span>, который понимает ваш&nbsp;бизнес.
            </h2>
            <p className="lp-section__sub" style={{ textAlign: 'left', maxWidth: 520, marginInline: 0 }}>
              Скажите вслух или напишите как&nbsp;другу&nbsp;— MMMo поймёт контекст,
              предложит план и&nbsp;сделает. Никаких форм, никаких «обязательных полей со&nbsp;звёздочкой».
            </p>

            <div className="lp-ai__props">
              <div className="lp-ai__prop">
                <div className="num">01</div>
                <div className="body">
                  <strong>Понимает по‑русски.</strong> Даже с&nbsp;акцентом, на&nbsp;ходу
                  и&nbsp;со&nbsp;звуком цеха или кафе на&nbsp;фоне.
                </div>
              </div>
              <div className="lp-ai__prop">
                <div className="num">02</div>
                <div className="body">
                  <strong>Не&nbsp;делает ничего без вашего «ок».</strong> Сначала
                  показывает план&nbsp;— потом выполняет. Удалить, поменять, отменить
                  можно одним тапом.
                </div>
              </div>
              <div className="lp-ai__prop">
                <div className="num">03</div>
                <div className="body">
                  <strong>Помнит ваш бизнес.</strong> Знает ваши товары, клиентов,
                  цены, рецепты. «Как обычно Маше»&nbsp;— тоже команда.
                </div>
              </div>
            </div>

            <div className="lp-ai__samples-title">Попробуйте сказать:</div>
            <div className="lp-ai__samples">
              {samples.map((s, i) =>
              <div key={i} className="lp-sample">
                  <span className="ico"><TileIcon name={s.icon} size={16} /></span>
                  <span dangerouslySetInnerHTML={{ __html: s.text }} />
                </div>
              )}
            </div>
          </div>

          <div className="lp-ai__phone">
            <div className="lp-ai__phone-glow" />
            <ChatPhone height={600} />
          </div>
        </div>
      </div>
    </section>);

};

/* ============================================================
 * WHAT'S INSIDE — feature grid
 * ============================================================ */
const FEATURES = [
{
  icon: 'inventory', color: 'mint',
  title: 'Склад без слёз',
  body: 'Остатки считаются сами после каждой продажи и&nbsp;закупки. Предупредим, когда что‑то заканчивается.',
  bullets: ['Минимальные остатки', 'Резервы под заказы', 'Партии и&nbsp;сроки годности']
},
{
  icon: 'tasks', color: 'periwinkle',
  title: 'Задачи на&nbsp;сегодня',
  body: 'Утром открыли&nbsp;— видите ровно&nbsp;то, что нужно сделать. Без длинных списков и&nbsp;«потеряшек».',
  bullets: ['Из&nbsp;заказов и&nbsp;запасов', 'Можно делегировать', 'Голосом: «напомни во&nbsp;вторник»']
},
{
  icon: 'orders', color: 'marigold',
  title: 'Заказы и&nbsp;воронка',
  body: 'От&nbsp;«узнал в&nbsp;инсте» до&nbsp;«отгружено» в&nbsp;одной ленте. Видно, кто ждёт ответ.',
  bullets: ['Источник: WhatsApp, Telegram, Авито', 'Статусы и&nbsp;сроки', 'Шаблоны быстрых ответов']
},
{
  icon: 'customers', color: 'rose',
  title: 'Клиенты и&nbsp;история',
  body: 'Кто что покупал, когда&nbsp;и за&nbsp;сколько. Дни рождения и&nbsp;любимые позиции&nbsp;— под&nbsp;рукой.',
  bullets: ['Тэги: VIP, оптовик, друг', 'Заметки и&nbsp;аллергии', 'Сегменты для рассылок']
},
{
  icon: 'revenue', color: 'olive',
  title: 'Деньги по‑честному',
  body: 'Выручка, прибыль и&nbsp;что&nbsp;«съело» месяц. Без Excel и&nbsp;корпоративных дашбордов.',
  bullets: ['Графики недели и&nbsp;месяца', 'Маржа по&nbsp;товарам', 'Хитовые позиции']
},
{
  icon: 'team', color: 'lavender',
  title: 'Команда',
  body: 'Доступ&nbsp;тому, кто помогает. Каждый видит свои задачи&nbsp;— и&nbsp;ничего лишнего.',
  bullets: ['Роли: продажи, склад, бухгалтерия', 'Кто&nbsp;что сделал', 'До 5&nbsp;человек на&nbsp;Pro']
}];


const WhatsInside = () =>
<section className="lp-section" id="what">
    <div className="lp__container">
      <div className="lp-section__head">
        <div className="lp-section__num">Что внутри</div>
        <h2 className="lp-h2">Всё, что нужно микробизнесу&nbsp;— в&nbsp;одном кабинете.</h2>
        <p className="lp-section__sub">
          Без «учётной системы» с&nbsp;1990-х. Каждая фишка работает голосом,
          из&nbsp;чата ассистента или вручную&nbsp;— как удобно.
        </p>
      </div>
      <div className="lp-feat__grid">
        {FEATURES.map((f) =>
      <div className="lp-feat" key={f.title}>
            <div className={`lp-feat__icon ${f.color}`}><TileIcon name={f.icon} size={28} /></div>
            <h3 className="lp-feat__title" dangerouslySetInnerHTML={{ __html: f.title }} />
            <p className="lp-feat__body" dangerouslySetInnerHTML={{ __html: f.body }} />
            <ul className="lp-feat__bul">
              {f.bullets.map((b, i) =>
          <li key={i}><span className="dot" /><span dangerouslySetInnerHTML={{ __html: b }} /></li>
          )}
            </ul>
          </div>
      )}
      </div>

      {/* Channels + Payments strip */}
      <div className="lp-strip">
        <div className="lp-strip__item">
          <div className="lp-strip__title">Каналы продаж</div>
          <div className="lp-strip__desc">
            Сообщения и&nbsp;заказы из&nbsp;Telegram, WhatsApp, Instagram и&nbsp;Авито собираются
            в&nbsp;одну ленту. Видно, кто ждёт ответ.
          </div>
          <div className="lp-strip__logos">
            <span><AppLogo name="telegram" /></span>
            <span><AppLogo name="whatsapp" /></span>
            <span><AppLogo name="instagram" /></span>
            <span><AppLogo name="avito" /></span>
          </div>
        </div>
        <div className="lp-strip__item">
          <div className="lp-strip__title">Маркетплейсы</div>
          <div className="lp-strip__desc">
            Заказы и&nbsp;остатки с&nbsp;Ozon и&nbsp;Wildberries синхронизируются сами. Чтобы
            не&nbsp;ходить в&nbsp;пять кабинетов.
          </div>
          <div className="lp-strip__logos">
            <span><AppLogo name="ozon" /></span>
            <span><AppLogo name="wildberries" /></span>
            <span><AppLogo name="avito" /></span>
          </div>
        </div>
        <div className="lp-strip__item">
          <div className="lp-strip__title">Платежи</div>
          <div className="lp-strip__desc">
            Принимайте деньги по&nbsp;СБП, картой или ссылкой. Чек ФНС уходит клиенту,
            движение&nbsp;— в&nbsp;аналитику.
          </div>
          <div className="lp-strip__logos">
            <span><AppLogo name="sbp" /></span>
            <span><AppLogo name="robokassa" /></span>
            <span><AppLogo name="yukassa" /></span>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ============================================================
 * WHO IT'S FOR — verticals showcase phones
 * ============================================================ */
const WhoItsFor = () =>
<section className="lp-section lp-section--alt" id="who">
    <div className="lp__container">
      <div className="lp-section__head">
        <div className="lp-section__num">Для кого</div>
        <h2 className="lp-h2">Одно приложение&nbsp;— много бизнесов.</h2>
        <p className="lp-section__sub">
          Скажите в&nbsp;онбординге, чем занимаетесь&nbsp;— MMMo сам подберёт нужные
          разделы и&nbsp;названия. Если что&nbsp;— потом всё&nbsp;поменяете.
        </p>
      </div>
      <div className="lp-vshow">
        <div className="lp-vshow__card">
          <div className="lp-vshow__head">
            <div className="mark marigold"><TileIcon name="batches" size={22} /></div>
            <div>
              <div className="title">Свечи и&nbsp;мыло</div>
              <div className="sub">«сварил партию&nbsp;— списать сырьё»</div>
            </div>
          </div>
          <MiniPhone vertical="candles" height={460} />
        </div>
        <div className="lp-vshow__card">
          <div className="lp-vshow__head">
            <div className="mark peach"><TileIcon name="recipes" size={22} /></div>
            <div>
              <div className="title">Пекарни</div>
              <div className="sub">«замесил тесто на&nbsp;20&nbsp;булок»</div>
            </div>
          </div>
          <MiniPhone vertical="bakery" height={460} />
        </div>
        <div className="lp-vshow__card">
          <div className="lp-vshow__head">
            <div className="mark rose"><TileIcon name="orders" size={22} /></div>
            <div>
              <div className="title">Цветы и&nbsp;букеты</div>
              <div className="sub">«заказ на&nbsp;завтра, адрес запиши»</div>
            </div>
          </div>
          <MiniPhone vertical="flowers" height={460} />
        </div>
        <div className="lp-vshow__card">
          <div className="lp-vshow__head">
            <div className="mark periwinkle"><TileIcon name="inventory" size={22} /></div>
            <div>
              <div className="title">Магазины одежды</div>
              <div className="sub">«пришла поставка, 12&nbsp;футболок»</div>
            </div>
          </div>
          <MiniPhone vertical="resale" height={460} />
        </div>
        <div className="lp-vshow__card">
          <div className="lp-vshow__head">
            <div className="mark lavender"><TileIcon name="customers" size={22} /></div>
            <div>
              <div className="title">Бьюти и&nbsp;услуги</div>
              <div className="sub">«запиши Олю в&nbsp;среду на&nbsp;стрижку»</div>
            </div>
          </div>
          <MiniPhone vertical="beauty" height={460} />
        </div>
        <div className="lp-vshow__card lp-vshow__card--more">
          <div className="lp-vshow__more">
            <div className="lp-vshow__more-h">
              <TileIcon name="ai" size={28} />
            </div>
            <h4>Вашего&nbsp;— ещё нет?</h4>
            <p>
              Расскажите в&nbsp;онбординге своими словами&nbsp;— ассистент соберёт
              похожий пресет из&nbsp;готовых блоков. Подходит почти всем, кто работает
              сам или маленькой командой.
            </p>
            <button className="lp-btn lp-btn--primary">Попробовать <ArrowIcon s={16} /></button>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ============================================================
 * TEAM — one business, different people, different views
 * ============================================================ */
const Team = () =>
<section className="lp-section lp-section--paper" id="team">
    <div className="lp__container">
      <div className="lp-section__head">
        <div className="lp-section__num">Команда</div>
        <h2 className="lp-h2">Один бизнес, у&nbsp;каждого&nbsp;— свой кабинет.</h2>
        <p className="lp-section__sub">Подключите тех, кто помогает: мастера, продажники, бухгалтера. Каждому — свой набор плиток. Мастер не видит выручку, бухгалтер не видит партии, а вы видите всё.



      </p>
      </div>

      <div className="lp-team">
        {ROLES.map((r) =>
      <div className="lp-team__card" key={r.id}>
            <div className="lp-team__person">
              <div className={`lp-team__avatar ${r.accent}`}>{r.avatar}</div>
              <div>
                <div className="lp-team__name">{r.name}</div>
                <div className={`lp-team__role ${r.accent}`}>{r.role}</div>
              </div>
            </div>
            <TeamPhone role={r} height={440} />
            <p className="lp-team__summary">{r.summary}</p>
          </div>
      )}
      </div>

      <div className="lp-team__note">
        <div className="lp-team__note-ic"><TileIcon name="settings" size={20} /></div>
        <div>
          <strong>Роли настраиваются как угодно.</strong>
          <span>Выдайте мастеру доступ только к&nbsp;партиям и&nbsp;складу, продажнику&nbsp;—
          к&nbsp;заказам и&nbsp;клиентам. Кто&nbsp;что сделал&nbsp;— всегда видно в&nbsp;истории.</span>
        </div>
      </div>
    </div>
  </section>;


/* ============================================================
 * LOOK — 6 palettes, light + dark
 * ============================================================ */
const Look = () => {
  const light = PALETTES.filter((p) => p.theme === 'light');
  const dark = PALETTES.filter((p) => p.theme === 'dark');
  return (
    <section className="lp-section" id="look">
      <div className="lp__container">
        <div className="lp-section__head">
          <div className="lp-section__num">Внешний вид</div>
          <h2 className="lp-h2">Один кабинет — ваш по&nbsp;цвету и&nbsp;настроению.</h2>
          <p className="lp-section__sub">
            Каждая плитка цветная&nbsp;— поэтому MiniMoneyMo похож не&nbsp;на&nbsp;серую таблицу,
            а&nbsp;на&nbsp;настольную игру. Выберите готовую палитру или подберите свою&nbsp;—
            всё перекрашивается в&nbsp;один тап.
          </p>
        </div>

        <div className="lp-look">
          <div className="lp-look__band">
            <div className="lp-look__band-head">
              <span className="lp-look__band-num">01</span>
              <h3>Светлые</h3>
              <span className="lp-look__band-sub">Для&nbsp;дневной работы и&nbsp;витрин</span>
            </div>
            <div className="lp-look__row">
              {light.map((p) =>
              <PalettePhone palette={p} key={p.id} />
              )}
            </div>
          </div>

          <div className="lp-look__band lp-look__band--dark">
            <div className="lp-look__band-head">
              <span className="lp-look__band-num">02</span>
              <h3>Тёмные</h3>
              <span className="lp-look__band-sub">Для&nbsp;вечера, цеха и&nbsp;OLED‑экранов</span>
            </div>
            <div className="lp-look__row">
              {dark.map((p) =>
              <PalettePhone palette={p} key={p.id} />
              )}
            </div>
          </div>
        </div>

        <div className="lp-look__extras">
          <div className="lp-look__extra">
            <div className="ic marigold"><TileIcon name="settings" size={20} /></div>
            <div>
              <strong>Каждая плитка&nbsp;— отдельный цвет.</strong>
              <span>Не&nbsp;нравится оранжевая «Партии»? Поменяйте на&nbsp;фиолетовую за&nbsp;один тап.</span>
            </div>
          </div>
          <div className="lp-look__extra">
            <div className="ic mint"><TileIcon name="onboarding" size={20} /></div>
            <div>
              <strong>Палитра под бренд.</strong>
              <span>Поменяйте цвет и&nbsp;шрифт под свой логотип&nbsp;— или сгенерируйте новую палитру в&nbsp;один клик.</span>
            </div>
          </div>
          <div className="lp-look__extra">
            <div className="ic periwinkle"><TileIcon name="team" size={20} /></div>
            <div>
              <strong>У&nbsp;каждого сотрудника&nbsp;— своя.</strong>
              <span>Мастеру&nbsp;— графит, бухгалтеру&nbsp;— мята, владельцу&nbsp;— бумага. Все довольны.</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

/* ============================================================
 * EXPORT TRUST — slim
 * ============================================================ */
const ExportTrust = () =>
<section className="lp-section lp-section--alt">
    <div className="lp__container">
      <div className="lp-trust">
        <div className="lp-trust__quote">
          «Я&nbsp;не&nbsp;хочу обещать, что&nbsp;вы никогда не&nbsp;уйдёте.
          Я&nbsp;обещаю&nbsp;— когда уйдёте, это будет один&nbsp;клик».
          <span className="author">— основатель MMMo</span>
        </div>
        <div className="lp-trust__visual">
          <div className="lp-trust__head">
            <div className="lp-trust__ic"><TileIcon name="export" size={26} /></div>
            <h4>Кнопка «я&nbsp;вырос»</h4>
          </div>
          <p>
            Все ваши клиенты, заказы, склад и&nbsp;платежи&nbsp;— одним ZIP‑архивом
            с&nbsp;инструкциями для других систем.
          </p>
          <div className="lp-trust__files">
            <span className="lp-file-pill">клиенты.csv</span>
            <span className="lp-file-pill">заказы.csv</span>
            <span className="lp-file-pill">склад.csv</span>
            <span className="lp-file-pill">платежи.csv</span>
            <span className="lp-file-pill">фото товаров</span>
            <span className="lp-file-pill">README</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ============================================================
 * PRICING
 * ============================================================ */
const Pricing = () =>
<section className="lp-section" id="price">
    <div className="lp__container">
      <div className="lp-section__head">
        <div className="lp-section__num">Тарифы</div>
        <h2 className="lp-h2">Просто и&nbsp;без&nbsp;«свяжитесь с&nbsp;нами».</h2>
        <p className="lp-section__sub">
          На&nbsp;старте бесплатно. Дальше&nbsp;— один тариф или оплата только за&nbsp;то,
          сколько разговариваете с&nbsp;ассистентом.
        </p>
      </div>
      <div className="lp-price">
        <div className="lp-plan">
          <div className="lp-plan__name">Free</div>
          <div className="lp-plan__price"><span className="v">0 ₽</span><span className="u">/ мес</span></div>
          <div className="lp-plan__desc">
            Чтобы попробовать и&nbsp;понять, насколько это вам подходит. Без карты.
          </div>
          <ul className="lp-plan__feat">
            <li><span className="ok"><CheckIcon s={10} /></span>До 15 клиентов в&nbsp;базе</li>
            <li><span className="ok"><CheckIcon s={10} /></span>50 запросов к&nbsp;ассистенту в&nbsp;месяц</li>
            <li><span className="ok"><CheckIcon s={10} /></span>Все&nbsp;каналы продаж и&nbsp;платежей</li>
            <li><span className="ok"><CheckIcon s={10} /></span>Экспорт «я&nbsp;вырос»</li>
            <li className="dim"><span className="x">—</span>Команда до 5 человек&nbsp;— в&nbsp;Pro</li>
            <li className="dim"><span className="x">—</span>Глубокая аналитика&nbsp;— в&nbsp;Pro</li>
          </ul>
          <button className="lp-btn lp-btn--secondary lp-plan__cta">Начать бесплатно</button>
        </div>

        <div className="lp-plan lp-plan--pro">
          <div className="lp-plan__tag">популярно</div>
          <div className="lp-plan__name">Pro</div>
          <div className="lp-plan__price"><span className="v">1490 ₽</span><span className="u">/ мес</span></div>
          <div className="lp-plan__desc">
            Когда уже идут заказы и&nbsp;нужно работать каждый день. Включено
            300&nbsp;запросов к&nbsp;ассистенту.
          </div>
          <ul className="lp-plan__feat">
            <li><span className="ok"><CheckIcon s={10} /></span>Безлимит клиентов и&nbsp;заказов</li>
            <li><span className="ok"><CheckIcon s={10} /></span>300&nbsp;запросов к&nbsp;ассистенту, далее&nbsp;3&nbsp;₽ за&nbsp;каждый</li>
            <li><span className="ok"><CheckIcon s={10} /></span>Команда до&nbsp;5&nbsp;человек с&nbsp;ролями</li>
            <li><span className="ok"><CheckIcon s={10} /></span>Глубокая аналитика и&nbsp;стрики</li>
            <li><span className="ok"><CheckIcon s={10} /></span>Приоритетная поддержка в&nbsp;Telegram</li>
            <li><span className="ok"><CheckIcon s={10} /></span>Тёмная тема и&nbsp;ваш брендинг</li>
          </ul>
          <button className="lp-btn lp-btn--primary lp-plan__cta">Попробовать Pro 14 дней</button>
        </div>
      </div>
      <div className="lp-payg">
        Не&nbsp;готовы на&nbsp;Pro? <strong>Pay-as-you-go</strong>&nbsp;— платите только
        за&nbsp;запросы к&nbsp;ассистенту, по&nbsp;5&nbsp;₽ за&nbsp;каждый успешный.
      </div>
    </div>
  </section>;


/* ============================================================
 * FAQ
 * ============================================================ */
const FAQ = () => {
  const [open, setOpen] = useState(0);
  const items = [
  {
    q: 'Это сложно? Я не очень дружу с приложениями.',
    a: 'Открыли — рассказали что у вас за бизнес — готово. Дальше можно говорить голосом или просто писать в чат как другу. Никаких таблиц и обязательных полей со звёздочкой.'
  },
  {
    q: 'А если ассистент меня не поймёт?',
    a: 'Уточнит вопросом, как живой помощник. Если совсем не получилось — попросит ввести руками. Запрос не списывается, пока вы не нажали «ОК».'
  },
  {
    q: 'Что с моими данными — они в безопасности?',
    a: 'Всё хранится в России, в защищённом дата-центре. Каждый кабинет полностью изолирован — никто чужой ваши данные не увидит. Голосовые сообщения не сохраняются после распознавания.'
  },
  {
    q: 'А моего вида бизнеса нет в примерах?',
    a: 'Ничего страшного — расскажите своими словами, и MMMo соберёт пресет из готовых блоков (склад, заказы, клиенты, задачи). Если нужен совсем редкий — напишите нам, добавим за 1–2 недели.'
  },
  {
    q: 'Можно работать командой?',
    a: 'Да. На Free — один владелец. На Pro — до 5 человек с ролями: продажи, склад, бухгалтерия. Каждый видит только своё.'
  },
  {
    q: 'А мобильное приложение есть?',
    a: 'Сейчас веб-приложение, которое ставится на iPhone и Android как обычное (с иконкой на экране). Нативные приложения — план на конец года.'
  },
  {
    q: 'Если перестану платить — что будет с данными?',
    a: 'Кабинет откатится на Free и останется доступным. Удалить можно в один клик — перед этим обязательно предложим скачать архив со всеми данными.'
  }];

  return (
    <section className="lp-section lp-section--alt">
      <div className="lp__container">
        <div className="lp-section__head">
          <div className="lp-section__num">Вопросы</div>
          <h2 className="lp-h2">Что обычно спрашивают</h2>
        </div>
        <div className="lp-faq">
          {items.map((item, i) =>
          <div className="lp-faq__item" key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="lp-faq__q">
                {item.q}
                <div className="lp-faq__chev" style={{ transform: open === i ? 'rotate(180deg)' : 'rotate(0)' }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
                </div>
              </div>
              {open === i && <div className="lp-faq__a">{item.a}</div>}
            </div>
          )}
        </div>
      </div>
    </section>);

};

/* ============================================================
 * FINAL CTA + FOOTER
 * ============================================================ */
const FinalCTA = () =>
<section className="lp-cta-final">
    <div className="lp__container">
      <div className="lp-cta-final__eyebrow">
        <span className="dot" />
        начните прямо сейчас
      </div>
      <h2>Скажите первое «готово»&nbsp;— и&nbsp;дальше станет&nbsp;легче.</h2>
      <p>Кабинет за&nbsp;5&nbsp;минут. Без&nbsp;карты. Заберёте всё одной кнопкой,
        если не&nbsp;подойдёт.</p>
      <div className="lp-cta-final__row">
        <button className="lp-btn lp-btn--primary lp-btn--big">Начать бесплатно <ArrowIcon /></button>
        <button className="lp-btn lp-btn--big lp-btn--glass">Связаться с&nbsp;командой</button>
      </div>
    </div>
  </section>;


const Footer = () =>
<footer className="lp-footer">
    <div className="lp__container">
      <div className="lp-footer__grid">
        <div className="lp-footer__col">
          <div className="lp-logo">
            <div className="lp-logo__mark" />
            <span><span className="mini">Mini</span>MoneyMo</span>
          </div>
          <div className="lp-footer__about">
            Карманное приложение для&nbsp;микробизнеса. Сделано в&nbsp;Москве и&nbsp;Таллинне.
            Версия 1.0&nbsp;beta, май&nbsp;2026.
          </div>
        </div>
        <div className="lp-footer__col">
          <h5>Продукт</h5>
          <a>Как это работает</a>
          <a>Что внутри</a>
          <a>Тарифы</a>
          <a>Дорожная карта</a>
        </div>
        <div className="lp-footer__col">
          <h5>Помощь</h5>
          <a>Старт за&nbsp;5&nbsp;минут</a>
          <a>Видео‑уроки</a>
          <a>Подключение каналов</a>
          <a>Поддержка</a>
        </div>
        <div className="lp-footer__col">
          <h5>Контакты</h5>
          <a>hello@minimoneymo.ru</a>
          <a>Telegram</a>
          <a>Сообщество</a>
          <a>Партнёрам</a>
        </div>
      </div>
      <div className="lp-footer__bot">
        <span>© 2026 MMMo. ИП Анна К.</span>
        <span style={{ display: 'flex', gap: 18 }}>
          <a>Договор</a><a>Политика</a><a>Cookies</a>
        </span>
      </div>
    </div>
  </footer>;


window.LandingNav = Nav;
window.LandingHero = Hero;
window.LandingVerticalsStrip = VerticalsStrip;
window.LandingHowItWorks = HowItWorks;
window.LandingAISection = AISection;
window.LandingWhatsInside = WhatsInside;
window.LandingTeam = Team;
window.LandingWhoItsFor = WhoItsFor;
window.LandingLook = Look;
window.LandingExportTrust = ExportTrust;
window.LandingPricing = Pricing;
window.LandingFAQ = FAQ;
window.LandingFinalCTA = FinalCTA;
window.LandingFooter = Footer;