// landing-parts2.jsx — remaining sections

// ─── Qué es CLASIA ───
function QueEs({ compact = false }) {
  const activities = [
    { t: 'Investigar', d: 'Qué habilidades se vuelven obsoletas cada trimestre, qué aparece, cómo se reconfigura el empleo en América Latina.' },
    { t: 'Capacitar', d: 'Programas que no titulan, equipan para el siguiente paso. Alfabetización masiva en IA como primer pilar.' },
    { t: 'Difundir', d: 'Llevar el conocimiento con intención didáctica a los públicos que quedarían fuera.' },
  ];

  return (
    <section id="que-es" 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>Una respuesta regional</CatLabel>
        <h2 style={{
          fontFamily: FONT_SERIF, fontWeight: 500,
          fontSize: compact ? 32 : 56, color: C.navy,
          lineHeight: 1.08, letterSpacing: '-0.015em',
          margin: 0, marginBottom: compact ? 56 : 96,
          maxWidth: compact ? '100%' : 960,
        }}>
          CLASIA no es un <span style={{ textDecoration: `line-through ${C.terracotta}`, textDecorationThickness: 2 }}>think tank</span>. Es una institución de adaptación continua.
        </h2>

        {/* Three activities */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : 'repeat(3, 1fr)',
          gap: compact ? 40 : 64,
          marginBottom: compact ? 64 : 112,
          borderTop: `1px solid ${C.rule}`,
          paddingTop: compact ? 36 : 48,
        }}>
          {activities.map((a, i) => (
            <div key={i}>
              <div style={{
                fontFamily: FONT_MONO, fontSize: 11,
                color: C.terracotta, letterSpacing: '0.18em',
                marginBottom: 14,
              }}>{String(i + 1).padStart(2, '0')} / 03</div>
              <h3 style={{
                fontFamily: FONT_SERIF, fontWeight: 500,
                fontSize: compact ? 32 : 40, color: C.navy,
                margin: 0, marginBottom: 18,
                letterSpacing: '-0.01em',
              }}>{a.t}</h3>
              <p style={{
                fontFamily: FONT_SERIF, fontSize: compact ? 17 : 18,
                color: C.body, lineHeight: 1.55,
                margin: 0, fontWeight: 400,
              }}>{a.d}</p>
            </div>
          ))}
        </div>

        {/* Humanist paragraph */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : '1fr 1fr',
          gap: compact ? 40 : 80,
          alignItems: 'start',
        }}>
          <div>
            <CatLabel>Enfoque humanista</CatLabel>
            <p style={{
              fontFamily: FONT_SERIF, fontSize: compact ? 19 : 22,
              color: C.body, lineHeight: 1.5, margin: 0,
              fontWeight: 400,
            }}>
              CLASIA coloca el lenguaje, la cultura, la educación y el trabajo en el centro de la conversación sobre inteligencia artificial. La adaptación no es un asunto técnico: es un proyecto civilizatorio.
            </p>
          </div>
          <HubMap compact={compact} />
        </div>
      </div>
    </section>
  );
}

