/* global React, Nav, PageTabs, TabPill, PageIndicator, SectionHeader, RuleCard, CompanyCard, CtaBlock, ExpandableProse, Footer, Calculator1, Calculator2, Calculator3, fmtUAH, fmtNum, fmtPct */

/* ============================================================
   Page 1 — Ваші клієнти
   ============================================================ */
function Page1({ calcState, setCalcState, derived }) {
  return (
    <main data-screen-label="01 Ваші клієнти">
      {/* HERO */}
      <section className="hero container">
        <div className="hero__grid">
          <div>
            <div className="hero__eyebrow">
              <TabPill>Сторінка 01 · Ваші клієнти</TabPill>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>10.05</span>
            </div>
            <h1 className="hero__title">
              У вашій базі вже<br/>
              є клієнти, які можуть<br/>
              <em>купити знову</em>
            </h1>
            <p className="hero__sub">
              Більшість компаній постійно шукають нових клієнтів, але часто не помічають найтепліше джерело доходу — людей, які вже купували, зверталися або залишали заявку.
            </p>
          </div>
          <div className="hero__art">
            <div className="stat-art">
              <div className="stat-art__top">
                <div className="stat-art__eyebrow">Потенціал бази</div>
                <div className="stat-art__chip">приклад</div>
              </div>
              <div className="stat-art__big">
                1,1<span className="stat-art__unit"> млн</span>
              </div>
              <div className="stat-art__sub">грн додаткового доходу<br/>за 6 місяців</div>
              <div className="stat-art__bars">
                <div className="stat-art__bar" style={{ width: '20%' }}></div>
                <div className="stat-art__bar" style={{ width: '45%' }}></div>
                <div className="stat-art__bar" style={{ width: '70%' }}></div>
                <div className="stat-art__bar stat-art__bar--accent" style={{ width: '100%' }}></div>
              </div>
              <div className="stat-art__legend">
                <span>1 міс</span>
                <span>3 міс</span>
                <span>6 міс</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TICKER */}
      <div className="container" style={{ marginBottom: 'var(--s-11)' }}>
        <div className="ticker">
          <div className="ticker__track">
            <span><span className="dot"></span>повторні продажі</span>
            <span><span className="dot"></span>клієнтська база</span>
            <span><span className="dot"></span>+30% маржі</span>
            <span><span className="dot"></span>без нового рекламного бюджету</span>
            <span><span className="dot"></span>системний підхід</span>
            <span><span className="dot"></span>повторні продажі</span>
            <span><span className="dot"></span>клієнтська база</span>
            <span><span className="dot"></span>+30% маржі</span>
            <span><span className="dot"></span>без нового рекламного бюджету</span>
            <span><span className="dot"></span>системний підхід</span>
          </div>
        </div>
      </div>

      {/* RULES SECTION */}
      <section className="container section">
        <SectionHeader num="01" title="Чотири правила роботи з клієнтською базою" />
        <div className="rules">
          <RuleCard num="1" title="Клієнт після покупки не зникає">
            Після першої покупки у клієнта з'являються нові потреби. Якщо бізнес мовчить — клієнт йде до конкурентів просто тому, що йому нічого не запропонували.
          </RuleCard>
          <RuleCard num="2" title="Повторний продаж легший за перший">
            Діючий клієнт уже знає, як ви працюєте. Він уже довіряє. Повторна покупка потребує менше зусиль, ніж залучення нової людини.
          </RuleCard>
          <RuleCard num="3" title="База без комунікації не приносить грошей">
            Контакти в CRM, таблиці чи месенджері самі по собі не створюють дохід. Дохід з'являється, коли з базою працюють системно.
          </RuleCard>
          <RuleCard num="4" title="Повторні продажі — це стабільність">
            Нові клієнти потрібні для зростання. Повторні — для стабільності. Сильна модель — це коли працює і те, і інше паралельно.
          </RuleCard>
        </div>
      </section>

      {/* COMPANY EXAMPLES */}
      <section className="container section-tight">
        <div className="flex items-center gap-4 mb-7" style={{ flexWrap: 'wrap' }}>
          <TabPill variant="outline">Як це роблять великі</TabPill>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', margin: 0 }}>
            Apple, Nike, Starbucks — приклади з реального бізнесу
          </h3>
        </div>
        <div className="company-grid">
          <CompanyCard
            logoSrc="https://cdn.simpleicons.org/starbucks/006241"
            brand="Starbucks"
            value="33,8 млн"
            body="Активних учасників програми Starbucks Rewards у США (2024). Це канал регулярної взаємодії, який повертає людей до нових покупок."
          />
          <CompanyCard
            logoSrc="https://cdn.simpleicons.org/nike/0E0F0A"
            brand="Nike"
            value="$21,5 млрд"
            body="Виручка NIKE Direct у 2024 фінансовому році — прямі продажі через власні магазини та digital-канали, побудовані на прямому зв'язку з клієнтом."
          />
          <CompanyCard
            logoSrc="https://cdn.simpleicons.org/apple/0E0F0A"
            brand="Apple"
            value="$94,9 млрд"
            body="Квартальна виручка Apple у Q4 2024. Сервіси (iCloud, AppleCare, App Store) — це регулярні платежі від уже існуючих клієнтів."
          />
        </div>
        <p style={{ marginTop: 'var(--s-6)', maxWidth: '60ch', color: 'var(--fg-2)' }}>
          Принцип той самий незалежно від масштабу: <strong style={{ color: 'var(--ink-900)' }}>клієнт, який вам довірився, — це не завершена угода, а потенційний наступний крок.</strong>
        </p>
      </section>

      {/* EDITORIAL — чому повторні продажі */}
      <section className="container section">
        <ExpandableProse previewMaxHeight={220}>
          <p className="prose__lead">
            Коли бізнес хоче більше продажів, перша думка зазвичай така: <em>«Треба більше реклами. Більше заявок. Більше нових клієнтів.»</em>
          </p>
          <p>
            І це логічно. Без нових клієнтів бізнесу складно рости. Але є один момент, про який часто забувають: у багатьох компаній уже є клієнти, які знайомі з продуктом, сервісом, командою або експертом.
          </p>
          <p>
            Вони вже проходили перший шлях довіри. Вони вже залишали свої контакти. Вони вже щось купували, цікавились, приходили на консультацію, замовляли послугу або хоча б взаємодіяли з брендом.
          </p>
          <p><strong>І саме тут часто захований додатковий дохід.</strong></p>
          <p>
            Не тому, що потрібно «тиснути» на людей або нескінченно їм продавати. А тому, що частині клієнтів справді може бути потрібен наступний крок: повторна покупка, продовження послуги, супутній продукт, оновлення, сервіс, консультація, абонемент, пакет або нове рішення під їхню ситуацію.
          </p>
          <p>Наприклад:</p>
          <ul>
            <li>людина купила базову послугу — їй можна запропонувати супровід;</li>
            <li>клієнт замовив товар — йому можуть знадобитися витратні матеріали або аксесуари;</li>
            <li>учень пройшов короткий курс — йому може бути цікавий глибший формат;</li>
            <li>пацієнт був на першій процедурі — йому може знадобитися курс або підтримувальна програма;</li>
            <li>підприємець отримав консультацію — йому може бути потрібне впровадження.</li>
          </ul>
          <p>
            Тобто повторний продаж — це не «продати ще раз будь-що». Це зробити доречну пропозицію людині, яка вже має досвід взаємодії з вами.
          </p>
          <div className="prose__pull">
            <p className="prose__question">
              Саме тому перше питання, яке варто поставити собі:<br/>
              <em>«Скільки грошей уже може бути в моїй клієнтській базі, якщо почати працювати з нею системно?»</em>
            </p>
            <p>Не навмання. Не «на око». Не за відчуттями.</p>
            <p>
              А через простий розрахунок: скільки клієнтів у вас уже є, яка частина з них активна, скільки можуть купити повторно, який середній чек і за який період це може дати відчутний додатковий дохід.
            </p>
            <p><strong>Далі ви зможете порахувати потенціал повторних продажів у першому калькуляторі.</strong></p>
          </div>
        </ExpandableProse>
      </section>

      {/* CALCULATOR */}
      <section className="container section">
        <Calculator1 state={calcState} setState={setCalcState} derived={derived} />
      </section>
    </main>
  );
}

