// App entry — composes the DesignCanvas with all theme cards + screens.

const { useState, useEffect } = React;

function FinazApp() {
  const t = useTweaks(/*EDITMODE-BEGIN*/{
    "showLiveOverlay": false,
    "density": "default"
  }/*EDITMODE-END*/);

  return (
    <>
      <DesignCanvas
        title="FINAZ · Visual Grammar v0.1"
        subtitle="Temas de diseño por perfil sobre el episodio simulado IBEX SIM · 29/04/2026"
        initialScale={0.62}
      >
        {/* INTRO */}
        <DCSection id="intro" title="Sistema base" subtitle="Plataforma: FORMAR · INFORMAR · ENTRETENER. 4 temas + 1 modo transversal sobre los mismos datos simulados.">
          <DCArtboard id="cover" label="Hoja de portada" width={720} height={980}>
            <CoverArtboard />
          </DCArtboard>
          <DCArtboard id="profiles" label="Perfiles ↔ Temas" width={920} height={980}>
            <ProfileMatrix />
          </DCArtboard>
        </DCSection>

        {/* THEME A · MARKET STORY */}
        <DCSection id="theme-a" title="Tema A · Market Story" subtitle="Retail sin información específica · pregunta principal: «¿Qué ha pasado y qué significa?»">
          <DCArtboard id="a-spec" label="Ficha de tema" width={720} height={980}>
            <MarketStorySpec />
          </DCArtboard>
          <DCArtboard id="a-screen" label="Pantalla arquetipo · Episodio retail" width={1280} height={860}>
            <MarketStoryScreen />
          </DCArtboard>
        </DCSection>

        {/* THEME B · EDU LAB */}
        <DCSection id="theme-b" title="Tema B · Edu Lab" subtitle="Estudiante con formación · pregunta principal: «¿Por qué pasa y cómo se mide?»">
          <DCArtboard id="b-spec" label="Ficha de tema" width={720} height={980}>
            <EduLabSpec />
          </DCArtboard>
          <DCArtboard id="b-screen" label="Pantalla arquetipo · Lección con cadena causa-efecto" width={1280} height={860}>
            <EduLabScreen />
          </DCArtboard>
        </DCSection>

        {/* THEME C · NEWSROOM */}
        <DCSection id="theme-c" title="Tema C · Newsroom Provenance" subtitle="Periodista / editor financiero · pregunta principal: «¿Es publicable? ¿Qué fuente lo sostiene?»">
          <DCArtboard id="c-spec" label="Ficha de tema" width={720} height={980}>
            <NewsroomSpec />
          </DCArtboard>
          <DCArtboard id="c-screen" label="Pantalla arquetipo · Authoring con claim board + source confidence" width={1440} height={860}>
            <NewsroomScreen />
          </DCArtboard>
        </DCSection>

        {/* THEME D · ANALYST TERMINAL */}
        <DCSection id="theme-d" title="Tema D · Analyst Terminal" subtitle="Gestor de fondo · trader intradía · pregunta principal: «¿Qué comparar, qué vigilar, dónde está la anomalía?»">
          <DCArtboard id="d-spec" label="Ficha de tema (dark)" width={720} height={980}>
            <AnalystSpec />
          </DCArtboard>
          <DCArtboard id="d-screen" label="Pantalla arquetipo · Workbench: chart + watchlist + heatmap + waterfall" width={1600} height={900}>
            <AnalystScreen />
          </DCArtboard>
        </DCSection>

        {/* MODE E · LIVE BROADCAST */}
        <DCSection id="mode-e" title="Modo E · Live / Broadcast" subtitle="Capa transversal · se aplica encima de cualquier tema cuando un umbral se dispara.">
          <DCArtboard id="e-spec" label="Ficha del modo + componentes" width={720} height={980}>
            <BroadcastSpec />
          </DCArtboard>
          <DCArtboard id="e-overlay" label="Overlay aplicado sobre los 4 temas" width={1440} height={860}>
            <BroadcastOverlay />
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Modo Live / Broadcast">
          <TweakToggle
            label="Activar overlay breaking"
            value={t.showLiveOverlay}
            onChange={(v) => t.setTweak('showLiveOverlay', v)}
            hint="Inyecta una franja BREAKING + ticker encima del canvas, simulando el modo transversal."
          />
        </TweakSection>
        <TweakSection title="Sobre este canvas">
          <div style={{ fontSize: 11, color: '#94A3B8', lineHeight: 1.5 }}>
            Cada tema = una <strong>ficha de spec</strong> + una <strong>pantalla arquetipo</strong>.
            Arrastra los artboards para reordenarlos, doble-click para abrir en foco.
            Datos simulados: <code style={{ fontFamily: 'var(--mono)' }}>IBEX SIM</code>.
          </div>
        </TweakSection>
      </TweaksPanel>

      {/* Optional live overlay when toggled on */}
      {t.showLiveOverlay && <LiveOverlay />}
    </>
  );
}

