/* ═══════════════════════════════════════════════════════════
   MÓDULOS — faixa em marquee logo abaixo do hero, prévia rápida
   e visual do sistema antes da seção de Produto em detalhe.
   ═══════════════════════════════════════════════════════════ */

const moduleMarqueeStyles = {};

const MODULES_PREVIEW = [
  { icon: ICONS.calendarCheck, label: 'Agenda' },
  { icon: ICONS.tooth, label: 'Prontuário', iconFilled: true },
  { icon: ICONS.fileText, label: 'Orçamentos' },
  { icon: ICONS.dollar, label: 'Financeiro' },
  { icon: ICONS.users, label: 'Portal do Paciente' },
  { icon: ICONS.barChart, label: 'Relatórios' },
];

function Guarantees() {
  return (
    <div className="guarantees">
      {/* Carrossel infinito: lista triplicada, a faixa desliza por -1/3
          da própria largura — ponto de reset idêntico ao início. */}
      <div className="guarantees-marquee">
        <div className="guarantees-track">
          {[...MODULES_PREVIEW, ...MODULES_PREVIEW, ...MODULES_PREVIEW].map((m, i) => (
            <div
              className="guarantee-item"
              key={`${m.label}-${i}`}
              aria-hidden={i >= MODULES_PREVIEW.length ? 'true' : undefined}
            >
              <div className="guarantee-icon">
                <Icon d={m.icon} fill={m.iconFilled ? 'currentColor' : 'none'} strokeWidth={m.iconFilled ? 0 : 2} />
              </div>
              <strong>{m.label}</strong>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Guarantees });