const { Button, SectionLabel, Card, Badge, Tag, Icon } = window.DatnovaDesignSystem_e8e0a8;

const PILARES = [
  { icon: 'gauge', t: 'Velocidad', q: 'Lo que otros entregan en 18 meses, nosotros lo medimos en semanas.', d: 'Ciclos cortos con entregable verificable por sprint. El valor se mide en producción, no en avance de plan.' },
  { icon: 'map-pinned', t: 'Contexto LATAM', q: 'No traducimos frameworks globales — los diseñamos para tu realidad.', d: 'Entendimiento regulatorio, cultural y operativo de la región: cómo se factura, se audita y se decide aquí.' },
  { icon: 'wrench', t: 'Profundidad técnica', q: 'Ingeniería certificada, no comercial certificado.', d: 'Los ingenieros lideran las conversaciones técnicas; no las traducen para un comercial que las repite.' },
];

const SERVICIOS_HOME = [
  { id: 'plataformas', icon: 'database', accent: 'var(--dn-layer-ingestion)', t: 'Plataformas de datos', d: 'Arquitectura Lakehouse sobre Azure y Databricks, gobernada desde el día uno.' },
  { id: 'analitica', icon: 'line-chart', accent: 'var(--dn-layer-processing)', t: 'Analítica & BI', d: 'Dashboards y KPIs que el negocio realmente usa para decidir.' },
  { id: 'ia', icon: 'brain-circuit', accent: 'var(--dn-ai)', t: 'IA aplicada', d: 'De PoC a producción: casos de uso con resultados medibles.', ai: true },
  { id: 'gobernanza', icon: 'shield-check', accent: 'var(--dn-layer-governance)', t: 'Gobernanza de datos', d: 'Calidad, seguridad y cumplimiento que habilitan la IA, no la frenan.' },
  { id: 'cloud', icon: 'cloud-cog', accent: 'var(--dn-layer-consumption)', t: 'Migración y modernización cloud', d: 'Incremental, validada sprint por sprint. Sin big-bang.' },
];

const ROLES = [
  ['CEO', 'Resultados medibles en el primer trimestre, no un roadmap de 3 años.'],
  ['CFO', 'Pricing por sprint con entregables claros, no horas sin control.'],
  ['CIO', 'Arquitectura que coexiste con tu stack actual, migración incremental.'],
  ['CTO', 'Ingeniería certificada, no comercial certificado.'],
  ['CDO', 'Empezamos por el dominio de mayor impacto, no por todo a la vez.'],
  ['VP Data', 'Acompañamiento post-implementación con SLA definido.'],
  ['VP AI', 'Casos de uso que llevamos de PoC a producción, con resultados.'],
  ['Dir. Innovación', 'Una historia de transformación con resultados reales detrás.'],
];

const ARQUETIPOS = [
  { ind: 'Servicios financieros', reto: 'Cierre y riesgo con una sola versión de la verdad.', layers: ['Core bancario y transacciones', 'Lakehouse medallion con linaje', 'Controles y auditoría por dominio', 'Tableros de riesgo y finanzas'] },
  { ind: 'Retail y consumo', reto: 'Demanda y precio decididos con dato de hoy, no del mes pasado.', layers: ['POS, e-commerce e inventario', 'Modelos de demanda y precio', 'Catálogo y permisos por marca', 'Operación de tienda y categoría'] },
  { ind: 'Manufactura', reto: 'Telemetría de planta convertida en decisión de mantenimiento.', layers: ['Sensores de línea y OEE', 'Procesamiento por familia de equipo', 'Calidad del dato y trazabilidad', 'Alertas a piso de planta'] },
];

const LAYER_COLORS = ['var(--dn-layer-ingestion)', 'var(--dn-layer-processing)', 'var(--dn-layer-governance)', 'var(--dn-layer-consumption)'];
const LAYER_NAMES = ['Ingesta', 'Procesamiento', 'Gobernanza', 'Consumo / BI'];

