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

const ACTOS = [
  { n: '01', t: 'Contexto', d: 'Tu comité ya aprobó una estrategia de datos e IA. Hay presupuesto, hay roadmap y hay proveedor. Lo que no hay, todavía, es valor en producción.' },
  { n: '02', t: 'El espejismo', d: 'Se diagnostica de nuevo. Se compra más tecnología. Se contrata más consultoría de diseño. El problema no era el diseño: era la ejecución.' },
  { n: '03', t: 'El diagnóstico', d: 'El Execution Gap es medible: cuántos dominios tienen dueño, cuántos pilotos tienen criterio de producción, cuánto tarda un cambio en llegar al negocio.' },
  { n: '04', t: 'La prueba', d: 'Sprints de 2–4 semanas con entregable verificable. Cada uno deja algo funcionando en producción y una decisión que antes no se podía tomar.' },
  { n: '05', t: 'La invitación', d: 'Empezamos con un diagnóstico acotado de 2 semanas y monto fijo. Sin compromiso de proyecto completo, sin retainer previo.' },
];

const SPRINTS = [
  { fase: 'Diagnóstico', dur: '2 semanas', color: 'var(--dn-layer-ingestion)', ent: 'Execution Gap Brief: brecha por dominio, quick wins, arquitectura propuesta y plan de sprints priorizado.', crit: 'Documento revisado con tu equipo técnico y de negocio. Monto fijo, cerrado antes de empezar.' },
  { fase: 'Sprint 1 — Fundación', dur: '2–4 semanas', color: 'var(--dn-layer-processing)', ent: 'Primer dominio en el lakehouse, con contrato de esquema y reglas de calidad ejecutables.', crit: 'El dominio corre en producción, con dueño asignado y alerta activa ante fallo de calidad.' },
  { fase: 'Sprints 2–N — Valor', dur: '2–4 semanas cada uno', color: 'var(--dn-layer-processing)', ent: 'Un caso de uso por sprint: tablero de decisión, modelo o migración de dominio.', crit: 'Criterio de aceptación acordado antes de arrancar. Si no se cumple, ese sprint no se factura.' },
  { fase: 'Post-launch', dur: 'Continuo', color: 'var(--dn-layer-consumption)', ent: 'Soporte con SLA definido y transferencia de conocimiento: documentación, pares de trabajo y handover formal.', crit: 'La transferencia está en el contrato, con horas y entregables nombrados.' },
];

const FAQ = [
  ['¿No va a tardar 18 meses?', 'Sprints de 2–4 semanas con entregable medible en cada uno. El primer sprint deja algo funcionando en producción; no hay una fase de diseño de seis meses antes de tocar dato.'],
  ['¿Qué pasa si su equipo se va?', 'La transferencia de conocimiento está en el contrato, no es un favor. Documentación, trabajo en pares con tu equipo y handover formal con horas nombradas.'],
  ['¿Es caro?', 'Empezamos con un diagnóstico acotado de 2 semanas y monto fijo, no el proyecto completo. Después decides sprint por sprint, con el alcance y el criterio de aceptación por escrito.'],
  ['Ya tenemos un proveedor.', 'Sumamos en velocidad de ejecución entre el diseño y la producción. Trabajamos sobre la arquitectura que ya existe y con el equipo que ya está; no proponemos reemplazar lo que funciona.'],
  ['¿Cómo se mide un sprint?', 'Con un criterio de aceptación escrito antes de empezar: qué corre, con qué dato, quién lo opera y qué decisión habilita. Si el entregable no cumple ese criterio, no se factura ese sprint.'],
];

