/* global React, Nav, PageTabs, TabPill, PageIndicator, SectionHeader, RuleCard, CompanyCard, CtaBlock, 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>

      {/* 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>

      {/* 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>

      {/* 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 });