// THEME B · Edu Lab — Estudiante con formación financiera
// Densidad media. Capa pedagógica activable encima del mismo dato.
// Notebook/atelier feel: cuadrícula sutil, anotaciones a mano, conceptos resaltados.

const ED = {
  bg:        '#F5F1E6',      // cream paper
  bgGrid:    '#EAE3D2',      // light grid lines (very faint)
  surface:   '#FBF8F0',
  ink:       '#1B1814',
  inkSoft:   '#454039',
  mute:      '#807866',
  divider:   '#DCD3BC',
  marker:    '#C0392B',      // editorial red pen for annotations
  highlight: '#F4D35E',      // soft yellow highlighter
  teal:      '#0F766E',      // concept token
  type: {
    serif: '"Newsreader", "Source Serif 4", Georgia, serif',
    sans:  '"Geist", "IBM Plex Sans", sans-serif',
    mono:  '"Geist Mono", "IBM Plex Mono", monospace',
    hand:  '"Caveat", "Newsreader", cursive',  // for annotations
  }
};

// ─── Spec card ──────────────────────────────────────────────────────────
function EduLabSpec() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: ED.bg,
      backgroundImage: `linear-gradient(${ED.bgGrid} 1px, transparent 1px), linear-gradient(90deg, ${ED.bgGrid} 1px, transparent 1px)`,
      backgroundSize: '24px 24px',
      color: ED.ink, padding: 36,
      fontFamily: ED.type.sans, overflow: 'hidden',
      '--mono': ED.type.mono,
    }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', color: ED.mute, fontFamily: ED.type.mono }}>TEMA B · ESTUDIANTE</div>
          <div style={{ fontSize: 36, fontFamily: ED.type.serif, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 8, lineHeight: 1.05 }}>
            Edu Lab
            <span style={{ position: 'relative', marginLeft: 6, display: 'inline-block' }}>
              <span style={{ position: 'absolute', inset: '6px -4px 4px -4px', background: ED.highlight, zIndex: 0 }} />
              <em style={{ position: 'relative', zIndex: 1, fontStyle: 'italic', color: ED.ink }}>aprende leyendo</em>
            </span>
          </div>
          <div style={{ fontSize: 13, color: ED.inkSoft, marginTop: 8, maxWidth: 400, lineHeight: 1.5 }}>
            Densidad media. <em>Misma escena que Market Story</em>, pero con conceptos resaltables, ejercicios y trazabilidad del razonamiento. Para usuarios que <strong>quieren entender el porqué</strong>.
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10, color: ED.mute, fontFamily: ED.type.mono, letterSpacing: '0.08em' }}>DENSIDAD</div>
          <div style={{ display: 'flex', gap: 3, marginTop: 6, justifyContent: 'flex-end' }}>
            {[1,2,3,4,5].map(i => <span key={i} style={{ width: 14, height: 4, borderRadius: 1, background: i <= 3 ? ED.ink : ED.divider }} />)}
          </div>
          <div style={{ fontSize: 11, color: ED.inkSoft, marginTop: 4, fontFamily: ED.type.mono }}>Media</div>
        </div>
      </div>

      {/* type */}
      <SpecHeading>Tipografía</SpecHeading>
      <div style={{ display: 'grid', gap: 8 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: `1px dashed ${ED.divider}`, paddingBottom: 6 }}>
          <span style={{ fontFamily: ED.type.serif, fontSize: 30, lineHeight: 1, fontWeight: 400 }}>¿Por qué <em>rebota</em>?</span>
          <span style={{ fontFamily: ED.type.mono, fontSize: 10, color: ED.mute }}>Newsreader · 30 · pregunta</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: `1px dashed ${ED.divider}`, paddingBottom: 6 }}>
          <span style={{ fontFamily: ED.type.sans, fontSize: 14, color: ED.inkSoft, lineHeight: 1.55 }}>
            Cuando un <span style={{ background: ED.highlight, padding: '0 3px', borderRadius: 2 }}>sector pesado</span> sube fuerte, arrastra al índice entero.
          </span>
          <span style={{ fontFamily: ED.type.mono, fontSize: 10, color: ED.mute }}>Geist · 14 · explicación</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontFamily: ED.type.serif, fontStyle: 'italic', fontSize: 16, color: ED.marker }}>
            « ojo: contribución, no precio »
          </span>
          <span style={{ fontFamily: ED.type.mono, fontSize: 10, color: ED.mute }}>nota al margen · marker</span>
        </div>
      </div>

      {/* tokens */}
      <SpecHeading>Acentos del tema</SpecHeading>
      <div>
        <Swatch name="edu.highlight"        hex={ED.highlight} note="Resaltado de concepto · sobre palabra clave" />
        <Swatch name="edu.marker"           hex={ED.marker}    note="Anotación / nota al margen · serif itálica" />
        <Swatch name="edu.concept"          hex={ED.teal}      note="Token de concepto · activa tarjeta explicativa" />
        <Swatch name="finaz.provenance"     hex={FINAZ_TOKENS.provenance} note="Fuente original del dato" />
      </div>

      {/* learning pattern */}
      <SpecHeading>Patrón de aprendizaje</SpecHeading>
      <div style={{ display: 'grid', gap: 8 }}>
        {[
          ['1. Observa', 'gráfico protagonista, sin interpretación'],
          ['2. Conceptos', 'palabras subrayadas abren ficha lateral'],
          ['3. Razona', 'cadena causa→efecto con fuentes en cada eslabón'],
          ['4. Comprueba', 'pequeño ejercicio de respuesta múltiple'],
        ].map(([title, sub]) => (
          <div key={title} style={{ display: 'flex', alignItems: 'baseline', gap: 12, padding: '8px 12px', background: ED.surface, borderRadius: 4, border: `1px solid ${ED.divider}`, borderLeft: `3px solid ${ED.teal}` }}>
            <div style={{ fontSize: 12, fontWeight: 600, fontFamily: ED.type.mono, color: ED.ink, minWidth: 86 }}>{title}</div>
            <div style={{ fontSize: 12, color: ED.inkSoft }}>{sub}</div>
          </div>
        ))}
      </div>

      {/* do/dont */}
      <SpecHeading>Reglas del tema</SpecHeading>
      <DoDont items={[
        { kind: 'do',   text: 'Mostrar el razonamiento: dato → fuente → conclusión.' },
        { kind: 'dont', text: 'Convertir la lección en consejo financiero.' },
        { kind: 'do',   text: 'Permitir freeze para explicar un concepto sin perder el hilo.' },
        { kind: 'dont', text: 'Saturar la primera escena con jerga sin explicación.' },
      ]} />

      <div style={{ position: 'absolute', bottom: 24, left: 36, right: 36, display: 'flex', justifyContent: 'space-between', fontFamily: ED.type.mono, fontSize: 10, color: ED.mute, letterSpacing: '0.08em' }}>
        <span>FORMAR · INFORMAR · ENTRETENER</span>
        <span>OBJETIVO PEDAGÓGICO POR ESCENA</span>
      </div>
    </div>
  );
}

