/* eslint-disable react/prop-types */
/**
 * Manifesto · Los 4 capítulos de Nuestro Enfoque.
 * Brief 1 §3.4 Secciones 1-4 + CTA final.
 *
 *  - Índice de capítulos sticky a la derecha (desktop) con scroll-spy
 *  - Cada capítulo con número gigante + eyebrow + título + cuerpo editorial
 *  - Tesis 4 (CREER + CREAR) recibe tratamiento split-screen especial
 *  - CTA al final apuntando a /nuestro-trabajo/servicios
 */

const { useState: uS_Mf, useEffect: uE_Mf, useRef: uR_Mf } = React;

const CHAPTERS = [
  {
    id: 'paradigma',
    num: '01',
    eyebrow: 'TESIS 01 · LA PREGUNTA QUE FALTABA',
    title: 'Antes del primer metro cuadrado,\nuna pregunta cambia todo el negocio.',
    intro: 'Más de la mitad de la riqueza del mundo está depositada en inmuebles. El 80% de esa riqueza son casas, departamentos y lugares donde vivimos. Quien diseña esos espacios diseña, sin proponérselo, las vidas que van a vivir en ellos.',
    body: [
      'La pregunta tradicional fue cuántos metros se vendieron. La pregunta útil es quién va a vivir aquí. La primera mira al pasado y mide la oferta absorbida. La segunda mira al presente y entiende la demanda real — la que vive en las personas, no en los inventarios.',
      'Cuando se empieza por la oferta, terminamos con ciudades que no caben en quienes las habitamos. Cuando se empieza por la persona, todo lo demás se ordena solo: cuánto se necesita, qué mezcla funciona, a qué precio, para quién.',
    ],
    pullQuote: 'La demanda real no se mide en los inventarios. Vive en las personas que habitan la ciudad.',
    image: '../home/assets/images/prosperia-distrito-placeholder-lotificacion-horizontal1.jpg',
    imageCaption: 'La expansión periférica revela el costo de empezar por la oferta — la ciudad sigue creciendo pero la vida en común se diluye.',
    bg: '#fff',
  },
  {
    id: 'inversion',
    num: '02',
    eyebrow: 'TESIS 02 · LA INVERSIÓN QUE PROPONEMOS',
    title: 'Empezamos por la persona.\nTerminamos por el negocio.',
    intro: 'Hace 18 años decidimos invertir la pregunta. Si el problema era empezar por la oferta, la respuesta era empezar por la demanda — pero no la demanda medida por absorción del pasado, sino la demanda real, la que vive en las personas.',
    questions: [
      '¿Qué edad tienen?',
      '¿Cuánto ganan?',
      '¿Cómo viven?',
      '¿Cómo compran?',
      '¿Qué les falta?',
    ],
    body: [
      'Cuando se hacen esas preguntas primero, lo que sigue se ordena solo. El espacio que la gente necesita. El precio que pueden pagar. La mezcla que la zona soporta. El multiplicador para el desarrollador que se atreva a apostar.',
    ],
    image: '../home/assets/images-distritos/distrito-tec.jpg',
    imageCaption: 'Distrito Tec, Monterrey — vida pública diaria como evidencia de la tesis: lo que se diseña para las personas funciona.',
    bg: 'var(--color-cream)',
  },
  {
    id: 'civico',
    num: '03',
    eyebrow: 'TESIS 03 · EL ARGUMENTO CÍVICO',
    title: 'El mayor creador de infraestructura urbana no es el gobierno.',
    intro: 'Son los desarrolladores. Invierten miles de millones cada año, y lo hacen — hasta hoy — con información incompleta.',
    body: [
      'Cuando deciden con datos correctos, la ciudad gana. Cuando deciden a ciegas, todos perdemos: el inversionista, el habitante, la ciudad.',
      'Por eso Prosperia no es solo un servicio inmobiliario. Es una postura sobre cómo se construye país.',
    ],
    statTrio: [
      { num: '50%+',  label: 'DE LA RIQUEZA MUNDIAL EN INMUEBLES' },
      { num: '80%',   label: 'DE ESA RIQUEZA EN VIVIENDA' },
      { num: '+3B',   label: 'USD ORIGINADOS POR PROSPERIA' },
    ],
    image: '../home/assets/images/prosperia-manifesto-barcelona-eixample.jpg',
    imageCaption: 'Barcelona — la cuadrícula del Eixample, diseñada por Ildefons Cerdà en 1859 con la pregunta correcta: cómo se debe vivir en una ciudad. Casi dos siglos después, sigue siendo el ejemplo de qué pasa cuando los datos correctos preceden al primer m².',
    bg: '#fff',
  },
];