function GapDiagram() {
  const Node = ({ point, title, detail, color, icon }) => (
    <div style={{ padding: '32px 32px', display: 'grid', gap: 12, alignContent: 'center', borderTop: '3px solid ' + color }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name={icon} size={22} color={color} />
        <span className="dn-label" style={{ fontSize: 11, color: 'var(--text-muted)' }}>{point}</span>
      </div>
      <h3 style={{ fontSize: 21, textWrap: 'pretty' }}>{title}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)' }}>{detail}</p>
    </div>
  );
  return (
    <div className="gapdiag" style={{ boxShadow: 'var(--shadow-card)' }}>
      <Node point="Punto A" title="Donde está tu dato hoy" detail="Fuentes dispersas, pilotos detenidos, tableros que nadie abre y una estrategia aprobada en papel." color="var(--dn-layer-ingestion)" icon="database" />
      <div className="gapmid">
        <div className="dn-label" style={{ fontSize: 10, color: 'var(--text-muted)', textAlign: 'center' }}>Velocidad de ejecución</div>
        <div aria-hidden="true" style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          {[0, 1, 2, 3, 4].map(i => <span key={i} className="chev" style={{ borderLeftColor: i > 2 ? 'var(--dn-turquesa)' : 'var(--dn-esmeralda)', opacity: 0.45 + i * 0.14 }} />)}
        </div>
        <div style={{ fontSize: 12, lineHeight: 1.45, color: 'var(--text-muted)', textAlign: 'center', maxWidth: 160 }}>Aquí vive el Execution Gap: semanas o meses de distancia entre diseño y producción.</div>
      </div>
      <Node point="Punto B" title="Donde el dato se convierte en dirección de negocio" detail="Un modelo en producción, un dueño por dominio, una métrica que el comité usa para decidir." color="var(--dn-layer-consumption)" icon="compass" />
    </div>
  );
}

function MiniArch({ layers }) {
  return (
    <div className="svc-diagram" aria-hidden="true">
      {layers.map((l, i) => (
        <div key={l} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 10, alignItems: 'center', padding: '9px 12px', borderRadius: 6, background: 'var(--surface-muted)', borderLeft: '3px solid ' + LAYER_COLORS[i] }}>
          <span className="chev chev-sm" style={{ borderLeftColor: LAYER_COLORS[i] }} />
          <span style={{ fontSize: 13, color: 'var(--text-body)' }}>{l}</span>
        </div>
      ))}
    </div>
  );
}

