/* global React */

window.HubScreen = function HubScreen({ userName, onPick }) {
  return (
    <div className="hub-page">
      <header className="top-bar">
        <img src="assets/logos/logo-shopper.png" alt="Shopper" className="top-bar-logo-img" />
        <div className="top-bar-divider" />
        <div className="top-bar-context">
          <span className="top-bar-store">Olá, {(userName || '').split(' ')[0]}</span>
        </div>
        <div className="top-bar-spacer" />
        <button className="top-bar-logout" onClick={onPick.onLogout} title="Sair">
          <window.Icon name="log_out" size={14} />
          <span className="top-bar-logout-text">Sair</span>
        </button>
      </header>

      <div className="hub-content">
        <div className="hub-inner">
          <div className="hub-greeting">Onde você quer ir?</div>
          <h1 className="hub-name">{userName}</h1>

          <div className="hub-tiles">
            <button className="hub-tile" onClick={onPick.intraday}>
              <div className="hub-tile-icon">
                <window.Icon name="grid" size={22} />
              </div>
              <div className="hub-tile-eyebrow">Operação ao longo do dia</div>
              <h2 className="hub-tile-title">Intraday</h2>
              <p className="hub-tile-desc">
                Performance operacional em tempo quase real — SLA, ruptura, foto e tempos
                médios por loja, turno e operador.
              </p>
              <span className="hub-tile-cta">Abrir <window.Icon name="arrow_right" size={14} /></span>
            </button>

            <button className="hub-tile green" onClick={onPick.feedbacks}>
              <div className="hub-tile-icon">
                <window.Icon name="list" size={22} />
              </div>
              <div className="hub-tile-eyebrow">Fechamento semanal</div>
              <h2 className="hub-tile-title">Feedbacks de bonificação</h2>
              <p className="hub-tile-desc">
                Relatório semanal auditável de bonificação. Quanto ganhou, quanto perdeu,
                por que, e a memória de cálculo completa.
              </p>
              <span className="hub-tile-cta">Abrir <window.Icon name="arrow_right" size={14} /></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};