// Sección principal: el objetivo de conversión #1 de toda la página. Deja
// claro qué se reserva (la demo gratuita) sin obligar a leer nada más. Sin
// recuadro: el contenido flota centrado sobre el degradado. Textos en
// config/i18n.js (claves hero.*).
function Hero({ onAbrirContacto }) {
  const t = window.t;
  return (
    <header id="inicio" className="hero">
      <div className="hero__deco" aria-hidden="true">
        <div className="hero__deco-el hero__notif hero__notif--ventas">
          <span className="hero__notif-icon hero__notif-icon--blue">📊</span>
          <span className="hero__notif-body">
            <span className="hero__notif-meta"><span>{t('hero.n1.meta1')}</span><span>{t('hero.n1.meta2')}</span></span>
            <span className="hero__notif-title">{t('hero.n1.title')}</span>
            <span className="hero__notif-sub">{t('hero.n1.sub')}</span>
          </span>
        </div>

        <div className="hero__deco-el hero__notif hero__notif--clientes">
          <span className="hero__notif-icon hero__notif-icon--green">👥</span>
          <span className="hero__notif-body">
            <span className="hero__notif-meta"><span>{t('hero.n2.meta1')}</span><span>{t('hero.n2.meta2')}</span></span>
            <span className="hero__notif-title">{t('hero.n2.title')}</span>
            <span className="hero__notif-sub">{t('hero.n2.sub')}</span>
          </span>
        </div>

        <div className="hero__deco-el hero__notif hero__notif--oportunidades">
          <span className="hero__notif-icon hero__notif-icon--purple">🗂️</span>
          <span className="hero__notif-body">
            <span className="hero__notif-meta"><span>{t('hero.n3.meta1')}</span><span>{t('hero.n3.meta2')}</span></span>
            <span className="hero__notif-title">{t('hero.n3.title')}</span>
            <span className="hero__notif-sub">{t('hero.n3.sub')}</span>
          </span>
        </div>

        <div className="hero__deco-el hero__notif hero__notif--calendario">
          <span className="hero__notif-icon hero__notif-icon--orange">📅</span>
          <span className="hero__notif-body">
            <span className="hero__notif-meta"><span>{t('hero.n4.meta1')}</span><span>{t('hero.n4.meta2')}</span></span>
            <span className="hero__notif-title">{t('hero.n4.title')}</span>
            <span className="hero__notif-sub">{t('hero.n4.sub')}</span>
          </span>
        </div>

        <div className="hero__deco-el hero__notif hero__notif--simple hero__notif--tiempo">
          <span className="hero__notif-icon hero__notif-icon--teal">⏱️</span>
          <span className="hero__notif-line">{t('hero.s1')}</span>
        </div>

        <div className="hero__deco-el hero__notif hero__notif--simple hero__notif--ahorro">
          <span className="hero__notif-icon hero__notif-icon--yellow">💶</span>
          <span className="hero__notif-line">{t('hero.s2')}</span>
        </div>

        <div className="hero__deco-el hero__notif hero__notif--simple hero__notif--conectado">
          <span className="hero__notif-icon hero__notif-icon--blue">🔗</span>
          <span className="hero__notif-line">{t('hero.s3')}</span>
        </div>

        <div className="hero__deco-el hero__notif hero__notif--simple hero__notif--cuellos">
          <span className="hero__notif-icon hero__notif-icon--red">📋</span>
          <span className="hero__notif-line">{t('hero.s4')}</span>
        </div>
      </div>

      <div className="container hero__center">
        <span className="hero__badge">{t('hero.badge')}</span>

        <h1 dangerouslySetInnerHTML={window.tHtml('hero.title')} />

        <p className="hero__sub" dangerouslySetInnerHTML={window.tHtml('hero.sub')} />

        <div className="hero__actions">
          <button type="button" className="btn btn--accent" onClick={onAbrirContacto}>
            {t('hero.cta')} <span aria-hidden="true">→</span>
          </button>
        </div>

        <div className="hero__chips">
          <span className="hero__chip">{t('hero.chip1')}</span>
          <span className="hero__chip">{t('hero.chip2')}</span>
          <span className="hero__chip">{t('hero.chip3')}</span>
        </div>
      </div>
    </header>
  );
}