function HomeScreen({ onNavigate }) {
  return (
    <main>
      {/* 4.1 Hero */}
      <section className="hero" style={{ background: 'var(--surface-inverse)', marginTop: -89, paddingTop: 201 }}>
        <ChevronField opacity={0.1} />
        <div className="dn-container" style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gap: 26, maxWidth: 860, justifyItems: 'start' }}>
            <SectionLabel tone="inverse">Execution Intelligence Partner · LATAM</SectionLabel>
            <h1 style={{ color: '#fff', fontSize: 'clamp(40px,6vw,66px)', textWrap: 'pretty' }}>Dirección con datos.</h1>
            <p style={{ fontSize: 'clamp(17px,2vw,21px)', lineHeight: 1.55, color: 'rgba(255,255,255,.78)', maxWidth: 700 }}>
              Cerramos el Execution Gap: la brecha entre la estrategia de datos e IA que tu empresa diseñó y lo que realmente funciona en producción.
            </p>
            <div className="row" style={{ marginTop: 8 }}>
              <Button size="lg" iconTrailing="arrow-right" onClick={() => onNavigate('diagnostico')}>Agendar diagnóstico de 2 semanas</Button>
              <Button size="lg" variant="inverse" onClick={() => onNavigate('metodologia')}>Ver cómo trabajamos</Button>
            </div>
            <p style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', fontSize: 13, color: 'rgba(255,255,255,.6)', marginTop: 4 }}>
              <Icon name="shield-check" size={16} color="var(--dn-esmeralda)" />
              Partners de Microsoft y Databricks
            </p>
          </div>
        </div>
      </section>

      {/* 4.2 Franja de contexto */}
      <Section tight>
        <div className="grid c3">
          {[['48%', 'Solo 48% de los proyectos de IA llega a producción.', 'Gartner, 2024'], ['8 meses', 'Tiempo promedio para pasar de prototipo a producción.', 'Gartner, 2024'], ['30%', 'De los proyectos de IA generativa se abandona después del PoC.', 'Gartner']].map(([n, claim, fuente]) => (
            <div key={n} style={{ display: 'grid', gap: 10, alignContent: 'start' }}>
              <span className="num" style={{ fontSize: 56, color: 'var(--text-heading)' }}>{n}</span>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--text-body)', maxWidth: 300 }}>{claim}</p>
              <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Fuente: {fuente}</span>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--border-subtle)', fontSize: 13, color: 'var(--text-muted)' }}>
          Regla editorial: si no hay fuente verificable, la cifra no se publica.
        </p>
      </Section>

      {/* 4.3 El espejismo */}
      <Section tone="muted">
        <div className="split">
          <SectionHead eyebrow="El espejismo" title="No es un problema de tecnología." />
          <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--text-body)', textWrap: 'pretty' }}>
            La mayoría de las empresas en LATAM cree que su problema es de tecnología. No lo es. El problema real está en la brecha entre lo que se diseña y lo que termina funcionando en producción — adaptado a cómo opera realmente tu empresa.
          </p>
        </div>
      </Section>

      {/* 4.4 El Execution Gap */}
      <Section id="execution-gap">
        <SectionHead eyebrow="Concepto ancla" title="El Execution Gap" lead="La distancia entre la estrategia de datos e IA que una empresa compra, y el valor que realmente entrega en producción." max={720} />
        <div style={{ marginTop: 44 }}><GapDiagram /></div>
        <p style={{ marginTop: 36, maxWidth: 720, fontFamily: 'var(--font-heading)', fontSize: 24, fontWeight: 600, lineHeight: 1.35, letterSpacing: '-.015em', color: 'var(--text-heading)', borderLeft: '3px solid var(--dn-esmeralda)', paddingLeft: 24, textWrap: 'pretty' }}>
          La estrategia sin ejecución es contenido; la ejecución sin contexto es riesgo.
        </p>
      </Section>

      {/* 4.5 Tres pilares */}
      <Section tone="muted">
        <SectionHead eyebrow="Cómo lo cerramos" title="Tres pilares, un mismo estándar de ejecución" />
        <div className="grid c3" style={{ marginTop: 40 }}>
          {PILARES.map(p => (
            <Card key={p.t} padding="lg" accent="var(--dn-esmeralda)" style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
              <Icon name={p.icon} size={26} color="var(--dn-esmeralda)" />
              <h3 style={{ fontSize: 22 }}>{p.t}</h3>
              <p style={{ fontFamily: 'var(--font-heading)', fontSize: 17, fontWeight: 600, lineHeight: 1.4, letterSpacing: '-.01em', color: 'var(--text-heading)', textWrap: 'pretty' }}>{p.q}</p>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>{p.d}</p>
            </Card>
          ))}
        </div>
      </Section>

      {/* 4.6 Servicios */}
      <Section id="servicios">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
          <SectionHead eyebrow="Servicios" title="Cinco líneas, una sola forma de trabajar" />
        </div>
        <div className="grid c5" style={{ marginTop: 40 }}>
          {SERVICIOS_HOME.map(s => (
            <Card key={s.id} interactive accent={s.accent} padding="lg" onClick={() => onNavigate('servicios', s.id)} style={{ display: 'grid', gap: 12, alignContent: 'start' }}>
              <Icon name={s.icon} size={24} color={s.accent} />
              <h3 style={{ fontSize: 18 }}>{s.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)' }}>{s.d}</p>
              {s.ai ? <div><Badge tone="ai">IA / ML</Badge></div> : null}
              <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginTop: 4, fontSize: 13, fontWeight: 600, color: 'var(--text-link)' }}>Ver detalle<Icon name="arrow-right" size={14} /></span>
            </Card>
          ))}
        </div>
      </Section>

      {/* 4.7 Metodología resumida */}
      <section className="sec" style={{ background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden' }}>
        <div className="dn-container" style={{ position: 'relative' }}>
          <SectionHead tone="inverse" eyebrow="Metodología" title="Por sprint, no por hora." max={620} />
          <p style={{ marginTop: 28, maxWidth: 860, fontFamily: 'var(--font-heading)', fontSize: 'clamp(19px,2.2vw,26px)', fontWeight: 600, lineHeight: 1.45, letterSpacing: '-.015em', color: '#fff', borderLeft: '3px solid var(--dn-esmeralda)', paddingLeft: 24, textWrap: 'pretty' }}>
            No cobramos por horas trabajadas. Cobramos por sprint con entregable verificable. Si el entregable no cumple el criterio acordado, no se factura ese sprint.
          </p>
          <div className="timeline" style={{ marginTop: 56 }}>
            {[['01', 'Diagnóstico', '2 semanas', 'Execution Gap Brief + arquitectura propuesta. Monto fijo.'], ['02', 'Sprints 1–N', '2–4 semanas cada uno', 'Entregables específicos por sprint, con criterio de aceptación acordado antes de empezar.'], ['03', 'Post-launch', 'Continuo', 'Soporte con SLA definido y transferencia de conocimiento escrita en el contrato.']].map(([n, t, dur, d]) => (
              <div key={n} className="tl-step">
                <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 14 }}>
                  <span className="chev" style={{ borderLeftColor: 'var(--dn-esmeralda)' }} />
                  <span className="dn-label num" style={{ fontSize: 11, color: 'var(--dn-menta)' }}>{n}</span>
                </div>
                <h3 style={{ color: '#fff', fontSize: 22 }}>{t}</h3>
                <div style={{ fontSize: 13, color: 'var(--dn-menta)', marginTop: 6 }}>{dur}</div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,.7)', marginTop: 12, maxWidth: 320 }}>{d}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 48 }}>
            <Button variant="inverse" iconTrailing="arrow-right" onClick={() => onNavigate('metodologia')}>Ver metodología completa</Button>
          </div>
        </div>
      </section>

      {/* 4.8 Para tu rol */}
      <Section>
        <SectionHead eyebrow="Para tu rol" title="Cada rol siente el Execution Gap distinto." max={620} />
        <div className="grid c4" style={{ marginTop: 40 }}>
          {ROLES.map(([r, q]) => (
            <div key={r} style={{ display: 'grid', gap: 10, alignContent: 'start', padding: '20px 0 0', borderTop: '2px solid var(--dn-esmeralda)' }}>
              <span className="dn-label" style={{ fontSize: 11, color: 'var(--text-heading)' }}>{r}</span>
              <p className="role-quote">{q}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* 4.9 Arquitecturas de referencia (variante de lanzamiento, sin casos con nombre de cliente) */}
      <Section tone="muted">
        <SectionHead eyebrow="Arquitecturas de referencia" title="Cómo se ve cerrar la brecha en tu industria" lead="Tres arquitecturas de referencia, sin nombres de cliente: la forma en que ordenamos ingesta, procesamiento, gobernanza y consumo según la industria." />
        <div className="grid c3" style={{ marginTop: 40 }}>
          {ARQUETIPOS.map(a => (
            <Card key={a.ind} padding="lg" style={{ display: 'grid', gap: 16, alignContent: 'start' }}>
              <Tag>{a.ind}</Tag>
              <h3 style={{ fontSize: 19, textWrap: 'pretty' }}>{a.reto}</h3>
              <MiniArch layers={a.layers} />
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', fontSize: 11 }}>
                {LAYER_NAMES.map((n, i) => (
                  <span key={n} className="dn-label" style={{ fontSize: 10, color: 'var(--text-muted)', display: 'inline-flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: LAYER_COLORS[i] }} />{n}
                  </span>
                ))}
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* 4.10 CTA final */}
      <CtaBand onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { HomeScreen, MiniArch, LAYER_COLORS, LAYER_NAMES, ROLES, SERVICIOS_HOME });