// SWAPP main page — based on Figma layout, refined.
// Structure: Hero → Cases (tabs) → 3 advantages (3D) → How it works (4 cards w/ 3D) →
// Campaign creation flow → Influencer ratings → Light section "1000 bloggers waiting" →
// Calculator (tiered) → Blog → FAQ → Contact CTA → Footer.

const D = {
  bg: '#000000',
  bg2: '#0a0a0a',
  card: '#141414',
  cardHi: '#1a1a1a',
  line: '#262626',
  lineHi: '#333333',
  ink: '#ffffff',
  ink2: '#e5e5e5',
  mute: '#a3a3a3',
  mute2: '#737373',
  green: '#22ee5e',
  greenSolid: '#1bcc4f',
  greenDim: '#0fa53d',
  greenInk: '#001a08',
  greenGlow: 'rgba(34,238,94,0.18)',
  greenGlowStrong: 'rgba(34,238,94,0.4)',
  light: '#d9d9d9',
  lightWarm: '#e6e6e3',
  bronze: '#cd7f32',
  silver: '#c0c0c0',
  gold: '#f5c842'
};

// Expose tokens for sibling files
if (typeof window !== 'undefined') window.__SwappTokens = D;

// App Store URL — wired to every «Скачать приложение» CTA.
const SWAPP_APP_STORE = 'https://apps.apple.com/kz/app/swapp-%D1%80%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0-c-%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5%D1%80%D0%B0%D0%BC%D0%B8/id6739431825';
if (typeof window !== 'undefined') window.__SwappAppStore = SWAPP_APP_STORE;

function ConservativeVariant() {
  // Final desktop layout — locked variants:
  //   Hero → TrustLogos → Cases (Manifesto) → Calculator → How (Timeline) →
  //   Advantages (Split) → Bloggers waiting → Ratings (Profile) → FAQ →
  //   Blog (Cards) → Contact CTA → Footer
  return (
    <div style={{
      fontFamily: '"Manrope", "Inter", -apple-system, sans-serif',
      background: D.bg, color: D.ink, width: '100%',
      letterSpacing: '-0.015em'
    }}>
      <DarkNav />
      <Hero />
      <TrustLogos />
      <CasesManifesto />
      <CalculatorSection />
      <HowItWorksTimeline />
      <AdvantagesSplit />
      <BloggersWaiting />
      <RatingsSection />
      <FaqSection />
      <BlogSection />
      <ContactCta />
      <Footer />
    </div>);

}

