/* eslint-disable */
// Launcher.jsx — entry screen of the prototype. Pick a flow.

const Launcher = () => {
  const t = useT();
  const modules = [
    {
      num: '01',
      name: t('Registration & business verification', 'Регистрация и верификация бизнеса'),
      sub: t('Sign up, verify email, enable two-factor, complete KYB, and bind a settlement bank account.', 'Регистрация, подтверждение e-mail, 2FA, KYB и привязка банковского счёта.'),
      duration: t('8 screens', '8 экранов'),
      flow: 'onboarding',
      screen: 'signup',
      icon: 'user',
      iconBg: 'rgba(201,152,64,0.10)',
    },
    {
      num: '02',
      name: t('Mint KGST', 'Эмиссия KGST'),
      sub: t('Issue KGST by wiring Kyrgyz som to the reserve. Generates a wire reference, then settles on-chain.', 'Эмиссия KGST через перевод сомов на резервный счёт. Создаёт референс SWIFT, затем сеттлит в блокчейне.'),
      duration: t('5 screens', '5 экранов'),
      flow: 'mint',
      screen: 'initiate',
      icon: 'arrowUp',
      iconBg: 'rgba(201,152,64,0.10)',
    },
    {
      num: '03',
      name: t('Burn KGST', 'Погашение KGST'),
      sub: t('Redeem KGST for Kyrgyz som. Sends from a bound wallet; settles via RTGS to your bank.', 'Обмен KGST на сомы. Отправка с привязанного кошелька; расчёт через RTGS на ваш банк.'),
      duration: t('5 screens', '5 экранов'),
      flow: 'burn',
      screen: 'initiate',
      icon: 'arrowDown',
      iconBg: 'rgba(82,0,4,0.30)',
    },
    {
      num: '04',
      name: t('Console & account settings', 'Консоль и настройки'),
      sub: t('Treasury overview, transaction history, bound bank accounts, wallets, API keys, and security.', 'Казначейский обзор, история транзакций, банковские счета, кошельки, API-ключи, безопасность.'),
      duration: t('6 tabs', '6 вкладок'),
      flow: 'dashboard',
      screen: 'home',
      icon: 'dashboard',
      iconBg: 'rgba(201,152,64,0.10)',
    },
  ];

  return (
    <div style={{
      width: '100%', height: '100%', overflow: 'auto',
      background: 'radial-gradient(ellipse 90% 60% at 50% -10%, rgba(82,0,4,0.30), transparent 60%), var(--bg-base)',
      color: 'var(--fg-primary)',
      position: 'relative',
    }}>
      {/* Header */}
      <div style={{
        maxWidth: 1080, margin: '0 auto',
        padding: '36px 40px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="design_system/assets/kgst-mark-square.png" alt="KGST"
            style={{ width: 36, height: 36, borderRadius: 6 }} />
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
            <span style={{ fontWeight: 700, letterSpacing: '0.06em', fontSize: 13 }}>KGST</span>
            <span style={{ fontSize: 10.5, color: 'var(--fg-tertiary)' }}>{t('Institutional Console', 'Институциональная консоль')}</span>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LangToggle size="md" />
          <Pill tone="wine" dot>{t('Clickable prototype · v0.1', 'Кликабельный прототип · v0.1')}</Pill>
        </div>
      </div>

      {/* Hero */}
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '40px 40px 8px' }}>
        <span className="kgst-caption" style={{ color: 'var(--bone-3)' }}>{t('National Stablecoin · Kyrgyz Republic', 'Национальный стейблкоин · Кыргызская Республика')}</span>
        <h1 className="kgst-h1" style={{
          margin: '14px 0 16px',
          fontSize: 46, lineHeight: 1.05, letterSpacing: '-0.02em', maxWidth: 820,
        }}>
          {t('Pick a flow to walk through', 'Выберите сценарий для прохождения')}<br />
          <span className="kgst-foil">{t('the operator console.', 'операторской консоли.')}</span>
        </h1>
        <p style={{ margin: 0, fontSize: 15, color: 'var(--fg-secondary)', maxWidth: 620, lineHeight: 1.6 }}>
          {t('Each module runs end-to-end with typable inputs, live state, and animated transitions. Return here anytime via the pill in the bottom-left corner.', 'Каждый модуль проходится полностью: с вводом, состоянием и анимацией. Вернуться можно в любой момент через пилл в нижнем левом углу.')}
        </p>
      </div>

      {/* Module cards */}
      <div style={{
        maxWidth: 1080, margin: '0 auto',
        padding: '48px 40px 24px',
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16,
      }}>
        {modules.map(m => {
          const Ico = Icons[m.icon];
          return (
            <button
              key={m.num}
              onClick={() => navigateTo(m.flow, m.screen)}
              className="kgst-launcher-card"
              style={{
                textAlign: 'left', background: 'var(--ink-2)',
                border: '1px solid var(--border-default)',
                borderRadius: 16, padding: 26,
                cursor: 'pointer',
                fontFamily: 'inherit', color: 'inherit',
                display: 'flex', flexDirection: 'column', gap: 18,
                minHeight: 220,
                position: 'relative', overflow: 'hidden',
                transition: 'border-color 160ms ease, transform 200ms ease',
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 8,
                    background: m.iconBg,
                    border: '1px solid var(--border-gold)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--gold-300)',
                  }}>
                    <Ico size={17} />
                  </div>
                  <span className="kgst-mono" style={{ fontSize: 11, color: 'var(--gold-300)', letterSpacing: '0.10em' }}>
                    {t('MODULE', 'МОДУЛЬ')} {m.num}
                  </span>
                </div>
                <span style={{ fontSize: 10.5, color: 'var(--fg-tertiary)' }}>{m.duration}</span>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.01em', lineHeight: 1.25 }}>{m.name}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-secondary)', lineHeight: 1.55 }}>{m.sub}</div>
              </div>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                paddingTop: 14, borderTop: '1px solid var(--border-subtle)',
              }}>
                <span style={{ fontSize: 12, color: 'var(--gold-300)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  {t('Start flow', 'Начать')} <Icons.arrowRight size={12} />
                </span>
                <span style={{ fontSize: 10.5, color: 'var(--fg-tertiary)', fontFamily: 'var(--font-mono)' }}>#{m.flow}</span>
              </div>
            </button>
          );
        })}
      </div>

      {/* Footer */}
      <div style={{
        maxWidth: 1080, margin: '0 auto',
        padding: '40px 40px 64px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 11.5, color: 'var(--fg-tertiary)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span>{t('Designed for treasury operators', 'Создано для казначейских операторов')}</span>
          <span style={{ color: 'var(--ink-6)' }}>·</span>
          <span>{t('13 January 2026', '13 января 2026')}</span>
        </div>
        <a href="index.html" style={{ color: 'var(--fg-tertiary)', textDecoration: 'none' }}>
          {t('View as static designs', 'Открыть статические макеты')} →
        </a>
      </div>

      <style>{`
        .kgst-launcher-card:hover {
          border-color: var(--border-gold) !important;
          transform: translateY(-2px);
        }
        .kgst-foil {
          background: linear-gradient(180deg,#F8E8A8 0%,#D9B45A 50%,#8A6018 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      `}</style>
    </div>
  );
};

window.Launcher = Launcher;