/* Qualios landing — top sections: Nav, Hero, Problema, Sandra */
const { Button, Badge, Avatar } = window.QualiosDesignSystem_423ffe;

/* ---------------- NAV ---------------- */
function Nav() {
  const scrolled = useScrolled();
  return (
    <header className={'nav' + (scrolled ? ' nav--scrolled' : '')}>
      <div className="l-wrap nav__inner">
        <a href="#top" aria-label="Qualios — inicio">
          <img className="nav__logo" src="assets/qualios-logo-header.svg" alt="Qualios" />
        </a>
        <nav className="nav__links">
          <a className="nav__link" href="#sandra">Sandra</a>
          <a className="nav__link" href="#modulos">Módulos</a>
          <a className="nav__link" href="#actas">Actas con IA</a>
          <a className="nav__link" href="#confianza">Confianza</a>
          <a className="nav__link" href="#fundadores">Clientes fundadores</a>
        </nav>
        <div className="nav__spacer"></div>
        <div className="nav__cta">
          <Button className="nav__ghost" variant="ghost" size="sm" as="a" href={DEMO_URL}>
            Iniciar sesión
          </Button>
          <Button variant="primary" size="sm" as="a" href={DEMO_URL}
            iconLeft={<Icon name="play" size={16} stroke={2} />}>
            Ver demo
          </Button>
        </div>
      </div>
    </header>
  );
}

/* ---------------- HERO: native briefing mockup ---------------- */
const BRIEFING = [
  { tone: 'bad',  icon: 'trending-down', title: 'Satisfacción del usuario cayó a 88 %', meta: 'Indicador IND-SAT-02 · meta ≥ 92 %', tag: 'Indicador en riesgo' },
  { tone: 'warn', icon: 'clipboard-check', title: 'Verifica la eficacia de la acción correctiva', meta: 'NC-2026-031 · vence en 3 días', tag: 'Por vencer' },
  { tone: 'warn', icon: 'file-text', title: 'Procedimiento de calibración por revisar', meta: 'PR-CAL-008 · vigencia en 5 días', tag: 'Documento' },
  { tone: 'info', icon: 'calendar', title: 'Auditoría interna de gestión documental', meta: 'FT-AUD-014 · checklist lista', tag: 'Programada' },
];

function BriefingMockup() {
  return (
    <div className="bf bf-anim" role="img" aria-label="Mockup: el briefing diario de Sandra dentro de Qualios">
      <div className="bf__top">
        <div className="bf__dots"><span className="bf__dot"></span><span className="bf__dot"></span><span className="bf__dot"></span></div>
        <span className="bf__url">app.qualios.app/hoy</span>
      </div>
      <div className="bf__head">
        <div className="bf__spark"><Icon name="sparkles" size={22} stroke={1.75} /></div>
        <div>
          <div className="bf__hi-label">TU AGENDA DE CALIDAD</div>
          <div className="bf__hi-title">Buenos días, Sandra preparó tu día</div>
        </div>
        <div className="bf__date">
          <b>vie 12 jun</b>
          <span>4 prioridades</span>
        </div>
      </div>
      <div className="bf__body">
        <p className="bf__intro">Hoy conviene atender <b>3 asuntos antes del mediodía</b>. Empieza por el indicador en riesgo — la tendencia lleva dos meses cayendo.</p>
        {BRIEFING.map((it, i) => (
          <div className="bf__item" key={i}>
            <div className={'bf__ico bf__ico--' + it.tone}><Icon name={it.icon} size={18} stroke={1.75} /></div>
            <div className="bf__it-main">
              <div className="bf__it-title">{it.title}</div>
              <div className="bf__it-meta"><span className="bf__code">{it.meta}</span></div>
            </div>
            <Badge tone={it.tone} dot>{it.tag}</Badge>
            <Icon name="chevron-right" size={18} className="bf__chev" />
          </div>
        ))}
      </div>
      <div className="bf__foot">
        <Icon name="shield-check" size={16} stroke={1.75} />
        <span><b>Sandra propone, tú apruebas.</b> Todo sale de datos reales del sistema.</span>
      </div>
      <div className="bf-float">
        <span className="bf-float__val">96 %</span>
        <span className="bf-float__lbl">cumplimiento documental al día</span>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="l-wrap hero__grid">
        <div className="hero__copy">
          <span className="eyebrow reveal">Sistema de gestión de la calidad con IA</span>
          <h1 className="hero__title reveal reveal-d1">
            Calidad que se mantiene <em>viva</em>, no que se archiva.
          </h1>
          <p className="hero__sub reveal reveal-d2">
            Documentos, auditorías, no conformidades, indicadores, riesgos y actas en un solo lugar,
            con una IA que cada mañana le dice a cada persona qué atender hoy.
            De Excel a ISO 9001 sin depender de consultorías eternas.
          </p>
          <div className="hero__actions reveal reveal-d2">
            <Button variant="primary" size="lg" as="a" href={DEMO_URL}>Agendar demo</Button>
            <Button variant="ghost" size="lg" as="a" href={DEMO_URL}
              iconLeft={<Icon name="circle-play" size={20} />}>
              Ver Qualios en 3 minutos
            </Button>
          </div>
          <div className="hero__trust reveal reveal-d3">
            <span className="hero__trust-item"><Icon name="badge-check" size={16} stroke={2} /> Alineado con ISO 9001:2015</span>
            <span className="hero__trust-item"><Icon name="shield" size={16} stroke={2} /> SOGC y Ley 1581</span>
            <span className="hero__trust-item"><Icon name="building-2" size={16} stroke={2} /> por ZentraTek</span>
          </div>
        </div>
        <div className="hero__mock reveal reveal-d2">
          <BriefingMockup />
        </div>
      </div>
    </section>
  );
}