function MetodologiaScreen({ onNavigate }) {
  const [open, setOpen] = React.useState(0);
  React.useEffect(() => {
    const id = 'faq-schema';
    let s = document.getElementById(id);
    if (!s) { s = document.createElement('script'); s.type = 'application/ld+json'; s.id = id; document.head.appendChild(s); }
    s.textContent = JSON.stringify({ '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: FAQ.map(([q, a]) => ({ '@type': 'Question', name: q, acceptedAnswer: { '@type': 'Answer', text: a } })) });
    return () => { const el = document.getElementById(id); if (el) el.remove(); };
  }, []);

  return (
    <main>
      <PageHead eyebrow="Metodología" title="Por sprint, no por hora."
        lead="No cobramos por horas trabajadas. Cobramos por sprint con entregable verificable. Si el entregable no cumple el criterio acordado, no se factura ese sprint." />

      {/* 5 actos */}
      <Section>
        <SectionHead eyebrow="La narrativa" title="Cómo llega una empresa al Execution Gap" max={620} />
        <div className="grid c5" style={{ marginTop: 40 }}>
          {ACTOS.map(a => (
            <div key={a.n} style={{ display: 'grid', gap: 12, alignContent: 'start', paddingTop: 20, borderTop: '2px solid var(--dn-esmeralda)' }}>
              <span className="dn-label num" style={{ fontSize: 11, color: 'var(--dn-esmeralda)' }}>{a.n}</span>
              <h3 style={{ fontSize: 19 }}>{a.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-muted)' }}>{a.d}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* Timeline detallado */}
      <Section tone="muted">
        <SectionHead eyebrow="Plan de trabajo" title="Cada fase tiene entregable y criterio de aceptación" lead="El alcance se cierra por escrito antes de cada sprint. Nada se factura contra avance percibido." max={720} />
        <div style={{ display: 'grid', gap: 16, marginTop: 40 }}>
          {SPRINTS.map(s => (
            <Card key={s.fase} padding="lg" accent={s.color} style={{ display: 'grid', gridTemplateColumns: 'minmax(180px,.8fr) 1.4fr 1.2fr', gap: 32 }}>
              <div style={{ display: 'grid', gap: 8, alignContent: 'start' }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                  <span className="chev chev-sm" style={{ borderLeftColor: s.color }} />
                  <h3 style={{ fontSize: 19 }}>{s.fase}</h3>
                </div>
                <span className="num" style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-muted)' }}>{s.dur}</span>
              </div>
              <div style={{ display: 'grid', gap: 6, alignContent: 'start' }}>
                <span className="dn-label" style={{ fontSize: 10, color: 'var(--text-muted)' }}>Entregable</span>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-body)' }}>{s.ent}</p>
              </div>
              <div style={{ display: 'grid', gap: 6, alignContent: 'start' }}>
                <span className="dn-label" style={{ fontSize: 10, color: 'var(--text-muted)' }}>Criterio de aceptación</span>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>{s.crit}</p>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Pricing narrative */}
      <section className="sec" style={{ background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden' }}>
        <ChevronField opacity={0.07} />
        <div className="dn-container" style={{ position: 'relative' }}>
          <div className="split">
            <div style={{ display: 'grid', gap: 16 }}>
              <SectionLabel tone="inverse">Modelo comercial</SectionLabel>
              <h2 style={{ color: '#fff', textWrap: 'pretty' }}>El riesgo del sprint es nuestro, no tuyo.</h2>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'rgba(255,255,255,.74)', maxWidth: 520 }}>
                El diagnóstico tiene monto fijo. Cada sprint posterior se cotiza con alcance y criterio cerrados. Si el criterio no se cumple, ese sprint no se factura y se corrige antes de avanzar.
              </p>
            </div>
            <div style={{ display: 'grid', gap: 12 }}>
              {[['Monto fijo', 'Diagnóstico de 2 semanas, precio cerrado antes de empezar.'], ['Por sprint', 'Alcance y criterio de aceptación por escrito en cada ciclo.'], ['Sin horas sin control', 'No hay bolsa de horas ni facturación por avance percibido.']].map(([t, d]) => (
                <Card key={t} tone="inverse" padding="md" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 16, alignItems: 'start' }}>
                  <Icon name="check" size={20} color="var(--dn-esmeralda)" />
                  <div style={{ display: 'grid', gap: 4 }}>
                    <span style={{ fontFamily: 'var(--font-heading)', fontSize: 17, fontWeight: 600, color: '#fff' }}>{t}</span>
                    <span style={{ fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,.68)' }}>{d}</span>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <Section>
        <SectionHead eyebrow="Preguntas frecuentes" title="Lo que pregunta un comité antes de firmar" max={620} />
        <div style={{ marginTop: 32, maxWidth: 860, borderTop: '1px solid var(--border-subtle)' }}>
          {FAQ.map(([q, a], i) => (
            <div key={q} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
              <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                <span style={{ textWrap: 'pretty' }}>{q}</span>
                <Icon name={open === i ? 'minus' : 'plus'} size={20} color="var(--dn-esmeralda)" />
              </button>
              {open === i ? <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--text-muted)', maxWidth: 700, padding: '0 0 24px' }}>{a}</p> : null}
            </div>
          ))}
        </div>
      </Section>

      <CtaBand onNavigate={onNavigate} title="Dos semanas para saber qué se puede ejecutar." body="El diagnóstico entrega tu Execution Gap Brief: brecha por dominio, quick wins y arquitectura propuesta. Monto fijo, sin compromiso de proyecto completo." />
    </main>
  );
}

Object.assign(window, { MetodologiaScreen, FAQ, SPRINTS, ACTOS });