/* Qualios landing — sections: Módulos, Actas, Dirección, Confianza, Fundadores, Cierre, Footer */
const { Button: QBtn, Badge: QBadge } = window.QualiosDesignSystem_423ffe;

/* ---------------- MÓDULOS ---------------- */
const MODULES = [
  { icon: 'target', title: 'Planeación y objetivos', body: 'Objetivos en cascada de la dirección al proceso. Todo amarrado a una meta.' },
  { icon: 'workflow', title: 'Mapa de procesos', body: 'Caracterización completa; el líder entra a su proceso y ve todo desde ahí.' },
  { icon: 'file-text', title: 'Control de documentos', body: 'Versiones, vigencias y aprobaciones controladas.' },
  { icon: 'triangle-alert', title: 'No conformidades y CAPA', body: 'Del hallazgo a la acción, con 5 porqués, Ishikawa y verificación de eficacia.' },
  { icon: 'clipboard-check', title: 'Auditorías internas', body: 'Programa anual y checklists que Sandra arma según hallazgos previos.' },
  { icon: 'trending-up', title: 'Indicadores', body: 'Metas, semáforo y alertas cuando la tendencia empieza a caer.' },
  { icon: 'shield', title: 'Riesgos y oportunidades', body: 'Matriz por proceso según cláusula 6.1.' },
  { icon: 'mic', title: 'Comités y actas', body: 'Actas con transcripción y análisis por IA, con memoria de las decisiones históricas.' },
];
function Modulos() {
  return (
    <section className="l-section band-cloud" id="modulos">
      <div className="l-wrap">
        <span className="eyebrow eyebrow--muted reveal">El sistema completo</span>
        <h2 className="section-title reveal reveal-d1">Todo el ciclo de tu SGC, vigilado por Sandra.</h2>
        <div className="mod__grid">
          {MODULES.map((m, i) => (
            <div className={'mod reveal reveal-d' + ((i % 3) + 1)} key={m.title}>
              <div className="mod__ico"><Icon name={m.icon} size={20} /></div>
              <div className="mod__title">{m.title}</div>
              <p className="mod__body">{m.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- ACTAS (en uso hoy) ---------------- */
const ACTAS_POINTS = [
  { icon: 'user-check', b: 'Identifica a cada participante', t: ' antes de redactar.' },
  { icon: 'file-down', b: 'Exporta en PDF y Word', t: ' con tu marca.' },
  { icon: 'history', b: 'Historial y versiones', t: ' de cada acta.' },
  { icon: 'lock', b: 'Modo confidencial', t: ' — el audio se borra después de transcribir.' },
];
function Actas() {
  return (
    <section className="l-section" id="actas">
      <div className="l-wrap">
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', flexWrap: 'wrap' }} className="reveal">
          <span className="eyebrow">La prueba tangible</span>
          <QBadge tone="ok" dot>En uso hoy</QBadge>
        </div>
        <h2 className="section-title reveal reveal-d1" style={{ maxWidth: '24ch' }}>
          Y las actas con IA ya están funcionando.
        </h2>
        <div className="actas__grid">
          <div>
            <p className="section-lead reveal reveal-d1" style={{ marginTop: 0 }}>
              Mientras el sistema completo entra en operación, el módulo de actas de Sandra ya está
              en uso. Transcribe la reunión, identifica quién dijo qué, redacta el acta con el logo
              de tu institución y extrae compromisos y decisiones. Cada acta queda versionada y
              conectada con tus comités de calidad, lista como evidencia para la auditoría.
            </p>
            <ul className="actas__list reveal reveal-d2">
              {ACTAS_POINTS.map((p) => (
                <li className="actas__li" key={p.b}>
                  <Icon name={p.icon} size={18} stroke={1.75} />
                  <span><b>{p.b}</b>{p.t}</span>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 30 }} className="reveal reveal-d2">
              <QBtn variant="primary" as="a" href={DEMO_URL}
                iconLeft={<Icon name="mic" size={18} />}>
                Probar el módulo de actas
              </QBtn>
            </div>
          </div>
          <figure className="actas__figure reveal reveal-d2" style={{ margin: 0 }}>
            {/* PLACEHOLDER IA — reemplazar images/actas-flujo-anotado.png (1280×760) */}
            <img src="images/actas-flujo-anotado.png"
              alt="Flujo del módulo de actas: reunión, acta redactada y compromisos extraídos" />
            <figcaption className="actas__figcap">
              <Icon name="image" size={15} />
              Flujo reunión → acta → compromisos. La demo que sostiene todo lo demás.
            </figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

/* ---------------- DIRECCIÓN (deep teal) ---------------- */
const DIR = [
  { icon: 'activity', t: 'Sepa en qué estado está su calidad sin pedir un reporte. El semáforo del sistema, en vivo.' },
  { icon: 'clipboard-check', t: 'Llegue a cada auditoría con la evidencia lista, no con el equipo corriendo el viernes.' },
  { icon: 'user-round-check', t: 'Una directora de aseguramiento que no duerme, por una fracción de lo que cuesta el cargo o una consultoría.' },
];
function Direccion() {
  return (
    <section className="l-section band-teal" id="direccion">
      <div className="l-wrap dir__grid">
        <div>
          <span className="eyebrow reveal" style={{ color: 'var(--teal-300)' }}>Para la dirección</span>
          <h2 className="section-title dir__title reveal reveal-d1">Vea su calidad sin pedir un reporte.</h2>
        </div>
        <div>
          <ul className="dir__list">
            {DIR.map((d, i) => (
              <li className={'dir__li reveal reveal-d' + (i + 1)} key={i}>
                <Icon name={d.icon} size={24} stroke={1.75} />
                <p>{d.t}</p>
              </li>
            ))}
          </ul>
          <div className="dir__quote reveal reveal-d2">
            <p>El costo de no tener sistema no es el desorden. <b>Es el hallazgo que aparece cuando ya no hay tiempo de corregirlo.</b></p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CONFIANZA ---------------- */
const CONF = [
  { icon: 'lock', title: 'Tus datos son tuyos.', body: 'Tratamiento conforme a la Ley 1581 de Habeas Data. Hoy se alojan en Estados Unidos; por seguridad de la información no revelamos el proveedor.', roadmap: null },
  { icon: 'shield-check', title: 'La IA no decide sola.', body: 'Sandra propone con base en datos del sistema; una persona revisa y aprueba.', roadmap: null },
  { icon: 'badge-check', title: 'Pensado para tu auditor.', body: 'Alineado con ISO 9001:2015 y el SOGC.', roadmap: 'En el roadmap: PAMEC, Sistema Único de Habilitación y SG-SST.' },
];
function Confianza() {
  return (
    <section className="l-section" id="confianza">
      <div className="l-wrap">
        <span className="eyebrow reveal">Confianza y datos</span>
        <h2 className="section-title reveal reveal-d1" style={{ maxWidth: '22ch' }}>
          Construido para resistir la mirada del auditor.
        </h2>
        <div className="conf__grid">
          {CONF.map((c, i) => (
            <div className={'conf reveal reveal-d' + (i + 1)} key={c.title}>
              <div className="conf__ico"><Icon name={c.icon} size={22} /></div>
              <div className="conf__title">{c.title}</div>
              <p className="conf__body">{c.body}</p>
              {c.roadmap && (
                <span className="conf__roadmap"><Icon name="git-branch" size={13} stroke={2} /> {c.roadmap}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FUNDADORES ---------------- */
const PERKS = [
  'Acompañamiento directo del equipo de ZentraTek.',
  'Condiciones preferenciales de lanzamiento.',
  'Voz en cómo evoluciona el producto.',
  'El módulo de actas con IA, ya en uso.',
];
function Fundadores() {
  return (
    <section className="l-section band-cloud" id="fundadores">
      <div className="l-wrap">
        <div className="found reveal">
          <div className="found__main">
            <span className="eyebrow"><Icon name="rocket" size={14} stroke={2} /> Programa de clientes fundadores</span>
            <h2 className="section-title" style={{ marginTop: 14 }}>
              Qualios está en su lanzamiento. Sé de los primeros.
            </h2>
            <p className="found__body">
              Estás viendo el sistema completo que Sandra opera. Lo estamos poniendo en marcha con un
              grupo reducido de instituciones fundadoras que reciben acompañamiento directo del equipo
              de ZentraTek, condiciones preferenciales y voz en cómo evoluciona el producto. El módulo
              de actas con IA ya está en uso; el resto del SGC entra contigo.
            </p>
          </div>
          <div className="found__aside">
            <ul className="found__perks">
              {PERKS.map((p) => (
                <li key={p}><Icon name="check" size={18} stroke={2.25} /> <span>{p}</span></li>
              ))}
            </ul>
            <QBtn variant="primary" size="lg" block as="a" href={DEMO_URL}
              iconRight={<Icon name="arrow-right" size={18} />}>
              Postular mi institución
            </QBtn>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CIERRE ---------------- */
function Cierre() {
  return (
    <section className="l-section cierre">
      <div className="l-wrap cierre__inner">
        <span className="eyebrow reveal" style={{ display: 'inline-flex', justifyContent: 'center' }}>Vea Qualios en vivo</span>
        <h2 className="cierre__title reveal reveal-d1" style={{ marginTop: 16 }}>
          Vea Qualios con sus propios procesos.
        </h2>
        <p className="cierre__sub reveal reveal-d2">
          Veinte minutos con un ingeniero. Traiga un proceso real y salga con una idea clara de cómo
          se vería su SGC vivo.
        </p>
        <div className="cierre__actions reveal reveal-d2">
          <QBtn variant="primary" size="lg" as="a" href={DEMO_URL}
            iconLeft={<Icon name="calendar-check" size={20} />}>
            Agendar 20 minutos con un ingeniero
          </QBtn>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="l-wrap footer__inner">
        <div className="footer__top">
          <div className="footer__brand">
            <img className="footer__logo" src="assets/qualios-logo-footer.svg" alt="Qualios" />
            <p className="footer__tag">Sistema de gestión de la calidad con IA. Calidad que se mantiene viva, no que se archiva.</p>
          </div>
          <div className="footer__cols">
            <div className="footer__col">
              <h4>Producto</h4>
              <a href="#modulos">Módulos</a>
              <a href="#actas">Actas con IA</a>
              <a href="#sandra">Sandra</a>
              <a href={DEMO_URL}>Ver demo</a>
            </div>
            <div className="footer__col">
              <h4>Empresa</h4>
              <a href="#fundadores">Clientes fundadores</a>
              <a href="#confianza">Confianza y datos</a>
              <a href="mailto:hola@qualios.app">Contacto</a>
            </div>
            <div className="footer__col">
              <h4>Cumplimiento</h4>
              <a href="#confianza">ISO 9001:2015</a>
              <a href="#confianza">SOGC</a>
              <a href="#confianza">Ley 1581 de 2012</a>
            </div>
          </div>
        </div>
        <div className="footer__bar">
          <span>© 2026 Qualios</span>
          <span className="sep">·</span>
          <span>Protegido bajo políticas de tratamiento de datos</span>
          <span className="footer__zt">
            <Icon name="building-2" size={15} /> un producto de <b>ZentraTek</b>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Modulos, Actas, Direccion, Confianza, Fundadores, Cierre, Footer });