function Manifesto() {
  const [active, setActive] = uS_Mf('paradigma');
  const refs = uR_Mf({});

  uE_Mf(() => {
    const ids = [...CHAPTERS.map(c => c.id), 'creer-crear', 'cta-final'];
    const obs = new IntersectionObserver((entries) => {
      // pick the entry closest to top that's intersecting
      let best = null;
      entries.forEach(e => {
        if (e.isIntersecting) {
          if (!best || e.intersectionRatio > best.intersectionRatio) best = e;
        }
      });
      if (best) setActive(best.target.id);
    }, { rootMargin: '-25% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75] });

    ids.forEach(id => {
      const el = document.getElementById(id);
      if (el) { refs.current[id] = el; obs.observe(el); }
    });
    return () => obs.disconnect();
  }, []);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <React.Fragment>
      {/* Índice sticky */}
      <aside style={mfStyles.indexFloat} aria-label="Índice de capítulos">
        <div style={mfStyles.indexInner}>
          <div style={mfStyles.indexLabel}>ÍNDICE</div>
          <ol style={mfStyles.indexList}>
            {CHAPTERS.map((c) => (
              <li key={c.id}>
                <a href={`#${c.id}`} onClick={scrollTo(c.id)}
                   data-cursor="link"
                   style={{
                     ...mfStyles.indexLink,
                     color: active === c.id ? 'var(--color-navy-deep)' : 'var(--color-navy-medium)',
                     opacity: active === c.id ? 1 : 0.55,
                   }}>
                  <span style={mfStyles.indexNum}>{c.num}</span>
                  <span style={mfStyles.indexLine}><span style={{
                    ...mfStyles.indexLineFill,
                    transform: active === c.id ? 'scaleX(1)' : 'scaleX(0.15)',
                  }} /></span>
                </a>
              </li>
            ))}
            <li key="creer-crear">
              <a href="#creer-crear" onClick={scrollTo('creer-crear')}
                 data-cursor="link"
                 style={{
                   ...mfStyles.indexLink,
                   color: active === 'creer-crear' ? 'var(--color-navy-deep)' : 'var(--color-navy-medium)',
                   opacity: active === 'creer-crear' ? 1 : 0.55,
                 }}>
                <span style={mfStyles.indexNum}>04</span>
                <span style={mfStyles.indexLine}><span style={{
                  ...mfStyles.indexLineFill,
                  transform: active === 'creer-crear' ? 'scaleX(1)' : 'scaleX(0.15)',
                }} /></span>
              </a>
            </li>
          </ol>
        </div>
      </aside>

      {CHAPTERS.map((c, i) => (
        <section
          key={c.id}
          id={c.id}
          data-screen-label={`0${i + 2} ${c.eyebrow.split('·')[1]?.trim() || c.id}`}
          style={{ ...mfStyles.section, background: c.bg }}
        >
          <div className="container">
            <div style={mfStyles.chapHead}>
              <window.Reveal style={mfStyles.chapNumber}>
                <span style={mfStyles.chapNumDigit}>{c.num}</span>
                <span style={mfStyles.chapNumLine} />
              </window.Reveal>

              <window.Reveal delay={120} style={mfStyles.chapHeadBody}>
                <span className="eyebrow">{c.eyebrow}</span>
                <h2 style={mfStyles.chapTitle}>{c.title.split('\n').map((line, k) =>
                  <React.Fragment key={k}>{k > 0 && <br/>}{line}</React.Fragment>
                )}</h2>
              </window.Reveal>
            </div>

            <window.Reveal delay={180} style={mfStyles.chapBody}>
              <p style={mfStyles.intro}>{c.intro}</p>

              {/* Media plate: imagen ancha con caption, entre intro y body */}
              {c.image && (
                <figure style={mfStyles.mediaPlate}>
                  <div style={mfStyles.mediaImgWrap}>
                    <img src={c.image} alt={c.imageCaption || ''} style={mfStyles.mediaImg} loading="lazy" />
                  </div>
                  {c.imageCaption && (
                    <figcaption style={mfStyles.mediaCaption}>{c.imageCaption}</figcaption>
                  )}
                </figure>
              )}

              {c.questions && (
                <ul style={mfStyles.questions}>
                  {c.questions.map((q, k) => (
                    <li key={k} style={mfStyles.question}>
                      <span style={mfStyles.questionMark}>?</span>
                      <span>{q}</span>
                    </li>
                  ))}
                </ul>
              )}

              {c.statTrio && (
                <div style={mfStyles.statTrio}>
                  {c.statTrio.map((s, k) => (
                    <div key={k} style={mfStyles.statCell}>
                      <div style={mfStyles.statNum}>{s.num}</div>
                      <div style={mfStyles.statLabel}>{s.label}</div>
                    </div>
                  ))}
                </div>
              )}

              {c.body.map((p, k) => (
                <p key={k} style={mfStyles.body}
                   dangerouslySetInnerHTML={{ __html: p.replace(/\*([^*]+)\*/g, '<em>$1</em>') }} />
              ))}

              {c.pullQuote && (
                <blockquote className="pull-quote" style={mfStyles.pullQuote}>
                  {c.pullQuote}
                </blockquote>
              )}
            </window.Reveal>
          </div>
        </section>
      ))}
    </React.Fragment>
  );
}

const mfStyles = {
  indexFloat: {
    position: 'fixed',
    top: '50%',
    right: 'max(24px, calc((100vw - 1280px) / 2 + 24px))',
    transform: 'translateY(-50%)',
    zIndex: 50,
    display: 'none', // desktop only
  },
  indexInner: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  indexLabel: {
    fontSize: 10,
    fontWeight: 700,
    letterSpacing: '0.28em',
    color: 'var(--color-navy-medium)',
    textTransform: 'uppercase',
  },
  indexList: {
    listStyle: 'none',
    padding: 0,
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  indexLink: {
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    padding: '6px 0',
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.18em',
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    transition: 'color 240ms ease, opacity 240ms ease',
  },
  indexNum: {
    minWidth: 22,
    fontVariantNumeric: 'tabular-nums',
  },
  indexLine: {
    display: 'block',
    width: 40, height: 1,
    background: 'rgba(33,52,64,0.18)',
    overflow: 'hidden',
  },
  indexLineFill: {
    display: 'block', height: '100%',
    background: 'var(--color-copper-fallback)',
    transformOrigin: 'left center',
    transition: 'transform 480ms cubic-bezier(0.16,1,0.3,1)',
  },

  section: {
    padding: 'var(--space-3xl) 0',
    position: 'relative',
  },
  chapHead: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 32,
    marginBottom: 56,
  },
  chapNumber: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    color: 'var(--color-copper-fallback)',
  },
  chapNumDigit: {
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    fontSize: 'clamp(36px, 8vw, 96px)',
    fontWeight: 700,
    lineHeight: 0.85,
    letterSpacing: '-0.02em',
    background: 'url("assets/textures/cobre-patinado.svg") center/cover',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    color: 'transparent',
  },
  chapNumLine: {
    flex: 1,
    height: 1,
    background: 'rgba(33,52,64,0.18)',
    maxWidth: 120,
  },
  chapHeadBody: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  chapTitle: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(32px, 5vw, 60px)',
    lineHeight: 1.08,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.005em',
    textWrap: 'balance',
    maxWidth: 920,
  },
  chapBody: {
    maxWidth: 760,
    display: 'flex',
    flexDirection: 'column',
    gap: 28,
  },
  intro: {
    margin: 0,
    fontSize: 'clamp(20px, 1.9vw, 24px)',
    lineHeight: 1.55,
    color: 'var(--color-navy-deep)',
    fontWeight: 700,
    textWrap: 'pretty',
  },
  mediaPlate: {
    margin: '12px 0 4px',
    padding: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 14,
  },
  mediaImgWrap: {
    position: 'relative',
    width: '100%',
    aspectRatio: '16 / 9',
    overflow: 'hidden',
    borderRadius: 6,
    background: 'var(--color-navy-deep)',
    boxShadow: '0 16px 40px rgba(15, 27, 35, 0.18)',
  },
  mediaImg: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block',
  },
  mediaCaption: {
    margin: 0,
    fontSize: 'clamp(13px, 1.05vw, 14px)',
    lineHeight: 1.6,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
    textWrap: 'pretty',
    paddingLeft: 14,
    borderLeft: '2px solid var(--color-copper-fallback)',
  },
  body: {
    margin: 0,
    fontSize: 'clamp(16px, 1.4vw, 18px)',
    lineHeight: 1.75,
    color: 'var(--color-navy-deep)',
  },
  pullQuote: {
    fontSize: 'clamp(18px, 1.8vw, 22px)',
    lineHeight: 1.5,
    color: 'var(--color-navy-deep)',
    margin: '12px 0 0',
  },
  questions: {
    listStyle: 'none',
    padding: '28px 32px',
    margin: 0,
    background: 'rgba(168, 107, 45, 0.08)',
    borderLeft: '3px solid var(--color-copper-fallback)',
    borderRadius: '0 4px 4px 0',
    display: 'flex',
    flexDirection: 'column',
    gap: 14,
  },
  question: {
    display: 'flex',
    alignItems: 'baseline',
    gap: 14,
    fontSize: 'clamp(18px, 1.7vw, 22px)',
    color: 'var(--color-navy-deep)',
    fontWeight: 700,
    fontStyle: 'italic',
  },
  questionMark: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 28, height: 28,
    background: 'var(--color-copper-fallback)',
    color: '#fff',
    borderRadius: 999,
    fontSize: 14,
    fontWeight: 800,
    fontStyle: 'normal',
    flexShrink: 0,
  },
  statTrio: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 24,
    paddingBlock: 24,
    borderTop: '1px solid rgba(33,52,64,0.12)',
    borderBottom: '1px solid rgba(33,52,64,0.12)',
  },
  statCell: { display: 'flex', flexDirection: 'column', gap: 8 },
  statNum: {
    fontWeight: 800,
    fontSize: 'clamp(28px, 3vw, 40px)',
    color: 'var(--color-navy-deep)',
    lineHeight: 1.0,
    letterSpacing: '0.02em',
  },
  statLabel: {
    fontSize: 10,
    fontWeight: 700,
    letterSpacing: '0.16em',
    color: 'var(--color-copper-fallback)',
    lineHeight: 1.4,
  },
};

const mfMQ = document.createElement('style');
mfMQ.textContent = `
  @media (min-width: 1024px) {
    aside[aria-label="Índice de capítulos"] { display: block !important; }
    section[id="paradigma"] .container > div:first-child,
    section[id="inversion"] .container > div:first-child,
    section[id="civico"] .container > div:first-child {
      grid-template-columns: 160px 1fr !important;
      gap: 48px !important;
      align-items: start !important;
    }
  }
`;
document.head.appendChild(mfMQ);

window.Manifesto = Manifesto;