/* eslint-disable react/prop-types */
/**
 * ResponsabilidadBody · Página Responsabilidad · 5 Compromisos.
 * Brief 1 §3.7.
 *
 *  - Cards horizontales con número gigante izquierda + título + body derecha
 *  - Línea separadora entre compromisos
 *  - Card #5 incluye logo Tec a la derecha
 *  - CTA al final apunta a /sobre-nosotros/historia
 */

const COMPROMISOS = [
  {
    num: '01',
    tag: 'SUSTENTABILIDAD',
    title: 'Sustentabilidad como criterio, no como adorno.',
    body: 'Lyra es la primera comunidad de Latinoamérica con LEED for Neighborhood Development + WELL Community combinadas. El edificio OUM en Arboleda aspira a ser el primer NET-ZERO de Latinoamérica. En cada proyecto evaluamos huella de carbono, eficiencia energética, movilidad no motorizada y resiliencia climática como parte del diseño, no como añadido al final.',
    proof: ['LEED ND + WELL Community · LYRA', 'NET-ZERO ASPIRANTE · OUM ARBOLEDA'],
    icon: 'spark',
  },
  {
    num: '02',
    tag: 'MEZCLA · NO SEGREGACIÓN',
    title: 'Mezcla social, no segregación.',
    body: 'Cuando diseñamos vivienda vertical, evitamos los enclaves cerrados que aíslan a sus habitantes del resto de la ciudad. Apostamos por usos mixtos, calles peatonales, espacios públicos abiertos. Las ciudades sanas son ciudades mezcladas.',
    icon: 'people',
  },
  {
    num: '03',
    tag: 'RECUPERACIÓN URBANA',
    title: 'Recuperación urbana sobre expansión.',
    body: 'Donde podemos elegir entre densificar un centro o expandir un perímetro, elegimos densificar. DOT Monterrey re-densificó 360 hectáreas en el corazón de la ciudad, multiplicando el valor catastral por aproximadamente 6 y la recaudación predial por 14, recuperando valor donde otros veían declive.',
    proof: ['DOT MONTERREY · 360 HA · VALOR ×6 · RECAUDACIÓN ×14'],
    icon: 'compass',
  },
  {
    num: '04',
    tag: 'CRITERIO',
    title: 'A quién decimos sí, a quién decimos no.',
    body: 'No todos los proyectos llegan a Prosperia con la intención correcta. Trabajamos con desarrolladores valientes — los que aceptan la pregunta "¿qué necesita esta zona?" antes de la pregunta "¿qué quiero construir aquí?". Cuando un cliente solo busca optimizar venta de inventario sin atender a la demanda real, declinamos el proyecto.',
    icon: 'target',
  },
  {
    num: '05',
    tag: 'SOCIO FORMADOR',
    title: 'Formación de futuras generaciones.',
    body: '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.',
    icon: 'building',
    tec: true,
  },
];

function ResponsabilidadBody() {
  return (
    <React.Fragment>
      {/* Intro corta */}
      <section data-screen-label="02 Intro Compromisos" style={rsStyles.introSection}>
        <div className="container" style={rsStyles.introGrid}>
          <window.Reveal style={rsStyles.introHead}>
            <span className="eyebrow">CINCO COMPROMISOS</span>
            <h2 style={rsStyles.h2}>
              Lo que hacemos. Lo que no hacemos. Y por qué.
            </h2>
          </window.Reveal>

          <window.Reveal delay={120} style={rsStyles.introBody}>
            <p style={rsStyles.lead}>
              Diseñar ciudades es una responsabilidad que se traduce en cómo trabajamos: en cuáles proyectos aceptamos, en cómo medimos su impacto, y en a quién formamos para los siguientes 18 años.
            </p>
          </window.Reveal>
        </div>
      </section>

      {/* 5 compromisos */}
      <section data-screen-label="03 Compromisos" style={rsStyles.cSection}>
        <div className="container">
          <ol style={rsStyles.list}>
            {COMPROMISOS.map((c, i) => (
              <window.Reveal as="li" key={c.num} delay={i * 80} style={{
                ...rsStyles.item,
                ...(c.tec ? rsStyles.itemTec : null),
              }}>
                <div style={rsStyles.itemLeft}>
                  <div style={rsStyles.numBlock}>
                    <span style={rsStyles.num}>{c.num}</span>
                    <span style={rsStyles.icon}>
                      <window.Icon name={c.icon} size={22} stroke={1.5} />
                    </span>
                  </div>
                  <span style={rsStyles.itemTag}>{c.tag}</span>
                </div>

                <div style={rsStyles.itemRight}>
                  <h3 style={rsStyles.itemTitle}>{c.title}</h3>
                  <p style={rsStyles.itemBody}>{c.body}</p>

                  {c.proof && (
                    <div style={rsStyles.proofList}>
                      {c.proof.map((p, k) => (
                        <span key={k} style={rsStyles.proofChip}>
                          <window.Icon name="check" size={12} stroke={2.2} />
                          {p}
                        </span>
                      ))}
                    </div>
                  )}

                  {c.tec && (
                    <div style={rsStyles.tecCard}>
                      <img
                        src="../home/assets/logo/tec-monterrey-horizontal.png"
                        alt="Tecnológico de Monterrey"
                        style={rsStyles.tecLogoImg}
                        loading="lazy"
                        decoding="async"
                      />
                      <span style={rsStyles.tecLine2}>Vínculo académico · 2008 — Hoy</span>
                    </div>
                  )}
                </div>
              </window.Reveal>
            ))}
          </ol>
        </div>
      </section>

      {/* CTA · Historia */}
      <section data-screen-label="04 CTA Historia" style={rsStyles.ctaSection}>
        <div className="container">
          <window.Reveal style={rsStyles.ctaInner}>
            <span style={rsStyles.ctaEyebrow}>LA HISTORIA DETRÁS</span>
            <h2 style={rsStyles.ctaTitle}>18 años originando lo que la industria no veía.</h2>
            <a href="Historia.html" className="btn btn-copper" data-cursor="link" style={{ marginTop: 16 }}>
              Conocer nuestra historia
              <window.Icon name="arrow-right" size={16} stroke={1.8} />
            </a>
          </window.Reveal>
        </div>
      </section>
    </React.Fragment>
  );
}

