/* eslint-disable react/prop-types */
/**
 * SocioFormador · Sección 10 del Home · TEC DE MONTERREY.
 * Brief 1 §3.1 Sección 10.
 *
 * - Fondo crema soft
 * - Layout 60/40 desktop, 1 col mobile
 * - Eyebrow cobre + título navy + descripción + CTA secundario navy outline
 * - Columna derecha: logo Tec monocromo navy (placeholder)
 */

function SocioFormador() {
  return (
    <section data-screen-label="10 Socio Formador" style={sfStyles.section}>
      <div className="container" style={sfStyles.grid}>
        <div style={sfStyles.col}>
          <span className="eyebrow">SOCIO FORMADOR</span>
          <h2 style={sfStyles.title}>
            Comprometidos con la formación de las futuras generaciones.
          </h2>
          <p style={sfStyles.desc}>
            Prosperia participa como socio formador del Tecnológico de Monterrey. Colaboramos con la comunidad académica como asesores, ponentes, expositores y profesores visitantes — vinculando a los estudiantes con la realidad y la práctica a través de casos de proyectos inmobiliarios reales. Contribuimos a formar líderes con visión innovadora para el futuro de México.
          </p>
          <a href="/sobre-nosotros/Responsabilidad.html" className="btn btn-navy-outline" style={{ marginTop: 8 }}>
            Conoce más sobre nuestros compromisos
            <window.Icon name="arrow-right" size={16} stroke={1.8} />
          </a>
        </div>

        <aside style={sfStyles.colRight}>
          <div style={sfStyles.tecLogoBlock} aria-label="Logo Tecnológico de Monterrey">
            <img
              src="assets/logo/tec-monterrey-horizontal.png"
              alt="Tecnológico de Monterrey"
              style={sfStyles.tecLogoImg}
              loading="lazy"
              decoding="async"
            />
          </div>
          <div style={sfStyles.tecMeta}>
            <span className="label-small">VÍNCULO ACADÉMICO</span>
            <span style={sfStyles.tecYear}>2008 — Hoy</span>
          </div>
        </aside>
      </div>
    </section>
  );
}

const sfStyles = {
  section: {
    background: 'var(--color-cream-soft)',
    paddingBlock: 80,
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 48,
    alignItems: 'center',
  },
  col: {
    display: 'flex',
    flexDirection: 'column',
    gap: 24,
    maxWidth: 600,
  },
  colRight: {
    display: 'flex',
    flexDirection: 'column',
    gap: 24,
    alignItems: 'flex-start',
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(28px, 3.4vw, 40px)',
    lineHeight: 1.15,
    color: 'var(--color-navy-deep)',
    letterSpacing: '0.01em',
    textWrap: 'balance',
  },
  desc: {
    margin: 0,
    fontSize: 17,
    lineHeight: 1.7,
    color: 'var(--color-navy-deep)',
    maxWidth: 580,
  },
  tecLogoBlock: {
    width: '100%',
    maxWidth: 380,
    padding: '36px 40px',
    background: '#fff',
    borderRadius: 4,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  tecLogoImg: {
    width: '100%',
    height: 'auto',
    maxWidth: 300,
    display: 'block',
  },
  tecMeta: {
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
  },
  tecYear: {
    fontSize: 14,
    color: 'var(--color-navy-medium)',
  },
};

const sfMQ = document.createElement('style');
sfMQ.textContent = `
  @media (min-width: 1024px) {
    section[data-screen-label="10 Socio Formador"] .container {
      grid-template-columns: 60% 40% !important;
      gap: 80px !important;
    }
  }
`;
document.head.appendChild(sfMQ);

window.SocioFormador = SocioFormador;