// /como-funciona — deep dive

function ComoFunciona() {
  const steps = [
    {
      n: '01', icon: <Icon.building/>,
      title: 'Configura tu negocio una sola vez',
      copy: 'Le cuentas a tu Director General de qué va tu negocio, qué vendes y a quién. Sin formularios largos: una conversación de 5-10 minutos en lenguaje natural.',
      detail: [
        'Cuestionario inicial guiado por el Director General',
        'Importación opcional de catálogo, redes sociales y tienda existente',
        'Definición de tono de voz y políticas de marca',
        'Aprobación inicial del plan que propone el Director',
      ],
      duration: '10 min',
    },
    {
      n: '02', icon: <Icon.team/>,
      title: 'Tu Director arma el equipo',
      copy: 'Analiza tu negocio y selecciona qué colaboradores activar — Marketing, Ventas, Logística, Soporte. Cada uno con su propia personalidad y configuración.',
      detail: [
        'Selección automática según industria y tamaño',
        'Activación gradual: empieza con 2-3, agrega según necesites',
        'Cada colaborador tiene su propio panel y permisos',
        'Puedes pedir nuevos colaboradores en cualquier momento',
      ],
      duration: '~5 min',
    },
    {
      n: '03', icon: <Icon.monitor/>,
      title: 'Ellos trabajan, tú supervisas',
      copy: 'Los colaboradores operan en paralelo. Ves en tiempo real qué hace cada uno y apruebas decisiones clave desde una sola pantalla.',
      detail: [
        'Panel unificado de actividad por colaborador',
        'Aprobaciones por chat (con notificaciones push)',
        'Métricas semanales generadas automáticamente',
        'Modo "autopilot" para tareas de bajo riesgo',
      ],
      duration: '24/7',
    },
  ];

  const principles = [
    { title: 'Tú apruebas, ellos ejecutan', copy: 'Por defecto cualquier acción crítica pasa por tu aprobación. Ajustas la autonomía de cada colaborador por separado.' },
    { title: 'Comunicación entre áreas', copy: 'Marketing habla con Logística, Analítica con Ventas. Igual que un equipo real, sin que tengas que coordinar.' },
    { title: 'Aprende de tu negocio', copy: 'Cada decisión, cada feedback y cada resultado afina el modelo de tu empresa. Mejor cada mes.' },
    { title: 'Trazabilidad total', copy: 'Cada acción queda registrada: quién la hizo, por qué, qué datos consideró. Auditable al 100%.' },
  ];

  return (
    <Layout active="como-funciona">
      <PageHero
        crumb={[{ label: 'Inicio', href: 'index.html' }, { label: 'Cómo funciona' }]}
        eyebrow="Tan simple como contratar a tu primer empleado"
        title="3 pasos para tener una empresa autónoma."
        subtitle="No es una herramienta más. Es una empresa virtual completa que se monta sola en menos de un día. Esto es exactamente lo que pasa."
      />

      {/* Steps detail */}
      <section className="section" data-screen-label="Steps detail">
        <div className="container" style={{ display:'flex', flexDirection:'column', gap: 64 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display:'grid', gridTemplateColumns: i % 2 === 0 ? 'minmax(0, 1fr) minmax(0, 1.2fr)' : 'minmax(0, 1.2fr) minmax(0, 1fr)',
              gap: 48, alignItems:'center',
            }}>
              <div style={{ order: i % 2 === 0 ? 0 : 1 }}>
                <div style={{
                  display:'inline-flex', alignItems:'center', gap: 10, marginBottom: 16,
                  fontFamily:'JetBrains Mono, monospace', fontSize: 13, color:'var(--brand-accent)', fontWeight: 600,
                }}>
                  PASO {s.n}
                  <span style={{ opacity:.5 }}>·</span>
                  <span style={{ color:'var(--ink-mute)', fontWeight: 500 }}>~{s.duration}</span>
                </div>
                <h2 className="h-section" style={{ fontSize: 30, marginBottom: 14 }}>{s.title}</h2>
                <p className="lead" style={{ marginBottom: 22 }}>{s.copy}</p>
                <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10 }}>
                  {s.detail.map((d, j) => (
                    <li key={j} style={{ display:'flex', gap: 10, fontSize: 14.5, color:'var(--ink-soft)' }}>
                      <span style={{ color:'var(--brand-secondary)', flexShrink: 0, marginTop: 2 }}><Icon.check/></span>{d}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{
                aspectRatio: '4/3', borderRadius: 22, padding: 32,
                background: 'var(--bg-subtle)', border: '1px solid var(--line)',
                display:'flex', alignItems:'center', justifyContent:'center', position:'relative',
              }}>
                <div style={{
                  width: 140, height: 140, borderRadius: 28,
                  background: '#fff', color:'var(--brand-primary)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  boxShadow: 'var(--shadow)', border:'1px solid var(--line)',
                  position:'relative',
                }}>
                  <span style={{ transform: 'scale(2)' }}>{s.icon}</span>
                  <span style={{
                    position:'absolute', top: -14, right: -14,
                    background: 'var(--brand-accent)', color:'#fff',
                    width: 44, height: 44, borderRadius: 999,
                    display:'inline-flex', alignItems:'center', justifyContent:'center',
                    fontSize: 16, fontWeight: 700,
                  }}>{s.n}</span>
                </div>
                <div style={{
                  position:'absolute', bottom: 24, left: 24, right: 24,
                  fontSize: 12, color:'var(--ink-mute)', fontFamily:'JetBrains Mono, monospace',
                  display:'flex', justifyContent:'space-between',
                }}>
                  <span>[fig.{i+1}]</span>
                  <span>paso-{s.n}.svg</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Principles */}
      <section className="section hex-pattern subtle" data-screen-label="Principles">
        <div className="container">
          <div style={{ textAlign:'center', marginBottom: 48 }}>
            <div className="eyebrow"><span className="dot"/> Principios de funcionamiento</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>Cómo opera tu equipo, en detalle.</h2>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
            {principles.map(p => (
              <div key={p.title} className="card">
                <h3 className="h-card">{p.title}</h3>
                <p className="text-muted" style={{ marginTop: 8, fontSize: 14.5 }}>{p.copy}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Demo visual reuse */}
      <DemoVisual theme={readPersistedTheme().custom || THEMES['ai-company']} />

      {/* CTA */}
      <CTAFinal />
    </Layout>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ComoFunciona />);