// landing-parts3.jsx — Fundadores, Vigía, CTA, Footer

// ─── Portrait with real photo + institutional crop marks ───
function Portrait({ src, alt, compact = false }) {
  const w = compact ? 280 : 360, h = compact ? 340 : 440;
  return (
    <div style={{
      position: 'relative',
      width: w, height: h,
      background: '#E8E2D3',
      overflow: 'hidden',
    }}>
      <img src={src} alt={alt}
        style={{
          width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'center 20%',
          display: 'block',
          filter: 'grayscale(100%) contrast(1.02)',
        }} />
      {/* Corner crop marks (institutional feel) */}
      <svg width={w} height={h} style={{
        position: 'absolute', top: 0, left: 0, pointerEvents: 'none',
      }}>
        {[[12, 12], [w - 12, 12], [12, h - 12], [w - 12, h - 12]].map(([x, y], i) => (
          <g key={i} stroke={C.bone} strokeWidth={0.8} opacity={0.7}>
            <line x1={x - 6} y1={y} x2={x + 6} y2={y} />
            <line x1={x} y1={y - 6} x2={x} y2={y + 6} />
          </g>
        ))}
      </svg>
    </div>
  );
}

function Fundadores({ compact = false }) {
  const ppl = [
    {
      name: 'Consuelo Sáizar Guerrero',
      birth: 'Acaponeta, Nayarit · 1961',
      role: 'Editora · Consultora · Socióloga',
      photo: 'assets/consuelo-saizar.jpg',
      bio: 'Desde la década de los ochenta ha fundado y dirigido diversos proyectos editoriales y de contenidos. Fue directora general del Fondo de Cultura Económica (FCE), presidenta del Consejo Nacional para la Cultura y las Artes (CONACULTA) y del Centro Regional para el Fomento del Libro en América Latina y el Caribe (Cerlalc). En 2022 se desempeñó como directora general de la Feria Internacional del Libro de Monterrey.',
    },
    {
      name: 'Alejandro Zenker',
      birth: 'Ciudad de México · 1955',
      role: 'Editor · Traductor · Ensayista',
      photo: 'assets/alejandro-zenker.jpg',
      bio: 'Fundador de Solar Servicios Editoriales, Ediciones del Ermitaño y la plataforma de distribución internacional Librántida. Desde la década de los ochenta ha impulsado proyectos orientados a la producción, circulación y reflexión crítica del libro. Dirige el Instituto del Libro y la Lectura A.C. (ILLAC) y promueve iniciativas editoriales, visuales y pedagógicas que exploran la relación entre lenguaje, imagen y tecnología, con especial atención al impacto de la IA en el ecosistema del libro. Autor de una treintena de libros.',
    },
  ];
  return (
    <section id="fundadores" style={{
      background: C.bone,
      padding: compact ? '72px 24px' : '140px 56px',
      borderTop: `1px solid ${C.rule}`,
      scrollMarginTop: 80,
    }}>
      <div style={{ maxWidth: compact ? 'none' : 1200, margin: '0 auto' }}>
        <CatLabel>Fundadores</CatLabel>
        <h2 style={{
          fontFamily: FONT_SERIF, fontWeight: 500,
          fontSize: compact ? 36 : 56, color: C.navy,
          lineHeight: 1.08, letterSpacing: '-0.015em',
          margin: 0, marginBottom: compact ? 48 : 88,
          maxWidth: 800,
        }}>Una institución fundada desde la cultura del libro y la edición.</h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : '1fr 1fr',
          gap: compact ? 48 : 80,
          marginBottom: compact ? 48 : 80,
        }}>
          {ppl.map((p, i) => (
            <div key={i}>
              <Portrait src={p.photo} alt={`Retrato de ${p.name}`} compact={compact} />
              <div style={{
                fontFamily: FONT_MONO, fontSize: 11,
                color: C.terracotta, letterSpacing: '0.2em',
                marginTop: 24, marginBottom: 10,
                textTransform: 'uppercase',
              }}>{p.role}</div>
              <h3 style={{
                fontFamily: FONT_SERIF, fontWeight: 500,
                fontSize: compact ? 30 : 36, color: C.navy,
                margin: 0, marginBottom: 8,
                letterSpacing: '-0.01em',
              }}>{p.name}</h3>
              <div style={{
                fontFamily: FONT_MONO, fontSize: 11,
                color: C.muted, letterSpacing: '0.12em',
                marginBottom: 18, textTransform: 'uppercase',
              }}>{p.birth}</div>
              <p style={{
                fontFamily: FONT_SERIF, fontSize: compact ? 16 : 16.5,
                color: C.body, lineHeight: 1.55,
                margin: 0, maxWidth: 520,
              }}>{p.bio}</p>
            </div>
          ))}
        </div>

        {/* Consejo line */}
        <div style={{
          textAlign: 'center',
          borderTop: `1px solid ${C.rule}`,
          paddingTop: compact ? 36 : 56,
        }}>
          <div style={{
            fontFamily: FONT_SERIF, fontStyle: 'italic',
            fontSize: compact ? 18 : 22, color: C.muted,
            lineHeight: 1.5, maxWidth: 680, margin: '0 auto',
            fontWeight: 400,
          }}>
            Consejo en constitución · espacio reservado para figuras del ámbito empresarial, académico y cultural.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── El Vigía ───