// ─── Hub map ───
function HubMap({ compact = false }) {
  // Central CDMX, satellites São Paulo, Santiago, Bogotá
  // Simple abstract: use x/y coords approximating LATAM geography
  const w = compact ? 320 : 520;
  const h = compact ? 280 : 380;
  const hubs = {
    cdmx: { x: 0.22, y: 0.22, label: 'Ciudad de México', sub: 'SEDE', central: true },
    bogota: { x: 0.33, y: 0.48, label: 'Bogotá', sub: 'HUB' },
    saopaulo: { x: 0.68, y: 0.70, label: 'São Paulo', sub: 'HUB' },
    santiago: { x: 0.46, y: 0.88, label: 'Santiago', sub: 'HUB' },
  };

  const cx = hubs.cdmx.x * w, cy = hubs.cdmx.y * h;

  return (
    <div style={{ position: 'relative' }}>
      <div style={{
        fontFamily: FONT_MONO, fontSize: 10,
        color: C.muted, letterSpacing: '0.2em',
        marginBottom: 14, textTransform: 'uppercase',
      }}>Sede + hubs regionales</div>
      <svg width={w} height={h} style={{ display: 'block', background: C.bone, border: `1px solid ${C.rule}` }}>
        {/* Latitude ticks */}
        {[0.2, 0.4, 0.6, 0.8].map((f, i) => (
          <line key={i} x1={0} x2={w} y1={f * h} y2={f * h} stroke={C.rule} strokeWidth={0.5} strokeDasharray="2 4" />
        ))}
        {/* Connection lines */}
        {['bogota', 'saopaulo', 'santiago'].map((k, i) => {
          const p = hubs[k];
          return (
            <line key={i}
              x1={cx} y1={cy}
              x2={p.x * w} y2={p.y * h}
              stroke={C.terracotta} strokeWidth={0.8}
              strokeDasharray="3 4" opacity={0.65}
            />
          );
        })}
        {/* Nodes */}
        {Object.entries(hubs).map(([k, p], i) => {
          const x = p.x * w, y = p.y * h;
          const r = p.central ? 7 : 4;
          return (
            <g key={i}>
              {p.central && <circle cx={x} cy={y} r={r + 6} fill="none" stroke={C.terracotta} strokeWidth={0.6} />}
              <circle cx={x} cy={y} r={r} fill={p.central ? C.terracotta : C.navy} />
              <text x={x + 12} y={y + 4} style={{
                fontFamily: FONT_SERIF, fontSize: compact ? 12 : 14,
                fill: C.navy, fontWeight: 500,
              }}>{p.label}</text>
              <text x={x + 12} y={y + 18} style={{
                fontFamily: FONT_MONO, fontSize: 9,
                fill: C.muted, letterSpacing: '0.15em',
              }}>{p.sub}</text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

// ─── Objetivos prioritarios ───
function Objetivos({ compact = false }) {
  return (
    <section id="objetivos" 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>Objetivos prioritarios</CatLabel>
        <h2 style={{
          fontFamily: FONT_SERIF, fontWeight: 500,
          fontSize: compact ? 32 : 52, color: C.navy,
          lineHeight: 1.08, letterSpacing: '-0.015em',
          margin: 0, marginBottom: compact ? 48 : 80,
          maxWidth: 900,
        }}>Dos frentes donde la región no puede esperar.</h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : '1fr 1fr',
          gap: compact ? 32 : 48,
        }}>
          {[
            {
              num: '01',
              t: 'Digitalizar a quién y cómo',
              it: 'Elementos de IA Latinoamérica',
              b: 'Curso masivo, gratuito, en español, portugués y lenguas indígenas, con trayectos diferenciados.',
              metric: '50 000',
              metricSub: 'usuarios · año 1',
              metric2: '500 000',
              metric2Sub: 'usuarios · tres años',
            },
            {
              num: '02',
              t: 'Mujeres y América Latina',
              it: 'Observatorio y programa con enfoque de género',
              b: 'Las mujeres son mayoría en los empleos más expuestos a la disrupción por IA en la región. CLASIA crea el Observatorio Regional de Impacto Laboral con corte de género y territorio, programa de reconversión y liderazgo femenino, y publicaciones anuales sobre la brecha.',
            },
          ].map((c, i) => (
            <div key={i} style={{
              background: C.white,
              borderLeft: `4px solid ${C.navy}`,
              padding: compact ? '32px 28px' : '48px 44px',
            }}>
              <div style={{
                fontFamily: FONT_MONO, fontSize: 11,
                color: C.terracotta, letterSpacing: '0.2em',
                marginBottom: 20,
              }}>OBJETIVO {c.num}</div>
              <h3 style={{
                fontFamily: FONT_SERIF, fontWeight: 500,
                fontSize: compact ? 28 : 34, color: C.navy,
                margin: 0, marginBottom: 8,
                letterSpacing: '-0.01em', lineHeight: 1.1,
              }}>{c.t}</h3>
              <div style={{
                fontFamily: FONT_SERIF, fontStyle: 'italic',
                fontSize: compact ? 17 : 19, color: C.terracotta,
                marginBottom: 24,
              }}>{c.it}</div>
              <p style={{
                fontFamily: FONT_SERIF, fontSize: compact ? 16 : 17,
                color: C.body, lineHeight: 1.55,
                margin: 0, marginBottom: c.metric ? 32 : 0,
              }}>{c.b}</p>
              {c.metric && (
                <div style={{
                  display: 'flex', gap: 32,
                  borderTop: `1px solid ${C.rule}`,
                  paddingTop: 24, marginTop: 24,
                }}>
                  <div>
                    <div style={{
                      fontFamily: FONT_SERIF, fontSize: compact ? 36 : 44,
                      color: C.terracotta, fontWeight: 400,
                      letterSpacing: '-0.02em', lineHeight: 1,
                    }}>{c.metric}</div>
                    <div style={{
                      fontFamily: FONT_MONO, fontSize: 10.5,
                      color: C.muted, letterSpacing: '0.15em',
                      marginTop: 8, textTransform: 'uppercase',
                    }}>{c.metricSub}</div>
                  </div>
                  <div>
                    <div style={{
                      fontFamily: FONT_SERIF, fontSize: compact ? 36 : 44,
                      color: C.terracotta, fontWeight: 400,
                      letterSpacing: '-0.02em', lineHeight: 1,
                    }}>{c.metric2}</div>
                    <div style={{
                      fontFamily: FONT_MONO, fontSize: 10.5,
                      color: C.muted, letterSpacing: '0.15em',
                      marginTop: 8, textTransform: 'uppercase',
                    }}>{c.metric2Sub}</div>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Programa ───
function Programa({ compact = false }) {
  const rows = [
    { f: '0 — Constitución', m: '1–3', foco: 'Figura jurídica, gobernanza, equipo núcleo, sede' },
    { f: '1 — Pilotos', m: '4–12', foco: 'Elementos de IA LATAM, Observatorio de género, Laboratorio Cultura/Creatividad' },
    { f: '2 — Escalamiento', m: '13–24', foco: 'Expansión a hubs regionales, alianzas, membresías' },
  ];
  return (
    <section id="programa" 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>Programa de trabajo</CatLabel>
        <h2 style={{
          fontFamily: FONT_SERIF, fontWeight: 500,
          fontSize: compact ? 36 : 64, color: C.navy,
          lineHeight: 1.05, letterSpacing: '-0.015em',
          margin: 0, marginBottom: compact ? 48 : 80,
          maxWidth: 800,
        }}>Tres fases en 24 meses</h2>

        {/* Table */}
        {compact ? (
          <div style={{ marginBottom: 48 }}>
            {rows.map((r, i) => (
              <div key={i} style={{
                borderTop: `1px solid ${C.navy}`,
                padding: '20px 0',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontFamily: FONT_SERIF, fontSize: 20, color: C.navy, fontWeight: 500 }}>FASE {r.f}</span>
                  <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: C.muted, letterSpacing: '0.1em' }}>MESES {r.m}</span>
                </div>
                <div style={{ fontFamily: FONT_SERIF, fontSize: 15.5, color: C.body, lineHeight: 1.5 }}>{r.foco}</div>
              </div>
            ))}
            <div style={{ borderTop: `1px solid ${C.navy}` }} />
          </div>
        ) : (
          <table style={{
            width: '100%',
            borderCollapse: 'collapse',
            fontFamily: FONT_SANS,
            marginBottom: 64,
          }}>
            <thead>
              <tr style={{ borderTop: `2px solid ${C.navy}`, borderBottom: `1px solid ${C.navy}` }}>
                {['Fase', 'Meses', 'Foco'].map((h, i) => (
                  <th key={i} style={{
                    textAlign: 'left',
                    padding: '16px 16px 16px 0',
                    fontFamily: FONT_MONO, fontSize: 11,
                    color: C.muted, letterSpacing: '0.2em',
                    fontWeight: 500, textTransform: 'uppercase',
                    width: i === 0 ? '28%' : i === 1 ? '14%' : '58%',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} style={{ borderBottom: `1px solid ${C.rule}` }}>
                  <td style={{ padding: '24px 16px 24px 0', fontFamily: FONT_SERIF, fontSize: 19, color: C.navy, fontWeight: 500, verticalAlign: 'top' }}>{r.f}</td>
                  <td style={{ padding: '26px 16px 24px 0', fontFamily: FONT_MONO, fontSize: 14, color: C.body, verticalAlign: 'top' }}>{r.m}</td>
                  <td style={{ padding: '24px 16px 24px 0', fontFamily: FONT_SERIF, fontSize: 17, color: C.body, lineHeight: 1.45, verticalAlign: 'top' }}>{r.foco}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}

        {/* Governance + invitation note (no financial figures) */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : '1fr 1fr',
          gap: compact ? 32 : 80,
          paddingTop: 16,
        }}>
          <div>
            <CatLabel>Gobernanza</CatLabel>
            <p style={{ fontFamily: FONT_SERIF, fontSize: compact ? 16 : 17, color: C.body, lineHeight: 1.6, margin: 0 }}>
              Presidencia ejecutiva por cinco años, consejo escalonado de siete a nueve integrantes con renovación en bandas. Diseñada para no morir por exceso de rotación.
            </p>
          </div>
          <div>
            <CatLabel>Programa completo</CatLabel>
            <p style={{ fontFamily: FONT_SERIF, fontSize: compact ? 16 : 17, color: C.body, lineHeight: 1.6, margin: 0 }}>
              El plan de trabajo detallado, los hitos verificables por fase y el presupuesto asociado se comparten bajo solicitud con socios fundadores potenciales. <a href="mailto:contacto@clasia.org?subject=Programa%20completo%20CLASIA" style={{ color: C.terracotta, textDecoration: 'underline', textUnderlineOffset: 3 }}>contacto@clasia.org</a>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { QueEs, HubMap, Objetivos, Programa });