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

function Hero() {
  return (
    <section id="top" className="ds10-stack" style={{ minHeight: 580, display: 'grid', gridTemplateColumns: 'minmax(360px, 5fr) minmax(0, 7fr)', background: 'var(--navy)', color: 'var(--white)' }}>
      <div className="ds10-hero-copy" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 28, padding: '72px clamp(24px,4vw,64px)', maxWidth: 600, boxSizing: 'border-box' }}>
        <Label tone="inverse" index="01">Criterio en acción</Label>
        <h1 style={{ margin: 0, font: 'var(--text-hero)', maxWidth: '12ch' }}>Tu empresa crece. Decide con claridad.</h1>
        <span style={{ display: 'block', width: 56, height: 5, background: 'var(--action)' }} />
        <p style={{ margin: 0, maxWidth: '34ch', font: 'var(--text-body)', color: 'rgba(255,255,255,.84)' }}>Ordenamos decisiones, instalamos cadencia y distribuimos autonomía, hasta que el crecimiento deja de depender del fundador.</p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button href={window.MEET} variant="primary" size="lg" iconRight={<Icon name="arrow-up-right" size={16} />}>Agendar diagnóstico</Button>
          <Button href="#metodo" variant="inverse" size="lg">Ver ORCA®</Button>
        </div>
      </div>
      <figure className="ds10-hero-photo" style={{ position: 'relative', minHeight: 420, margin: 0, overflow: 'hidden' }}>
        <img src="./assets/hero-conceptual.png" alt="Visualización conceptual de un equipo revisando una decisión de operación" style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover', objectPosition: '65% center' }} />
        <figcaption className="ds10-photo-caption">Visualización conceptual con personas ficticias generadas con IA</figcaption>
      </figure>
    </section>
  );
}

function Problema() {
  return (
    <section id="problema" 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,7fr) minmax(0,5fr)', gap: 48, alignItems: 'start' }}>
        <div>
          <Label index="01">Síntoma reconocible</Label>
          <h2 style={{ margin: '20px 0 0', font: 'var(--text-h1)', letterSpacing: 'var(--ls-tight)' }}>El equipo trabaja. Las decisiones vuelven.</h2>
        </div>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--text-secondary)' }}>Aprobaciones, excepciones y urgencias terminan en el mismo escritorio. No es un problema de esfuerzo: es que la operación todavía vive en la memoria de las personas y no en reglas, roles y ritmos.</p>
      </div>
    </section>
  );
}

function Mapa() {
  const blocks = [
    { i: '01', t: 'Aprobaciones', s: 'Todo descuento vuelve a ti.', c: 'No hay regla de precios escrita.', st: <StatusDot status="risk" label="Sin regla" /> },
    { i: '02', t: 'Prioridades', s: 'El plan cambia cada semana.', c: 'No existe una cadencia de revisión.', st: <StatusDot status="block" label="Sin cadencia" /> },
    { i: '03', t: 'Procesos', s: 'Nadie sabe cómo se hacía.', c: 'El proceso vive en la memoria del equipo.', st: <StatusDot status="risk" label="Sin documentar" /> },
    { i: '04', t: 'Roles', s: 'Dos personas creen ser responsables.', c: 'Los límites de decisión no están definidos.', st: <StatusDot status="idle" label="Difuso" /> },
  ];
  return (
    <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: 40 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 24, alignItems: 'baseline', flexWrap: 'wrap' }}>
          <div><Label index="02">Causa operativa</Label><h2 style={{ margin: '18px 0 0', font: 'var(--text-h2)', letterSpacing: 'var(--ls-tight)' }}>Mapa operativo</h2></div>
          <Tag tone="outline">4 bloques · lectura en 2 semanas</Tag>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px,1fr))', gap: 16 }}>
          {blocks.map(b => <MapBlock key={b.i} index={b.i} title={b.t} symptom={b.s} cause={b.c} status={b.st} />)}
        </div>
      </div>
    </section>
  );
}