function ElVigia({ compact = false }) {
  const articles = [
    {
      title: 'El campo que se mueve más rápido que todo lo que lo rodea',
      excerpt: 'Stanford publicó su AI Index Report 2026: cuatrocientas veintitrés páginas con la radiografía más completa del estado de la inteligencia artificial en el mundo.',
      date: '14 · ABR · 2026',
      byline: 'Alejandro Zenker',
      href: 'https://alejandrozenker.com/blog/2026/04/13/el-campo-que-se-mueve-mas-rapido-que-todo-lo-que-lo-rodea/',
    },
    {
      title: 'Cuando Wall Street tiene miedo',
      excerpt: 'Hay un momento en toda revolución tecnológica en que los trajes dejan de sonreír. Ayer fue ese momento: el Tesoro y la Fed reunieron a los bancos para hablar de IA.',
      date: '11 · ABR · 2026',
      byline: 'Alejandro Zenker',
      href: 'https://alejandrozenker.com/blog/2026/04/11/cuando-wall-street-tiene-miedo/',
    },
    {
      title: 'En IA no necesitas ser el mejor. Basta con mil quinientos millones de usuarios.',
      excerpt: 'Treinta mil millones de dólares al año factura Anthropic. Meta lanzó un modelo que ya vive en mil quinientos millones de teléfonos. Japón desmanteló su ley de privacidad.',
      date: '10 · ABR · 2026',
      byline: 'Alejandro Zenker',
      href: 'https://alejandrozenker.com/blog/2026/04/10/la-distribucion-se-come-al-benchmark/',
    },
  ];
  return (
    <section id="vigia" style={{
      background: C.white,
      padding: compact ? '72px 24px' : '140px 56px',
      borderTop: `1px solid ${C.rule}`,
      scrollMarginTop: 80,
    }}>
      <div style={{ maxWidth: compact ? 'none' : 1200, margin: '0 auto' }}>
        <CatLabel>Publicaciones recientes</CatLabel>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 20,
          marginBottom: compact ? 48 : 72, flexWrap: 'wrap',
        }}>
          <h2 style={{
            fontFamily: FONT_SERIF, fontWeight: 500,
            fontSize: compact ? 48 : 84, color: C.navy,
            lineHeight: 1, letterSpacing: '-0.02em',
            margin: 0,
          }}>El Vigía</h2>
          <div style={{
            fontFamily: FONT_SERIF, fontStyle: 'italic',
            fontSize: compact ? 18 : 24, color: C.muted,
          }}>boletín diario sobre inteligencia artificial</div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : 'repeat(3, 1fr)',
          gap: compact ? 40 : 40,
          borderTop: `1px solid ${C.navy}`,
          paddingTop: compact ? 32 : 40,
        }}>
          {articles.map((a, i) => (
            <article key={i} style={{
              borderBottom: `2px solid ${C.terracotta}`,
              paddingBottom: 24,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: C.terracotta, letterSpacing: '0.22em' }}>{a.date}</div>
              <h3 style={{
                fontFamily: FONT_SERIF, fontWeight: 500,
                fontSize: compact ? 22 : 26, color: C.navy,
                margin: 0, lineHeight: 1.2,
                letterSpacing: '-0.01em',
              }}>
                <a href={a.href} target="_blank" rel="noopener noreferrer" style={{
                  color: 'inherit', textDecoration: 'none',
                }}>{a.title}</a>
              </h3>
              <p style={{
                fontFamily: FONT_SERIF, fontSize: 15.5,
                color: C.body, lineHeight: 1.5, margin: 0,
              }}>{a.excerpt}</p>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 'auto', paddingTop: 12 }}>
                <span style={{ fontFamily: FONT_SANS, fontSize: 11.5, color: C.muted, fontStyle: 'italic' }}>{a.byline}</span>
                <a href={a.href} target="_blank" rel="noopener noreferrer" style={{
                  fontFamily: FONT_SANS, fontSize: 11.5,
                  color: C.terracotta, textDecoration: 'none',
                  letterSpacing: '0.02em',
                }}>Leer →</a>
              </div>
            </article>
          ))}
        </div>

        <div style={{ marginTop: compact ? 40 : 56 }}>
          <a href="/el-vigia/" style={{
            fontFamily: FONT_SANS, fontSize: 14,
            color: C.terracotta, textDecoration: 'underline',
            textUnderlineOffset: 4, letterSpacing: '0.02em',
            fontWeight: 500,
          }}>Leer todas las entregas →</a>
        </div>
      </div>
    </section>
  );
}