/* ---------------- PROBLEMA ---------------- */
const PROBLEMS = [
  { n: '01', t: 'El procedimiento vigente está en el correo de alguien que ya no trabaja aquí.' },
  { n: '02', t: 'Las acciones correctivas se vencen y nadie se entera.' },
  { n: '03', t: 'Llega la auditoría y el viernes es armar evidencias a las corridas.' },
];
function Problema() {
  return (
    <section className="l-section band-cloud">
      <div className="l-wrap">
        <span className="eyebrow eyebrow--muted reveal">El problema</span>
        <h2 className="section-title reveal reveal-d1" style={{ maxWidth: '20ch' }}>
          No falta software. Falta quien cuide el sistema.
        </h2>
        <div className="prob__grid">
          {PROBLEMS.map((p, i) => (
            <div className={'prob__card reveal reveal-d' + (i + 1)} key={p.n}>
              <div className="prob__num">{p.n}</div>
              <p className="prob__text">{p.t}</p>
            </div>
          ))}
        </div>
        <p className="prob__close reveal reveal-d1">
          El problema no es que falte software. Es que el sistema de calidad <b>no tiene a nadie
          cuidándolo</b> entre auditoría y auditoría.
        </p>
      </div>
    </section>
  );
}

/* ---------------- SANDRA ---------------- */
const PILLARS = [
  { icon: 'bell', title: 'Proactiva', body: 'Te dice qué atender hoy, antes de que se vuelva un hallazgo.' },
  { icon: 'database', title: 'Basada en evidencia', body: 'Todo lo que dice sale de datos reales del sistema. Sandra propone; una persona aprueba. Nunca inventa.' },
  { icon: 'users', title: 'Por rol', body: 'El coordinador ve sus documentos; la dirección ve el riesgo. Cada quien ve lo que le importa.' },
  { icon: 'book-open', title: 'Educativa', body: 'Explica el porqué de cada requisito citando la cláusula ISO. Forma cultura de calidad, no solo cumple.' },
];
function Sandra() {
  return (
    <section className="l-section" id="sandra">
      <div className="l-wrap">
        <div className="sandra__top">
          <span className="eyebrow reveal"><Icon name="sparkles" size={14} stroke={2} /> Conoce a Sandra</span>
          <h2 className="section-title reveal reveal-d1">
            Conoce a Sandra, tu directora de aseguramiento que nunca duerme.
          </h2>
          <p className="section-lead reveal reveal-d2">
            Sandra conoce ISO 9001:2015, entiende tus procesos y sabe el rol de cada persona.
            Cada mañana le entrega a cada quien su agenda de calidad del día. No espera a que algo
            falle: avisa antes de que un documento venza, un indicador caiga o una acción correctiva
            se pase de plazo.
          </p>
        </div>
        <div className="pillars">
          {PILLARS.map((p, i) => (
            <div className={'pillar reveal reveal-d' + ((i % 3) + 1)} key={p.title}>
              <div className="pillar__ico"><Icon name={p.icon} size={22} /></div>
              <div>
                <div className="pillar__title">{p.title}</div>
                <p className="pillar__body">{p.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Problema, Sandra });