// ─── Screen archetype ──────────────────────────────────────────────────
function EduLabScreen() {
  const { d, area, px, py } = scenarioPath(520, 180, 6);

  return (
    <div style={{
      width: '100%', height: '100%',
      background: ED.bg,
      backgroundImage: `linear-gradient(${ED.bgGrid} 1px, transparent 1px), linear-gradient(90deg, ${ED.bgGrid} 1px, transparent 1px)`,
      backgroundSize: '24px 24px',
      color: ED.ink, fontFamily: ED.type.sans,
      display: 'grid', gridTemplateColumns: '1fr 340px',
      overflow: 'hidden', '--mono': ED.type.mono,
    }}>
      {/* main */}
      <div style={{ padding: '30px 34px', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* top */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 22, height: 22, background: ED.ink, borderRadius: 4, display: 'grid', placeItems: 'center', color: ED.bg, fontFamily: ED.type.serif, fontWeight: 600, fontSize: 13 }}>F</div>
            <span style={{ fontSize: 12, fontFamily: ED.type.mono, letterSpacing: '0.1em', color: ED.mute }}>FINAZ · EDU LAB</span>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 8px', background: ED.teal, color: '#fff', fontSize: 10, fontFamily: ED.type.mono, letterSpacing: '0.1em', borderRadius: 3 }}>
              <span style={{ width: 5, height: 5, borderRadius: 99, background: '#fff' }}/>LECCIÓN 4 · ÍNDICES SECTORIALES
            </span>
            <StateChip state="MOCK"/>
          </div>
        </div>

        {/* question */}
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: ED.type.mono, fontSize: 10, color: ED.teal, marginBottom: 6, alignSelf: 'flex-start', letterSpacing: '0.12em' }}>
          <span style={{ width: 16, height: 1, background: ED.teal }} />
          PREGUNTA DE LA ESCENA
        </div>
        <h1 style={{ margin: 0, fontFamily: ED.type.serif, fontSize: 36, fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.02em', color: ED.ink, maxWidth: 580 }}>
          ¿Por qué el IBEX SIM <em style={{ color: ED.marker, position: 'relative' }}>rebota</em> si la sesión empezó cayendo?
        </h1>

        {/* chart with annotations */}
        <div style={{ position: 'relative', marginTop: 20, padding: '12px', background: ED.surface, border: `1px solid ${ED.divider}`, borderRadius: 4 }}>
          <svg viewBox="0 0 520 180" width="100%" height="180" style={{ display: 'block' }} preserveAspectRatio="none">
            {[0.25, 0.5, 0.75].map(p => (
              <line key={p} x1="0" x2="520" y1={180*p} y2={180*p} stroke={ED.divider} strokeDasharray="1 3" />
            ))}
            <path d={area} fill={ED.teal} fillOpacity="0.06" />
            <path d={d} stroke={ED.teal} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            {/* highlighted region: where banca leads */}
            <rect x={px(13)} y="0" width={px(22)-px(13)} height="180" fill={ED.highlight} fillOpacity="0.25" />
            {/* annotation */}
            <text x={px(17.5)} y="22" textAnchor="middle" fontFamily={ED.type.serif} fontStyle="italic" fontSize="13" fill={ED.marker}>banca lidera +2,4%</text>
            <path d={`M ${px(14)} 26 Q ${px(15)} 42, ${px(15)} 60`} stroke={ED.marker} strokeWidth="1.2" fill="none" />
            {/* event dots */}
            {SCENARIO.events.map(ev => {
              const cx = px(ev.t);
              const cy = py(SCENARIO.series.find(s => s.i === ev.t).v);
              return <circle key={ev.time} cx={cx} cy={cy} r="3.5" fill={ED.bg} stroke={ED.ink} strokeWidth="1.4" />;
            })}
          </svg>
        </div>

        {/* causal chain */}
        <div style={{ marginTop: 18 }}>
          <div style={{ fontFamily: ED.type.mono, fontSize: 10, letterSpacing: '0.12em', color: ED.mute, marginBottom: 10 }}>CADENA CAUSA → EFECTO</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 14px 1fr 14px 1fr', gap: 10, alignItems: 'stretch' }}>
            {[
              { tag: '1', t: 'Dato macro menor al esperado', src: 'SIM-NEWS-006' },
              { tag: '2', t: 'Cambia la expectativa de tipos', src: 'razonamiento' },
              { tag: '3', t: 'Banca sube +2,4% y arrastra al índice', src: 'SIM-SECTOR-004' },
            ].map((step, idx, arr) => (
              <React.Fragment key={step.tag}>
                <div style={{ background: ED.surface, border: `1px solid ${ED.divider}`, padding: '10px 12px', borderRadius: 4, position: 'relative' }}>
                  <div style={{ fontFamily: ED.type.mono, fontSize: 10, color: ED.teal, fontWeight: 700, letterSpacing: '0.1em' }}>PASO {step.tag}</div>
                  <div style={{ fontSize: 13, marginTop: 4, color: ED.ink, lineHeight: 1.35 }}>{step.t}</div>
                  <div style={{ fontFamily: ED.type.mono, fontSize: 9, color: ED.mute, marginTop: 6 }}>fuente: {step.src}</div>
                </div>
                {idx < arr.length - 1 && (
                  <div style={{ display: 'grid', placeItems: 'center', color: ED.ink, fontFamily: ED.type.mono, fontSize: 16, fontWeight: 600 }}>→</div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* mini quiz */}
        <div style={{ marginTop: 18, background: ED.surface, border: `1px solid ${ED.divider}`, borderLeft: `3px solid ${ED.marker}`, borderRadius: 4, padding: '14px 16px' }}>
          <div style={{ fontFamily: ED.type.mono, fontSize: 10, color: ED.marker, fontWeight: 700, letterSpacing: '0.12em', marginBottom: 8 }}>COMPRUEBA</div>
          <div style={{ fontFamily: ED.type.serif, fontSize: 16, color: ED.ink, marginBottom: 10 }}>Si banca sube +2,4% pero pesa solo un 25% del índice, ¿cuánto aporta al movimiento total?</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {['+2,4 pp', '+0,60 pp', '+0,25 pp', 'no se puede saber'].map((opt, i) => (
              <button key={i} style={{
                padding: '7px 12px', fontSize: 12,
                background: i === 1 ? ED.teal : ED.bg,
                color: i === 1 ? '#fff' : ED.ink,
                border: `1px solid ${i === 1 ? ED.teal : ED.divider}`,
                borderRadius: 3, fontFamily: ED.type.sans, cursor: 'pointer',
              }}>{opt}{i === 1 && ' ✓'}</button>
            ))}
          </div>
        </div>
      </div>

      {/* concept rail */}
      <aside style={{ background: ED.surface, padding: '30px 22px', borderLeft: `1px solid ${ED.divider}`, overflow: 'hidden' }}>
        <div style={{ fontFamily: ED.type.mono, fontSize: 10, color: ED.mute, letterSpacing: '0.14em', marginBottom: 12 }}>CONCEPTO EN ESTUDIO</div>
        <div style={{ fontFamily: ED.type.serif, fontSize: 22, lineHeight: 1.15, fontWeight: 400 }}>
          Contribución <span style={{ background: ED.highlight, padding: '0 4px' }}>(weighted attribution)</span>
        </div>
        <div style={{ fontSize: 12, color: ED.inkSoft, marginTop: 10, lineHeight: 1.5 }}>
          Cuánto aporta cada componente al movimiento total del índice. Combina <strong>peso</strong> en el índice y <strong>variación</strong> del sector.
        </div>
        <div style={{ marginTop: 12, padding: 12, background: ED.bg, borderRadius: 4, fontFamily: ED.type.mono, fontSize: 11.5, color: ED.ink, lineHeight: 1.6, border: `1px dashed ${ED.divider}` }}>
          contribución = peso × variación<br/>
          <span style={{ color: ED.teal }}>banca</span> = 25% × +2,4% = <strong>+0,60 pp</strong>
        </div>

        <div style={{ marginTop: 24, fontFamily: ED.type.mono, fontSize: 10, color: ED.mute, letterSpacing: '0.14em', marginBottom: 10 }}>OTROS CONCEPTOS DE LA LECCIÓN</div>
        {[
          ['Índice ponderado',  'definición'],
          ['Drawdown intradía', '−2,80% hoy'],
          ['Resistencia técnica','11.340 SIM'],
          ['Quality gate',      'lenguaje no recomendación'],
        ].map(([k, sub]) => (
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0', borderTop: `1px solid ${ED.divider}`, cursor: 'pointer' }}>
            <div>
              <div style={{ fontSize: 13, color: ED.ink, fontFamily: ED.type.serif }}>{k}</div>
              <div style={{ fontSize: 10, color: ED.mute, fontFamily: ED.type.mono, marginTop: 2 }}>{sub}</div>
            </div>
            <span style={{ color: ED.teal, fontFamily: ED.type.mono, fontSize: 14 }}>+</span>
          </div>
        ))}

        {/* margin annotation */}
        <div style={{
          marginTop: 24, padding: 14,
          background: '#fff', border: `1px solid ${ED.divider}`,
          fontFamily: ED.type.serif, fontStyle: 'italic',
          fontSize: 14, color: ED.marker, lineHeight: 1.4,
          transform: 'rotate(-0.5deg)',
          borderTop: `2px solid ${ED.marker}`,
        }}>
          “Si un sector minúsculo sube mucho, mueve poco el índice. Lo importante es el <strong>peso</strong>.”
          <div style={{ fontFamily: ED.type.mono, fontStyle: 'normal', fontSize: 9, color: ED.mute, marginTop: 6, letterSpacing: '0.08em' }}>— NOTA AL MARGEN</div>
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { EduLabSpec, EduLabScreen, ED_TOKENS: ED });