/* global React, SectionShell, Eyebrow, Icon */
/* Sección "Los dos pilares" (#pilares).
   Va justo después del hero porque el cambio de enfoque pide que la propuesta de
   valor quede clara desde el primer segundo: la academia ya no es solo trading.
   TODO el texto sale literal de `Cámara del Trader Design System/CAMBIOS_PAGINA_WEB.md`.
   No inventar frases: es la voz de David. */

function PillarCard({ kicker, title, body, bullets, accent, soft, icon }) {
  return (
    <div style={{ background: 'var(--surface-3)', border: '1px solid var(--hairline)',
      borderRadius: 'var(--r-lg)', padding: 'clamp(26px,3.5vw,38px)', boxShadow: 'var(--shadow-card)',
      display: 'flex', flexDirection: 'column', gap: 16, height: '100%' }}>

      <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
        <span style={{ width: 46, height: 46, borderRadius: 'var(--r-md)', background: soft,
          border: `1px solid ${accent}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name={icon} size={24} color={accent} stroke={2.1} />
        </span>
        <span style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 12,
          letterSpacing: '.12em', textTransform: 'uppercase', color: accent }}>{kicker}</span>
      </div>

      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(22px,2.6vw,30px)',
        lineHeight: 1.1, textTransform: 'uppercase', color: 'var(--fg-1)', margin: 0 }}>{title}</h3>

      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>{body}</p>

      <ul style={{ listStyle: 'none', padding: 0, margin: '4px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {bullets.map((b, i) => (
          <li key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start',
            fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.45, color: 'var(--fg-1)' }}>
            <span style={{ marginTop: 1, flexShrink: 0 }}><Icon name="check" size={18} color={accent} stroke={2.4} /></span>
            <span>{b}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Pillars() {
  return (
    <SectionShell id="pilares">
      {/* Entradilla CORTA a propósito (Juan, 2026-08-12): esta sección tiene que entrar de un
          vistazo. Antes eran dos párrafos largos; el desarrollo completo de cada pilar ya está
          en las dos tarjetas y en las dudas comunes. */}
      <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto' }}>
        <Eyebrow color="var(--neon-cyan)" style={{ display: 'inline-block' }}>Dos caminos, una misma filosofía</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(28px,4vw,46px)',
          lineHeight: 1.06, textTransform: 'uppercase', color: 'var(--fg-1)', margin: '14px 0 0' }}>
          Un ecosistema<br />de evolución
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(15px,1.4vw,17px)', lineHeight: 1.6,
          color: 'var(--fg-2)', margin: '16px 0 0' }}>
          Para sostener resultados en el mercado hay que construir antes la mentalidad. Y no hace falta ser trader para querer elevar tu vida. <strong style={{ color: 'var(--fg-1)', fontWeight: 600 }}>Tú decides dónde quieres entrar.</strong>
        </p>
      </div>

      <div className="cdt-2col" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)',
        gap: 'clamp(16px,2.4vw,26px)', margin: 'clamp(26px,3.4vw,38px) 0 0', alignItems: 'stretch' }}>
        <PillarCard
          kicker="Para cualquier persona"
          title="El pilar de la Mentalidad"
          body="Aquí no hablamos de velas ni de tendencias: hablamos de ti. Desarrollo personal para dejar de reaccionar al entorno y empezar a crear tu propio destino."
          bullets={[
            'Forjar una disciplina innegociable',
            'Dominar el cuerpo a través del físico',
            'Entender las leyes del universo para manifestar resultados',
            'Elevar tu nivel de conciencia',
          ]}
          accent="var(--neon-magenta)" soft="var(--magenta-soft)" icon="brain"
        />
        <PillarCard
          kicker="Para el operador"
          title="El pilar del Trading"
          body="La academia técnica pura. Para quienes buscan la maestría en los mercados a través de la lectura del precio, la estructura y la liquidez."
          bullets={[
            'Entender el contexto real del mercado',
            'Operar sin sesgarte',
            'Ejecutar con precisión quirúrgica',
            'El trabajo mental para no sabotearte frente a la pantalla',
          ]}
          accent="var(--neon-cyan)" soft="var(--cyan-soft)" icon="candlestick-chart"
        />
      </div>

      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(15px,1.4vw,17px)', lineHeight: 1.55,
        color: 'var(--fg-2)', textAlign: 'center', margin: 'clamp(20px,2.6vw,28px) auto 0', maxWidth: 600 }}>
        <strong style={{ color: 'var(--fg-1)', fontWeight: 600 }}>Elige dominar los mercados, elige dominarte a ti mismo, o elige ambas.</strong>
      </p>
    </SectionShell>
  );
}

window.Pillars = Pillars;