function Logo({ size = 'md' }) {
  const heights = { sm: 22, md: 30, lg: 44 };
  const h = heights[size];
  const w = h * (226 / 50);
  return (
    <svg width={w} height={h} viewBox="0 0 226 50" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <path d="M39.3313 0L11.5739 27.5161H26.6455V38.8876C26.6455 40.2215 25.5545 41.303 24.2089 41.303H15.0071L2.24794 28.6546C-0.760228 25.6726 -0.74765 20.834 2.27589 17.8675L20.4866 0H39.3313Z" fill="#16F42C" />
      <path d="M18.9042 50L46.6618 22.4839H31.5902V11.1124C31.5902 9.77854 32.6812 8.69703 34.0268 8.69703H43.2285L55.9877 21.3452C58.9959 24.3272 58.9833 29.1658 55.9598 32.1323L37.7491 50H18.9042Z" fill="#16F42C" />
      <path d="M89.8774 38.6535C86.4481 38.6535 83.7218 37.9119 81.6985 36.4285C79.6752 34.9452 78.5264 32.855 78.252 30.158H83.1902C83.4303 31.6413 84.1162 32.7876 85.2478 33.5967C86.4138 34.3721 87.9913 34.7597 89.9803 34.7597C91.7293 34.7597 93.0667 34.4563 93.9926 33.8495C94.9185 33.2427 95.3815 32.383 95.3815 31.2705C95.3815 30.4614 95.1071 29.7872 94.5585 29.2478C94.0441 28.6747 93.0153 28.2027 91.4721 27.8318L87.254 26.871C84.6134 26.2305 82.6416 25.2866 81.3384 24.0392C80.0696 22.7581 79.4351 21.1905 79.4351 19.3363C79.4351 17.0102 80.3096 15.1897 82.0586 13.8749C83.8418 12.5264 86.2766 11.8522 89.363 11.8522C92.4151 11.8522 94.8671 12.5264 96.7189 13.8749C98.605 15.2234 99.6681 17.1113 99.9082 19.5386H94.97C94.7642 18.3249 94.1641 17.3978 93.1696 16.7573C92.2094 16.0831 90.8891 15.7459 89.2087 15.7459C87.6312 15.7459 86.4138 16.0325 85.5565 16.6056C84.7334 17.145 84.3219 17.9035 84.3219 18.8812C84.3219 19.6903 84.6306 20.3645 85.2478 20.9039C85.8994 21.4433 86.9625 21.8985 88.4371 22.2693L92.7581 23.3312C95.2615 23.9381 97.1476 24.9326 98.4164 26.3148C99.6853 27.6633 100.32 29.2983 100.32 31.2199C100.32 33.5461 99.3938 35.3666 97.542 36.6814C95.7244 37.9961 93.1696 38.6535 89.8774 38.6535Z" fill="white" />
      <path d="M109.5 38.1478L101.475 12.3578H106.98L112.432 33.091H111.661L118.296 12.3578H122.926L129.562 33.091H128.841L134.243 12.3578H139.49L131.465 38.1478H126.784L120.148 17.7687H120.92L114.181 38.1478H109.5Z" fill="white" />
      <path d="M158.759 38.1478C158.587 37.5073 158.467 36.7993 158.399 36.024C158.365 35.2486 158.347 34.3046 158.347 33.1921H158.09V20.9039C158.09 19.252 157.662 18.0215 156.804 17.2124C155.981 16.3696 154.661 15.9482 152.843 15.9482C151.094 15.9482 149.688 16.2853 148.625 16.9596C147.597 17.6338 146.996 18.5946 146.825 19.842H141.732C141.972 17.4147 143.087 15.4762 145.076 14.0266C147.065 12.577 149.723 11.8522 153.049 11.8522C156.478 11.8522 159.05 12.6444 160.765 14.2289C162.48 15.7797 163.337 18.0721 163.337 21.1062V33.1921C163.337 33.9675 163.389 34.7597 163.491 35.5688C163.594 36.3779 163.749 37.2376 163.954 38.1478H158.759ZM149.706 38.6535C147.031 38.6535 144.904 38.013 143.327 36.7319C141.75 35.4171 140.961 33.6472 140.961 31.4222C140.961 29.1298 141.784 27.3262 143.43 26.0114C145.11 24.6629 147.511 23.7526 150.631 23.2807L159.273 21.9153V25.6068L151.454 26.8205C149.706 27.0902 148.385 27.5453 147.494 28.1858C146.636 28.8264 146.208 29.7534 146.208 30.9671C146.208 32.147 146.602 33.0404 147.391 33.6472C148.214 34.2203 149.397 34.5069 150.94 34.5069C152.998 34.5069 154.695 34.0181 156.033 33.0404C157.404 32.0627 158.09 30.8322 158.09 29.3489L158.759 33.091C158.142 34.8777 157.044 36.2599 155.467 37.2376C153.889 38.1816 151.969 38.6535 149.706 38.6535Z" fill="white" />
      <path d="M183.548 38.603C181.079 38.603 179.021 38.0298 177.375 36.8836C175.763 35.7037 174.7 34.0686 174.186 31.9785L174.906 31.8773V48.5144H169.556V12.3578H174.649V18.2744L174.134 18.1227C174.683 16.1673 175.849 14.6334 177.632 13.5209C179.415 12.4084 181.507 11.8522 183.908 11.8522C186.274 11.8522 188.314 12.4084 190.029 13.5209C191.778 14.6334 193.115 16.1842 194.041 18.1732C195.002 20.1623 195.482 22.4884 195.482 25.1517C195.482 27.8487 194.984 30.2086 193.99 32.2313C192.995 34.2541 191.607 35.8217 189.823 36.9342C188.04 38.0467 185.948 38.603 183.548 38.603ZM182.416 34.2541C184.748 34.2541 186.6 33.445 187.972 31.8268C189.343 30.2086 190.029 27.9835 190.029 25.1517C190.029 22.3536 189.343 20.1791 187.972 18.6284C186.6 17.0439 184.731 16.2516 182.365 16.2516C180.033 16.2516 178.164 17.0607 176.758 18.6789C175.386 20.2634 174.7 22.4716 174.7 25.3034C174.7 28.0678 175.386 30.2591 176.758 31.8773C178.164 33.4618 180.05 34.2541 182.416 34.2541Z" fill="white" />
      <path d="M214.066 38.603C211.597 38.603 209.539 38.0298 207.893 36.8836C206.281 35.7037 205.218 34.0686 204.704 31.9785L205.424 31.8773V48.5144H200.074V12.3578H205.167V18.2744L204.652 18.1227C205.201 16.1673 206.367 14.6334 208.15 13.5209C209.934 12.4084 212.026 11.8522 214.426 11.8522C216.792 11.8522 218.833 12.4084 220.547 13.5209C222.296 14.6334 223.634 16.1842 224.56 18.1732C225.52 20.1623 226 22.4884 226 25.1517C226 27.8487 225.503 30.2086 224.508 32.2313C223.514 34.2541 222.125 35.8217 220.342 36.9342C218.558 38.0467 216.467 38.603 214.066 38.603ZM212.934 34.2541C215.266 34.2541 217.118 33.445 218.49 31.8268C219.862 30.2086 220.547 27.9835 220.547 25.1517C220.547 22.3536 219.862 20.1791 218.49 18.6284C217.118 17.0439 215.249 16.2516 212.883 16.2516C210.551 16.2516 208.682 17.0607 207.276 18.6789C205.904 20.2634 205.218 22.4716 205.218 25.3034C205.218 28.0678 205.904 30.2591 207.276 31.8773C208.682 33.4618 210.568 34.2541 212.934 34.2541Z" fill="white" />
    </svg>);

}

