// HeroPills — 6 вариантов дизайна плашек под подзаголовком hero
// Управляются через tweaks.state.pillsVariant: 'glass' | 'colored' | 'stats' | 'terminal' | 'badges' | 'banner' | 'cards'

const PILLS_DATA = [
  { id: 'no-code', icon: '⌘', text: ['без знаний', 'кода'], num: '0', numLabel: 'строк кода', accent: '#4ec92d' },
  { id: 'time', icon: '◷', text: ['за 2 месяца'], num: '2', numLabel: 'месяца', accent: '#7C5CFF' },
  { id: 'practice', icon: '◉', text: ['много', 'практики'], num: '∞', numLabel: 'практики', accent: '#FFB840' },
];

function HeroPills({ variant = 'glass' }){
  // ---------- 1. GLASS — текущий, "стеклянный" ----------
  if (variant === 'glass') {
    return (
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 52 }}>
        {PILLS_DATA.map((p, i) => (
          <span key={p.id} className="mono" style={{
            fontSize: 12, color: i === 0 ? '#4ec92d' : 'var(--fg)',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.10)',
            backdropFilter: 'blur(8px)',
            padding: '8px 14px', borderRadius: 999,
            letterSpacing: '.02em',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            textAlign: 'center', lineHeight: 1.3
          }}>
            <span>{p.text.map((s, j) => <React.Fragment key={j}>{j > 0 && <br />}{s}</React.Fragment>)}</span>
          </span>
        ))}
      </div>
    );
  }

  // ---------- 2. COLORED — цветные пилюли с иконкой и tinted background ----------
  if (variant === 'colored') {
    return (
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 52 }}>
        {PILLS_DATA.map((p) => (
          <span key={p.id} style={{
            fontFamily: 'Manrope, sans-serif',
            fontSize: 15, fontWeight: 600,
            color: p.accent,
            background: `${p.accent}1a`,
            border: `1.5px solid ${p.accent}55`,
            padding: '12px 18px', borderRadius: 12,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            lineHeight: 1.25, textAlign: 'left'
          }}>
            <span style={{
              fontSize: 18, fontWeight: 700,
              width: 24, height: 24, borderRadius: 6,
              background: `${p.accent}33`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0
            }}>{p.icon}</span>
            <span>{p.text.map((s, j) => <React.Fragment key={j}>{j > 0 && <br />}{s}</React.Fragment>)}</span>
          </span>
        ))}
      </div>
    );
  }

  // ---------- 3. STATS — крупная цифра сверху, подпись снизу ----------
  if (variant === 'stats') {
    return (
      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 52 }}>
        {PILLS_DATA.map((p) => (
          <div key={p.id} style={{
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.08)',
            padding: '18px 22px', borderRadius: 16,
            minWidth: 140,
            display: 'flex', flexDirection: 'column', gap: 4
          }}>
            <span className="display" style={{
              fontSize: 32, fontWeight: 800, lineHeight: 1,
              color: p.accent, letterSpacing: '-0.02em'
            }}>{p.num}</span>
            <span className="mono" style={{
              fontSize: 12, color: 'var(--fg-dim)', letterSpacing: '.04em'
            }}>{p.numLabel}</span>
            <span style={{
              fontFamily: 'Manrope, sans-serif',
              fontSize: 14, fontWeight: 500, color: 'var(--fg)',
              marginTop: 6, lineHeight: 1.3
            }}>{p.text.join(' ')}</span>
          </div>
        ))}
      </div>
    );
  }

  // ---------- 4. TERMINAL — чекбоксы [✓] mono-стиль ----------
  if (variant === 'terminal') {
    return (
      <div style={{
        display: 'flex', flexDirection: 'column', gap: 8,
        marginBottom: 52,
        background: 'rgba(0,0,0,0.4)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 12,
        padding: '16px 20px',
        maxWidth: 480,
        fontFamily: 'JetBrains Mono, monospace',
      }}>
        {PILLS_DATA.map((p) => (
          <div key={p.id} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 15, lineHeight: 1.4
          }}>
            <span style={{
              color: '#4ec92d', fontWeight: 700,
              fontSize: 16, lineHeight: 1.3
            }}>[✓]</span>
            <span style={{ color: 'var(--fg)' }}>{p.text.join(' ')}</span>
          </div>
        ))}
      </div>
    );
  }

  // ---------- 5. BADGES — крупные фиолетовые бейджи ----------
  if (variant === 'badges') {
    return (
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 52 }}>
        {PILLS_DATA.map((p) => (
          <span key={p.id} style={{
            fontFamily: 'Manrope, sans-serif',
            fontSize: 15, fontWeight: 600,
            color: '#fff',
            background: 'rgba(124, 92, 255, 0.18)',
            border: '1.5px solid rgba(124, 92, 255, 0.6)',
            padding: '12px 20px', borderRadius: 999,
            display: 'inline-flex', alignItems: 'center',
            lineHeight: 1.25, textAlign: 'center',
            boxShadow: '0 0 24px rgba(124, 92, 255, 0.15) inset'
          }}>
            <span>{p.text.map((s, j) => <React.Fragment key={j}>{j > 0 && <br />}{s}</React.Fragment>)}</span>
          </span>
        ))}
      </div>
    );
  }

  // ---------- 6. BANNER — одна строка с разделителями ----------
  if (variant === 'banner') {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', flexWrap: 'wrap',
        gap: 16,
        marginBottom: 52,
        padding: '16px 22px',
        background: 'linear-gradient(90deg, rgba(124,92,255,0.08) 0%, rgba(124,92,255,0.02) 100%)',
        border: '1px solid rgba(124, 92, 255, 0.25)',
        borderRadius: 14,
      }}>
        {PILLS_DATA.map((p, i) => (
          <React.Fragment key={p.id}>
            <span style={{
              fontFamily: 'Manrope, sans-serif',
              fontSize: 16, fontWeight: 600,
              color: i === 0 ? '#4ec92d' : 'var(--fg)',
              lineHeight: 1.3
            }}>
              {p.text.join(' ')}
            </span>
            {i < PILLS_DATA.length - 1 && (
              <span style={{
                color: 'rgba(124, 92, 255, 0.5)',
                fontSize: 18, lineHeight: 1
              }}>·</span>
            )}
          </React.Fragment>
        ))}
      </div>
    );
  }

  // ---------- 7. CARDS — 3 равные карточки с акцентом сверху ----------
  if (variant === 'cards') {
    return (
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 12,
        marginBottom: 52,
        maxWidth: 540
      }}>
        {PILLS_DATA.map((p) => (
          <div key={p.id} style={{
            position: 'relative',
            padding: '18px 16px 16px',
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 14,
            overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            textAlign: 'center'
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 3,
              background: p.accent
            }} />
            <div style={{
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 11, color: 'var(--fg-mute)',
              letterSpacing: '.08em', marginBottom: 8
            }}>{String(PILLS_DATA.indexOf(p) + 1).padStart(2, '0')}</div>
            <div style={{
              fontFamily: 'Manrope, sans-serif',
              fontSize: 22, fontWeight: 600,
              color: 'var(--fg)', lineHeight: 1.25
            }}>{p.text.map((s, j) => <React.Fragment key={j}>{j > 0 && <br/>}{s}</React.Fragment>)}</div>
          </div>
        ))}
      </div>
    );
  }

  return null;
}

window.HeroPills = HeroPills;