// GOBIERNO · Template compartido para 6 subpáginas específicas
// Cada subpágina reutiliza este template con su configuración

const GobSubpage = ({ config }) => (
  <div>
    <SubHero config={config}/>
    <SubCases config={config}/>
    <SubLimits config={config}/>
    <SubArchitecture config={config}/>
    <SubEvidence config={config}/>
    <SubCTA config={config}/>
  </div>
);

const SubHero = ({ config }) => (
  <section style={{ background: '#FFFFFF', paddingTop: 96, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'linear-gradient(#E4EBF3 1px, transparent 1px), linear-gradient(90deg, #E4EBF3 1px, transparent 1px)',
      backgroundSize: '80px 80px', opacity: 0.5, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 90% 40%, #000 0%, transparent 55%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 90% 40%, #000 0%, transparent 55%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <a href="gobierno.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← Gobierno</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: config.color, textTransform: 'uppercase' }}>{config.area}</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 72, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              {config.h1.before} <span style={{ color: config.color }}>{config.h1.highlight}</span>{config.h1.after}
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 20, lineHeight: 1.5, color: '#52557A', maxWidth: 620, margin: '0 0 32px' }}>
              {config.subheadline}
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">{config.cta.primary}</Button>
              <Button variant="ghost" icon="arrow-right" href="gobierno.html">Ver todas las áreas</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ marginTop: 32, padding: '16px 20px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <i data-lucide="lock" width="16" height="16" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.55 }}>
                  <strong>Contenido público · capacidad potencial.</strong> Trabajos con organismos de Defensa, Seguridad Nacional e Inteligencia son reservados por ley. Identidad de clientes y detalles operacionales no se publican · protegidos bajo NDA y normativa aplicable. <a href="gobierno.html#legal" style={{ color: '#B8860B', textDecoration: 'underline' }}>Ver marco legal</a>.
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1.5px solid #1E1F26', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A' }}>
              <span>SDM · {config.sdm}</span>
              <span style={{ color: config.color }}>ARQUITECTURA</span>
            </div>
            <div style={{ padding: 28 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 12 }}>BUYERS INSTITUCIONALES</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#000', lineHeight: 1.55, marginBottom: 24 }}>{config.buyers}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 12 }}>KPI DE MISIÓN</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {config.missionKpis.map((k) => (
                  <span key={k} style={{ padding: '4px 10px', border: `1px solid ${config.color}`, color: config.color, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em' }}>{k}</span>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

const SubCases = ({ config }) => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="01" label="Casos de aplicación" color={config.color}/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
          Dominios de decisión · un mismo runtime cognitivo.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
        {config.cases.map((c, i) => (
          <SlideIn key={c.n} direction="up" delay={i * 70}>
            <div style={{ padding: '28px 26px', background: '#FFF', border: '1px solid #E4EBF3', minHeight: 220, display: 'flex', flexDirection: 'column', gap: 14, transition: 'border-color 220ms' }}
            onMouseEnter={(e) => e.currentTarget.style.borderColor = config.color}
            onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: config.color }}>CASO {String(i+1).padStart(2, '0')}</span>
                {c.risk && <Badge tone={c.risk === 'ALTO' ? 'fuxia' : (c.risk === 'MEDIO' ? 'warning' : 'success')}>RIESGO {c.risk}</Badge>}
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.2 }}>{c.n}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55, color: '#52557A', margin: 0, flex: 1 }}>{c.d}</p>
              <div style={{ paddingTop: 12, borderTop: '1px solid #E4EBF3', display: 'flex', gap: 20, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#52557A' }}>
                <span>SDM · <span style={{ color: config.color }}>{c.sdm}</span></span>
                <span>KPI · {c.kpi}</span>
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

const SubLimits = ({ config }) => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="02" label="Límites legales y éticos" dark color="#F4024C"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#FFF', maxWidth: 900 }}>
          {config.limitsTitle}
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#96A3B5', margin: '0 0 56px', maxWidth: 780 }}>
          Estos límites son parte del diseño, no una restricción posterior. Se codifican en el approval flow, en el gobierno del modelo y en los mecanismos de supervisión.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
        {config.limits.map((l, i) => (
          <SlideIn key={l.k} direction="up" delay={i * 80}>
            <div style={{ padding: '24px 26px', background: '#0A0B10', border: '1.5px solid #B8860B', minHeight: 140, display: 'flex', gap: 16 }}>
              <i data-lucide={l.icon} width="22" height="22" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0 }}/>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#FFF', letterSpacing: '-0.005em', marginBottom: 6 }}>{l.k}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#96A3B5', lineHeight: 1.55 }}>{l.d}</div>
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

const SubArchitecture = ({ config }) => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="03" label="Arquitectura propuesta" color={config.color}/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
          Fuentes · sistemas · decisiones · acciones.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {[
          { k: 'FUENTES', c: '#0050BD', items: config.arch.sources },
          { k: 'SISTEMAS', c: '#F4024C', items: config.arch.systems },
          { k: 'DECISIONES', c: '#1E1F26', items: config.arch.decisions },
          { k: 'ACCIONES', c: '#0F5132', items: config.arch.actions },
        ].map((L, i) => (
          <SlideIn key={L.k} direction="up" delay={i * 80}>
            <div style={{ padding: '28px 24px', background: '#FAFBFD', border: `1.5px solid ${L.c}`, minHeight: 320, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: L.c }}>{L.k}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {L.items.map((it) => (
                  <span key={it} style={{ padding: '4px 10px', border: `1px solid ${L.c}`, color: L.c, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em' }}>{it}</span>
                ))}
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

const SubEvidence = ({ config }) => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="04" label="Nivel de evidencia" color={config.color}/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
          Separamos rigurosamente lo que <em>sabemos</em> de lo que <em>proponemos</em>.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          { n: '01', k: 'PROBLEMA', label: '[VALIDAR FUENTE]', c: '#0050BD', desc: 'Estadísticas públicas · reportes oficiales · benchmarks del sector' },
          { n: '02', k: 'ARQUITECTURA', label: '[ARQUITECTURA PROPUESTA]', c: '#F4024C', desc: 'Diseño técnico · no implementado aún · sujeto a convenio' },
          { n: '03', k: 'DEMOSTRACIÓN', label: '[ESCENARIO MODELADO]', c: '#B8860B', desc: 'Video · prototipo · valores ilustrativos · no resultado real' },
          { n: '04', k: 'PILOTO', label: '[VALIDAR MÉTRICA · AUTORIZACIÓN]', c: '#0F5132', desc: 'Sólo con línea base firmada · KPI acordado · autorización' },
        ].map((c, i) => (
          <div key={c.n} style={{ padding: '24px 22px', background: '#FFF', border: `1.5px solid ${c.c}`, minHeight: 200, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: c.c }}>CAPA · {c.n}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: '#000', letterSpacing: '-0.005em' }}>{c.k}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>{c.label}</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.55, margin: 0 }}>{c.desc}</p>
          </div>
        ))}
      </div>
    </Container>
  </section>
);

const SubCTA = ({ config }) => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container narrow>
      <div style={{ textAlign: 'center' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: config.color, textTransform: 'uppercase', marginBottom: 24 }}>
            — {config.area} —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 60, lineHeight: 1, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            {config.ctaTitle}
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#96A3B5', maxWidth: 640, margin: '0 auto 32px' }}>
            {config.ctaSubtitle}
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">{config.cta.primary}</Button>
            <Button variant="ghost" dark icon="arrow-right" href="gobierno.html">Volver a Gobierno</Button>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { GobSubpage });