/* ============================================================
   Page 2 — Дохід з бази (margin economics)
   ============================================================ */
function Page2({ calcState, setCalcState, derived }) {
  return (
    <main data-screen-label="02 Дохід з бази">
      <section className="hero container">
        <div className="hero__grid">
          <div>
            <div className="hero__eyebrow">
              <TabPill>Сторінка 02 · Дохід з бази</TabPill>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>10.05</span>
            </div>
            <h1 className="hero__title">
              Виручка це ще<br/>
              не <em>заробіток</em><br/>
              бізнесу
            </h1>
            <p className="hero__sub">
              Можна зробити продаж на 10 000 грн, але це не значить, що всі 10 000 залишилися у вас. Повторний продаж змінює економіку — і збільшує маржу.
            </p>
          </div>
          <div className="hero__art">
            <div className="coin-art">
              <div className="coin-art__bars">
                <div className="coin-art__bar" style={{ height: '35%', background: 'var(--ink-600)' }}></div>
                <div className="coin-art__bar" style={{ height: '50%', background: 'var(--ink-500)' }}></div>
                <div className="coin-art__bar" style={{ height: '65%' }}></div>
                <div className="coin-art__bar" style={{ height: '85%' }}></div>
                <div className="coin-art__bar" style={{ height: '100%' }}></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* THREE COST BUCKETS */}
      <section className="container section">
        <SectionHeader num="02" title="Що з'їдає прибуток із кожного продажу" />
        <div className="rules" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          <div className="rule-card">
            <span className="rule-card__num">01 · Собівартість</span>
            <h3 className="rule-card__title">Витрати на сам продукт</h3>
            <p className="rule-card__body">
              Закупівля товару, матеріали, виробництво, оплата спеціалістів, доставка, упаковка, час експерта чи команди.
            </p>
          </div>
          <div className="rule-card">
            <span className="rule-card__num">02 · Операційні</span>
            <h3 className="rule-card__title">Без них бізнес не працює</h3>
            <p className="rule-card__body">
              Оренда, зарплати, CRM, сервіси, телефонія, бухгалтерія, комісії платіжних систем, адмін‑витрати.
            </p>
          </div>
          <div className="rule-card">
            <span className="rule-card__num">03 · Маркетинг</span>
            <h3 className="rule-card__title">Привести нового клієнта</h3>
            <p className="rule-card__body">
              Реклама в Google, Meta, TikTok, контент, маркетолог, ліди, прогрів, чат‑боти, лендинги, відділ продажів.
            </p>
          </div>
        </div>
      </section>

      {/* FORMULAS COMPARISON */}
      <section className="container section-tight">
        <div className="compare">
          <div className="compare__col compare__col--neutral">
            <div className="compare__head">
              <TabPill variant="outline">Новий клієнт</TabPill>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 'var(--s-5)' }}>
              Чек − продукт − операційка − <span style={{ background: 'var(--kiwi-400)', padding: '0 6px' }}>реклама</span> = прибуток
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-700)', margin: 0 }}>
              Кожен новий продаж несе повну вартість залучення: бюджет на трафік, лідогенерацію, прогрів, роботу менеджерів.
            </p>
          </div>
          <div className="compare__col compare__col--win">
            <div className="compare__head">
              <TabPill variant="kiwi">Повторний клієнт</TabPill>
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 'var(--s-5)', color: 'var(--bone)' }}>
              Чек − продукт − операційка = <span style={{ color: 'var(--kiwi-400)' }}>більший прибуток</span>
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-200)', margin: 0 }}>
              Клієнт уже знає вас, вже довіряє, вже є в базі. Витрати на повторне залучення часто близькі до нуля.
            </p>
          </div>
        </div>
      </section>

      {/* EDITORIAL — чому повторні продажі = більша маржа */}
      <section className="container section">
        <ExpandableProse previewMaxHeight={220}>
          <h3 className="prose__lead">Чому повторні продажі можуть давати <em>більше маржі</em></h3>
          <p>
            Можна зробити продаж на 10 000 грн, але це не означає, що всі 10 000 грн залишилися у вас. Частина цієї суми йде на витрати: продукт, команду, сервіс, упаковку, логістику, податки, платіжні системи, оренду, інструменти та маркетинг.
          </p>
          <p>
            Саме тому важливо дивитися не тільки на дохід, а й на <strong>маржу</strong> — тобто на ту частину грошей, яка залишається після основних витрат.
          </p>
          <p>
            У звичайному продажі новому клієнту значну частину витрат часто займає маркетинг: реклама, трафік, заявки, прогрів, робота менеджерів, контент, воронки, CRM, email-розсилки, месенджери та інші інструменти залучення.
          </p>
          <p>Але коли клієнт купує повторно, ситуація змінюється.</p>
          <p>
            Ви вже не залучаєте його «з нуля». Він уже знає вас, уже мав досвід взаємодії, уже залишив контакт і вже частково довіряє. Тому витрати на рекламу для такого продажу можуть бути значно нижчими або взагалі не враховуватися як витрати на первинне залучення.
          </p>
          <p>
            <strong>Через це повторний продаж може давати не тільки додаткову виручку, а й вищу маржу.</strong>
          </p>

          <h3 className="prose__h">Чому повторні продажі змінюють розрахунок</h3>
          <p>
            Коли клієнт купує у вас повторно через email, месенджер, персональну пропозицію, дзвінок менеджера або CRM-нагадування, вам не потрібно знову платити повну вартість його залучення через рекламу.
          </p>
          <ul>
            <li>Ви вже маєте контакт.</li>
            <li>Ви вже маєте історію взаємодії.</li>
            <li>Ви вже маєте довіру.</li>
          </ul>
          <p>
            <strong>Тому повторний продаж може залишати бізнесу більше грошей з тієї самої суми покупки.</strong>
          </p>
        </ExpandableProse>
      </section>

      {/* CALCULATOR 2 */}
      <section className="container section">
        <Calculator2 state={calcState} setState={setCalcState} derived={derived} />
      </section>
    </main>
  );
}

