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

/* Sección "Quién te va a formar" — la cara humana de la academia.
   El resto de la web habla en "nosotros" (gremio); aquí se baja al plano
   personal: foto real, trayectoria honesta y cero promesas. El contenido
   sale tal cual del documento del fundador (sobre-david-planisi-jimenez.md):
   NO inventar cifras, resultados ni frases entrecomilladas suyas. */

// Un dato duro de su trayectoria (Orbitron para el número, como los precios de Niveles).
function FounderStat({ value, label }) {
  return (
    <div style={{ flex: '1 1 140px', minWidth: 0 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(26px,3vw,32px)',
        lineHeight: 1, color: 'var(--fg-1)' }}>{value}</div>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.45,
        color: 'var(--fg-3)', marginTop: 8 }}>{label}</div>
    </div>
  );
}

// Un escalón del camino. El rail superior (cian → transparente) hace de línea de
// tiempo cuando los tres van en fila; en móvil, apilados, sigue leyéndose igual.
function FounderStep({ n, title, body }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: 'relative', background: hover ? 'var(--surface-4)' : 'var(--surface-3)',
        border: `1px solid ${hover ? 'var(--hairline-strong)' : 'var(--hairline)'}`,
        borderRadius: 'var(--r-md)', padding: '26px 24px 24px',
        transition: 'all 180ms ease', transform: hover ? 'translateY(-3px)' : 'none' }}>
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        borderRadius: 'var(--r-md) var(--r-md) 0 0',
        background: 'linear-gradient(90deg, var(--neon-cyan), rgba(0,229,255,0))' }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--neon-cyan)',
          boxShadow: 'var(--glow-cyan-sm)', flexShrink: 0 }} />
        <span style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 12,
          letterSpacing: '.18em', color: 'var(--neon-cyan)' }}>{n}</span>
      </div>
      <h4 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 19,
        textTransform: 'uppercase', letterSpacing: '.02em', color: 'var(--fg-1)', margin: '0 0 8px' }}>{title}</h4>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>{body}</p>
    </div>
  );
}

