/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================================
   Nav — top bar with brand mark + page links + CTA
   ============================================================ */
function Nav({ activePage, onNav }) {
  const links = [
    { id: 1, num: '01', label: 'Ваші клієнти' },
    { id: 2, num: '02', label: 'Дохід з бази' },
    { id: 3, num: '03', label: 'Особистий дохід' },
    { id: 4, num: '04', label: 'Консультація' },
  ];
  return (
    <nav className="nav">
      <div className="container nav__inner">
        <a href="#" className="nav__brand" onClick={(e) => { e.preventDefault(); onNav(1); }}>
          <span className="nav__brand__mark">Б</span>
          <span>БАЗА</span>
        </a>
        <div className="nav__links" style={{ display: 'flex' }}>
          {links.map(l => (
            <a key={l.id}
               href="#"
               onClick={(e) => { e.preventDefault(); onNav(l.id); }}
               className={`nav__link ${activePage === l.id ? 'nav__link--active' : ''}`}>
              <span className="nav__link__num">{l.num}</span>
              <span>{l.label}</span>
            </a>
          ))}
        </div>
        <a href="#" className="btn btn--ink" onClick={(e) => { e.preventDefault(); onNav(4); }}>
          Записатись
        </a>
      </div>
    </nav>
  );
}

/* ============================================================
   PageTabs — visible row of 4 page tabs (top of each page)
   ============================================================ */
function PageTabs({ activePage, onNav }) {
  const tabs = [
    { id: 1, num: '01', label: 'Ваші клієнти' },
    { id: 2, num: '02', label: 'Дохід з бази' },
    { id: 3, num: '03', label: 'Скільки залишається' },
    { id: 4, num: '04', label: 'Ваш особистий дохід' },
  ];
  return (
    <div className="container">
      <div className="page-tabs">
        {tabs.map(t => (
          <button key={t.id}
                  onClick={() => onNav(t.id)}
                  className={`page-tab ${activePage === t.id ? 'page-tab--active' : ''}`}>
            <span className="page-tab__num">{t.num}</span>
            <span>{t.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   TabPill — small black uppercase label (like "ЧАСТИНА П'ЯТЬ")
   ============================================================ */
function TabPill({ children, variant = 'ink' }) {
  const cls = variant === 'kiwi' ? 'tab-pill tab-pill--kiwi'
            : variant === 'outline' ? 'tab-pill tab-pill--outline'
            : 'tab-pill';
  return (
    <span className={cls}>
      {variant === 'ink' && <span className="tab-pill__dot"></span>}
      {children}
    </span>
  );
}

/* ============================================================
   PageIndicator — "01 / 04" plus date in mono
   ============================================================ */
function PageIndicator({ num, total = 4, date = '10.05' }) {
  return (
    <div className="page-indicator">
      <span className="page-indicator__num">{String(num).padStart(2, '0')} / 0{total}</span>
      <span>{date}</span>
    </div>
  );
}

/* ============================================================
   SectionHeader — giant kiwi number + tight title
   ============================================================ */
function SectionHeader({ num, title }) {
  return (
    <div className="section-header">
      <div className="section-header__num">{num}</div>
      <h2 className="section-header__title">{title}</h2>
    </div>
  );
}

/* ============================================================
   RuleCard — numbered rule block (4-up grid)
   ============================================================ */
function RuleCard({ num, title, children }) {
  return (
    <div className="rule-card">
      <span className="rule-card__num">Правило {num}</span>
      <h3 className="rule-card__title">{title}</h3>
      <p className="rule-card__body">{children}</p>
    </div>
  );
}

/* ============================================================
   CompanyCard — Starbucks/Nike/Apple example tile
   ============================================================ */
function CompanyCard({ logoSrc, brand, value, body }) {
  return (
    <div className="company-card">
      <div className="company-card__logo">
        <img src={logoSrc} alt={brand} />
      </div>
      <div className="company-card__num">{value}</div>
      <p className="company-card__body">{body}</p>
    </div>
  );
}

/* ============================================================
   CtaBlock — black hero with kiwi accent (page 4)
   ============================================================ */
function CtaBlock({ title, sub, buttonLabel = 'Записатись безкоштовно' }) {
  return (
    <div className="cta-block">
      <div className="cta-block__decoration"></div>
      <div>
        <TabPill variant="kiwi">Безкоштовна консультація</TabPill>
        <h2 className="cta-block__title mt-6" dangerouslySetInnerHTML={{ __html: title }}></h2>
      </div>
      <div className="flex flex-col gap-6">
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-200)' }}>{sub}</p>
        <a href="#" className="btn btn--primary btn--xl btn--arrow">
          {buttonLabel}
        </a>
      </div>
    </div>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <div className="nav__brand" style={{ marginBottom: 'var(--s-4)' }}>
              <span className="nav__brand__mark">Б</span>
              <span>БАЗА</span>
            </div>
            <p style={{ maxWidth: '40ch', color: 'var(--fg-2)', fontSize: 14 }}>
              Калькулятор додаткового доходу у вашій клієнтській базі. Без агресивних продажів, без нового рекламного бюджету.
            </p>
          </div>
          <div>
            <h5>Калькулятори</h5>
            <ul>
              <li><a href="#">01 · Ваші клієнти</a></li>
              <li><a href="#">02 · Дохід з бази</a></li>
              <li><a href="#">03 · Особистий дохід</a></li>
            </ul>
          </div>
          <div>
            <h5>Контакти</h5>
            <ul>
              <li><a href="#">hello@baza.consult</a></li>
              <li><a href="#">Telegram</a></li>
              <li><a href="#">Instagram</a></li>
            </ul>
          </div>
          <div>
            <h5>Юридичне</h5>
            <ul>
              <li><a href="#">Політика конфіденційності</a></li>
              <li><a href="#">Умови використання</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 БАЗА. Лід‑магніт для експертів.</span>
          <span style={{ fontFamily: 'var(--font-mono)' }}>v1.0 · Зроблено в Україні</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   Number/Currency formatting helpers
   ============================================================ */
function fmtUAH(n) {
  if (!isFinite(n)) return '— грн';
  return new Intl.NumberFormat('uk-UA', { maximumFractionDigits: 0 }).format(Math.round(n)) + ' грн';
}
function fmtNum(n) {
  if (!isFinite(n)) return '—';
  return new Intl.NumberFormat('uk-UA', { maximumFractionDigits: 0 }).format(Math.round(n));
}
function fmtPct(n) {
  if (!isFinite(n)) return '—%';
  return (Math.round(n * 10) / 10).toLocaleString('uk-UA') + '%';
}

/* ============================================================
   Export to window for cross-script sharing
   ============================================================ */
Object.assign(window, {
  Nav, PageTabs, TabPill, PageIndicator, SectionHeader,
  RuleCard, CompanyCard, CtaBlock, Footer,
  fmtUAH, fmtNum, fmtPct,
});