/* global React, Eyebrow, Icon, SectionShell, GridBG */

function ValueCard({ icon, accent, title, body }) {
  const [hover, setHover] = React.useState(false);
  const isMg = accent === 'magenta';
  const c = isMg ? 'var(--neon-magenta)' : 'var(--neon-cyan)';
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'var(--surface-4)' : 'var(--surface-3)',
        border: `1px solid ${hover ? (isMg ? 'rgba(255,0,127,.4)' : 'var(--hairline-strong)') : 'var(--hairline)'}`,
        borderRadius: 'var(--r-lg)', padding: 28, boxShadow: 'var(--shadow-card)',
        transition: 'all 180ms ease', transform: hover ? 'translateY(-3px)' : 'none',
      }}>
      <div style={{ width: 48, height: 48, borderRadius: 'var(--r-md)',
        background: isMg ? 'var(--magenta-soft)' : 'var(--cyan-soft)',
        border: `1px solid ${isMg ? 'rgba(255,0,127,.3)' : 'rgba(0,229,255,.3)'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
        <Icon name={icon} size={24} color={c} stroke={2} />
      </div>
      <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 22,
        textTransform: 'uppercase', letterSpacing: '.01em', color: 'var(--fg-1)', margin: '0 0 10px' }}>{title}</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>{body}</p>
    </div>
  );
}

function Philosophy() {
  return (
    <SectionShell id="filosofia" bg="var(--surface-1)">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'clamp(28px,4vw,56px)', alignItems: 'start' }} className="cdt-2col">
        <div>
          <Eyebrow>Quiénes somos</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px,4vw,48px)',
            lineHeight: 1.08, textTransform: 'uppercase', color: 'var(--fg-1)', margin: '18px 0 0' }}>
            Nuestra metodología<br />vs. el resto
          </h2>
        </div>
        <div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0 }}>
            No usamos indicadores mágicos, líneas sin sentido ni retrocesos de Fibonacci subjetivos.
            Entendemos de forma profunda el porqué detrás de cada movimiento del precio: por qué
            fallamos y por qué acertamos. <strong style={{ color: 'var(--fg-1)', fontWeight: 600 }}>Eliminamos el azar de la ecuación.</strong>
          </p>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 20, marginTop: 'clamp(40px,5vw,64px)' }} className="cdt-3col">
        <ValueCard icon="dumbbell" accent="cyan" title="Disciplina inquebrantable"
          body="El trading se entrena con repetición y constancia diaria. No hay talento que supere a la disciplina." />
        <ValueCard icon="target" accent="magenta" title="Rigor técnico"
          body="Operamos sobre estructuras de mercado reales y datos objetivos. Cada decisión tiene respaldo analítico." />
        <ValueCard icon="eye" accent="cyan" title="Transparencia"
          body="Mostramos el proceso real. Las pérdidas son parte del entrenamiento; la consistencia es la meta." />
      </div>
    </SectionShell>
  );
}

window.Philosophy = Philosophy;