function DarkNav() {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(14px)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '20px 48px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <Logo />
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', gap: 32, fontSize: 13, color: D.ink2, fontWeight: 600, letterSpacing: '0.02em', textTransform: 'uppercase' }}>
          {['Кейсы', 'Преимущества', 'Как это работает?', 'Тариф', 'Блог', 'Блогерам', 'Контакты'].map((n, i) =>
          <a key={i} style={{ cursor: 'pointer' }}>{n}</a>
          )}
        </div>
        <div style={{ marginLeft: 32 }}>
          <DownloadAppButton />
        </div>
      </div>
    </div>);
}

function DownloadAppButton() {
  return (
    <a href={SWAPP_APP_STORE} target="_blank" rel="noopener noreferrer" style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      background: D.green, color: D.greenInk,
      padding: '10px 18px 10px 16px', borderRadius: 999,
      fontSize: 13, fontWeight: 700, letterSpacing: '0.02em',
      textTransform: 'uppercase', cursor: 'pointer', textDecoration: 'none',
      boxShadow: `0 0 0 1px ${D.green} inset, 0 6px 20px rgba(34,238,94,0.25)`
    }}>
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke={D.greenInk} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 2v9" /><path d="M4 7l4 4 4-4" /><path d="M2.5 13.5h11" /></svg>
      Скачать приложение
    </a>);
}

