// THEME C · Newsroom Provenance — Periodista / editor
// Sobrio, editorial, orientado a verificación. Claim → estado → evidencia → source map.

const NR = {
  bg:        '#F4F1E9',       // newsprint
  surface:   '#FFFFFF',
  ink:       '#16161A',
  inkSoft:   '#3A3A40',
  mute:      '#6B6B73',
  divider:   '#D9D4C5',
  rule:      '#16161A',       // print-like rule
  accent:    '#1A1A1A',
  type: {
    serif: '"Newsreader", "Source Serif 4", "Charter", Georgia, serif',
    sans:  '"Geist", "IBM Plex Sans", sans-serif',
    mono:  '"Geist Mono", "IBM Plex Mono", monospace',
  }
};

const STATUS_STYLE = {
  validado:   { color: FINAZ_TOKENS.positive, label: 'VALIDADO',   icon: '✓' },
  pendiente:  { color: FINAZ_TOKENS.mock,     label: 'PENDIENTE',  icon: '◔' },
  contradicho:{ color: FINAZ_TOKENS.negative, label: 'CONTRADICHO',icon: '⌀' },
  bloqueado:  { color: FINAZ_TOKENS.warning,  label: 'BLOQUEADO',  icon: '⊘' },
};

function ClaimStatusPill({ status }) {
  const s = STATUS_STYLE[status] || STATUS_STYLE.pendiente;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontFamily: NR.type.mono, fontSize: 10, fontWeight: 600,
      letterSpacing: '0.1em',
      color: s.color, border: `1px solid ${s.color}`,
      padding: '3px 7px', borderRadius: 2, background: 'transparent',
    }}>
      <span>{s.icon}</span>{s.label}
    </span>
  );
}

