const DS = window.BaumannCoDS6_9a0e65 || {};
const { Label, IndexRow, OrcaBlock, Card, StatCard, Tag, Button, Icon, StatusDot } = DS;

function Metodo() {
  const fases = [
    { i: '01', t: 'Diagnóstico', d: 'Lectura de la operación: decisiones, roles, procesos y caja.', m: '2 semanas' },
    { i: '02', t: 'Orden', d: 'Cadencia de gestión, responsables y reglas de decisión escritas.', m: '4 semanas' },
    { i: '03', t: 'Rentabilidad', d: 'Margen por línea, política de precios y control de caja.', m: '4 semanas' },
    { i: '04', t: 'Crecimiento y Autonomía', d: 'Demanda previsible y decisiones distribuidas en el equipo.', m: '4 semanas' },
  ];
  return (
    <div>
      <section style={{ background: 'var(--navy)', color: 'var(--white)', padding: '96px clamp(24px,4vw,48px)' }}>
        <div className="ds10-stack" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: 48, alignItems: 'end' }}>
          <div>
            <Label tone="inverse" index="00">Método</Label>
            <h1 style={{ margin: '20px 0 0', font: 'var(--text-display)', letterSpacing: 'var(--ls-tight)' }}>ORCA® instala capacidad, no dependencia.</h1>
          </div>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'rgba(244,242,236,.72)' }}>Catorce semanas de trabajo con el equipo directivo. Lo que queda instalado es el ritmo, las reglas y los responsables — no un informe.</p>
        </div>
      </section>

      <section style={{ background: 'var(--bg)', padding: 'var(--section-y) clamp(20px,4vw,40px)' }}>
        <div className="ds10-stack" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,4fr) minmax(0,8fr)', gap: 48 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'sticky', top: 96, alignSelf: 'start' }}>
            <Label index="01">Secuencia</Label>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)' }}>Las fases no se saltan. Cada una deja un artefacto revisable: un mapa, una regla, una reunión que ocurre sola.</p>
            <Tag tone="outline">14 semanas · 4 fases</Tag>
          </div>
          <div>{fases.map(f => <IndexRow key={f.i} index={f.i} title={f.t} description={f.d} meta={f.m} />)}</div>
        </div>
      </section>

      <section style={{ background: 'var(--surface)', padding: 'var(--section-y) clamp(20px,4vw,40px)', borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 32 }}>
          <Label index="02">Las cuatro áreas</Label>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(230px,1fr))', gap: 16 }}>
            <OrcaBlock phase="orden" items={['Mapa de decisiones', 'Cadencia semanal']} />
            <OrcaBlock phase="rentabilidad" items={['Margen por línea', 'Caja a 13 semanas']} />
            <OrcaBlock phase="crecimiento" items={['Demanda previsible', 'Capacidad declarada']} />
            <OrcaBlock phase="autonomia" items={['Límites por rol', 'Revisión sin el fundador']} />
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--surface-panel)', padding: 'var(--section-y) clamp(20px,4vw,40px)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 16 }}>
          <StatCard label="Equipo directivo" value="1" unit="empresa a la vez" note="Trabajamos con un número limitado de compañías por trimestre." />
          <Card surface="white" eyebrow="Entregables" title="Artefactos, no informes" footer={<StatusDot status="ok" label="Revisable en pantalla" />}>
            <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.7, color: 'var(--text-secondary)' }}>
              <li>Mapa de decisiones por área</li><li>Reglas de precio y excepción</li><li>Tablero de cadencia semanal</li>
            </ul>
          </Card>
          <Card surface="white" eyebrow="Siguiente paso" title="Conversación de diagnóstico"
            footer={<Button href={window.MEET} variant="primary" iconRight={<Icon name="arrow-up-right" size={15} />}>Agendar 45 minutos</Button>}>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--text-secondary)' }}>Revisamos tu operación y te decimos qué ordenaríamos primero. Sin propuesta comercial en esa llamada.</p>
          </Card>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { Metodo });