// THEME A · Market Story — Retail
// Calmado, pedagógico. Una pregunta por escena. Mucho aire, ilustración editorial sobria.

const MS = {
  bg:        '#FBFAF5',
  surface:   '#FFFFFF',
  ink:       '#15171C',
  inkSoft:   '#3F4350',
  mute:      '#7A7D89',
  divider:   '#ECE7DA',
  accent:    '#1F4FA8',         // editorial blue (less saturated than provenance token)
  accentSoft:'#E8EEFA',
  paper:     '#F4EFE2',         // sticky/teaching note bg
  type: {
    serif: '"Newsreader", "Source Serif 4", Georgia, serif',
    sans:  '"Geist", "IBM Plex Sans", -apple-system, sans-serif',
    mono:  '"Geist Mono", "IBM Plex Mono", ui-monospace, monospace',
  }
};

// ─── Spec card (ficha de tema) ──────────────────────────────────────────
function MarketStorySpec() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: MS.bg, color: MS.ink, padding: 36,
      fontFamily: MS.type.sans, overflow: 'hidden',
      '--mono': MS.type.mono,
    }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', color: MS.mute, fontFamily: MS.type.mono }}>TEMA A · RETAIL</div>
          <div style={{ fontSize: 36, fontFamily: MS.type.serif, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 8, lineHeight: 1.05 }}>Market Story</div>
          <div style={{ fontSize: 13, color: MS.inkSoft, marginTop: 8, maxWidth: 380, lineHeight: 1.45 }}>
            Claro, pedagógico, calmado. <em style={{ fontFamily: MS.type.serif }}>Una idea por escena.</em> El usuario sin formación entiende qué pasó y por qué importa, sin recibir asesoramiento.
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10, color: MS.mute, fontFamily: MS.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 <= 2 ? MS.ink : MS.divider }} />)}
          </div>
          <div style={{ fontSize: 11, color: MS.inkSoft, marginTop: 4, fontFamily: MS.type.mono }}>Baja-media</div>
        </div>
      </div>

      {/* type scale */}
      <SpecHeading>Tipografía</SpecHeading>
      <div style={{ display: 'grid', gap: 8 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: `1px solid ${MS.divider}`, paddingBottom: 6 }}>
          <span style={{ fontFamily: MS.type.serif, fontSize: 32, lineHeight: 1, fontWeight: 400 }}>El índice recupera</span>
          <span style={{ fontFamily: MS.type.mono, fontSize: 10, color: MS.mute }}>Newsreader · 32/36 · titular</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: `1px solid ${MS.divider}`, paddingBottom: 6 }}>
          <span style={{ fontFamily: MS.type.sans, fontSize: 15, lineHeight: 1.5, color: MS.inkSoft }}>Esto no predice una subida; muestra estabilización temporal.</span>
          <span style={{ fontFamily: MS.type.mono, fontSize: 10, color: MS.mute }}>Geist · 15/22 · cuerpo</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontFamily: MS.type.mono, fontSize: 22, fontVariantNumeric: 'tabular-nums' }}>11.275,40 <span style={{ color: FINAZ_TOKENS.positive, fontSize: 16 }}>+1,24%</span></span>
          <span style={{ fontFamily: MS.type.mono, fontSize: 10, color: MS.mute }}>Geist Mono · datos</span>
        </div>
      </div>

      {/* color tokens */}
      <SpecHeading>Tokens semánticos</SpecHeading>
      <div>
        <Swatch name="finaz.signal.positive" hex={FINAZ_TOKENS.positive} note="Variación positiva · siempre con signo +" />
        <Swatch name="finaz.signal.negative" hex={FINAZ_TOKENS.negative} note="Variación negativa · siempre con signo −" />
        <Swatch name="finaz.status.mock"     hex={FINAZ_TOKENS.mock}     note="Demo / fixture · chip ámbar permanente" />
        <Swatch name="finaz.provenance"      hex={FINAZ_TOKENS.provenance} note="Fuente, source map · siempre con icono" />
      </div>

      {/* state chips */}
      <SpecHeading>Estados de dato</SpecHeading>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['LIVE','DELAYED','FROZEN','MOCK','EST','CORRECTED'].map(s => <StateChip key={s} state={s} />)}
      </div>

      {/* do / don't */}
      <SpecHeading>Reglas del tema</SpecHeading>
      <DoDont items={[
        { kind: 'do',   text: 'Un gráfico protagonista + un takeaway en lenguaje plano.' },
        { kind: 'dont', text: 'Mezclar velas, heatmap y tabla en la misma escena.' },
        { kind: 'do',   text: 'Glosario contextual: "drawdown = caída desde un máximo".' },
        { kind: 'dont', text: '“Compra”, “vende”, “apuesta segura”. Bloqueado por quality gate.' },
      ]} />

      {/* footer signature */}
      <div style={{ position: 'absolute', bottom: 24, left: 36, right: 36, display: 'flex', justifyContent: 'space-between', fontFamily: MS.type.mono, fontSize: 10, color: MS.mute, letterSpacing: '0.08em' }}>
        <span>FORMAR · INFORMAR</span>
        <span>FREEZE/EXPLORE · 3 RAMAS</span>
      </div>
    </div>
  );
}

