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

/* `mark` es el nombre del archivo oficial en _ds/assets/partners/, o null si aún
   no se tiene. Se declara en vez de sondear el archivo para no dejar un 404 en
   consola en cada visita. Ver assets/partners/README.md. */
const PARTNERS = [
  { name: 'Microsoft', mark: 'microsoft.svg', d: 'Partner. Plataforma cloud: datos, integración e IA sobre Azure.' },
  { name: 'Databricks', mark: 'databricks.png', d: 'Partner. Lakehouse, procesamiento y ciclo de vida de modelos.' },
];

/** Marca de partner: archivo oficial cuando existe, si no el nombre en texto — el
    tratamiento por defecto del sistema, que prohíbe redibujar marcas de terceros. */
function PartnerLogo({ name, mark }) {
  const [failed, setFailed] = React.useState(false);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, minHeight: 32 }}>
      {mark && !failed ? (
        <img src={DS_BASE + '/assets/partners/' + mark} alt="" aria-hidden="true" width="26" height="26"
          onError={() => setFailed(true)}
          style={{ height: 26, width: 'auto', display: 'block' }} />
      ) : null}
      <span style={{ fontFamily: 'var(--font-heading)', fontSize: 22, fontWeight: 600, letterSpacing: '-.015em', color: 'var(--text-heading)' }}>{name}</span>
    </div>
  );
}

function NosotrosScreen({ onNavigate }) {
  return (
    <main>
      <PageHead eyebrow="Nosotros" title="Convertimos la complejidad de datos en dirección clara"
        lead="Para que cada empresa de LATAM compita al nivel del mejor jugador global — con su propia operación, su regulación y su gente." />

      <Section>
        <div className="grid c3">
          {[['compass', 'Propósito', 'Convertir la complejidad de datos en dirección clara para que cada empresa de LATAM compita al nivel del mejor jugador global.'], ['target', 'Misión', 'Cerrar el Execution Gap de nuestros clientes: llevar la estrategia de datos e IA a producción, sprint por sprint, con entregables verificables.'], ['telescope', 'Visión a 10 años', 'Ser la referencia obligada de transformación de datos e IA en América Latina.']].map(([icon, t, d]) => (
            <Card key={t} padding="lg" accent="var(--dn-esmeralda)" style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
              <Icon name={icon} size={26} color="var(--dn-esmeralda)" />
              <h3 style={{ fontSize: 22 }}>{t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--text-muted)', textWrap: 'pretty' }}>{d}</p>
            </Card>
          ))}
        </div>
      </Section>

      <Section tone="muted">
        <div className="split">
          <SectionHead eyebrow="Cómo trabajamos" title="Ingeniería certificada, no comercial certificado." lead="En cada conversación técnica está la persona que va a escribir el código. No hay una capa de traducción entre tu equipo y el nuestro." />
          <div style={{ display: 'grid', gap: 12 }}>
            {['El ingeniero que diseña la arquitectura es el que la sostiene en producción.', 'Un dueño por dominio, del lado de Datnova y del lado del cliente.', 'La transferencia de conocimiento es parte del contrato, no un extra al cierre.'].map(t => (
              <Card key={t} padding="md" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 16, alignItems: 'center' }}>
                <span className="chev chev-sm" style={{ borderLeftColor: 'var(--dn-esmeralda)' }} />
                <span style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--text-body)' }}>{t}</span>
              </Card>
            ))}
          </div>
        </div>
      </Section>

      <Section tone="muted">
        <div className="split">
          <SectionHead eyebrow="Plataformas y partnership" title="Partners de Microsoft y Databricks" lead="Construimos sobre Azure y Databricks: el mismo stack en el que nuestros ingenieros trabajan a diario y sobre el que se sostiene cada entregable." />
          <div style={{ display: 'grid', gap: 12 }}>
            {PARTNERS.map(p => (
              <Card key={p.name} padding="lg" style={{ display: 'grid', gap: 12, alignContent: 'start' }}>
                <PartnerLogo name={p.name} mark={p.mark} />
                <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-muted)' }}>{p.d}</p>
              </Card>
            ))}
            <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-muted)' }}>Los logotipos de terceros se publican solo con autorización de marca vigente.</p>
          </div>
        </div>
      </Section>

      <CtaBand onNavigate={onNavigate} title="Conversemos con tu equipo técnico." body="El diagnóstico de 2 semanas empieza con una sesión entre tus ingenieros y los nuestros. Sin capa comercial en medio." cta="Agendar diagnóstico" />
    </main>
  );
}

Object.assign(window, { NosotrosScreen });