const rsStyles = {
  introSection: {
    background: '#fff',
    paddingBlock: 'var(--space-3xl)',
  },
  introGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 32,
  },
  introHead: { display: 'flex', flexDirection: 'column', gap: 16 },
  h2: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(28px, 4vw, 48px)',
    lineHeight: 1.12,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.005em',
    textWrap: 'balance',
  },
  introBody: { display: 'flex', flexDirection: 'column', gap: 16 },
  lead: {
    margin: 0,
    fontSize: 'clamp(18px, 1.7vw, 22px)',
    lineHeight: 1.6,
    color: 'var(--color-navy-deep)',
    fontWeight: 700,
    textWrap: 'pretty',
  },

  cSection: {
    background: 'var(--color-cream)',
    paddingBlock: 'var(--space-3xl)',
  },
  list: {
    listStyle: 'none',
    padding: 0,
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 0,
  },
  item: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 24,
    paddingBlock: 48,
    borderBottom: '1px solid rgba(33,52,64,0.10)',
  },
  itemTec: {
    background: '#fff',
    padding: 'clamp(28px, 3vw, 40px)',
    borderRadius: 4,
    marginTop: 24,
    borderBottom: 0,
  },
  itemLeft: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  numBlock: {
    display: 'flex',
    alignItems: 'baseline',
    gap: 12,
  },
  num: {
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    fontSize: 'clamp(32px, 6vw, 88px)',
    fontWeight: 700,
    lineHeight: 0.9,
    letterSpacing: '-0.02em',
    background: 'url("assets/textures/cobre-patinado.svg") center/cover',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    color: 'transparent',
  },
  icon: {
    color: 'var(--color-copper-fallback)',
    paddingBottom: 8,
  },
  itemTag: {
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.22em',
    color: 'var(--color-copper-fallback)',
    textTransform: 'uppercase',
  },
  itemRight: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    maxWidth: 720,
  },
  itemTitle: {
    margin: 0,
    fontSize: 'clamp(22px, 2.4vw, 30px)',
    fontWeight: 800,
    lineHeight: 1.2,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.005em',
    textWrap: 'balance',
  },
  itemBody: {
    margin: 0,
    fontSize: 16,
    lineHeight: 1.7,
    color: 'var(--color-navy-deep)',
  },
  proofList: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: 8,
    marginTop: 4,
  },
  proofChip: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: '8px 14px',
    background: 'rgba(168, 107, 45, 0.10)',
    border: '1px solid rgba(168, 107, 45, 0.32)',
    color: 'var(--color-copper-fallback)',
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    borderRadius: 2,
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
  },
  tecCard: {
    marginTop: 8,
    padding: '20px 24px',
    background: 'var(--color-cream)',
    borderRadius: 4,
    display: 'flex',
    alignItems: 'center',
    gap: 20,
    flexWrap: 'wrap',
  },
  tecLogoImg: {
    height: 36,
    width: 'auto',
    maxWidth: 220,
    display: 'block',
    flexShrink: 0,
  },
  tecLine2: {
    fontSize: 12,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
  },

  ctaSection: {
    background: 'var(--color-cream-soft)',
    paddingBlock: 'var(--space-2xl)',
  },
  ctaInner: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    maxWidth: 680,
    margin: '0 auto',
    textAlign: 'center',
    alignItems: 'center',
  },
  ctaEyebrow: {
    fontWeight: 700, fontSize: 11,
    letterSpacing: '0.28em',
    color: 'var(--color-copper-fallback)',
    textTransform: 'uppercase',
  },
  ctaTitle: {
    margin: 0,
    fontSize: 'clamp(24px, 3vw, 36px)',
    fontWeight: 800,
    lineHeight: 1.2,
    color: 'var(--color-navy-deep)',
    textWrap: 'balance',
  },
};

const rsMQ = document.createElement('style');
rsMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="02 Intro Compromisos"] .container {
      grid-template-columns: 1fr 1.4fr !important;
      gap: 64px !important;
    }
    section[data-screen-label="03 Compromisos"] li {
      grid-template-columns: 220px 1fr !important;
      gap: 56px !important;
    }
    section[data-screen-label="04 Reporte"] .container > div {
      grid-template-columns: 1fr 360px !important;
      gap: 64px !important;
      align-items: center !important;
    }
  }
`;
document.head.appendChild(rsMQ);

window.ResponsabilidadBody = ResponsabilidadBody;