// MODE E · Live/Broadcast — Transversal
// Overlay temporal sobre cualquiera de los temas (retail, edu, newsroom, analyst).
// Lenguaje audiovisual: ticker, lower third, breaking ribbon, price bug.

const BC = {
  bg:       '#0A0E14',
  panel:    '#11151F',
  ink:      '#F8FAFC',
  inkSoft:  '#CBD5E1',
  mute:     '#94A3B8',
  divider:  '#1E293B',
  breaking: '#DC2626',
  amber:    FINAZ_TOKENS.mock,
  blue:     FINAZ_TOKENS.live,
  type: {
    sans: '"Geist", "IBM Plex Sans", sans-serif',
    mono: '"Geist Mono", "IBM Plex Mono", monospace',
  }
};

// ─── Spec card ──────────────────────────────────────────────────────────
function BroadcastSpec() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: BC.bg, color: BC.ink, padding: 36,
      fontFamily: BC.type.sans, overflow: 'hidden',
      '--mono': BC.type.mono,
      backgroundImage: 'radial-gradient(circle at 0% 100%, rgba(220,38,38,0.10), transparent 50%)',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', color: BC.breaking, fontFamily: BC.type.mono }}>
            <span style={{ width: 7, height: 7, borderRadius: 99, background: BC.breaking, boxShadow: `0 0 0 3px rgba(220,38,38,0.25)` }} />
            MODO E · TRANSVERSAL
          </div>
          <div style={{ fontSize: 34, fontFamily: BC.type.sans, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 8, lineHeight: 1.05 }}>
            Live<span style={{ color: BC.breaking }}>/</span>Broadcast
          </div>
          <div style={{ fontSize: 13, color: BC.inkSoft, marginTop: 8, maxWidth: 420, lineHeight: 1.5 }}>
            Capa <em>temporal</em> sobre cualquier tema. Urgente, rítmica, audiovisual. Se activa por umbral: apertura, cierre, macro, resultados, volatilidad o breaking news.
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 10, color: BC.mute, fontFamily: BC.type.mono, letterSpacing: '0.08em' }}>ACTIVACIÓN</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 ? BC.breaking : BC.divider }} />)}
          </div>
          <div style={{ fontSize: 11, color: BC.inkSoft, marginTop: 4, fontFamily: BC.type.mono }}>Por umbral</div>
        </div>
      </div>

      {/* triggers */}
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: BC.mute, marginBottom: 12, marginTop: 24, fontFamily: BC.type.mono }}>UMBRALES DE ACTIVACIÓN</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[
          ['Apertura / cierre', '09:00 · 17:35 CET'],
          ['Dato macro',        'desviación > 1σ vs consenso'],
          ['Resultados',        'EBITDA / EPS publicado'],
          ['Volatilidad',       'VIX SIM intra > umbral'],
          ['Breaking news',     'claim editorial urgente'],
          ['Corrección',        'revisión de dato publicado'],
        ].map(([k, v]) => (
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 10px', background: BC.panel, border: `1px solid ${BC.divider}` }}>
            <span style={{ fontSize: 12, color: BC.ink }}>{k}</span>
            <span style={{ fontFamily: BC.type.mono, fontSize: 10, color: BC.mute }}>{v}</span>
          </div>
        ))}
      </div>

      {/* components */}
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: BC.mute, marginBottom: 12, marginTop: 24, fontFamily: BC.type.mono }}>COMPONENTES</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {/* breaking ribbon */}
        <div style={{ background: BC.breaking, color: '#fff', padding: '6px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontFamily: BC.type.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.14em' }}>BREAKING</span>
          <span style={{ fontSize: 12, fontWeight: 500 }}>Apertura EEUU · volatilidad SIM al alza</span>
          <span style={{ marginLeft: 'auto', fontFamily: BC.type.mono, fontSize: 10, opacity: 0.8 }}>15:30 CET</span>
        </div>
        {/* lower third */}
        <div style={{ background: BC.panel, borderLeft: `4px solid ${BC.blue}`, padding: '10px 14px' }}>
          <div style={{ fontFamily: BC.type.mono, fontSize: 9, color: BC.blue, letterSpacing: '0.14em' }}>LOWER THIRD</div>
          <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>BANCA SIM aporta +0,62 pp al rebote intradía</div>
          <div style={{ fontFamily: BC.type.mono, fontSize: 10, color: BC.mute, marginTop: 4 }}>SIM-SECTOR-004 · MOCK · 12:10 CET</div>
        </div>
        {/* market ticker */}
        <div style={{ background: '#000', padding: '6px 12px', display: 'flex', gap: 18, fontFamily: BC.type.mono, fontSize: 11, color: BC.inkSoft, overflow: 'hidden', whiteSpace: 'nowrap' }}>
          <span>IBEX <span style={{ color: FINAZ_TOKENS.positive }}>+1,24%</span></span>
          <span>BANCA <span style={{ color: FINAZ_TOKENS.positive }}>+2,40%</span></span>
          <span>ENERG <span style={{ color: FINAZ_TOKENS.negative }}>−0,70%</span></span>
          <span>VOL <span style={{ color: BC.blue }}>+18%</span></span>
        </div>
        {/* price bug */}
        <div style={{ background: BC.panel, padding: '8px 12px', display: 'inline-flex', alignItems: 'center', gap: 12, alignSelf: 'flex-start', border: `1px solid ${BC.divider}` }}>
          <div style={{ width: 4, height: 24, background: FINAZ_TOKENS.positive }} />
          <div>
            <div style={{ fontFamily: BC.type.mono, fontSize: 9, color: BC.mute, letterSpacing: '0.1em' }}>PRICE BUG · ESQUINA</div>
            <div style={{ fontFamily: BC.type.mono, fontSize: 14, fontVariantNumeric: 'tabular-nums' }}>IBEX SIM 11.275,40 <span style={{ color: FINAZ_TOKENS.positive }}>+1,24%</span></div>
          </div>
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: 24, left: 36, right: 36, display: 'flex', justifyContent: 'space-between', fontFamily: BC.type.mono, fontSize: 10, color: BC.mute, letterSpacing: '0.08em', borderTop: `1px solid ${BC.divider}`, paddingTop: 12 }}>
        <span>ENTRETENER · ALERTAR</span>
        <span>MOTION BREVE · NUNCA OCULTA DATOS CRÍTICOS</span>
      </div>
    </div>
  );
}