/* ============================================================
   Page 3 — Скільки залишається (Personal income)
   ============================================================ */
function Page3({ calcState, setCalcState, derived }) {
  return (
    <main data-screen-label="03 Особистий дохід">
      <section className="hero container">
        <div className="hero__grid">
          <div>
            <div className="hero__eyebrow">
              <TabPill>Сторінка 03 · Особистий дохід</TabPill>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>10.05</span>
            </div>
            <h1 className="hero__title">
              <em>Скільки</em> більше<br/>
              ви зможете<br/>
              забирати собі
            </h1>
            <p className="hero__sub">
              Бізнес може рости у виручці, а власник цього не відчуває. Гроші йдуть на рекламу, команду, операційку. Повторні продажі змінюють картину — частина доходу йде без витрат на залучення.
            </p>
          </div>
          <div className="hero__art" style={{ background: 'var(--ink-900)' }}>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16, padding: 32, color: 'var(--bone)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 72, fontWeight: 800, color: 'var(--kiwi-400)', lineHeight: 1, letterSpacing: '-0.03em' }}>
                +29%
              </div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--ink-200)', textAlign: 'center', maxWidth: '24ch' }}>
                приклад росту особистого доходу при системних повторних продажах
              </div>
              <div style={{ marginTop: 'auto', alignSelf: 'flex-start', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-300)' }}>
                / приклад
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHY PERSONAL INCOME DOESN'T GROW */}
      <section className="container section">
        <SectionHeader num="03" title="Чому особистий дохід не росте разом із виручкою" />
        <div className="rules" style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--s-4)' }}>
          <div className="rule-card" style={{ background: 'var(--bone-2)', border: 'none' }}>
            <span className="rule-card__num">Симптом</span>
            <h3 className="rule-card__title">Продажів більше — а в кишені те саме</h3>
            <p className="rule-card__body">
              Виручка росте, реклама росте, команда завантажена сильніше. Бізнес ніби більший, але власник забирає стільки ж. Часто — навіть менше у відсотках.
            </p>
          </div>
          <div className="rule-card" style={{ background: 'var(--ink-900)', color: 'var(--bone)', border: 'none' }}>
            <span className="rule-card__num" style={{ color: 'var(--kiwi-400)' }}>Причина</span>
            <h3 className="rule-card__title" style={{ color: 'var(--bone)' }}>Зростання тільки через новий трафік</h3>
            <p className="rule-card__body" style={{ color: 'var(--ink-200)' }}>
              Якщо ріст іде тільки через нову рекламу — разом із виручкою ростуть витрати на залучення. Повторні продажі ламають цю залежність.
            </p>
          </div>
        </div>

        {/* FORMULA */}
        <div style={{ marginTop: 'var(--s-8)', padding: 'var(--s-7)', background: 'var(--kiwi-100)', borderRadius: 'var(--r-4)' }}>
          <div className="t-eyebrow" style={{ marginBottom: 'var(--s-3)' }}>Простий принцип</div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2.4vw, 32px)', fontWeight: 700, lineHeight: 1.25, letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: 0, textWrap: 'balance' }}>
            Більше повторних продажів → менше залежності від реклами → <span style={{ background: 'var(--ink-900)', color: 'var(--kiwi-400)', padding: '0 8px', borderRadius: 4 }}>вища маржа</span> → більше прибутку → більший особистий дохід.
          </p>
        </div>
      </section>

      {/* EDITORIAL — як повторні продажі впливають на особистий дохід */}
      <section className="container section">
        <ExpandableProse previewMaxHeight={220}>
          <h3 className="prose__lead">Як повторні продажі можуть збільшити <em>особистий дохід</em> власника</h3>
          <p>Додатковий дохід бізнесу — це добре. Вища маржа — ще краще.</p>
          <p>
            Але для власника, експерта або керівника часто найважливіше питання звучить простіше:
          </p>
          <p className="prose__question"><em>«Скільки більше я зможу забирати собі?»</em></p>
          <p>
            Бо бізнес може рости у виручці, але власник при цьому не завжди відчуває це у власному доході. Гроші можуть іти на рекламу, команду, операційні витрати, підрядників, сервіси, податки, закупівлі або постійне перекривання касових розривів.
          </p>
          <p>
            Саме тому важливо рахувати не тільки продажі, а й те, як повторні продажі впливають на особистий дохід.
          </p>

          <h3 className="prose__h">Як повторні продажі впливають на особистий дохід</h3>
          <p>
            Коли діючий клієнт купує повторно, бізнес часто отримує продаж із меншими витратами на залучення.
          </p>
          <p>
            Це означає, що з кожної такої покупки може залишатися більше прибутку. А якщо прибутку стає більше, у власника з'являється можливість частину цієї суми забирати в особистий дохід.
          </p>
          <p>Простіше кажучи:</p>
          <ul>
            <li>більше повторних продажів →</li>
            <li>менше залежності від реклами →</li>
            <li>вища маржа →</li>
            <li>більше прибутку →</li>
            <li>більший потенціал особистого доходу.</li>
          </ul>
          <p>
            Звісно, не весь додатковий прибуток потрібно одразу забирати собі. Частину варто залишати на розвиток, резерви, команду, покращення продукту або сервісу.
          </p>
          <p>
            <strong>Але навіть якщо власник забирає тільки частину додаткового прибутку, це вже може помітно вплинути на його щомісячний дохід.</strong>
          </p>
        </ExpandableProse>
      </section>

      {/* CALCULATOR 3 */}
      <section className="container section">
        <Calculator3 state={calcState} setState={setCalcState} derived={derived} />
      </section>
    </main>
  );
}

