// Bloque 5 — SOLUTION: diagrama 4 capas de arquitectura
// Fondo blanco. Torre horizontal con líneas técnicas y anotaciones mono.
const HomeSolution = () => {
  const layers = [
    { n: '01', k: 'BASE',                title: 'Sobre tu stack, no contra él.',              desc: 'Se integra a tus sistemas existentes (SAP, Oracle, Salesforce, SCADA). No pide reemplazar nada.' },
    { n: '02', k: 'COGNICIÓN PRIVADA',   title: 'Modelos entrenados sobre tu operación.',      desc: 'SDMs propietarios entrenados con tus datos, tus reglas, tu vocabulario. Nunca en la nube pública.' },
    { n: '03', k: 'ORQUESTACIÓN',        title: 'Ejecuta lo que otros solo recomiendan.',      desc: 'Runtime auditable que decide, dispara acciones y cierra el loop en tus sistemas — no en un dashboard.' },
    { n: '04', k: 'IMPACTO',             title: 'Resultados imposibles de ignorar.',           desc: 'MTTR, precisión, costo por decisión, autonomía. Medidos en tu KPI, no en el nuestro.' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 72, alignItems: 'end' }}>
          <div>
            <Reveal>
              <SectionMeta n="02" label="La arquitectura"/>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em',
                margin: 0, color: '#000',
              }}>
                Construimos la cognición operacional que tu empresa <span style={{ color: '#F4024C' }}>opera y controla</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Cuatro capas. Un solo compromiso: que la operes tú. Cada capa es opcional-adaptativa y
              se despliega sobre tu infraestructura, no sobre la nuestra.
            </p>
            <div style={{ marginTop: 24 }}>
              <Button variant="ghost" href="plataforma.html" icon="arrow-right">Ver plataforma completa</Button>
            </div>
          </Reveal>
        </div>

        <ArchitectureStack layers={layers}/>
      </Container>
    </section>
  );
};

const ArchitectureStack = ({ layers }) => (
  <div style={{ border: '1.5px solid #1E1F26', background: '#FFFFFF' }}>
    {/* Header técnico */}
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '14px 24px', borderBottom: '1.5px solid #1E1F26',
      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A',
    }}>
      <span>OMNIX · PLATFORM STACK</span>
      <span>4 LAYERS · READ TOP-DOWN</span>
    </div>
    {layers.map((L, i) => (
      <Reveal key={L.n} delay={i * 100}>
        <div style={{
          display: 'grid', gridTemplateColumns: '80px 220px 1fr auto',
          alignItems: 'center', gap: 32,
          padding: '32px 24px',
          borderBottom: (i < layers.length - 1) ? '1px solid #E4EBF3' : 'none',
          position: 'relative',
          transition: 'background 200ms',
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = '#FAFBFD'}
        onMouseLeave={(e) => e.currentTarget.style.background = '#FFFFFF'}>
          {/* Número mono */}
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: '#96A3B5' }}>
            LAYER · {L.n}
          </div>
          {/* Key */}
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', color: '#F4024C', textTransform: 'uppercase' }}>
            {L.k}
          </div>
          {/* Título + desc */}
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', marginBottom: 6 }}>
              {L.title}
            </div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#52557A', lineHeight: 1.5 }}>
              {L.desc}
            </div>
          </div>
          {/* Flecha */}
          <div style={{ color: '#1E1F26' }}>
            <i data-lucide="arrow-right" width="20" height="20" style={{ strokeWidth: 1.5 }}/>
          </div>
        </div>
      </Reveal>
    ))}
    {/* Footer motores */}
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      borderTop: '1.5px solid #1E1F26', background: '#000', color: '#FFF',
    }}>
      {['INGEST', 'CORE', 'RUNTIME', 'CORTEX'].map((eng, i) => (
        <div key={eng} style={{
          padding: '22px 24px',
          borderRight: (i < 3) ? '1px solid #2E3140' : 'none',
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', marginBottom: 6 }}>
            ENGINE 0{i+1}
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.005em' }}>
            OMNIX {eng.charAt(0)}{eng.slice(1).toLowerCase()}
          </div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { HomeSolution, ArchitectureStack });