function Founder({ onApply }) {
  // Los dos mercados que opera. El 6E es además el gráfico del hero: el guiño es intencionado.
  const markets = [['6E', 'Euro FX'], ['ES', 'E-mini S&P 500']];

  return (
    <SectionShell id="david" bg="var(--surface-2)">
      <GridBG opacity={0.045} style={{ maskImage: 'radial-gradient(circle at 28% 40%, #000 15%, transparent 70%)', WebkitMaskImage: 'radial-gradient(circle at 28% 40%, #000 15%, transparent 70%)' }} />

      <div className="cdt-2col cdt-david-grid" style={{ display: 'grid',
        gridTemplateColumns: 'minmax(0,0.92fr) minmax(0,1.08fr)',
        gap: 'clamp(32px,5vw,64px)', alignItems: 'center' }}>

        {/* ── Retrato ─────────────────────────────────────────────── */}
        <div>
          <div style={{ position: 'relative' }}>
            {/* marco desplazado: profundidad sin cargar la tarjeta */}
            <div aria-hidden className="cdt-david-frame" style={{ position: 'absolute', inset: 0,
              transform: 'translate(14px, 14px)', border: '1px solid var(--hairline-strong)',
              borderRadius: 'var(--r-lg)', pointerEvents: 'none' }} />
            <div style={{ position: 'relative', borderRadius: 'var(--r-lg)', overflow: 'hidden',
              border: '1px solid var(--hairline)', boxShadow: 'var(--shadow-card)', background: 'var(--surface-3)' }}>
              <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, zIndex: 2,
                background: 'linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta))' }} />
              <picture>
                <source srcSet="assets/david.webp" type="image/webp" />
                <img src="assets/david.jpg" width="880" height="1092" loading="lazy" decoding="async"
                  alt="David Planisi Jiménez, fundador de la Cámara del Trader"
                  style={{ display: 'block', width: '100%', height: 'auto',
                    filter: 'saturate(.9) contrast(1.05)' }} />
              </picture>
              {/* velo inferior: funde la foto con el fondo oscuro y da base a la placa */}
              <div aria-hidden style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '52%',
                background: 'linear-gradient(180deg, rgba(11,12,16,0) 0%, rgba(11,12,16,.55) 45%, rgba(11,12,16,.94) 100%)' }} />
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '22px 24px' }}>
                <div style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 12,
                  letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--neon-cyan)', marginBottom: 6 }}>
                  Fundador
                </div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.5, color: 'var(--fg-2)' }}>
                  Trader de futuros · Al frente de la comunidad cada día
                </div>
              </div>
            </div>
          </div>

          {/* Mercados que opera — mismas píldoras que las etiquetas del gráfico del hero */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginTop: 26 }}>
            <span style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 12,
              letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--fg-3)', marginRight: 2 }}>Opera en</span>
            {markets.map(([sym, name], i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'baseline', gap: 7,
                fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 13,
                letterSpacing: '.04em', color: 'var(--neon-cyan)',
                background: 'var(--cyan-soft)', border: '1px solid rgba(0,229,255,.25)',
                borderRadius: 'var(--r-pill)', padding: '6px 13px' }}>
                <strong style={{ fontWeight: 700, letterSpacing: '.08em' }}>{sym}</strong>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--fg-2)' }}>{name}</span>
              </span>
            ))}
          </div>
        </div>

        {/* ── Quién es ────────────────────────────────────────────── */}
        <div>
          <Eyebrow>Quién te va a formar</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px,3.6vw,46px)',
            lineHeight: 1.08, textTransform: 'uppercase', color: 'var(--fg-1)', margin: '18px 0 18px' }}>
            David Planisi<br /><span className="cdt-gradient-text">Jiménez</span>
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.65, color: 'var(--fg-2)',
            margin: '0 0 22px', maxWidth: 540 }}>
            Detrás de una academia hay una persona. David es un joven emprendedor, inquieto por los
            proyectos con valor de verdad, que descubrió el trading y los mercados al final de la
            secundaria. Desde entonces no ha soltado los gráficos:
            <strong style={{ color: 'var(--fg-1)', fontWeight: 600 }}> su camino es puro reflejo de la perseverancia</strong>.
          </p>

          <div style={{ display: 'flex', gap: 'clamp(20px,3vw,36px)', flexWrap: 'wrap',
            padding: '20px 0', borderTop: '1px solid var(--divider)', borderBottom: '1px solid var(--divider)',
            marginBottom: 24 }}>
            <FounderStat value="4 años" label="frente a los gráficos, en activo" />
            <FounderStat value="2 años" label="formándose de cerca con un mentor" />
          </div>

          <div style={{ background: 'var(--surface-3)', border: '1px solid rgba(0,229,255,.22)',
            borderLeft: '3px solid var(--neon-cyan)', borderRadius: 'var(--r-md)',
            padding: '18px 20px', marginBottom: 26 }}>
            <div style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
              <span style={{ marginTop: 2, flexShrink: 0 }}>
                <Icon name="eye" size={19} color="var(--neon-cyan)" stroke={2} />
              </span>
              <div>
                <p style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 16.5, lineHeight: 1.45,
                  color: 'var(--fg-1)', margin: '0 0 7px', letterSpacing: '.01em' }}>
                  Transparencia radical, no la figura del trader infalible.
                </p>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>
                  David se define como un profesional en constante evolución, y por eso comparte
                  públicamente su proceso diario y sus resultados dentro de la comunidad. Lo verás
                  antes de pagar nada.
                </p>
              </div>
            </div>
          </div>

          <Button variant="secondary" onClick={onApply} icon="arrow-right">Formarte con David</Button>
        </div>
      </div>

      {/* ── El camino ──────────────────────────────────────────────── */}
      <div style={{ marginTop: 'clamp(48px,6vw,76px)' }}>
        <div style={{ display: 'flex', gap: 'clamp(12px,3vw,40px)', alignItems: 'baseline',
          flexWrap: 'wrap', marginBottom: 'clamp(24px,3vw,32px)' }}>
          <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 'clamp(20px,2.2vw,26px)',
            textTransform: 'uppercase', letterSpacing: '.03em', color: 'var(--fg-1)', margin: 0 }}>
            El camino hasta aquí
          </h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)',
            margin: 0, maxWidth: 520 }}>
            Su objetivo con la academia es que tú no tengas que recorrerlo a ciegas.
          </p>
        </div>

        <div className="cdt-3col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 20 }}>
          <FounderStep n="01" title="Los inicios"
            body="Final de la secundaria. Descubre el trading y los mercados financieros, y ahí empieza todo." />
          <FounderStep n="02" title="Ensayo y error"
            body="Los primeros años, por su cuenta y sin atajos: aprender delante del gráfico a base de equivocarse." />
          <FounderStep n="03" title="El giro"
            body="Dos años formándose estrechamente con un mentor experimentado. De ahí salen la consistencia, sus mejores resultados y una lectura profunda y objetiva del mercado." />
        </div>
      </div>
    </SectionShell>
  );
}

window.Founder = Founder;