// Three "rhythm-breaker" sections that sit between main blocks:
// 1. StatBand   — big numbers strip (between Hero and Cases)
// 2. ClientQuote — full-width customer quote (between Cases and Advantages)
// 3. TrustLogos — partner/client logos row (between StatBand and Cases)

const D_X = (typeof window !== 'undefined' && window.__SwappTokens) || {};

// ─── 1. STAT BAND ────────────────────────────────────────────
function StatBand() {
  const D = D_X;
  const stats = [
    { num: '1 000+', label: 'инфлюенсеров', sub: 'в каталоге' },
    { num: '40', label: 'параметров', sub: 'аудит каждого' },
    { num: '7', label: 'категорий', sub: 'от еды до туризма' },
    { num: '10 мин', label: 'до запуска', sub: 'от регистрации' },
  ];
  return (
    <section style={{
      padding: '64px 48px',
      background: D.bg,
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: `1px solid ${D.line}`,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: '40px 32px',
              borderRight: i < stats.length - 1 ? `1px solid ${D.line}` : 'none',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{
                fontSize: 56, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95,
                color: D.ink, fontVariantNumeric: 'tabular-nums',
              }}>{s.num}</div>
              <div style={{ fontSize: 14, color: D.ink2, fontWeight: 600, letterSpacing: '-0.01em' }}>{s.label}</div>
              <div style={{ fontSize: 12, color: D.mute, marginTop: 'auto' }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 2. CLIENT QUOTE ─────────────────────────────────────────
function ClientQuote() {
  const D = D_X;
  return (
    <section style={{
      padding: '120px 48px',
      background: D.bg,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* subtle radial accent */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 600, height: 600, borderRadius: '50%',
        background: `radial-gradient(circle, ${D.greenGlowStrong}, transparent 70%)`,
        opacity: 0.5, pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        {/* Big quotation mark */}
        <div style={{
          fontSize: 96, fontWeight: 800, color: D.green,
          lineHeight: 0.7, marginBottom: 24, fontFamily: 'Georgia, serif',
          opacity: 0.9,
        }}>“</div>
        {/* Quote */}
        <blockquote style={{
          margin: 0, fontSize: 36, lineHeight: 1.3, fontWeight: 600,
          letterSpacing: '-0.02em', color: D.ink, textWrap: 'balance',
          maxWidth: 980, marginInline: 'auto',
        }}>
          За 7 дней мы получили 138 000 просмотров и +38% к среднему чеку. Я не верил, что всё можно запустить за вечер без агентства — но получилось.
        </blockquote>
        {/* Attribution */}
        <div style={{
          marginTop: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16,
        }}>
          {/* Avatar */}
          <div style={{
            width: 56, height: 56, borderRadius: 28,
            background: `linear-gradient(135deg, hsl(28, 30%, 35%), hsl(28, 30%, 18%))`,
            border: `2px solid ${D.green}55`,
            position: 'relative', overflow: 'hidden', flexShrink: 0,
          }}>
            <img
              src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&h=200&fit=crop&crop=faces"
              alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          </div>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: D.ink, letterSpacing: '-0.01em' }}>Алишер Касенов</div>
            <div style={{ fontSize: 13, color: D.mute, marginTop: 2 }}>Маркетолог · сеть бургерных «КАМИН»</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 3. TRUST LOGOS ──────────────────────────────────────────
// Real client logos: КАМИН/GYRO as inline SVGs (currentColor), ROCKBROS
// as invert-filtered raster, Favor as CSS-masked solid fill.
const KaminLogoSVG_D = (
  <svg viewBox="0 0 587.92 134.95" fill="currentColor" style={{ display: 'block', height: 22, width: 'auto' }} aria-label="КАМИН">
    <path d="M97.34,131.52L55.68,50.02,90.6,2.83h-18.88l-37.75,66.06v.95l32.09,65.11h33.03l-1.75-3.43ZM0,2.83v132.12h31.14V2.83H0Z"/>
    <path d="M159.4901,0h-.95l-22.65,8.5-38.55,123.02-1.08,3.43h16.04l8.49-37.75h37.37l10.76,37.75h32.09L159.4901,0ZM122.4901,89.65l14.35-64.17h.94l18.31,64.17h-33.6Z"/>
    <path d="M307.65,2.83l-27.56,80.22h-.76L247.25,2.83h-32.09v132.12h13.21l-6.6-109.47h.94l43.61,109.47h4.24l38.03-109.47h.94v109.47h31.14V2.83h-33.02Z"/>
    <path d="M434.1,2.83l-34.92,105.7h-.94V2.83h-31.14v132.12h31.14l34.92-105.69h.94v105.69h31.14V2.83h-31.14Z"/>
    <path d="M556.78,2.83v59.46h-33.97V2.83h-31.15v132.12h31.15v-65.11h33.97v65.11h31.14V2.83h-31.14Z"/>
  </svg>
);
const GyroLogoSVG_D = (
  <svg viewBox="0 0 628.67 172.34" fill="currentColor" style={{ display: 'block', height: 28, width: 'auto' }} aria-label="GYRO">
    <path d="M126.36,25.39c-.04,3.5.13,6.5-4.5,7.27-4.75.78-9.5,1.57-14.26,2.35-22.28,3.68-45.92,12.2-61.62,29.2-6.57,7.11-11.33,16.19-10.55,26.11,1.54,19.69,18.44,38.04,61.38,41.54,1.08.09,2.02-.78,2.03-1.87.09-12.11.09-16.49.01-23.84-.01-1.1-.91-2-2.01-1.99-3.95.02-12.5.06-13.45.06-4.29,0-7.36-.89-7.36-6.86,0-6.1-.16-9.87-.16-13.81,0-3.48.06-8.86,7.89-9.12,6.95-.23,29.27-.15,42.98,0,3.92.04,5.4,2.11,5.46,7.3.36,31.96.88,48.39.88,76.85,0,10.48-8.74,11.55-17.3,11.32C66.91,168.57.9,147.14,0,89.32,2.32,30.03,69.77,6.22,120.8.74c4.86-.52,5.56,5.63,5.56,8.23,0,7.58.05,12.1,0,16.42Z"/>
    <path d="M293.4,21.09c3.03,3.17.51,6.38-.65,8.12-7.18,10.67-38.01,52.56-44.66,62.79-.83,1.28-1.26,2.78-1.24,4.31.09,7.82.39,35.86.39,58.02,0,17.52-2.78,16.67-21.07,16.67-19.7,0-23.21,1.84-23.21-15.48,0-15.38.02-49.5.03-58.88,0-1.61-.49-3.16-1.42-4.47-13.95-19.71-51.29-62.65-52.95-64.43-1.38-1.47-3.72-4.25-1.71-6.27,7.41-7.41,23.2-18.47,25.17-19.88,2.28-1.63,4.56-3.13,8.43,1.67,8.93,11.08,33.5,39.26,41.08,47.85.57.65,1.59.62,2.13-.05,13.11-16.02,24.46-32.01,35.77-46.98,3.44-4.55,6.28-3.24,7.97-2.12,5.36,3.54,22.22,15.25,25.93,19.13Z"/>
    <path d="M448.56,143.6c6.96,6.52-2.76,14.71-7.5,19.22-4.65,4.42-9.14,8.83-15.47,9.49-8.1.54-14.09-7.36-19.12-12.93-11.95-13.99-20.98-25.55-32.98-39.69-21.16-24.94,23.16-44.76,23.16-57.62,0-6.76-33.9-18.94-38.37-13.55-2.56,6.14.5,81.27.28,113.44-.03,5.03-.69,8.75-6.38,8.75-6.23,0-18.12.03-24.08,0-4.92-.02-11.08.01-11.08-10.07,0-40.51-.95-128.7-.95-140.08,0-15.89,5.32-24.04,28.9-17.97,32.33,8.31,56.28,17.19,86.92,30.56,37.46,16.34-10.53,40.97-21.5,64.26-1.4,2.97.78,7.64,3.17,9.97,4.81,4.69,16.27,18.71,34.97,36.22Z"/>
    <path d="M543.92.56c12.03.95,22.69,8.75,31.28,17.16,13.06,12.65,25.45,25.84,37.41,39.2,16.68,16.84,22.43,27.73,7.22,49.11-17,20.62-34.74,41.19-55.5,58.01-12.19,9.32-29.14,9.35-41.48.3-20.32-14.98-37.16-34.76-53.75-53.38-5.38-6.18-11.57-13.19-11.58-22,.29-14.47,12.33-24.47,20.52-34.85,11.18-13.51,23.03-26.68,35.25-39.09,7.94-8.29,18.71-15.52,30.32-14.49l.29.02ZM582.5,85.56c.5-7.97-20.66-25.31-26.4-31.1-6.24-5.31-11.36-12.42-19.42-5.67-9.92,8.11-18.61,17.75-26.84,27.85-6.35,7.67-3.79,13.22,2.34,19.78,7.38,8.24,15.38,16.42,23.49,23.61,6.03,5.74,10.14,5.99,16.33.33,7.63-6.64,14.65-14.02,21.58-21.66,3.17-3.9,7.75-7.85,8.9-12.89l.03-.24Z"/>
  </svg>
);

function TrustLogos() {
  const D = D_X;
  const items = [
    { kind: 'svg', node: KaminLogoSVG_D, key: 'kamin' },
    { kind: 'svg', node: GyroLogoSVG_D, key: 'gyro' },
    { kind: 'img', src: 'assets/rockbros-logo.webp', alt: 'ROCKBROS', height: 52, key: 'rockbros' },
    { kind: 'mask', src: 'assets/favor-logo.png', alt: 'Favor Restaurant', height: 56, ratio: 1177/613, key: 'favor' },
    { kind: 'text', label: 'Aurora', font: 'Georgia, serif', weight: 600, transform: 'none', letterSpacing: '-0.02em', style: 'italic' },
    { kind: 'text', label: 'GOODS', font: 'Manrope', weight: 800, transform: 'uppercase', letterSpacing: '0.2em' },
    { kind: 'text', label: 'Halyk×', font: 'Manrope', weight: 700, transform: 'none', letterSpacing: '-0.01em' },
    { kind: 'text', label: 'BAITEREK', font: 'Manrope', weight: 800, transform: 'uppercase', letterSpacing: '0.05em' },
    { kind: 'text', label: 'choco·', font: 'Manrope', weight: 700, transform: 'lowercase', letterSpacing: '-0.02em' },
  ];
  return (
    <section style={{
      padding: '56px 48px',
      background: D.bg,
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          fontSize: 11, color: D.mute, fontWeight: 600, letterSpacing: '0.15em',
          textTransform: 'uppercase', textAlign: 'center', marginBottom: 32,
        }}>
          Нам доверяют
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32,
          flexWrap: 'wrap',
          color: D.ink2,
        }}>
          {items.map((l) => {
            if (l.kind === 'svg') {
              return <div key={l.key} style={{ opacity: 0.75, color: D.ink2 }}>{l.node}</div>;
            }
            if (l.kind === 'img') {
              return <img key={l.key} src={l.src} alt={l.alt} style={{
                display: 'block', height: l.height, width: 'auto',
                filter: 'invert(1)', opacity: 0.72,
              }}/>;
            }
            if (l.kind === 'mask') {
              return <div key={l.key} role="img" aria-label={l.alt} style={{
                display: 'block', height: l.height, width: l.height * l.ratio,
                background: D.ink2, opacity: 0.78,
                WebkitMaskImage: `url(${l.src})`, maskImage: `url(${l.src})`,
                WebkitMaskSize: 'contain', maskSize: 'contain',
                WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
                WebkitMaskPosition: 'center', maskPosition: 'center',
              }}/>;
            }
            return (
              <div key={l.label} style={{
                fontSize: 22,
                fontFamily: l.font,
                fontWeight: l.weight,
                fontStyle: l.style || 'normal',
                textTransform: l.transform,
                letterSpacing: l.letterSpacing,
                color: D.ink2,
                opacity: 0.7,
                userSelect: 'none',
              }}>{l.label}</div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StatBand, ClientQuote, TrustLogos });