// ─── HERO ────────────────────────────────────────────────────
function Hero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', padding: '64px 48px 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start' }}>
        <div>
          <h1 style={{
            fontSize: 'clamp(56px, 6.5vw, 96px)',
            lineHeight: 0.96, letterSpacing: '-0.04em',
            fontWeight: 800, margin: 0, textWrap: 'balance'
          }}>
            Реклама с<br />инфлюенсерами<br />
            <span style={{ background: `linear-gradient(180deg, ${D.green} 0%, ${D.greenSolid} 100%)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>по бартеру.</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.5, color: D.mute, maxWidth: 480, marginTop: 28, textWrap: 'pretty' }}>Создайте оффер — и получайте отклики от проверенных инфлюенсеров уже сегодня. 

          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 36, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href={SWAPP_APP_STORE} target="_blank" rel="noopener noreferrer" style={{ background: D.green, color: D.greenInk, border: 'none', padding: '17px 30px', borderRadius: 14, fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', textDecoration: 'none', display: 'inline-block' }}>Скачать приложение</a>
            <div style={{ fontSize: 13, color: D.mute, lineHeight: 1.4, maxWidth: 240 }}>
              <span style={{ color: D.green, fontWeight: 700 }}>+100%</span> к балансу на следующую<br />рекламную кампанию до 31.01.2026
            </div>
          </div>
          {/* Mini stats strip */}
          <div style={{ marginTop: 56, display: 'flex', gap: 40, paddingTop: 32, borderTop: `1px solid ${D.line}` }}>
            {[
            { v: '80+', l: 'брендов' },
            { v: '5 000+', l: 'инфлюенсеров' },
            { v: '10 мин', l: 'до запуска' }].
            map((s, i) =>
            <div key={i}>
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: D.ink, fontVariantNumeric: 'tabular-nums' }}>{s.v}</div>
                <div style={{ fontSize: 11, color: D.mute, marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>{s.l}</div>
              </div>
            )}
          </div>
        </div>

        {/* Hero creative — composite collage (woman + bag + barter card + brunch card + cosmetics) */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', width: "572px" }}>
          <img src="assets/hero-phone.png" alt="" style={{
            position: 'relative',
            width: '110%', height: 'auto', display: 'block',
            marginRight: '-10%',
            pointerEvents: 'none'
          }} />
        </div>
      </div>
    </section>);

}

function RatingsSection() {
  const tiers = [
  {
    title: 'Бронза',
    sub: 'Маленькая аудитория — глубокое доверие',
    handle: '@alma_food', niche: 'Еда · Алматы',
    followers: '8.2K', er: '8.4%', score: 28,
    photo: 'assets/rating-bronze.jpg',
    avatar: 'assets/rating-bronze-avatar.jpg'
  },
  {
    title: 'Серебро',
    sub: 'Своя ниша, свой голос, стабильный отклик',
    handle: '@arman.runs', niche: 'Мода · Алматы',
    followers: '34.6K', er: '5.1%', score: 37,
    photo: 'assets/rating-silver.jpg',
    avatar: 'assets/rating-silver-avatar.jpg'
  },
  {
    title: 'Золото',
    sub: 'Масштаб без потери настоящей вовлечённости',
    handle: '@aizere.kz', niche: 'Спорт · Астана',
    followers: '128K', er: '3.6%', score: 84,
    photo: 'assets/rating-gold.jpg',
    avatar: 'assets/rating-gold-avatar.jpg'
  }];


  return (
    <section style={{ padding: '120px 48px', background: D.bg2 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 4.6vw, 60px)', fontWeight: 800, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.02, textWrap: 'balance', maxWidth: 720 }}>Рейтинг инфлюенсера</h2>
          </div>
          <p style={{ fontSize: 15, color: D.mute, maxWidth: 420, lineHeight: 1.55, margin: 0, textWrap: 'pretty' }}>
            Считаем по 40+ параметрам — не по подписчикам. Пост у блогера с 5 тыс. живых подписчиков часто работает сильнее, чем у звезды с миллионом.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {tiers.map((t) =>
          <article key={t.title} data-hover-card style={{
            position: 'relative', aspectRatio: '3 / 4.6',
            borderRadius: 28, overflow: 'hidden', background: '#0a0a0a',
            boxShadow: '0 30px 60px -20px rgba(0,0,0,0.7)'
          }}>
              <img src={t.photo} alt="" style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'cover', display: 'block',
              filter: 'contrast(1.10) saturate(0.95) brightness(0.96)'
            }} />
              <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 18%, rgba(0,0,0,0) 36%, rgba(0,0,0,0.88) 68%, rgba(0,0,0,0.97) 100%)'
            }} />

              {/* Top glass pill — avatar + handle + score */}
              <div style={{
              position: 'absolute', top: 18, left: 18, right: 18,
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '8px 14px 8px 8px', borderRadius: 999,
              background: 'rgba(20,20,20,0.5)', backdropFilter: 'blur(22px)', WebkitBackdropFilter: 'blur(22px)',
              boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.08)'
            }}>
                <div style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', flexShrink: 0,
                boxShadow: `inset 0 0 0 1.5px ${D.green}66` }}>
                  <img src={t.avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.handle}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 3, fontWeight: 500 }}>{t.followers} подписчиков</div>
                </div>
                <div style={{
                color: D.green, fontSize: 15, fontWeight: 800,
                fontVariantNumeric: 'tabular-nums', flexShrink: 0
              }}>
                  {t.score}<span style={{ fontSize: 11, opacity: 0.7, fontWeight: 600 }}> /100</span>
                </div>
              </div>

              {/* Bottom: title + UGC sub + ER hero stat */}
              <div style={{ position: 'absolute', left: 28, right: 28, bottom: 28 }}>
                <div style={{
                fontSize: 52, fontWeight: 800, color: '#fff',
                letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 14
              }}>{t.title}</div>
                <div style={{
                fontSize: 15, color: 'rgba(255,255,255,0.78)', lineHeight: 1.4, marginBottom: 20, textWrap: 'pretty'
              }}>{t.sub}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, color: '#fff', fontVariantNumeric: 'tabular-nums' }}>
                  <span style={{ fontSize: 32, fontWeight: 800, color: D.green, letterSpacing: '-0.025em', lineHeight: 1 }}>{t.er}</span>
                  <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', fontWeight: 500 }}>вовлечённость</span>
                </div>
              </div>
            </article>
          )}
        </div>

        <div style={{ marginTop: 40, fontSize: 14, color: D.mute, textAlign: 'center', maxWidth: 760, margin: '40px auto 0', lineHeight: 1.5 }}>
          Чем выше рейтинг — тем ценнее бартер, который ожидает инфлюенсер. Вы сами решаете, что предложить.
        </div>
      </div>
    </section>);

}

function BloggersWaiting() {
  const niches = ['Спорт', 'Еда', 'Концерты', 'Красота', 'Образование', 'Туризм', 'Услуги', 'и ещё'];
  const activeSet = new Set(['Спорт', 'Красота', 'Услуги']);

  return (
    <section style={{ padding: '80px 48px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          background: D.lightWarm, borderRadius: 36,
          position: 'relative', overflow: 'hidden',
          display: 'grid',
          gridTemplateColumns: '1.05fr 1fr',
          alignItems: 'stretch',
          minHeight: 520
        }}>
          {/* Decorative dotted texture, subtle on the left edge */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(rgba(10,10,10,0.08) 1px, transparent 1px)',
            backgroundSize: '18px 18px',
            maskImage: 'radial-gradient(ellipse at 0% 50%, black 0%, transparent 45%)',
            WebkitMaskImage: 'radial-gradient(ellipse at 0% 50%, black 0%, transparent 45%)',
            pointerEvents: 'none'
          }} />

          {/* TEXT column */}
          <div style={{
            position: 'relative',
            padding: '64px 24px 64px 64px',
            display: 'flex', flexDirection: 'column', gap: 24,
            zIndex: 2
          }}>
            <h2 style={{
              fontSize: 'clamp(40px, 4.6vw, 64px)', lineHeight: 1.02,
              letterSpacing: '-0.03em', fontWeight: 800, margin: 0,
              color: '#0a0a0a', textWrap: 'balance'
            }}>
              Сделайте предложение —<br />его ждут
            </h2>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {niches.map((n, i) => {
                const isLast = i === niches.length - 1;
                const isActive = activeSet.has(n);
                return (
                  <div key={n} style={{
                    padding: '8px 14px', borderRadius: 999,
                    background: isActive ? D.greenSolid : 'transparent',
                    color: isActive ? D.greenInk : isLast ? '#737373' : '#262626',
                    border: isActive ? `1px solid ${D.greenSolid}` : isLast ? '1px dashed #a8a8a3' : '1px solid #c9c9c4',
                    fontSize: 13.5, fontWeight: isActive ? 700 : 600, letterSpacing: '-0.005em',
                    fontStyle: isLast ? 'italic' : 'normal'
                  }}>{isLast ? '+ ещё 12' : n}</div>);

              })}
            </div>

            <p style={{
              fontSize: 15.5, lineHeight: 1.5, margin: 0,
              color: '#404040', textWrap: 'pretty', maxWidth: 460
            }}>
              Подберите тех, кто говорит с вашей аудиторией. Без переплат агентствам.
            </p>

            <div style={{
              marginTop: 'auto', paddingTop: 12,
              display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap'
            }}>
              <a href={SWAPP_APP_STORE} target="_blank" rel="noopener noreferrer" style={{
                background: D.green, color: D.greenInk, border: 'none',
                padding: '16px 28px', borderRadius: 14,
                fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
                textDecoration: 'none', display: 'inline-block',
                boxShadow: '0 8px 20px rgba(27, 204, 79, 0.25)'
              }}>Скачать приложение</a>
              <AppStoreBadge />
            </div>
          </div>

          {/* IMAGE column — bleeds left into text column for compositional unity */}
          <div style={{ position: 'relative', minHeight: 520 }}>
            {/* Soft glow halo to anchor the products visually */}
            <div aria-hidden style={{
              position: 'absolute', left: '-30%', right: '-10%',
              bottom: -80, top: '5%',
              background: 'radial-gradient(ellipse at 55% 70%, rgba(255,255,255,0.55) 0%, rgba(230,230,227,0) 60%)',
              pointerEvents: 'none'
            }} />
            <img src="assets/hero-products.png" alt="" style={{
              position: 'absolute',
              right: 0, left: 'auto',
              top: '50%', transform: 'translateY(-50%)',
              width: '115%',
              height: 'auto',
              maxHeight: '105%',
              objectFit: 'contain',
              objectPosition: 'right center',
              pointerEvents: 'none',
              filter: 'drop-shadow(0 18px 30px rgba(0,0,0,0.12))'
            }} />
          </div>
        </div>
      </div>
    </section>);

}

function AppStoreBadge() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px', background: '#000', borderRadius: 8, color: '#fff' }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M17.5 12.4c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.9-1.4-.1-2.8.8-3.5.8-.7 0-1.9-.8-3.1-.8-1.6 0-3.1.9-3.9 2.4-1.7 2.9-.4 7.2 1.2 9.6.8 1.2 1.7 2.5 2.9 2.4 1.2 0 1.6-.7 3.1-.7 1.4 0 1.8.7 3.1.7 1.3 0 2.1-1.2 2.8-2.4.9-1.4 1.3-2.7 1.3-2.7s-2.5-.9-2.5-3.9zM15.4 5.4c.6-.7 1-1.7 1-2.7-1 0-2.1.7-2.8 1.4-.6.7-1.1 1.7-.9 2.7 1.1.1 2.1-.6 2.7-1.4z" /></svg>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 9, lineHeight: 1 }}>Download on the</div>
        <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.2 }}>App Store</div>
      </div>
    </div>);

}

function CalculatorSection() {
  const [bronze, setBronze] = React.useState({ cost: 5000, count: 5 });
  const [silver, setSilver] = React.useState({ cost: 12000, count: 3 });
  const [gold, setGold] = React.useState({ cost: 30000, count: 1 });

  const total = bronze.count + silver.count + gold.count;
  const barterCost = bronze.cost * bronze.count + silver.cost * silver.count + gold.cost * gold.count;
  const commission = total * 5000;
  const totalCost = barterCost + commission;
  const reach = bronze.count * 1500 + silver.count * 4500 + gold.count * 12000;
  const cpm = reach > 0 ? Math.round(totalCost / (reach / 1000)) : 0;

  return (
    <section style={{ padding: '120px 48px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ marginBottom: 64, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 4.6vw, 60px)', fontWeight: 800, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.02, textWrap: 'balance', maxWidth: 720 }}>Калькулятор охвата</h2>
          </div>
          <p style={{ fontSize: 15, color: D.mute, maxWidth: 380, lineHeight: 1.55, margin: 0, textWrap: 'pretty' }}>
            Сравните с таргетом и агентствами.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28 }}>
          <div style={{ display: 'grid', gap: 14 }}>
            <TierRow name="Бронзовый Инфлюенсер" color={D.bronze} value={bronze} onChange={setBronze} />
            <TierRow name="Серебряный Инфлюенсер" color={D.silver} value={silver} onChange={setSilver} />
            <TierRow name="Золотой Инфлюенсер" color={D.gold} value={gold} onChange={setGold} />

            <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
              <button onClick={() => {setBronze({ cost: 0, count: 0 });setSilver({ cost: 0, count: 0 });setGold({ cost: 0, count: 0 });}}
              style={{ flex: 1, background: D.card, color: D.ink, border: `1px solid ${D.line}`, padding: 18, borderRadius: 14, fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>Сбросить</button>
              <button style={{ flex: 1, background: 'transparent', color: D.green, border: `1.5px solid ${D.green}`, padding: 18, borderRadius: 14, fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>Рассчитать</button>
            </div>
          </div>

          {/* Result */}
          <div style={{ background: D.card, border: `1px solid ${D.line}`, borderRadius: 22, padding: 30 }}>
            <div style={{ fontSize: 13, color: D.mute, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 18 }}>Расчёт кампании</div>
            <ResultLine label="Стоимость бартера" value={`${barterCost.toLocaleString('ru-RU')} ₸`} />
            <ResultLine label="Комиссия SWAPP" value={`${commission.toLocaleString('ru-RU')} ₸`} />
            <ResultLine label="Итого затрат" value={`${totalCost.toLocaleString('ru-RU')} ₸`} bold />

            <div style={{ height: 1, background: D.line, margin: '20px 0' }} />

            <div style={{ marginBottom: 16 }}>
              <div style={{ fontSize: 12, color: D.mute, marginBottom: 4 }}>Примерный охват</div>
              <div style={{ fontSize: 40, fontWeight: 800, color: D.green, letterSpacing: '-0.035em', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{reach.toLocaleString('ru-RU')}</div>
              <div style={{ fontSize: 12, color: D.mute, marginTop: 4 }}>просмотров</div>
            </div>
            <ResultLine label="CPM (за 1000 показов)" value={`${cpm} ₸`} />

            <div style={{ marginTop: 20, padding: 14, background: D.bg, borderRadius: 10, border: `1px solid ${D.line}` }}>
              <div style={{ fontSize: 11, color: D.mute, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 8 }}>Тот же охват иначе</div>
              <ResultLine compact label="Instagram таргет" value={reach > 0 ? `${Math.round(reach * 1.5 / 1000)} — ${Math.round(reach * 2.2 / 1000)} тыс. ₸` : '—'} />
              <ResultLine compact label="Через агентство" value={reach > 0 ? `${Math.round(reach * 1.1 / 1000)} — ${Math.round(reach * 1.4 / 1000)} тыс. ₸` : '—'} />
              <ResultLine compact label="SWAPP" value={`${(totalCost / 1000).toFixed(0)} тыс. ₸`} bold />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function TierRow({ name, color, value, onChange }) {
  return (
    <div style={{ background: D.card, border: `1px solid ${D.line}`, borderRadius: 18, padding: '20px 24px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: color, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 12px ${color}55` }}>
          <svg width="14" height="16" viewBox="0 0 14 16" fill="#000"><path d="M7 1L1 3v5c0 4 3 6.5 6 7 3-.5 6-3 6-7V3L7 1z" /></svg>
        </div>
        <div style={{ fontSize: 17, fontWeight: 700, color: color, letterSpacing: '-0.01em' }}>{name}</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <NumField label="Себестоимость товара/услуги" value={value.cost} onChange={(v) => onChange({ ...value, cost: v })} suffix="₸" />
        <NumField label="Количество инфлюенсеров" value={value.count} onChange={(v) => onChange({ ...value, count: v })} max={50} />
      </div>
    </div>);

}

