// Первый шаг настройки устройства: выбор типа.
// «ТВ на стене» (read-only, крупно, без интерактива) vs «Планшет в руках» (с тапами).
// Сохраняется в localStorage `pishcheblok:device`.

function DeviceModeSelect({ onPick }) {
  const cards = [
    {
      id: 'tv',
      icon: '📺',
      title: 'Телевизор',
      desc: 'На стене в кухне. Только показывает данные — без тапов, крупный шрифт, читается с 3-х метров.',
      color: '#1D6FBF',
      soft: '#D6E7F8',
    },
    {
      id: 'tablet',
      icon: '📱',
      title: 'Планшет',
      desc: 'В руках у сотрудника. Можно отмечать готовое, листать вкладки, видеть детали.',
      color: '#0E7C3A',
      soft: '#DCF4E5',
    },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      background: 'linear-gradient(180deg, #f8f6f2 0%, #ece8e0 100%)',
    }}>
      <div style={{ textAlign: 'center', padding: '24px 32px 10px' }}>
        <div style={{
          display: 'inline-block', padding: '4px 12px',
          background: '#111', color: '#fff', borderRadius: 999,
          fontSize: 12, fontWeight: 700, letterSpacing: 1, marginBottom: 8,
        }}>ПИЩЕБЛОК · НАСТРОЙКА УСТРОЙСТВА</div>
        <h1 style={{ margin: 0, fontSize: 34, fontWeight: 800, color: '#111', letterSpacing: -1 }}>
          Тип устройства
        </h1>
        <p style={{ fontSize: 15, color: '#555', marginTop: 6, maxWidth: 720, margin: '6px auto 0' }}>
          Крупно на ТВ или интерактивно на планшете.
        </p>
      </div>

      <div style={{
        flex: 1, padding: '12px 32px 24px',
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 20,
        maxWidth: 1080, margin: '0 auto', width: '100%',
      }}>
        {cards.map(c => (
          <button
            key={c.id}
            onClick={() => onPick(c.id)}
            style={{
              display: 'flex', flexDirection: 'column',
              padding: 22,
              background: '#fff',
              border: `3px solid ${c.color}`,
              borderRadius: 18,
              cursor: 'pointer', textAlign: 'left',
              fontFamily: 'inherit',
              transition: 'transform 120ms, box-shadow 120ms',
              boxShadow: '0 8px 24px rgba(0,0,0,0.06)',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,0.12)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.06)'; }}
          >
            <div style={{
              width: 64, height: 64, borderRadius: 16,
              background: c.soft, color: c.color,
              display: 'grid', placeItems: 'center',
              fontSize: 34, marginBottom: 12,
            }}>{c.icon}</div>
            <h2 style={{ margin: 0, fontSize: 26, fontWeight: 800, color: '#111' }}>{c.title}</h2>
            <p style={{ fontSize: 14, color: '#555', marginTop: 6, flex: 1, lineHeight: 1.4 }}>{c.desc}</p>
            <div style={{
              marginTop: 12, padding: '10px 16px',
              background: c.color, color: '#fff',
              borderRadius: 10, fontSize: 14, fontWeight: 700,
              textAlign: 'center',
            }}>Выбрать →</div>
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { DeviceModeSelect });