const WB_H = window.WhitebirdDesignSystem_7d8137;

function HomePage({ onSignin }) {
  const { Button, CourseTicker } = WB_H;
  const narrow = useNarrow(920);
  return (
    <div className="wb-page" style={{ justifyContent: 'space-between' }}>
      <div style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
        <SiteHeader variant="blue" />
        <section className="wb-hero" style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="wb-hero__bg" style={{ backgroundImage: `url(${narrow ? window.WB_IMG.heroBgMobile : window.WB_IMG.heroBg})` }} />
          <div className="wb-container wb-hero__inner">
            <div className="wb-hero__col">
              <h1 style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', border: 0 }}>
                Whitebird: Быстрый Обмен и Продажа Криптовалют
              </h1>
              <h2>Легально. Просто.<br />Крипто.</h2>
              <p>Крупнейшая легальная криптоплатформа</p>
              <Button variant="inverse" size="lg" onClick={() => { try { var tg = window.Telegram && window.Telegram.WebApp; if (tg && tg.HapticFeedback) tg.HapticFeedback.impactOccurred('light'); } catch(e){} onSignin(); }} style={{ minWidth: '320px', maxWidth: '100%' }}>Войти</Button>
            </div>
            <div className="wb-hero__media">
              <img alt="" decoding="async" src={window.WB_IMG.together}
                onError={(e) => { e.target.style.visibility = 'hidden'; }} />
            </div>
          </div>
        </section>
      </div>
      <div style={{ flexShrink: 0 }}>
        <CourseTicker items={window.WB_RATES} />
      </div>
    </div>
  );
}

Object.assign(window, { HomePage });