function NumField({ label, value, onChange, suffix, max = 1000000 }) {
  return (
    <div style={{ background: '#1a1a1a', border: `1px solid ${D.line}`, borderRadius: 10, padding: '10px 14px' }}>
      <div style={{ fontSize: 11, color: D.mute, marginBottom: 4 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <input type="number" value={value} max={max}
        onChange={(e) => onChange(Math.min(max, +e.target.value || 0))}
        style={{ background: 'transparent', border: 'none', color: D.ink, fontSize: 15, fontWeight: 600, fontFamily: 'inherit', width: '100%', outline: 'none', padding: 0, fontVariantNumeric: 'tabular-nums' }} />
        {suffix && <span style={{ fontSize: 13, color: D.mute }}>{suffix}</span>}
      </div>
    </div>);

}

function ResultLine({ label, value, bold, compact }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: compact ? '4px 0' : '6px 0' }}>
      <div style={{ fontSize: compact ? 12 : 14, color: bold ? D.ink : D.mute }}>{label}</div>
      <div style={{ fontSize: compact ? 12 : bold ? 17 : 14, color: bold ? D.ink : D.ink2, fontWeight: bold ? 800 : 600, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>);

}

// ─── BLOG ──────────────────────────────────────────────
function BlogSection() {
  const posts = [
  { tag: 'Кейс', category: 'Клиентский кейс', title: 'Как «КАМИН» собрал 138 000 просмотров за неделю', date: '10.11.2024', read: '4 мин', hue: 145, image: 'assets/kamin-blog.jpg' },
  { tag: 'Гайд', category: 'Бриф и ТЗ', title: 'Что писать в ТЗ блогеру, чтобы получить нужный контент', date: '02.11.2024', read: '7 мин', hue: 25 },
  { tag: 'Аналитика', category: 'CPM и экономика', title: 'Сравнили SWAPP и Instagram-таргет: где CPM ниже', date: '18.10.2024', read: '5 мин', hue: 220 }];

  return (
    <section style={{ padding: '120px 48px', background: D.bg2 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 4.6vw, 60px)', fontWeight: 800, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.02, textWrap: 'balance' }}>Блог</h2>
          </div>
          <a style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontSize: 14, color: D.ink2, fontWeight: 600,
            padding: '12px 22px', border: `1px solid ${D.line}`, borderRadius: 999,
            cursor: 'pointer'
          }}>Все статьи
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h8M7 3l4 4-4 4" /></svg>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {posts.map((p, i) => <BlogCard key={i} post={p} />)}
        </div>
      </div>
    </section>);

}