// ─── Demo: overlay applied over each theme background ──────────────────
function BroadcastOverlay() {
  // shows 4 mini panels (one per theme bg) with the same breaking event overlaid.
  // demonstrates the transversal nature of the mode.

  const panels = [
    { id: 'A', name: 'Market Story', bg: '#FBFAF5', ink: '#15171C', ruleAccent: '#1F4FA8' },
    { id: 'B', name: 'Edu Lab',      bg: '#F5F1E6', ink: '#1B1814', ruleAccent: '#0F766E' },
    { id: 'C', name: 'Newsroom',     bg: '#F4F1E9', ink: '#16161A', ruleAccent: '#16161A' },
    { id: 'D', name: 'Analyst',      bg: '#0A0E14', ink: '#E2E8F0', ruleAccent: FINAZ_TOKENS.live, dark: true },
  ];

  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#0A0E14',
      color: BC.ink, fontFamily: BC.type.sans, padding: 28,
      overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 14,
      '--mono': BC.type.mono,
      backgroundImage: 'radial-gradient(circle at 50% 0%, rgba(220,38,38,0.10), transparent 50%)',
    }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: BC.type.mono, fontSize: 10, color: BC.breaking, letterSpacing: '0.16em' }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: BC.breaking }} />
            ACTIVADO · 15:30 CET · APERTURA EEUU
          </div>
          <div style={{ fontFamily: BC.type.sans, fontSize: 22, fontWeight: 600, marginTop: 6, letterSpacing: '-0.02em' }}>
            El overlay viaja igual sobre cualquier tema
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <StateChip state="LIVE" />
          <StateChip state="MOCK" />
        </div>
      </div>

      {/* grid of mini themes with overlay */}
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, minHeight: 0 }}>
        {panels.map(p => (
          <div key={p.id} style={{
            position: 'relative', background: p.bg, color: p.ink,
            borderRadius: 4, overflow: 'hidden',
            border: '1px solid #1E293B',
            display: 'flex', flexDirection: 'column',
          }}>
            {/* fake theme content (very abstracted) */}
            <div style={{ padding: '12px 14px', flex: 1 }}>
              <div style={{ fontFamily: BC.type.mono, fontSize: 9, color: p.dark ? '#64748B' : '#7A7D89', letterSpacing: '0.1em' }}>TEMA {p.id} · {p.name.toUpperCase()}</div>
              <div style={{ fontFamily: p.id === 'D' ? BC.type.mono : '"Newsreader", serif', fontSize: 16, fontWeight: 500, marginTop: 8, lineHeight: 1.2, color: p.ink }}>
                {p.id === 'A' && 'El IBEX recupera por la tarde.'}
                {p.id === 'B' && '¿Por qué rebota?'}
                {p.id === 'C' && 'Banca lidera el rebote'}
                {p.id === 'D' && 'IBEX SIM 11.275,40 +1,24%'}
              </div>
              <div style={{ marginTop: 12, height: 50, position: 'relative' }}>
                <svg viewBox="0 0 200 50" width="100%" height="50" preserveAspectRatio="none">
                  <path d="M0 35 L20 30 L40 38 L60 28 L80 22 L100 15 L120 12 L140 18 L160 14 L180 16 L200 14" stroke={p.ruleAccent} strokeWidth="1.4" fill="none" />
                </svg>
              </div>
            </div>
            {/* breaking ribbon overlay (always at the top) */}
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0,
              background: BC.breaking, color: '#fff',
              padding: '4px 10px',
              fontFamily: BC.type.mono, fontSize: 9, fontWeight: 700, letterSpacing: '0.14em',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span>BREAKING · APERTURA EEUU</span>
              <span style={{ opacity: 0.8 }}>15:30</span>
            </div>
            {/* lower third */}
            <div style={{
              background: p.dark ? 'rgba(15,20,32,0.92)' : 'rgba(22,22,26,0.92)',
              color: '#fff', padding: '8px 10px',
              borderTop: `2px solid ${BC.breaking}`,
              fontFamily: BC.type.sans, fontSize: 11, lineHeight: 1.3,
            }}>
              <div style={{ fontFamily: BC.type.mono, fontSize: 8, color: BC.amber, letterSpacing: '0.14em' }}>LIVE · MOCK</div>
              <div style={{ marginTop: 2, fontWeight: 600 }}>Volatilidad SIM al alza</div>
            </div>
            {/* price bug bottom-right */}
            <div style={{
              position: 'absolute', bottom: 50, right: 8,
              padding: '4px 8px', background: 'rgba(0,0,0,0.78)', color: '#fff',
              fontFamily: BC.type.mono, fontSize: 10, fontVariantNumeric: 'tabular-nums',
              border: `1px solid rgba(255,255,255,0.15)`,
            }}>
              IBEX <span style={{ color: '#4ADE80' }}>+1,24%</span>
            </div>
          </div>
        ))}
      </div>

      {/* ticker strip */}
      <div style={{ background: '#000', padding: '8px 14px', display: 'flex', gap: 22, fontFamily: BC.type.mono, fontSize: 11, color: BC.inkSoft, overflow: 'hidden', whiteSpace: 'nowrap', alignItems: 'center', borderRadius: 4 }}>
        <span style={{ color: BC.breaking, fontWeight: 700, letterSpacing: '0.1em' }}>● LIVE</span>
        <span>IBEX <span style={{ color: FINAZ_TOKENS.positive }}>+1,24%</span></span>
        <span>BANCA <span style={{ color: FINAZ_TOKENS.positive }}>+2,40%</span></span>
        <span>ENERG <span style={{ color: FINAZ_TOKENS.negative }}>−0,70%</span></span>
        <span>INMOB <span style={{ color: FINAZ_TOKENS.negative }}>−1,00%</span></span>
        <span>VOL <span style={{ color: BC.blue }}>+18%</span></span>
        <span>EUR/USD <span style={{ color: FINAZ_TOKENS.positive }}>+0,18%</span></span>
        <span style={{ marginLeft: 'auto', color: BC.mute }}>SIM-MKT-001 · MOCK · 16:40 CET</span>
      </div>

      <div style={{ fontFamily: BC.type.mono, fontSize: 10, color: BC.mute, letterSpacing: '0.06em', textAlign: 'center', paddingTop: 4, borderTop: `1px solid ${BC.divider}` }}>
        EL OVERLAY ES TEMPORAL Y REVERSIBLE · NUNCA OCULTA FUENTE NI CAVEAT · MOTION BREVE
      </div>
    </div>
  );
}

Object.assign(window, { BroadcastSpec, BroadcastOverlay, BC_TOKENS: BC });