// Onboarding — interactive 4-step overlay
// Steps: welcome → upload → style → annotate-export

function SGOnboarding({ onFinish, step, setStep }) {
  const STEPS = [
    {
      id: 'welcome',
      kicker: '00 / Добро пожаловать',
      title: 'Скриншоты, которыми хочется делиться.',
      body: 'ScreenGod превращает любой скриншот в готовый пост за пару секунд: фон, рамка, тень, аннотации — всё на одном холсте.',
      cta: 'Начать тур',
      visual: 'hero',
    },
    {
      id: 'upload',
      kicker: '01 / Загрузка',
      title: 'Перетащите. Вставьте. Сфоткайте окно.',
      body: 'Поддерживаются PNG, JPG, WebP до 20 МБ. Можно вставить из буфера обмена через ⌘V — мы автоматически распознаём окна, удаляем тень macOS и подравниваем края.',
      cta: 'Дальше',
      visual: 'upload',
    },
    {
      id: 'style',
      kicker: '02 / Стиль',
      title: 'Настройки слева. Изменения — мгновенно.',
      body: 'Выбирайте фон, рамку и тень из пресетов или соберите своё. Каждый параметр имеет «умный» дефолт — подходит для соцсетей, лендинга и презентаций.',
      cta: 'Дальше',
      visual: 'style',
    },
    {
      id: 'export',
      kicker: '03 / Экспорт',
      title: 'PNG, ссылка, или прямо в буфер.',
      body: '⌘E экспортирует в текущем размере. Композицию можно сохранить как пресет — следующий скриншот будет в том же стиле без единого клика.',
      cta: 'Готово, начать работу',
      visual: 'export',
    },
  ];

  const current = STEPS[step];

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'oklch(0.12 0.01 80 / 0.78)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24, animation: 'sgFade 0.4s ease',
    }}>
      <style>{`
        @keyframes sgFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes sgRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes sgPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }
      `}</style>

      <div style={{
        width: '100%', maxWidth: 1100, height: 620,
        background: 'var(--bg-1)', borderRadius: 18,
        border: '1px solid var(--line)',
        overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '420px 1fr',
        boxShadow: '0 60px 120px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04)',
        animation: 'sgRise 0.5s cubic-bezier(.2,.7,.2,1)',
      }}>
        {/* Left: copy */}
        <div style={{
          padding: '36px 40px', display: 'flex', flexDirection: 'column',
          background: 'var(--bg-1)', position: 'relative',
          borderRight: '1px solid var(--line-soft)'
        }}>
          {/* Logo */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 38 }}>
            <SGLogoMark size={28} />
            <div>
              <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: -0.2 }}>ScreenGod</div>
              <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: 1, textTransform: 'uppercase' }}>v2.0 — beta</div>
            </div>
          </div>

          <div style={{
            fontFamily: 'Geist Mono, monospace', fontSize: 11,
            letterSpacing: 1.5, textTransform: 'uppercase',
            color: 'var(--accent)', marginBottom: 14
          }}>
            {current.kicker}
          </div>

          <h1 style={{
            fontSize: 32, lineHeight: 1.1, fontWeight: 600, margin: 0,
            letterSpacing: -0.6, textWrap: 'balance', color: 'var(--fg-0)'
          }}>
            {current.title}
          </h1>

          <p style={{
            fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg-2)',
            marginTop: 18, textWrap: 'pretty', maxWidth: 360
          }}>
            {current.body}
          </p>

          <div style={{ flex: 1 }} />

          {/* Step dots */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 22 }}>
            {STEPS.map((_, i) => (
              <button key={i} onClick={() => setStep(i)} style={{
                height: 4, flex: i === step ? 3 : 1,
                background: i <= step ? 'var(--accent)' : 'var(--bg-3)',
                borderRadius: 999, transition: 'all 0.3s'
              }} />
            ))}
          </div>

          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            {step > 0 && (
              <button onClick={() => setStep(step - 1)} style={{
                padding: '10px 14px', fontSize: 13, color: 'var(--fg-2)',
                border: '1px solid var(--line)', borderRadius: 8,
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <IconArrowL size={13} />
                Назад
              </button>
            )}
            <button onClick={() => step === STEPS.length - 1 ? onFinish() : setStep(step + 1)} style={{
              padding: '12px 18px', fontSize: 13, fontWeight: 600,
              background: 'var(--accent)', color: 'var(--bg-0)',
              borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8,
              boxShadow: '0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -10px var(--accent)'
            }}>
              {current.cta}
              <IconArrowR size={13} strokeWidth={2} />
            </button>
            <div style={{ flex: 1 }} />
            <button onClick={onFinish} style={{
              padding: '8px 12px', fontSize: 12, color: 'var(--fg-3)',
              fontFamily: 'Geist Mono, monospace'
            }}>
              пропустить
            </button>
          </div>
        </div>

        {/* Right: visual */}
        <div style={{
          background: 'var(--bg-0)',
          backgroundImage: `radial-gradient(at 70% 20%, oklch(0.82 0.14 78 / 0.08) 0%, transparent 50%),
                            radial-gradient(at 20% 80%, oklch(0.65 0.16 60 / 0.06) 0%, transparent 50%)`,
          position: 'relative', overflow: 'hidden',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40,
        }}>
          {current.visual === 'hero' && <HeroVisual />}
          {current.visual === 'upload' && <UploadVisual />}
          {current.visual === 'style' && <StyleVisual />}
          {current.visual === 'export' && <ExportVisual />}
        </div>
      </div>
    </div>
  );
}