function BlogCard({ post }) {
  return (
    <article data-hover-card style={{ background: D.card, border: `1px solid ${D.line}`, borderRadius: 22, overflow: 'hidden', display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
      <div style={{
        aspectRatio: '16/10', position: 'relative',
        background: post.image ? '#0a0a0a' : `linear-gradient(135deg, hsl(${post.hue}, 30%, 28%), hsl(${post.hue}, 25%, 14%))`,
        overflow: 'hidden'
      }}>
        {post.image ?
        <img src={post.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> :
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 30% 70%, hsla(${post.hue}, 50%, 50%, 0.3), transparent 60%)` }} />}
        <div style={{ position: 'absolute', top: 16, left: 16, padding: '4px 10px', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)', borderRadius: 6, fontSize: 11, color: D.green, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{post.tag}</div>
      </div>
      <div style={{ padding: 24, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 11, color: D.mute, marginBottom: 10, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>{post.category}</div>
        <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.3, marginBottom: 16, letterSpacing: '-0.015em', textWrap: 'balance' }}>{post.title}</div>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, borderTop: `1px solid ${D.line}` }}>
          <div style={{ fontSize: 12, color: D.mute, fontVariantNumeric: 'tabular-nums' }}>{post.date} · {post.read}</div>
          <div style={{ fontSize: 13, color: D.green, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
            Читать
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h8M7 3l4 4-4 4" /></svg>
          </div>
        </div>
      </div>
    </article>);

}

// ─── FAQ ──────────────────────────────────────────────
function FaqSection() {
  const items = [
  { q: 'Чем SWAPP отличается от рассылки в Direct?', a: 'Три вещи: мы сами проверяем блогеров — данные приходят напрямую от Instagram в реальном времени. Весь процесс автоматизирован в приложении (без переписок). И комиссия возвращается, если ТЗ не выполнено.' },
  { q: 'Что такое Бронза/Серебро/Золото?', a: 'Это рейтинг по реальному влиянию: ER, качество аудитории, география, соответствие нише. Подсчитан по 40 параметрам, не по подписчикам.' },
  { q: 'Можно ли выбрать конкретного блогера?', a: 'Да. Перед подтверждением визита вы видите рейтинг, охват, ER и примеры контента каждого кандидата.' },
  { q: 'Как работает возврат 100%?', a: 'Комиссия 5 000 ₸ списывается только после модерации. Если ТЗ не выполнено или блогер не пришёл — деньги возвращаются на баланс автоматически.' },
  { q: 'Кто платит за бартер?', a: 'Бартер — это ваши услуги или товары. Вы определяете его сами. Платформа берёт фиксированные 5 000 ₸ за блогера.' },
  { q: 'Сколько стоит запуск?', a: 'Минимальное пополнение — 20 000 ₸ (4 блогера). Кампанию можно запустить за 10 минут.' }];

  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ padding: '120px 48px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 4.6vw, 60px)', fontWeight: 800, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.02, textWrap: 'balance' }}>FAQ</h2>
          </div>
          <p style={{ fontSize: 15, color: D.mute, maxWidth: 360, lineHeight: 1.55, margin: 0, textWrap: 'pretty' }}>
            Не нашли ответа? Пишите на <span style={{ color: D.green, fontWeight: 600 }}>hi@swapp.kz</span> — отвечаем в течение часа.
          </p>
        </div>
        <div>
          {items.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ background: isOpen ? D.card : '#0f0f0f', border: `1px solid ${isOpen ? D.lineHi : D.line}`, borderRadius: 14, marginBottom: 10, overflow: 'hidden', transition: 'all .2s' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                style={{ width: '100%', background: 'transparent', border: 'none', padding: '24px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', color: D.ink, gap: 16 }}>
                  <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>{f.q}</div>
                  <div style={{ width: 30, height: 30, borderRadius: 15, background: isOpen ? D.green : 'transparent', color: isOpen ? D.greenInk : D.ink2, border: `1px solid ${isOpen ? D.green : D.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'all .2s', flexShrink: 0 }}>+</div>
                </button>
                {isOpen && <div style={{ padding: '0 28px 24px', fontSize: 15, color: D.ink2, lineHeight: 1.6, maxWidth: 800, textWrap: 'pretty' }}>{f.a}</div>}
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// ─── CONTACT CTA / FINAL CTA ─────────────────────────
// Final CTA mirroring mobile MFinalCta, scaled up for desktop.
function ContactCta() {
  return (
    <section style={{ padding: '160px 48px', position: 'relative', overflow: 'hidden' }}>
      {/* Atmospheric halo at bottom */}
      <div aria-hidden style={{
        position: 'absolute', left: '50%', bottom: '-30%', transform: 'translateX(-50%)',
        width: 1400, height: 900,
        background: `radial-gradient(ellipse at center, ${D.greenGlowStrong} 0%, ${D.greenGlow} 28%, transparent 62%)`,
        filter: 'blur(2px)', pointerEvents: 'none'
      }} />
      {/* Grid pattern, masked to bottom */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${D.line} 1px, transparent 1px), linear-gradient(90deg, ${D.line} 1px, transparent 1px)`,
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse at 50% 90%, black 0%, transparent 65%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 90%, black 0%, transparent 65%)',
        opacity: 0.45, pointerEvents: 'none'
      }} />

      <div style={{ position: 'relative', maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        <h2 style={{
          fontSize: 'clamp(52px, 6.4vw, 96px)', fontWeight: 800,
          letterSpacing: '-0.04em', margin: 0, lineHeight: 0.98, textWrap: 'balance'
        }}>
          Запустите первую кампанию <span style={{
            background: `linear-gradient(180deg, ${D.green}, ${D.greenSolid})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'
          }}>за 10 минут.</span>
        </h2>

        <p style={{
          fontSize: 19, color: D.mute, lineHeight: 1.5,
          margin: '32px auto 0', textWrap: 'pretty', maxWidth: 640
        }}>
          Создайте оффер — и уже сегодня первые верифицированные блогеры откликнутся на ваш бартер.
        </p>

        <div style={{
          marginTop: 48, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap'
        }}>
          <button style={{
            background: D.green, color: D.greenInk, border: 'none',
            padding: '20px 40px', borderRadius: 14,
            fontSize: 15, fontWeight: 800, letterSpacing: '0.04em',
            textTransform: 'uppercase',
            cursor: 'pointer', fontFamily: 'inherit',
            boxShadow: `0 14px 40px rgba(34,238,94,0.28), 0 0 0 1px ${D.green} inset`
          }}>Запустить кампанию</button>
          <a href={SWAPP_APP_STORE} target="_blank" rel="noopener noreferrer" style={{
            background: 'rgba(255,255,255,0.05)', color: D.ink,
            border: `1px solid ${D.line}`,
            padding: '20px 40px', borderRadius: 14,
            fontSize: 15, fontWeight: 700, letterSpacing: '0.04em',
            textTransform: 'uppercase', textDecoration: 'none', display: 'inline-block',
            cursor: 'pointer', fontFamily: 'inherit',
            backdropFilter: 'blur(8px)'
          }}>Скачать приложение</a>
        </div>
      </div>
    </section>);

}

// ─── FOOTER ──────────────────────────────────────
// Структура: ЛОГО · Навигация · Контакты · О компании
function Footer() {
  return (
    <footer style={{ background: '#000', borderTop: `1px solid ${D.line}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '88px 48px 56px', display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.1fr', gap: 64, alignItems: 'start' }}>

        {/* Лого */}
        <div>
          <Logo size="md" />
          <div style={{ fontSize: 13, color: D.mute, marginTop: 20, lineHeight: 1.55, maxWidth: 260, textWrap: 'pretty' }}>
            B2B-платформа для бартерной рекламы с верифицированными инфлюенсерами Казахстана.
          </div>
          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 7, height: 7, borderRadius: 4, background: D.green, boxShadow: `0 0 10px ${D.green}` }} />
            <span style={{ fontSize: 12, color: D.mute }}>Все системы работают</span>
          </div>
        </div>

        {/* Навигация */}
        <FooterCol title="Навигация" items={['Кейсы', 'Преимущества', 'Как работает', 'Тариф', 'Блог', 'Блогерам', 'Скачать приложение']} />

        {/* Контакты */}
        <FooterCol title="Контакты" items={[
        { l: 'Telegram', mono: true, hint: '@swapp_kz' },
        { l: 'WhatsApp', mono: true, hint: '+7 (727) 100-00-00' },
        { l: 'hi@swapp.kz', accent: true }]
        } />

        {/* О компании */}
        <div>
          <div style={{ fontSize: 11, color: D.mute, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 22, fontWeight: 700 }}>О компании</div>
          <div style={{ fontSize: 14, color: D.ink2, lineHeight: 1.7 }}>
            ТОО «SWAPP»<br />
            БИН 240240012345<br />
            Алматы, ул. Достык 200<br />
            офис 1407<br />
          </div>
          <div style={{ marginTop: 16, fontSize: 14, fontWeight: 600 }}>
            <a style={{ color: D.green, cursor: 'pointer' }}>hi@swapp.kz</a>
          </div>
        </div>
      </div>

      {/* Bottom strip */}
      <div style={{ borderTop: `1px solid ${D.line}` }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '22px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: D.mute2, gap: 24, flexWrap: 'wrap' }}>
          <div>© 2026 SWAPP. Все права защищены.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a style={{ cursor: 'pointer' }}>Публичная оферта</a>
            <a style={{ cursor: 'pointer' }}>Политика конфиденциальности</a>
          </div>
        </div>
      </div>
    </footer>);

}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: D.mute, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 22, fontWeight: 700 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => {
          const obj = typeof it === 'string' ? { l: it } : it;
          return (
            <div key={i}>
              <a style={{
                display: 'inline-block', fontSize: 15,
                color: obj.accent ? D.green : D.ink2,
                fontWeight: obj.accent ? 700 : 500,
                cursor: 'pointer', letterSpacing: '-0.005em'
              }}>{obj.l}</a>
              {obj.hint && <div style={{ fontSize: 12, color: D.mute2, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{obj.hint}</div>}
            </div>);

        })}
      </div>
    </div>);

}

Object.assign(window, { ConservativeVariant, D_THEME: D, Logo });