// "Кейсы" block — manifesto layout. Used while real public cases are being collected.
// Renders three platform principles as a numbered list with a green keyword and description.
// Uses shared tokens from window.__SwappTokens (set in conservative.jsx).

function CasesManifesto() {
  const D = window.__SwappTokens;
  const principles = [
    { k: 'Бартер', v: 'Без денег за рекламу — только обмен ценностью', icon: '⇄' },
    { k: 'Точность', v: 'Подбор по 40 параметрам, без накруток и ботов', icon: '◎' },
    { k: 'Прозрачность', v: 'Фикс-цена и понятный отчёт по охватам', icon: '◇' },
  ];

  return (
    <section id="cases" style={{ padding: '140px 48px 120px', position: 'relative', overflow: 'hidden' }}>
      {/* Background grid — masked to top */}
      <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 30% 0%, black 10%, transparent 60%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 30% 0%, black 10%, transparent 60%)',
        opacity: 0.35, pointerEvents: 'none',
      }}/>
      {/* Atmospheric green halo bottom-right */}
      <div aria-hidden style={{
        position: 'absolute', right: -240, bottom: -240, width: 720, height: 720,
        background: `radial-gradient(circle, ${D.greenGlow}, transparent 65%)`,
        pointerEvents: 'none',
      }}/>

      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <h2 style={{
          fontSize: 'clamp(56px, 7vw, 104px)', fontWeight: 800, letterSpacing: '-0.04em',
          lineHeight: 0.95, margin: 0, textWrap: 'balance', maxWidth: 1100,
        }}>
          Маркетинг,<br/>
          который работает <span style={{
            background: `linear-gradient(180deg, ${D.green}, ${D.greenSolid})`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
          }}>на ваш бренд.</span>
        </h2>

        <p style={{
          fontSize: 19, color: D.ink2, lineHeight: 1.6, margin: '48px 0 0',
          textWrap: 'pretty', maxWidth: 820,
          paddingLeft: 28, borderLeft: `2px solid ${D.green}`,
        }}>
          SWAPP соединяет бренды и инфлюенсеров через бартер: вы даёте продукт или услугу — получаете живой контент и охват в нужной аудитории. Без переплат агентствам, без слепых ставок на таргет.
        </p>

        {/* Principles — denser, more weighted */}
        <div style={{ marginTop: 96 }}>
          <div style={{
            fontSize: 11, color: D.mute, fontWeight: 700, letterSpacing: '0.18em',
            textTransform: 'uppercase', marginBottom: 28,
          }}>Три принципа платформы</div>

          <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
            {principles.map((p, i) => (
              <li key={i} style={{
                padding: '44px 0',
                borderTop: `1px solid ${D.line}`,
                borderBottom: i === principles.length - 1 ? `1px solid ${D.line}` : 'none',
                display: 'grid',
                gridTemplateColumns: '64px 64px minmax(280px, 1fr) minmax(0, 1.4fr)',
                gap: 32, alignItems: 'center',
                position: 'relative',
              }}>
                {/* Big number */}
                <div style={{
                  fontSize: 28, fontWeight: 800, color: D.mute2,
                  letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums',
                  lineHeight: 1,
                }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                {/* Glyph badge */}
                <div style={{
                  width: 56, height: 56, borderRadius: 16,
                  background: `linear-gradient(180deg, ${D.green}22, ${D.green}08)`,
                  border: `1px solid ${D.green}44`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: D.green, fontSize: 24, fontWeight: 700,
                  boxShadow: `0 0 24px ${D.greenGlow}`,
                }}>
                  {p.icon}
                </div>
                {/* Keyword */}
                <div style={{
                  fontSize: 'clamp(36px, 3.6vw, 52px)', fontWeight: 800, color: D.green,
                  letterSpacing: '-0.025em', lineHeight: 1,
                }}>
                  {p.k}
                </div>
                {/* Description */}
                <div style={{
                  fontSize: 18, color: D.ink2, lineHeight: 1.5,
                  textWrap: 'pretty',
                }}>
                  {p.v}
                </div>
              </li>
            ))}
          </ul>

          {/* Closing line — anchor the section */}
          <div style={{
            marginTop: 40, display: 'flex', alignItems: 'center',
            justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
          }}>
            <div style={{ fontSize: 14, color: D.mute, maxWidth: 560, lineHeight: 1.55 }}>
              Эти три принципа держат всю платформу — от первого оффера до отчёта об охватах.
            </div>
            <a href="#how" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontSize: 13, color: D.ink2, fontWeight: 600,
              padding: '14px 22px', border: `1px solid ${D.line}`, borderRadius: 999,
              cursor: 'pointer', letterSpacing: '0.04em', textTransform: 'uppercase',
            }}>
              Как это работает
              <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>
      </div>
    </section>
  );
}

Object.assign(window, { CasesManifesto });