// ─── Cover artboard ────────────────────────────────────────────────────
function CoverArtboard() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#0F1117', color: '#F4F1E9', padding: 40,
      fontFamily: '"Geist", sans-serif', overflow: 'hidden', position: 'relative',
      backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(37,99,235,0.10), transparent 50%), radial-gradient(circle at 10% 90%, rgba(180,83,9,0.08), transparent 50%)',
    }}>
      <div style={{ fontFamily: '"Geist Mono", monospace', fontSize: 11, color: '#94A3B8', letterSpacing: '0.16em' }}>FINAZ · VISUAL GRAMMAR v0.1</div>
      <h1 style={{
        margin: '20px 0 0', fontFamily: '"Newsreader", serif',
        fontSize: 56, fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.0, color: '#F8FAFC',
      }}>
        Una gramática,<br/>
        <em style={{ color: '#93C5FD' }}>cinco voces</em>.
      </h1>
      <p style={{
        fontFamily: '"Newsreader", serif',
        fontSize: 18, lineHeight: 1.45, color: '#CBD5E1', marginTop: 22, maxWidth: 360,
      }}>
        El mismo episodio simulado contado desde cuatro temas + un modo transversal Live/Broadcast. Misma evidencia, distinta densidad y profundidad por perfil.
      </p>

      {/* objectives */}
      <div style={{ marginTop: 36, display: 'flex', gap: 24 }}>
        {[
          ['FORMAR',   'Edu Lab · razonamiento explícito'],
          ['INFORMAR', 'Market Story + Newsroom · claim con fuente'],
          ['ENTRETENER','Live/Broadcast · capa audiovisual por umbral'],
        ].map(([k, v]) => (
          <div key={k} style={{ flex: 1, borderTop: '1px solid #1E293B', paddingTop: 10 }}>
            <div style={{ fontFamily: '"Geist Mono", monospace', fontSize: 11, color: '#93C5FD', letterSpacing: '0.14em' }}>{k}</div>
            <div style={{ fontSize: 12, color: '#CBD5E1', marginTop: 4, lineHeight: 1.4 }}>{v}</div>
          </div>
        ))}
      </div>

      {/* themes list */}
      <div style={{ marginTop: 36 }}>
        <div style={{ fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#64748B', letterSpacing: '0.14em', marginBottom: 14 }}>EN ESTE CANVAS</div>
        {[
          ['A', 'Market Story',         'Retail',                 '#F4F1E9'],
          ['B', 'Edu Lab',              'Estudiante con formación', '#F5F1E6'],
          ['C', 'Newsroom Provenance',  'Periodista · editor',     '#F4F1E9'],
          ['D', 'Analyst Terminal',     'Gestor · trader intradía','#0A0E14'],
          ['E', 'Live / Broadcast',     'Transversal',             '#DC2626'],
        ].map(([id, name, profile, accent]) => (
          <div key={id} style={{
            display: 'grid', gridTemplateColumns: '28px 1fr auto',
            alignItems: 'center', padding: '12px 0',
            borderTop: '1px solid #1E293B',
            gap: 14,
          }}>
            <div style={{ width: 22, height: 22, background: accent, borderRadius: 3, display: 'grid', placeItems: 'center', fontFamily: '"Geist Mono", monospace', fontWeight: 700, fontSize: 12, color: accent === '#0A0E14' || accent === '#DC2626' ? '#fff' : '#0F1117' }}>{id}</div>
            <div>
              <div style={{ fontFamily: '"Newsreader", serif', fontSize: 18, fontWeight: 500, color: '#F8FAFC' }}>{name}</div>
              <div style={{ fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#94A3B8', marginTop: 2, letterSpacing: '0.06em' }}>{profile}</div>
            </div>
            <span style={{ fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#64748B' }}>tema → ficha + pantalla</span>
          </div>
        ))}
      </div>

      {/* footer */}
      <div style={{
        position: 'absolute', bottom: 32, left: 40, right: 40,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#64748B', letterSpacing: '0.08em',
      }}>
        <span>DATOS SIMULADOS · NO USAR COMO ANÁLISIS FINANCIERO</span>
        <span>v0.1 · 27/05/2026</span>
      </div>
    </div>
  );
}

// ─── Profile ↔ Theme matrix ────────────────────────────────────────────
function ProfileMatrix() {
  const profiles = [
    { id: 1, name: 'Retail',              who: 'Usuario sin información específica',          theme: 'A', themeName: 'Market Story',        density: 2, focus: '¿Qué pasó? ¿Qué significa?', objective: 'INFORMAR' },
    { id: 2, name: 'Estudiante',          who: 'Usuario con formación en finanzas',           theme: 'B', themeName: 'Edu Lab',             density: 3, focus: '¿Por qué? ¿Cómo se mide?',    objective: 'FORMAR' },
    { id: 3, name: 'Periodista / editor', who: 'Producción y revisión editorial',             theme: 'C', themeName: 'Newsroom Provenance', density: 3, focus: '¿Es publicable? ¿Qué fuente?', objective: 'INFORMAR · VERIFICAR' },
    { id: 4, name: 'Gestor de fondo',     who: 'Análisis de cartera · profesional',           theme: 'D', themeName: 'Analyst Terminal',    density: 5, focus: '¿Qué comparar? ¿Qué vigilar?', objective: 'INFORMAR · COMPARAR' },
    { id: 5, name: 'Trader intradía',     who: 'Operativa rápida · ventana corta',            theme: 'D', themeName: 'Analyst Terminal',    density: 5, focus: '¿Qué cambió en este tick?',     objective: 'ALERTAR · OPERAR' },
  ];

  const themeColors = {
    A: '#1F4FA8', B: '#0F766E', C: '#16161A', D: FINAZ_TOKENS.live, E: '#DC2626',
  };

  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#FBFAF5', color: '#15171C', padding: 36,
      fontFamily: '"Geist", sans-serif', overflow: 'hidden',
    }}>
      <div style={{ fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#7A7D89', letterSpacing: '0.16em' }}>MATRIZ</div>
      <div style={{ fontFamily: '"Newsreader", serif', fontSize: 38, fontWeight: 400, letterSpacing: '-0.022em', marginTop: 8, lineHeight: 1 }}>
        Perfiles <em>↔</em> Temas
      </div>
      <div style={{ fontFamily: '"Newsreader", serif', fontSize: 15, color: '#3F4350', marginTop: 8, maxWidth: 540, lineHeight: 1.5 }}>
        Cada perfil se sirve <em>preferentemente</em> de un tema, pero puede activar el modo Live/Broadcast.
        Gestor y trader comparten Analyst Terminal con diferente <em>watchlist</em> y umbrales.
      </div>

      {/* table */}
      <div style={{ marginTop: 28, border: '1px solid #ECE7DA', borderRadius: 4, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '40px 1.4fr 1.6fr 1.2fr 60px 1.6fr 1.4fr', background: '#F4F0E4', padding: '10px 14px', fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#7A7D89', letterSpacing: '0.1em' }}>
          <span>#</span><span>PERFIL</span><span>DESCRIPCIÓN</span><span>TEMA</span><span>DENS.</span><span>PREGUNTA PRINCIPAL</span><span>OBJETIVO</span>
        </div>
        {profiles.map(p => (
          <div key={p.id} style={{
            display: 'grid', gridTemplateColumns: '40px 1.4fr 1.6fr 1.2fr 60px 1.6fr 1.4fr',
            padding: '14px 14px', borderTop: '1px solid #ECE7DA',
            alignItems: 'center', background: '#FFFFFF',
          }}>
            <span style={{ fontFamily: '"Geist Mono", monospace', fontSize: 12, color: '#7A7D89' }}>{p.id}</span>
            <span style={{ fontFamily: '"Newsreader", serif', fontSize: 16, fontWeight: 500 }}>{p.name}</span>
            <span style={{ fontSize: 12, color: '#3F4350', lineHeight: 1.4 }}>{p.who}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 18, height: 18, borderRadius: 3, background: themeColors[p.theme], display: 'grid', placeItems: 'center', color: '#fff', fontFamily: '"Geist Mono", monospace', fontWeight: 700, fontSize: 11 }}>{p.theme}</span>
              <span style={{ fontSize: 12 }}>{p.themeName}</span>
            </span>
            <span style={{ display: 'flex', gap: 2 }}>{[1,2,3,4,5].map(i => <span key={i} style={{ width: 8, height: 4, borderRadius: 1, background: i <= p.density ? '#15171C' : '#ECE7DA' }} />)}</span>
            <span style={{ fontFamily: '"Newsreader", serif', fontSize: 13, fontStyle: 'italic', color: '#15171C', lineHeight: 1.35 }}>{p.focus}</span>
            <span style={{ fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#7A7D89', letterSpacing: '0.06em' }}>{p.objective}</span>
          </div>
        ))}
      </div>

      {/* questions x viz mapping (from doc) */}
      <div style={{ marginTop: 26 }}>
        <div style={{ fontFamily: '"Geist Mono", monospace', fontSize: 10, color: '#7A7D89', letterSpacing: '0.14em', marginBottom: 10 }}>PREGUNTA × RECURSO VISUAL × PERFILES</div>
        <div style={{ display: 'grid', gap: 6 }}>
          {[
            { q: '¿Qué ha pasado?',         viz: 'línea episode-aligned + event-vs-price',  who: ['A','B','C','D'] },
            { q: '¿Cuánto ha cambiado?',    viz: 'kpi-with-spark · delta table',            who: ['A','B','D'] },
            { q: '¿Por qué ha pasado?',     viz: 'waterfall · cause-effect chain',          who: ['B','C','D'] },
            { q: '¿A quién afecta?',        viz: 'heat.grid · scorecard',                   who: ['C','D'] },
            { q: '¿Qué debo vigilar?',      viz: 'watch levels · watchlist-table',          who: ['A','D'] },
            { q: '¿Puedo fiarme?',          viz: 'source-lineage · source-confidence',      who: ['A','B','C'] },
            { q: '¿Es publicable?',         viz: 'fact-check-status · disclosure',          who: ['C'] },
            { q: '¿Es urgente?',            viz: 'market-ticker · alert-ribbon',            who: ['E'] },
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1.2fr 1.6fr auto',
              padding: '8px 12px', background: '#FFFFFF', border: '1px solid #ECE7DA', borderRadius: 3,
              alignItems: 'center',
            }}>
              <span style={{ fontFamily: '"Newsreader", serif', fontSize: 14, fontStyle: 'italic' }}>{r.q}</span>
              <span style={{ fontFamily: '"Geist Mono", monospace', fontSize: 11, color: '#3F4350' }}>{r.viz}</span>
              <span style={{ display: 'inline-flex', gap: 4 }}>
                {['A','B','C','D','E'].map(t => (
                  <span key={t} style={{
                    width: 18, height: 18, borderRadius: 3,
                    background: r.who.includes(t) ? themeColors[t] : 'transparent',
                    border: r.who.includes(t) ? 'none' : '1px solid #DDD5C2',
                    color: r.who.includes(t) ? '#fff' : '#BDB29A',
                    display: 'grid', placeItems: 'center',
                    fontFamily: '"Geist Mono", monospace', fontSize: 10, fontWeight: 700,
                  }}>{t}</span>
                ))}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Live overlay (tweak) ──────────────────────────────────────────────
function LiveOverlay() {
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      pointerEvents: 'none', fontFamily: '"Geist Mono", monospace',
    }}>
      <div style={{
        background: '#DC2626', color: '#fff',
        padding: '8px 18px', display: 'flex', gap: 14, alignItems: 'center',
        fontSize: 12, fontWeight: 600, letterSpacing: '0.12em',
        boxShadow: '0 8px 24px rgba(220,38,38,0.30)',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 99, background: '#fff', boxShadow: '0 0 0 4px rgba(255,255,255,0.25)' }} />
        BREAKING · MODO LIVE / BROADCAST ACTIVADO
        <span style={{ opacity: 0.85 }}>· apertura EEUU · volatilidad SIM al alza</span>
        <span style={{ marginLeft: 'auto', opacity: 0.85 }}>15:30 CET · MOCK</span>
      </div>
      <div style={{
        background: '#000', color: '#CBD5E1',
        padding: '5px 18px', display: 'flex', gap: 24,
        fontSize: 11, whiteSpace: 'nowrap', overflow: 'hidden',
      }}>
        <span>IBEX SIM <span style={{ color: '#22C55E' }}>+1,24%</span></span>
        <span>BANCA SIM <span style={{ color: '#22C55E' }}>+2,40%</span></span>
        <span>ENERG SIM <span style={{ color: '#EF4444' }}>−0,70%</span></span>
        <span>INMOB SIM <span style={{ color: '#EF4444' }}>−1,00%</span></span>
        <span>VOL 20D <span style={{ color: '#3B82F6' }}>+18%</span></span>
        <span>EUR/USD <span style={{ color: '#22C55E' }}>+0,18%</span></span>
        <span>BUND10Y <span style={{ color: '#EF4444' }}>−2,4 bps</span></span>
        <span style={{ marginLeft: 'auto', color: '#64748B' }}>SIM-MKT-001 · MOCK</span>
      </div>
    </div>
  );
}

// mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FinazApp />);