const SGLogoMark = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <rect x="2" y="2" width="28" height="28" rx="8" fill="oklch(0.82 0.14 78)" />
    <path d="M10 11 L10 21 L22 21 L22 17 L16 17 L16 15 L22 15 L22 11 Z" fill="oklch(0.16 0.012 80)" />
  </svg>
);

// --- Visual cells per step ---
const HeroVisual = () => (
  <div style={{ width: '100%', height: '100%', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
    {/* Stack of three thumbnails */}
    {[
      { rot: -8, tx: -120, ty: 30, bg: 'linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%)' },
      { rot: 4, tx: 0, ty: 0, bg: 'linear-gradient(135deg, #f6c177 0%, #d97706 100%)' },
      { rot: 12, tx: 130, ty: -20, bg: 'linear-gradient(135deg, #6ee7b7 0%, #047857 100%)' },
    ].map((card, i) => (
      <div key={i} style={{
        position: 'absolute', width: 280, height: 180,
        background: card.bg, borderRadius: 14,
        transform: `translate(${card.tx}px, ${card.ty}px) rotate(${card.rot}deg)`,
        padding: 18, display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06)',
        animation: `sgRise 0.6s ${i * 0.1}s both cubic-bezier(.2,.7,.2,1)`,
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 6,
          background: i === 1 ? '#1c1917' : '#fafaf9', overflow: 'hidden',
          boxShadow: '0 10px 24px -8px rgba(0,0,0,0.5)',
        }}>
          <div style={{
            height: 14, background: i === 1 ? '#0c0a09' : '#f5f5f4',
            display: 'flex', alignItems: 'center', gap: 3, padding: '0 6px',
          }}>
            {['#ff5f57', '#febc2e', '#28c840'].map(c => (
              <div key={c} style={{ width: 4, height: 4, borderRadius: '50%', background: c }} />
            ))}
          </div>
          <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div style={{ height: 4, width: '40%', background: i === 1 ? '#f59e0b' : '#d97706', borderRadius: 2 }} />
            <div style={{ height: 3, width: '70%', background: i === 1 ? '#44403c' : '#d6d3d1', borderRadius: 2 }} />
            <div style={{ height: 3, width: '60%', background: i === 1 ? '#44403c' : '#d6d3d1', borderRadius: 2 }} />
            <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
              <div style={{ flex: 1, height: 18, background: i === 1 ? '#292524' : '#e7e5e4', borderRadius: 3 }} />
              <div style={{ flex: 1, height: 18, background: i === 1 ? '#292524' : '#e7e5e4', borderRadius: 3 }} />
              <div style={{ flex: 1, height: 18, background: i === 1 ? '#292524' : '#e7e5e4', borderRadius: 3 }} />
            </div>
          </div>
        </div>
      </div>
    ))}
    {/* Bottom kicker */}
    <div style={{
      position: 'absolute', bottom: 24, left: 0, right: 0,
      textAlign: 'center', fontFamily: 'Geist Mono, monospace',
      fontSize: 10, letterSpacing: 1.5, color: 'var(--fg-3)', textTransform: 'uppercase',
    }}>
      перетащите · вставьте · опубликуйте
    </div>
  </div>
);

const UploadVisual = () => (
  <div style={{ width: '100%', maxWidth: 380, position: 'relative' }}>
    <div style={{
      border: '1.5px dashed var(--accent)',
      borderRadius: 14, padding: 36,
      background: 'oklch(0.82 0.14 78 / 0.06)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      animation: 'sgPulse 2.4s infinite',
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 14,
        background: 'var(--accent-soft)', color: 'var(--accent)',
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <IconUpload size={28} strokeWidth={1.5} />
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontWeight: 600, fontSize: 15 }}>Перетащите файл сюда</div>
        <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 4 }}>или нажмите для выбора</div>
      </div>
      <div style={{
        marginTop: 4, padding: '6px 12px', borderRadius: 999,
        background: 'var(--bg-2)', border: '1px solid var(--line)',
        fontFamily: 'Geist Mono, monospace', fontSize: 11, color: 'var(--fg-1)'
      }}>
        ⌘V для вставки из буфера
      </div>
    </div>
    <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
      {['PNG', 'JPG', 'WebP'].map((f, i) => (
        <div key={f} style={{
          padding: '10px 12px', borderRadius: 8, background: 'var(--bg-2)',
          border: '1px solid var(--line)',
          textAlign: 'center', fontFamily: 'Geist Mono, monospace', fontSize: 11,
          color: 'var(--fg-1)'
        }}>{f}</div>
      ))}
    </div>
    <div style={{
      marginTop: 14, fontSize: 11, color: 'var(--fg-3)',
      fontFamily: 'Geist Mono, monospace', textAlign: 'center'
    }}>
      макс. 20 мб · до 6000 × 6000 px
    </div>
  </div>
);