// ─── Spec card ──────────────────────────────────────────────────────────
function NewsroomSpec() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: NR.bg, color: NR.ink, padding: 36,
      fontFamily: NR.type.sans, overflow: 'hidden',
      '--mono': NR.type.mono,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', borderBottom: `2px solid ${NR.rule}`, paddingBottom: 16 }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', color: NR.mute, fontFamily: NR.type.mono }}>TEMA C · PERIODISTA / EDITOR</div>
          <div style={{ fontSize: 38, fontFamily: NR.type.serif, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 6, lineHeight: 1.0 }}>Newsroom Provenance</div>
          <div style={{ fontSize: 13, color: NR.inkSoft, marginTop: 8, maxWidth: 420, lineHeight: 1.5, fontFamily: NR.type.serif }}>
            Sobrio, verificable, orientado a revisión. Cada claim viaja con su <em>estado, fuente, fecha y audit trail</em>. El preview público y el panel de edición usan los mismos estados.
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10, color: NR.mute, fontFamily: NR.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 ? NR.ink : NR.divider }} />)}
          </div>
          <div style={{ fontSize: 11, color: NR.inkSoft, marginTop: 4, fontFamily: NR.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 solid ${NR.divider}`, paddingBottom: 6 }}>
          <span style={{ fontFamily: NR.type.serif, fontSize: 30, lineHeight: 1, fontWeight: 600, letterSpacing: '-0.015em' }}>Banca lidera el rebote</span>
          <span style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute }}>Newsreader · 30/30 · claim</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: `1px solid ${NR.divider}`, paddingBottom: 6 }}>
          <span style={{ fontFamily: NR.type.serif, fontSize: 15, lineHeight: 1.5, color: NR.inkSoft }}>El sector financiero aporta +0,62 pp al cierre intradía del índice…</span>
          <span style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute }}>Newsreader · 15/22 · cuerpo</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontFamily: NR.type.mono, fontSize: 11, color: NR.mute, letterSpacing: '0.08em' }}>FUENTE · SIM-SECTOR-004 · 29/04/2026 16:38 CET · MOCK</span>
          <span style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute }}>Geist Mono · 11 · trazabilidad</span>
        </div>
      </div>

      {/* statuses */}
      <SpecHeading>Estados editoriales</SpecHeading>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {['validado','pendiente','contradicho','bloqueado'].map(s => <ClaimStatusPill key={s} status={s} />)}
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
        {['LIVE','DELAYED','FROZEN','MOCK','EST','CORRECTED'].map(s => <StateChip key={s} state={s} />)}
      </div>

      {/* tokens */}
      <SpecHeading>Acentos del tema</SpecHeading>
      <div>
        <Swatch name="finaz.provenance"      hex={FINAZ_TOKENS.provenance} note="Source rail · siempre con icono de documento" />
        <Swatch name="finaz.risk.warning"    hex={FINAZ_TOKENS.warning}    note="Bloqueado por quality gate · advice language" />
        <Swatch name="finaz.status.mock"     hex={FINAZ_TOKENS.mock}       note="Pendiente de segunda fuente" />
        <Swatch name="newsroom.rule"         hex="#16161A"                  note="Reglas tipográficas tipo prensa · 2px" />
      </div>

      {/* do dont */}
      <SpecHeading>Reglas del tema</SpecHeading>
      <DoDont items={[
        { kind: 'do',   text: 'Source map, timestamp y autor en todo claim publicable.' },
        { kind: 'dont', text: 'Ocultar caveats regulatorios para “limpiar” el preview.' },
        { kind: 'do',   text: 'Diferenciar validado, pendiente, contradicho, corregido.' },
        { kind: 'dont', text: 'Publicar claim con lenguaje de recomendación financiera.' },
      ]} />

      <div style={{ position: 'absolute', bottom: 24, left: 36, right: 36, display: 'flex', justifyContent: 'space-between', fontFamily: NR.type.mono, fontSize: 10, color: NR.mute, letterSpacing: '0.08em', borderTop: `1px solid ${NR.divider}`, paddingTop: 12 }}>
          <span>INFORMAR · VERIFICAR</span>
          <span>AUDIT TRAIL VISIBLE</span>
        </div>
    </div>
  );
}

// ─── Newsroom screen archetype ─────────────────────────────────────────
function NewsroomScreen() {
  const { d, area, px, py } = scenarioPath(560, 170, 6);
  return (
    <div style={{
      width: '100%', height: '100%',
      background: NR.bg, color: NR.ink, fontFamily: NR.type.sans,
      display: 'grid', gridTemplateColumns: '300px 1fr 320px', gap: 0,
      overflow: 'hidden', '--mono': NR.type.mono,
    }}>
      {/* left: claim status board */}
      <aside style={{ padding: '24px 22px', borderRight: `1px solid ${NR.divider}`, background: NR.bg }}>
        <div style={{ fontFamily: NR.type.serif, fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', borderBottom: `2px solid ${NR.rule}`, paddingBottom: 8 }}>Claim status board</div>
        <div style={{ fontSize: 10, color: NR.mute, fontFamily: NR.type.mono, marginTop: 4, letterSpacing: '0.08em' }}>EPISODIO · IBEX SIM 29/04</div>

        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {SCENARIO.claims.map(c => (
            <div key={c.id} style={{ padding: '10px 12px', background: NR.surface, border: `1px solid ${NR.divider}`, borderLeft: `3px solid ${STATUS_STYLE[c.status].color}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <span style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute }}>{c.id}</span>
                <ClaimStatusPill status={c.status} />
              </div>
              <div style={{ fontFamily: NR.type.serif, fontSize: 14, lineHeight: 1.3, color: NR.ink }}>{c.text}</div>
              {c.status === 'bloqueado' && (
                <div style={{ fontFamily: NR.type.mono, fontSize: 10, color: FINAZ_TOKENS.warning, marginTop: 6 }}>quality gate · advice language</div>
              )}
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, padding: 12, background: NR.surface, border: `1px solid ${NR.divider}` }}>
          <div style={{ fontFamily: NR.type.mono, fontSize: 9, letterSpacing: '0.14em', color: NR.mute, marginBottom: 8 }}>RESUMEN DEL EPISODIO</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: NR.type.mono, marginBottom: 4 }}>
            <span>Validados</span><span style={{ color: FINAZ_TOKENS.positive, fontWeight: 600 }}>2 / 4</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: NR.type.mono, marginBottom: 4 }}>
            <span>Pendientes</span><span style={{ color: FINAZ_TOKENS.mock, fontWeight: 600 }}>1</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: NR.type.mono }}>
            <span>Bloqueados</span><span style={{ color: FINAZ_TOKENS.warning, fontWeight: 600 }}>1</span>
          </div>
        </div>
      </aside>

      {/* center: article preview */}
      <main style={{ padding: '24px 32px', minWidth: 0, overflow: 'hidden' }}>
        {/* masthead */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `2px solid ${NR.rule}`, paddingBottom: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontFamily: NR.type.serif, fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em' }}>FINAZ <em style={{ fontWeight: 400 }}>Provenance</em></span>
            <span style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute, letterSpacing: '0.1em' }}>PREVIEW · BORRADOR v3</span>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <StateChip state="MOCK" />
            <StateChip state="FROZEN" />
          </div>
        </div>

        {/* article */}
        <div style={{ marginTop: 20 }}>
          <div style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute, letterSpacing: '0.18em' }}>MERCADOS · INTRADÍA</div>
          <h1 style={{ margin: '6px 0 0', fontFamily: NR.type.serif, fontSize: 30, lineHeight: 1.08, fontWeight: 600, letterSpacing: '-0.02em', color: NR.ink }}>
            La banca lidera un rebote del IBEX SIM tras un dato macro
            <span style={{ color: FINAZ_TOKENS.mock }}> menor al esperado</span>
          </h1>
          <div style={{ fontFamily: NR.type.serif, fontSize: 14, color: NR.inkSoft, marginTop: 8, lineHeight: 1.5 }}>
            El índice cerró a 11.275,40 puntos, con un avance de +1,24% en la sesión, según datos simulados del feed de demostración.
          </div>
          <div style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute, marginTop: 10, letterSpacing: '0.06em' }}>
            POR REDACCIÓN FINAZ · 29/04/2026 16:40 CET · ACTUALIZADO HACE 2 MIN
          </div>
        </div>

        {/* chart */}
        <div style={{ marginTop: 18, padding: '10px 4px 4px', background: NR.surface, border: `1px solid ${NR.divider}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 10px 8px' }}>
            <div style={{ fontFamily: NR.type.serif, fontSize: 13, fontWeight: 600 }}>Sesión intradía SIM · 09:00–16:40 CET</div>
            <div style={{ fontFamily: NR.type.mono, fontSize: 10, color: NR.mute }}>SIM-MKT-001</div>
          </div>
          <svg viewBox="0 0 560 170" width="100%" height="170" style={{ display: 'block' }} preserveAspectRatio="none">
            {[0.25, 0.5, 0.75].map(p => <line key={p} x1="0" x2="560" y1={170*p} y2={170*p} stroke={NR.divider} strokeDasharray="1 3" />)}
            <path d={area} fill={NR.ink} fillOpacity="0.05" />
            <path d={d} stroke={NR.ink} strokeWidth="1.6" fill="none" />
            {SCENARIO.events.map(ev => {
              const cx = px(ev.t); const cy = py(SCENARIO.series.find(s => s.i === ev.t).v);
              return (
                <g key={ev.time}>
                  <circle cx={cx} cy={cy} r="3" fill={NR.bg} stroke={NR.ink} strokeWidth="1.2" />
                  <text x={cx} y="14" textAnchor="middle" fontFamily={NR.type.mono} fontSize="9" fill={NR.mute}>{ev.time}</text>
                </g>
              );
            })}
          </svg>
        </div>

        {/* claim row inline annotated */}
        <div style={{ marginTop: 16, fontFamily: NR.type.serif, fontSize: 14, lineHeight: 1.6, color: NR.ink }}>
          La <span style={{ background: 'rgba(21,128,61,0.10)', borderBottom: `1.5px solid ${FINAZ_TOKENS.positive}`, padding: '0 2px' }}>banca aporta +0,62 pp</span> al movimiento agregado, mientras que el sector inmobiliario resta −0,08 pp. El volumen
            <span style={{ background: 'rgba(180,83,9,0.10)', borderBottom: `1.5px dashed ${FINAZ_TOKENS.mock}`, padding: '0 2px' }}>habría aumentado un 18% sobre la media de 20 sesiones</span>, dato pendiente de segunda fuente.
        </div>

        <div style={{ marginTop: 12, padding: '10px 12px', background: 'rgba(109,40,217,0.06)', borderLeft: `3px solid ${FINAZ_TOKENS.warning}`, fontSize: 12, color: NR.inkSoft, lineHeight: 1.4 }}>
          <strong style={{ color: FINAZ_TOKENS.warning, fontFamily: NR.type.mono, fontSize: 10, letterSpacing: '0.12em' }}>WORDING BLOQUEADO ·</strong> “apuesta segura por bancos” → reescribir como escenario / nivel de vigilancia.
        </div>
      </main>

      {/* right: source confidence + audit */}
      <aside style={{ padding: '24px 22px', borderLeft: `1px solid ${NR.divider}`, background: NR.surface }}>
        <div style={{ fontFamily: NR.type.serif, fontSize: 16, fontWeight: 600, borderBottom: `1px solid ${NR.divider}`, paddingBottom: 8, marginBottom: 12 }}>Source confidence</div>
        {SCENARIO.sources.map((s, i) => (
          <div key={s.id} style={{ padding: '10px 0', borderBottom: `1px solid ${NR.divider}` }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <svg width="12" height="14" viewBox="0 0 12 14"><path d="M1 1h7l3 3v9H1z" fill="none" stroke={FINAZ_TOKENS.provenance} strokeWidth="1"/><line x1="3" y1="6" x2="9" y2="6" stroke={FINAZ_TOKENS.provenance} strokeWidth="0.8"/><line x1="3" y1="8.5" x2="9" y2="8.5" stroke={FINAZ_TOKENS.provenance} strokeWidth="0.8"/></svg>
                <span style={{ fontFamily: NR.type.mono, fontSize: 11, color: NR.ink }}>{s.id}</span>
              </div>
              <StateChip state="MOCK" />
            </div>
            <div style={{ fontFamily: NR.type.serif, fontSize: 12, color: NR.inkSoft, marginTop: 3 }}>{s.label}</div>
            <div style={{ display: 'flex', gap: 4, marginTop: 6, alignItems: 'center' }}>
              {[1,2,3,4,5].map(k => (
                <span key={k} style={{ width: 24, height: 4, borderRadius: 1, background: k <= [5,5,4,3][i] ? FINAZ_TOKENS.provenance : NR.divider }} />
              ))}
              <span style={{ fontFamily: NR.type.mono, fontSize: 9, color: NR.mute, marginLeft: 4 }}>{['5/5','5/5','4/5','3/5'][i]}</span>
            </div>
            <div style={{ fontFamily: NR.type.mono, fontSize: 9, color: NR.mute, marginTop: 4 }}>timestamp {s.timestamp} · MOCK</div>
          </div>
        ))}

        <div style={{ marginTop: 16, fontFamily: NR.type.serif, fontSize: 14, fontWeight: 600 }}>Audit trail</div>
        <div style={{ marginTop: 8, fontFamily: NR.type.mono, fontSize: 10, color: NR.inkSoft, lineHeight: 1.6 }}>
          <div>16:32 · m.lopez · añade C1 · validado</div>
          <div>16:35 · j.ruiz · marca C2 · pendiente</div>
          <div style={{ color: FINAZ_TOKENS.warning }}>16:38 · system · bloquea C4 · advice</div>
          <div>16:40 · m.lopez · freeze · preview público</div>
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { NewsroomSpec, NewsroomScreen, NR_TOKENS: NR, ClaimStatusPill });