// Design System screen + Rationale + Shell
const { useState: uS_ds, useEffect: uE_ds } = React;

// ============== DESIGN SYSTEM ==============
function ScreenDesignSystem({ goto, mobile }) {
  return (
    <div style={{background:'var(--bg)', minHeight:'100%', padding: mobile?'16px':'40px'}}>
      <div style={{maxWidth: 1080, margin:'0 auto'}}>
        <div style={{marginBottom: 32}}>
          <div className="badge" style={{marginBottom:12}}>Design system v0.1</div>
          <h1 className="display" style={{fontSize: mobile?32:48, fontWeight:800, letterSpacing:'-0.025em', margin:'0 0 12px'}}>rev.cut DS</h1>
          <p style={{margin:0, fontSize:16, color:'var(--text-soft)', maxWidth: 640, lineHeight:1.5}}>
            Минимальная, плотная, монохромная база с одним брендовым акцентом. Один шрифт, два веса, явная типо-сетка. Минимум хрома, максимум данных.
          </p>
        </div>

        {/* Color */}
        <Section title="Цвет" subtitle="Нейтрали-первые. Бренд (vermillion) — для CTA, ссылок, выделений. Семантика — только для статусов.">
          <div style={{display:'grid', gridTemplateColumns: mobile?'repeat(5,1fr)':'repeat(11,1fr)', gap:6, marginBottom:24}}>
            {[25,50,100,150,200,300,400,500,700,900,950].map(s => (
              <div key={s}>
                <div style={{aspectRatio:'1', borderRadius:'var(--r-3)', background: `var(--n-${s})`, border:'1px solid var(--border)'}}/>
                <div style={{fontSize:10, marginTop:4, fontFamily:'var(--font-mono)', color:'var(--text-muted)'}}>n-{s}</div>
              </div>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns: mobile?'repeat(3,1fr)':'repeat(6,1fr)', gap:6, marginBottom:16}}>
            {[50,100,200,400,500,600].map(s => (
              <div key={s}>
                <div style={{aspectRatio:'1', borderRadius:'var(--r-3)', background: `var(--brand-${s})`, border:'1px solid var(--border)'}}/>
                <div style={{fontSize:10, marginTop:4, fontFamily:'var(--font-mono)', color:'var(--text-muted)'}}>brand-{s}</div>
              </div>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8}}>
            {[['Success','--success'],['Warning','--warning'],['Danger','--danger'],['Info','--info']].map(([n,v]) => (
              <div key={n} style={{display:'flex', gap:10, padding:10, background:'var(--surface)', borderRadius:'var(--r-3)', border:'1px solid var(--border)', alignItems:'center'}}>
                <div style={{width:24, height:24, borderRadius:'var(--r-2)', background:`var(${v})`}}/>
                <div>
                  <div style={{fontSize:12, fontWeight:600}}>{n}</div>
                  <div style={{fontSize:10, color:'var(--text-muted)', fontFamily:'var(--font-mono)'}}>{v}</div>
                </div>
              </div>
            ))}
          </div>
        </Section>

        {/* Type */}
        <Section title="Типографика" subtitle="Inter Tight для заголовков и чисел; Inter для UI; JetBrains Mono для кода и ID.">
          <div className="card" style={{padding:24}}>
            <div style={{borderBottom:'1px solid var(--border)', paddingBottom:16, marginBottom:16}}>
              <div className="display" style={{fontSize:64, fontWeight:800, letterSpacing:'-0.035em', lineHeight:1}}>1 284 563 ₽</div>
              <div style={{fontSize:11, color:'var(--text-muted)', fontFamily:'var(--font-mono)', marginTop:8}}>Display 64 / 800 / -0.035em — для KPI и hero чисел</div>
            </div>
            <div style={{borderBottom:'1px solid var(--border)', paddingBottom:16, marginBottom:16}}>
              <div className="display" style={{fontSize:32, fontWeight:700, letterSpacing:'-0.02em'}}>Платежи в играх — от 2,5%</div>
              <div style={{fontSize:11, color:'var(--text-muted)', fontFamily:'var(--font-mono)', marginTop:8}}>Display 32 / 700 / -0.02em — H1 секций</div>
            </div>
            <div style={{borderBottom:'1px solid var(--border)', paddingBottom:16, marginBottom:16}}>
              <div style={{fontSize:18, fontWeight:600}}>Карточные заголовки и подзаголовки</div>
              <div style={{fontSize:11, color:'var(--text-muted)', fontFamily:'var(--font-mono)', marginTop:8}}>Body 18 / 600 — H3 / titles</div>
            </div>
            <div style={{borderBottom:'1px solid var(--border)', paddingBottom:16, marginBottom:16}}>
              <div style={{fontSize:14, lineHeight:1.6}}>Body — рабочий размер интерфейса. Используется в таблицах, формах, описаниях и подписях. Числа всегда табличные (tnum).</div>
              <div style={{fontSize:11, color:'var(--text-muted)', fontFamily:'var(--font-mono)', marginTop:8}}>Body 14 / 400 / lh-1.6</div>
            </div>
            <div>
              <div className="mono" style={{fontSize:13, color:'var(--text-soft)'}}>tx_1m4kr8x9q · AC-7782341 · pk_live_5c…</div>
              <div style={{fontSize:11, color:'var(--text-muted)', fontFamily:'var(--font-mono)', marginTop:8}}>Mono — ID, ключи, код</div>
            </div>
          </div>
        </Section>

        {/* Spacing & Radii */}
        <Section title="Сетка и радиусы" subtitle="4-pt grid. Радиусы скромные: 6/8/10 — без излишнего скругления.">
          <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap:16}}>
            <div className="card" style={{padding:20}}>
              <div style={{fontSize:12, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:12}}>Spacing 4-pt</div>
              <div style={{display:'flex', flexDirection:'column', gap:8}}>
                {[[1,4],[2,8],[3,12],[4,16],[5,20],[6,24],[8,32]].map(([s,px])=>(
                  <div key={s} style={{display:'flex', alignItems:'center', gap:12}}>
                    <div style={{width: px, height:8, background:'var(--n-900)', borderRadius:2, flexShrink:0}}/>
                    <span style={{fontSize:12, fontFamily:'var(--font-mono)', color:'var(--text-muted)'}}>--s-{s} = {px}px</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="card" style={{padding:20}}>
              <div style={{fontSize:12, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:12}}>Радиусы</div>
              <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
                {[['r-2','4px'],['r-3','6px'],['r-4','8px'],['r-5','10px'],['r-6','14px'],['r-full','999px']].map(([n,v])=>(
                  <div key={n} style={{textAlign:'center'}}>
                    <div style={{width:48, height:48, background:'var(--n-100)', border:'1px solid var(--border-strong)', borderRadius:`var(--${n})`, marginBottom:6}}/>
                    <div style={{fontSize:10, fontFamily:'var(--font-mono)'}}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Section>

        {/* Components */}
        <Section title="Компоненты" subtitle="Кнопки, инпуты, бейджи, карточки и таблицы — общая основа для покупателей и разработчиков.">
          <div className="card" style={{padding:24, marginBottom:16}}>
            <div style={{fontSize:11, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:12}}>Кнопки</div>
            <div style={{display:'flex', gap:8, flexWrap:'wrap', alignItems:'center'}}>
              <button className="btn btn-primary">Primary</button>
              <button className="btn btn-secondary">Secondary</button>
              <button className="btn btn-ghost">Ghost</button>
              <button className="btn btn-accent">Accent</button>
              <button className="btn btn-destructive">Destructive</button>
              <button className="btn btn-primary btn-lg">Large</button>
              <button className="btn btn-secondary btn-sm">Small</button>
              <button className="btn btn-primary" disabled>Disabled</button>
            </div>
          </div>
          <div className="card" style={{padding:24, marginBottom:16}}>
            <div style={{fontSize:11, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:12}}>Бейджи и статусы</div>
            <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
              <span className="badge">Default</span>
              <span className="badge badge-brand">Brand</span>
              <span className="badge badge-success">Success</span>
              <span className="badge badge-warning">Warning</span>
              <span className="badge badge-danger">Danger</span>
            </div>
          </div>
          <div className="card" style={{padding:24}}>
            <div style={{fontSize:11, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:12}}>Поля ввода</div>
            <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap:12}}>
              <input className="input" placeholder="Email"/>
              <input className="input" placeholder="ID игрока" defaultValue="AC-1234567" style={{fontFamily:'var(--font-mono)'}}/>
            </div>
          </div>
        </Section>
      </div>
    </div>
  );
}

function Section({ title, subtitle, children }) {
  return (
    <section style={{marginBottom:48}}>
      <h2 className="display" style={{fontSize:24, fontWeight:700, margin:'0 0 4px', letterSpacing:'-0.02em'}}>{title}</h2>
      {subtitle && <p style={{margin:'0 0 20px', fontSize:14, color:'var(--text-muted)', maxWidth: 560, lineHeight:1.5}}>{subtitle}</p>}
      {children}
    </section>
  );
}

// ============== DESIGN RATIONALE ==============
function ScreenRationale({ goto, mobile }) {
  return (
    <div style={{background:'var(--bg)', minHeight:'100%', padding: mobile?'16px':'40px'}}>
      <div style={{maxWidth: 760, margin:'0 auto'}}>
        <div className="badge" style={{marginBottom:12}}>Design rationale</div>
        <h1 className="display" style={{fontSize: mobile?32:48, fontWeight:800, letterSpacing:'-0.025em', margin:'0 0 16px'}}>Почему так<span style={{color:'var(--brand-500)'}}>.</span></h1>
        <p style={{fontSize:18, color:'var(--text-soft)', lineHeight:1.6, margin:'0 0 32px'}}>
          rev.cut — это два продукта в одном бренде: магазин для геймеров и аналитический портал для разработчиков. Каждое решение здесь — компромисс между ними, и он принимается осознанно.
        </p>

        {[
          {
            t: '01. Один бренд — две интонации',
            p: 'Сторфронт нагретый — большие постеры, бренд-цвет в CTA, имеет вкус. Дев-портал холодный — монохром, табличный шрифт, плотность. Связывает их одна типо-сетка (Inter Tight + Inter), один радиус, один отступ. На стыке — KPI-числа в тяжёлом display-весе. Это не Stripe, не Linear, не RevenueCat — это попытка сделать B2B-надёжно и B2C-вкусно одной системой.',
          },
          {
            t: '02. Бренд — точка',
            p: 'Точка после слова в логотипе и заголовках: «rev.cut.», «от 2,5%.» — это якорь, который превращает обычную фразу в утверждение. Это бренд-маркер, как у Stripe «.» в адресной строке или у Notion «.so». В тёплых местах он становится оранжевым, в холодных — нейтральным.',
          },
          {
            t: '03. Юридическая прозрачность как фича',
            p: 'Российский рынок отличается от global: 54-ФЗ (фискальные чеки), 152-ФЗ (ПДн), ст. 26.1 ЗоЗПП (отмена в один клик). Мы не прячем это в FAQ — мы делаем это видимым в чекауте, в успехе, в личном кабинете. Это не страшилка для юристов, это конкурентное преимущество против иностранных платформ, у которых этого нет.',
          },
          {
            t: '04. Webhook-доставка как UX',
            p: 'В играх «доставка товара» — это не курьер, это webhook. Мы делаем этот невидимый процесс зримым: на экране успеха показываем 3 шага (платёж → webhook → инвентарь), они анимируются по очереди. Покупатель видит честно, что происходит. Если webhook fail — видит и это, без обмана.',
          },
          {
            t: '05. Игровые жанры через цветные обложки',
            p: 'Без реальных артов мы используем плейсхолдеры — но не серые квадраты, а градиенты с символом жанра (меч, шахматная фигура, цель). Это работает в фигме, не пытается прикинуться продакшен-артом и сразу читается.',
          },
          {
            t: '06. Отказ от иконографии в дев-портале',
            p: 'В дашборде иконки только функциональные (фильтр, экспорт, поиск). Никаких декоративных «графиков с молнией». Аналитика — это таблицы и сетки, а не чувства. RevenueCat этим грешит, мы — нет.',
          },
          {
            t: '07. Mobile-first для сторфронта, desktop-first для дев-портала',
            p: 'Геймер покупает кристаллы с iPhone в перерыве матча. Менеджер по росту смотрит дашборд с 27" монитора. Поэтому мобильная вёрстка магазина — приоритет №1, а у дашборда — fallback. Это видно в денсити и в навигации: внизу/сверху vs sidebar.',
          },
        ].map((s,i) => (
          <article key={i} className="card" style={{padding:24, marginBottom:12}}>
            <h3 className="display" style={{fontSize:20, fontWeight:700, margin:'0 0 8px', letterSpacing:'-0.015em'}}>{s.t}</h3>
            <p style={{margin:0, fontSize:14, lineHeight:1.7, color:'var(--text-soft)'}}>{s.p}</p>
          </article>
        ))}

        <div className="card" style={{padding:24, marginTop:32, background:'var(--n-25)', borderStyle:'dashed'}}>
          <div style={{fontSize:11, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:8}}>Что бы я сделал в v2</div>
          <ul style={{margin:0, paddingLeft:16, fontSize:14, lineHeight:1.7, color:'var(--text-soft)'}}>
            <li>Реальные арты игр (через парнёрство со студиями)</li>
            <li>Customer Portal под white-label — отдельный поддомен для каждой игры</li>
            <li>A/B-тесты пэйволов прямо из дев-портала</li>
            <li>Cohort retention chart на вкладке «Покупатели»</li>
            <li>Нативные SDK-сэмплы под Unity/Unreal/Godot</li>
            <li>Тёмная тема для дев-портала (не для сторфронта)</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

window.ScreenDesignSystem = ScreenDesignSystem;
window.ScreenRationale = ScreenRationale;