// ─── Screen archetype (pantalla retail) ─────────────────────────────────
function MarketStoryScreen() {
  const { d, area, px, py } = scenarioPath(560, 200, 6);
  const lastEvent = SCENARIO.events;

  return (
    <div style={{
      width: '100%', height: '100%',
      background: MS.bg, color: MS.ink, fontFamily: MS.type.sans,
      display: 'grid', gridTemplateColumns: '1fr 320px', gap: 0,
      overflow: 'hidden', '--mono': MS.type.mono,
    }}>
      {/* main column */}
      <div style={{ padding: '32px 36px', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* top bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 26 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 22, height: 22, background: MS.ink, borderRadius: 4, display: 'grid', placeItems: 'center', color: MS.bg, fontFamily: MS.type.serif, fontWeight: 600, fontSize: 13 }}>F</div>
            <span style={{ fontSize: 13, fontFamily: MS.type.mono, letterSpacing: '0.08em', color: MS.mute }}>FINAZ · MARKET STORY</span>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <StateChip state="MOCK" />
            <span style={{ fontFamily: MS.type.mono, fontSize: 11, color: MS.mute }}>29/04/2026 · 16:40 CET</span>
          </div>
        </div>

        {/* episode chip */}
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: MS.type.mono, fontSize: 10, letterSpacing: '0.14em', color: MS.accent, marginBottom: 12, alignSelf: 'flex-start' }}>
          <span style={{ width: 14, height: 1, background: MS.accent }} />
          EPISODIO · SESIÓN DE HOY
        </div>

        {/* headline */}
        <h1 style={{
          fontFamily: MS.type.serif, fontWeight: 400,
          fontSize: 40, lineHeight: 1.08, letterSpacing: '-0.022em',
          margin: 0, color: MS.ink, maxWidth: 580,
        }}>
          El IBEX SIM cae por la mañana y <em style={{ color: MS.accent }}>recupera</em> a partir de mediodía.
        </h1>
        <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.55, color: MS.inkSoft, maxWidth: 540 }}>
          La banca lidera el rebote. Esto <strong style={{ fontFamily: MS.type.serif, fontWeight: 600 }}>no predice una subida</strong>; muestra una estabilización temporal de la sesión.
        </p>

        {/* KPI row */}
        <div style={{ display: 'flex', gap: 28, marginTop: 22, alignItems: 'baseline' }}>
          <div>
            <div style={{ fontFamily: MS.type.mono, fontSize: 28, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>11.275,40</div>
            <div style={{ fontSize: 11, color: MS.mute, marginTop: 2, fontFamily: MS.type.mono }}>cierre IBEX SIM</div>
          </div>
          <div>
            <Delta value={1.24} size={22} />
            <div style={{ fontSize: 11, color: MS.mute, marginTop: 2, fontFamily: MS.type.mono }}>sesión</div>
          </div>
          <div>
            <Delta value={-2.80} size={22} />
            <div style={{ fontSize: 11, color: MS.mute, marginTop: 2, fontFamily: MS.type.mono }}>drawdown intradía</div>
          </div>
        </div>

        {/* chart */}
        <div style={{ position: 'relative', marginTop: 22, padding: '18px 4px 8px', background: MS.surface, borderRadius: 8, border: `1px solid ${MS.divider}` }}>
          <svg viewBox="0 0 560 200" width="100%" height="200" style={{ display: 'block' }} preserveAspectRatio="none">
            {/* horizontal grid */}
            {[0.25, 0.5, 0.75].map(p => (
              <line key={p} x1="0" x2="560" y1={200*p} y2={200*p} stroke={MS.divider} strokeDasharray="2 4" />
            ))}
            {/* watch level resistance */}
            <line x1="0" x2="560" y1={py(11340)} y2={py(11340)} stroke={FINAZ_TOKENS.warning} strokeDasharray="3 3" strokeWidth="1" />
            <text x="552" y={py(11340)-4} textAnchor="end" fontFamily={MS.type.mono} fontSize="9" fill={FINAZ_TOKENS.warning}>resistencia 11.340 · a vigilar</text>
            {/* area */}
            <path d={area} fill={MS.accent} fillOpacity="0.07" />
            <path d={d} stroke={MS.accent} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            {/* event markers */}
            {lastEvent.map(ev => {
              const cx = px(ev.t);
              const point = SCENARIO.series.find(s => s.i === ev.t);
              const cy = py(point.v);
              return (
                <g key={ev.time}>
                  <line x1={cx} x2={cx} y1={cy + 6} y2="194" stroke={MS.mute} strokeWidth="0.6" strokeDasharray="1 2" />
                  <circle cx={cx} cy={cy} r="4" fill={MS.bg} stroke={MS.ink} strokeWidth="1.5" />
                  <text x={cx} y="198" textAnchor="middle" fontFamily={MS.type.mono} fontSize="9" fill={MS.mute}>{ev.time}</text>
                </g>
              );
            })}
          </svg>
        </div>

        {/* caption + provenance */}
        <div style={{ marginTop: 12, display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <div style={{ flex: 1, fontSize: 12, color: MS.inkSoft, lineHeight: 1.5 }}>
            <strong style={{ fontFamily: MS.type.serif, fontWeight: 600 }}>Lo que muestra el gráfico:</strong> el índice baja durante la mañana, toca su mínimo cerca de las 11:00 y empieza a recuperar a partir de las 12:10, coincidiendo con el avance de la banca.
          </div>
        </div>

        {/* freeze/explore branches */}
        <div style={{ marginTop: 22, display: 'flex', gap: 8 }}>
          {[
            { label: '¿Por qué subió?', sub: 'explicación' },
            { label: 'Ver fuentes', sub: 'provenance' },
            { label: 'Glosario', sub: 'drawdown, resistencia…' },
          ].map((b, i) => (
            <button key={i} style={{
              flex: 1, textAlign: 'left',
              padding: '12px 14px',
              background: MS.surface, border: `1px solid ${MS.divider}`,
              borderRadius: 8, cursor: 'pointer',
              fontFamily: MS.type.sans,
            }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: MS.ink }}>{b.label}</div>
              <div style={{ fontSize: 10, color: MS.mute, marginTop: 2, fontFamily: MS.type.mono, letterSpacing: '0.06em' }}>{b.sub.toUpperCase()}</div>
            </button>
          ))}
        </div>
      </div>

      {/* side rail: source + glossary card */}
      <aside style={{ background: MS.paper, padding: '32px 24px', borderLeft: `1px solid ${MS.divider}` }}>
        <div style={{ fontFamily: MS.type.mono, fontSize: 10, color: MS.mute, letterSpacing: '0.14em', marginBottom: 14 }}>EN LENGUAJE CLARO</div>
        <div style={{ fontFamily: MS.type.serif, fontSize: 17, lineHeight: 1.4, color: MS.ink }}>
          <em>“Drawdown”</em> es la caída desde el máximo más reciente. Hoy ese hueco fue del −2,80%.
        </div>
        <div style={{ marginTop: 20, height: 1, background: MS.divider }} />
        <div style={{ fontFamily: MS.type.mono, fontSize: 10, color: MS.mute, letterSpacing: '0.14em', marginTop: 20, marginBottom: 10 }}>FUENTES DE ESTA HISTORIA</div>
        {SCENARIO.sources.slice(0, 3).map(s => (
          <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderTop: `1px solid ${MS.divider}` }}>
            <svg width="12" height="12" viewBox="0 0 12 12"><rect x="1" y="1" width="9" height="10" rx="1" fill="none" stroke={MS.accent} strokeWidth="1" /><line x1="3" y1="4" x2="8" y2="4" stroke={MS.accent} strokeWidth="0.8" /><line x1="3" y1="6.5" x2="8" y2="6.5" stroke={MS.accent} strokeWidth="0.8" /></svg>
            <div style={{ fontFamily: MS.type.mono, fontSize: 10, color: MS.ink }}>{s.id}</div>
            <div style={{ fontSize: 11, color: MS.inkSoft, flex: 1 }}>{s.label}</div>
            <StateChip state="MOCK" size="sm" />
          </div>
        ))}
        <div style={{ marginTop: 22, padding: 12, background: '#fff', borderRadius: 6, borderLeft: `2px solid ${FINAZ_TOKENS.warning}` }}>
          <div style={{ fontFamily: MS.type.mono, fontSize: 9, color: FINAZ_TOKENS.warning, fontWeight: 700, letterSpacing: '0.14em', marginBottom: 6 }}>CAVEAT</div>
          <div style={{ fontSize: 11, color: MS.inkSoft, lineHeight: 1.45 }}>Niveles a vigilar, no recomendación. No usar como análisis financiero.</div>
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { MarketStorySpec, MarketStoryScreen, MS_TOKENS: MS });