const StyleVisual = () => (
  <div style={{ width: '100%', height: '100%', position: 'relative' }}>
    {/* Mini editor mock */}
    <div style={{
      width: '100%', height: '100%',
      background: 'var(--bg-1)', borderRadius: 12,
      border: '1px solid var(--line)',
      overflow: 'hidden', display: 'flex',
    }}>
      <div style={{ width: 140, borderRight: '1px solid var(--line-soft)', padding: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 9, letterSpacing: 1.5, color: 'var(--fg-3)', textTransform: 'uppercase' }}>Фон</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
          {PRESET_GRADIENTS.slice(0, 9).map((g, i) => (
            <div key={g.id} style={{
              aspectRatio: '1', borderRadius: 4, background: g.css,
              border: i === 1 ? '1.5px solid var(--accent)' : '1px solid var(--line)',
              outline: i === 1 ? '3px solid var(--accent-soft)' : 'none',
            }} />
          ))}
        </div>
        <div style={{ fontFamily: 'Geist Mono, monospace', fontSize: 9, letterSpacing: 1.5, color: 'var(--fg-3)', textTransform: 'uppercase' }}>Тень</div>
        <div style={{ height: 4, background: 'var(--bg-3)', borderRadius: 999, position: 'relative' }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '60%', background: 'var(--accent)', borderRadius: 999 }} />
          <div style={{ position: 'absolute', left: '60%', top: -3, width: 10, height: 10, borderRadius: '50%', background: 'var(--accent)', transform: 'translateX(-50%)' }} />
        </div>
      </div>
      <div style={{
        flex: 1, padding: 24,
        background: 'linear-gradient(135deg, #f6c177 0%, #d97706 100%)',
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <div style={{
          width: '100%', height: '70%', background: '#1c1917', borderRadius: 8,
          boxShadow: '0 30px 60px -15px rgba(0,0,0,0.5)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
          transform: 'perspective(1000px) rotateY(-4deg) rotateX(2deg)'
        }}>
          <div style={{ height: 18, background: '#0c0a09', display: 'flex', alignItems: 'center', gap: 4, padding: '0 8px' }}>
            {['#ff5f57', '#febc2e', '#28c840'].map(c => (
              <div key={c} style={{ width: 6, height: 6, borderRadius: '50%', background: c }} />
            ))}
          </div>
          <div style={{ flex: 1, padding: 10 }}>
            <div style={{ height: 4, width: '40%', background: '#f59e0b', borderRadius: 2, marginBottom: 6 }} />
            <div style={{ height: 3, width: '70%', background: '#44403c', borderRadius: 2, marginBottom: 4 }} />
            <div style={{ height: 3, width: '60%', background: '#44403c', borderRadius: 2 }} />
          </div>
        </div>
      </div>
    </div>
    {/* Floating callout */}
    <div style={{
      position: 'absolute', bottom: -10, right: -10,
      background: 'var(--accent)', color: 'var(--bg-0)',
      padding: '6px 12px', borderRadius: 999,
      fontSize: 11, fontWeight: 600,
      boxShadow: '0 8px 20px -4px oklch(0.65 0.16 60 / 0.5)',
    }}>
      обновляется в реальном времени
    </div>
  </div>
);

const ExportVisual = () => (
  <div style={{ width: '100%', maxWidth: 380, display: 'flex', flexDirection: 'column', gap: 12 }}>
    {[
      { icon: <IconDownload size={16} />, t: 'PNG · текущий размер', s: '⌘E', primary: true },
      { icon: <IconCopy size={16} />, t: 'Скопировать в буфер', s: '⌘⇧C' },
      { icon: <IconShare size={16} />, t: 'Получить ссылку', s: '⌘L' },
      { icon: <IconSparkle size={14} />, t: 'Сохранить как пресет', s: '⌘S' },
    ].map((row, i) => (
      <div key={i} style={{
        padding: '14px 16px', borderRadius: 10,
        background: row.primary ? 'var(--accent-soft)' : 'var(--bg-2)',
        border: row.primary ? '1px solid var(--accent)' : '1px solid var(--line)',
        display: 'flex', alignItems: 'center', gap: 12,
        animation: `sgRise 0.5s ${i * 0.08}s both cubic-bezier(.2,.7,.2,1)`,
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8,
          background: row.primary ? 'var(--accent)' : 'var(--bg-3)',
          color: row.primary ? 'var(--bg-0)' : 'var(--fg-1)',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          {row.icon}
        </div>
        <div style={{ flex: 1, fontWeight: 500, fontSize: 13 }}>{row.t}</div>
        <div style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11,
          color: 'var(--fg-2)', padding: '4px 8px',
          background: 'var(--bg-1)', borderRadius: 5,
          border: '1px solid var(--line-soft)'
        }}>{row.s}</div>
      </div>
    ))}
  </div>
);

Object.assign(window, { SGOnboarding, SGLogoMark });