function Orca() {
  const [active, setActive] = React.useState('orden');
  const detail = {
    orden: ['Mapa de decisiones y responsables', 'Cadencia semanal de gestión', 'Reglas de excepción escritas'],
    rentabilidad: ['Margen por línea y por cliente', 'Política de precios y descuentos', 'Control de caja a 13 semanas'],
    crecimiento: ['Demanda previsible por canal', 'Capacidad de entrega declarada', 'Pipeline con criterios de avance'],
    autonomia: ['Límites de decisión por rol', 'Indicadores propios por área', 'Revisión sin el fundador en sala'],
  };
  return (
    <section id="metodo" style={{ background: 'var(--surface-panel)', padding: 'var(--section-y) clamp(20px,4vw,40px)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: 'clamp(24px,4vw,64px)', alignItems: 'end' }}>
          <div><Label index="03">Mecanismo</Label><h2 style={{ margin: '18px 0 0', font: 'var(--text-h1)', letterSpacing: 'var(--ls-tight)' }}>ORCA®</h2></div>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'var(--text-secondary)' }}>Cuatro áreas de trabajo, en orden. Cada una instala una capacidad que el equipo conserva después de la consultoría.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px,1fr))', gap: 16, alignItems: 'stretch' }}>
          {['orden', 'rentabilidad', 'crecimiento', 'autonomia'].map(p => (
            <OrcaBlock key={p} phase={p} active={active === p} onClick={() => setActive(p)} items={active === p ? detail[p] : []} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Evidencia() {
  return (
    <section id="evidencia" style={{ background: 'var(--forest)', color: 'var(--paper)', padding: 'var(--section-y) clamp(20px,4vw,40px)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 44 }}>
        <div className="ds10-stack" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,6fr) minmax(0,6fr)', gap: 48, alignItems: 'end' }}>
          <div><Label tone="inverse" index="04">Evidencia</Label><h2 style={{ margin: '18px 0 0', font: 'var(--text-h1)', letterSpacing: 'var(--ls-tight)' }}>Señales de avance, no promesas.</h2></div>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'rgba(244,242,236,.72)' }}>Medimos estados observables de la operación: decisiones con dueño, procesos escritos, reuniones que ocurren. Nada que no se pueda revisar en una pantalla compartida.</p>
        </div>
        <div className="ds10-stack" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,7fr) minmax(0,5fr)', gap: 24 }}>
          <div style={{ minHeight: 300, display: 'flex', alignItems: 'flex-end', padding: 32, background: 'var(--pale)', color: 'var(--navy)' }}>
            <p style={{ margin: 0, font: 'var(--text-h2)', maxWidth: '14ch' }}>Lo que cambia debe poder revisarse, no solo contarse.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card surface="forest" padding={22} style={{ gap: 20 }}>
              <ProgressStat tone="inverse" label="Decisiones con responsable" value={72} caption="Semana 6 de 12" />
              <ProgressStat tone="signal" label="Procesos documentados" value={45} caption="Semana 6 de 12" />
              <ProgressStat tone="inverse" label="Reuniones de gestión realizadas" value={92} caption="6 de 6 semanas" />
            </Card>
            <StatCard surface="forest" label="Método" value="4" unit="áreas" note="Orden, Rentabilidad, Crecimiento y Autonomía." />
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px,1fr))', gap: 16 }}>
          <BeforeAfter surface="forest" label="Precios" before="Cada excepción vuelve al fundador." after="Rango aprobado; decide comercial." />
          <BeforeAfter surface="forest" label="Semana" before="Prioridades cambian sin registro." after="Una reunión, una lista, un dueño por punto." />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Problema, Mapa, Orca, Evidencia });
function Home() { return (<><Hero /><Problema /><Mapa /><Orca /><Evidencia /></>); }
Object.assign(window, { Home });