// ─── Founding Partners CTA ───
function FoundingCTA({ compact = false }) {
  return (
    <section id="contacto" style={{
      background: C.navy,
      color: C.bone,
      padding: compact ? '88px 24px' : '160px 56px',
      borderTop: `1px solid ${C.navy}`,
      scrollMarginTop: 80,
    }}>
      <div style={{ maxWidth: compact ? 'none' : 1080, margin: '0 auto' }}>
        <div style={{
          fontFamily: FONT_SANS, fontSize: 11, color: C.terracotta,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          fontWeight: 600, marginBottom: 24,
        }}>Consejo fundador</div>
        <h2 style={{
          fontFamily: FONT_SERIF, fontWeight: 500,
          fontSize: compact ? 44 : 84, color: C.bone,
          lineHeight: 1.02, letterSpacing: '-0.02em',
          margin: 0, marginBottom: compact ? 32 : 48,
          maxWidth: 1000,
        }}>La ventana se mide en meses, no en años.</h2>
        <p style={{
          fontFamily: FONT_SERIF, fontSize: compact ? 19 : 23,
          color: '#D9D2C3', lineHeight: 1.5,
          maxWidth: 780, margin: 0, marginBottom: compact ? 40 : 56,
          fontWeight: 400,
        }}>
          El consejo fundador de CLASIA se integra por invitación expresa. Para conversaciones estratégicas con los fundadores, escríbenos.
        </p>
        <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="mailto:contacto@clasia.org?subject=CLASIA" style={{
            fontFamily: FONT_MONO, fontSize: compact ? 14 : 16,
            color: C.bone, textDecoration: 'none',
            letterSpacing: '0.18em',
            borderBottom: `1px solid ${C.terracotta}`,
            paddingBottom: 4,
          }}>CONTACTO@CLASIA.ORG</a>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ───
function Footer({ compact = false }) {
  const cols = [
    { title: 'Proyecto', items: ['Manifiesto', 'Programa', 'Fundadores', 'Gobernanza'] },
    { title: 'Publicaciones', items: ['El Vigía', 'Diccionario Latinoamericano de la IA', 'Investigación', 'Bibliopatía'] },
    { title: 'Contacto', items: ['contacto@clasia.org', 'Ciudad de México', 'Bogotá · Santiago · São Paulo', 'LinkedIn'] },
  ];
  return (
    <footer style={{
      background: C.bone,
      padding: compact ? '56px 24px 32px' : '88px 56px 48px',
      borderTop: `1px solid ${C.rule}`,
    }}>
      <div style={{ maxWidth: compact ? 'none' : 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : '1.4fr 1fr 1fr 1fr',
          gap: compact ? 40 : 48,
          marginBottom: compact ? 48 : 72,
        }}>
          <div>
            <Logo small color={C.navy} showTagline />
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div style={{
                fontFamily: FONT_MONO, fontSize: 10.5,
                color: C.terracotta, letterSpacing: '0.22em',
                textTransform: 'uppercase', fontWeight: 600,
                marginBottom: 20,
              }}>{c.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.items.map((it, j) => (
                  <li key={j} style={{
                    fontFamily: FONT_SERIF, fontSize: 15,
                    color: C.body,
                  }}>{it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          borderTop: `1px solid ${C.rule}`,
          paddingTop: 24,
          display: 'flex', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{
            fontFamily: FONT_MONO, fontSize: 10.5,
            color: C.muted, letterSpacing: '0.18em',
            textTransform: 'uppercase',
          }}>
            Centro Latinoamericano de Adaptación a la Super Inteligencia Artificial · 2026 · Ciudad de México
          </div>
          <div style={{
            fontFamily: FONT_MONO, fontSize: 10.5,
            color: C.muted, letterSpacing: '0.18em',
          }}>V · 0.1 · FUNDACIONAL</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Portrait, Fundadores, ElVigia, FoundingCTA, Footer });