/* ============================================================
   Page 4 — Підсумок + CTA
   ============================================================ */
function Page4({ calcState, derived, onNav }) {
  return (
    <main data-screen-label="04 Консультація">
      <section className="hero container">
        <div className="hero__grid" style={{ gridTemplateColumns: '1fr', textAlign: 'left' }}>
          <div>
            <div className="hero__eyebrow">
              <TabPill>Сторінка 04 · Підсумок</TabPill>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>10.05</span>
            </div>
            <h1 className="hero__title" style={{ maxWidth: '22ch' }}>
              Ваша база вже<br/>
              може містити ваш<br/>
              <em>наступний дохід</em>
            </h1>
            <p className="hero__sub" style={{ maxWidth: '65ch' }}>
              Якщо ви пройшли всі три розрахунки — у вас тепер є не абстрактна думка «треба працювати з клієнтами», а конкретні цифри по вашій базі.
            </p>
          </div>
        </div>
      </section>

      {/* SUMMARY METRICS */}
      <section className="container section-tight">
        <div className="company-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
          <div className="company-card">
            <div className="t-eyebrow">Дохід</div>
            <div className="company-card__num">{fmtUAH(derived.totalRevenue)}</div>
            <p className="company-card__body">Потенційний додатковий дохід з повторних продажів за {calcState.period} міс.</p>
          </div>
          <div className="company-card" style={{ background: 'var(--bone-2)' }}>
            <div className="t-eyebrow">Прибуток</div>
            <div className="company-card__num">{fmtUAH(derived.profitWithRepeats)}</div>
            <p className="company-card__body">З урахуванням економії на рекламі. Маржа {fmtPct(derived.effectiveMargin)}.</p>
          </div>
          <div className="company-card" style={{ background: 'var(--kiwi-400)', borderColor: 'transparent' }}>
            <div className="t-eyebrow" style={{ color: 'var(--ink-700)' }}>Власнику / міс</div>
            <div className="company-card__num">+{fmtUAH(derived.ownerExtraPerMonth)}</div>
            <p className="company-card__body" style={{ color: 'var(--ink-800)' }}>Додатковий особистий дохід щомісяця. Ріст {fmtPct(derived.ownerGrowthPct)}.</p>
          </div>
          <div className="company-card" style={{ background: 'var(--ink-900)', color: 'var(--bone)', borderColor: 'transparent' }}>
            <div className="t-eyebrow" style={{ color: 'var(--ink-300)' }}>Новий дохід</div>
            <div className="company-card__num" style={{ color: 'var(--kiwi-400)' }}>{fmtUAH(derived.newMonthlyIncome)}</div>
            <p className="company-card__body" style={{ color: 'var(--ink-200)' }}>Ваш новий особистий дохід щомісяця.</p>
          </div>
        </div>
      </section>

      {/* WHAT YOU GET ON CONSULTATION */}
      <section className="container section">
        <SectionHeader num="04" title="На безкоштовній консультації ми розберемо вашу ситуацію" />
        <div className="rules">
          <RuleCard num="1" title="Які клієнти можуть купити повторно">
            Подивимося на вашу базу, продукти, середній чек і знайдемо точки росту.
          </RuleCard>
          <RuleCard num="2" title="Які пропозиції їм можна зробити">
            Розберемо продуктову лінійку та допоможемо сформулювати доречні пропозиції.
          </RuleCard>
          <RuleCard num="3" title="Де зараз втрачається дохід">
            Знайдемо «дірки» у воронці, де клієнти губляться після першої покупки.
          </RuleCard>
          <RuleCard num="4" title="З чого почати без ускладнень">
            Простий перший крок, який можна зробити цього тижня — без нових сервісів і команди.
          </RuleCard>
        </div>
      </section>

      {/* CTA */}
      <section className="container section">
        <CtaBlock
          title='Запишіться <br/>на <em>безкоштовну</em> <br/>консультацію'
          sub="Розберемо вашу ситуацію індивідуально та визначимо, з чого почати систему повторних продажів саме у вашому бізнесі."
        />
      </section>
    </main>
  );
}

Object.assign(window, { Page1, Page2, Page3, Page4 });