// Sección "Real Estate": versión temporal enfocada solo en este sector (foto
// grande + herramientas de gestión). La versión anterior con los 10 sectores
// está en el tag git `pre-real-estate`. Textos en config/i18n.js (claves re.*).
const HERRAMIENTAS_RE = [
  { icono: '🏠', k: 're.t1' },
  { icono: '👥', k: 're.t2' },
  { icono: '📅', k: 're.t3' },
  { icono: '📝', k: 're.t4' },
  { icono: '💶', k: 're.t5' },
  { icono: '📊', k: 're.t6' },
];

function Sectores() {
  return (
    <section id="sectores" className="section section--tight sectores reveal">
      <div className="container">
        <div className="section__head">
          <h2 dangerouslySetInnerHTML={window.tHtml('re.title')} />
          <p dangerouslySetInnerHTML={window.tHtml('re.sub')} />
        </div>

        <div className="re">
          <div className="sectores__block re__photo">
            <div
              className="sectores__block-bg"
              style={{ backgroundImage: "url('frontend/assets/images/sectores/inmobiliario.jpg')" }}
              role="img"
              aria-label={window.t('re.photoAlt')}
            />
            <div className="sectores__block-overlay" aria-hidden="true" />
            <span className="sectores__block-btn">{window.t('re.photoLabel')}</span>
          </div>

          <div className="re__grid">
            {HERRAMIENTAS_RE.map((h) => (
              <div key={h.k} className="re__card glass">
                <span className="re__icon" aria-hidden="true">{h.icono}</span>
                <h3>{window.t(h.k + '.t')}</h3>
                <p>{window.t(h.k + '.x')}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}